'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Target, ArrowRight, Zap, TrendingUp, CreditCard, Plus, FileText, ChevronRight, Wallet, Clock, Percent } from 'lucide-react';
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';

export default function MyInvestmentsPage() {
  const investor = investors[0]; // mock logged-in investor

  return (
    <div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
        <div>
          <h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
            <Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" /> My Investments
          </h1>
          <p className="text-sm text-slate-500 mt-1">Manage your active portfolios and track your earnings.</p>
        </div>

        <Link
          href="/investor/plans/new"
          className="inline-flex items-center gap-2 px-6 py-3 bg-investor text-white rounded-xl font-bold shadow-lg shadow-investor/20 hover:bg-investor-dark transition-all transform hover:-translate-y-0.5 active:scale-95"
        >
          <Plus className="w-5 h-5" /> New Investment
        </Link>
      </div>

      {/* Portfolio Summary */}
      <div className="mb-10 bg-slate-50 rounded-2xl p-6 border border-slate-200">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
            <Target className="w-5 h-5 text-investor" /> Portfolio Overview
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <Wallet className="w-5 h-5 text-purple-600" />
              </div>
              <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Total Invested</p>
            </div>
            <p className="text-2xl font-extrabold text-slate-800">৳{investor.totalInvested.toLocaleString()}</p>
          </div>
          <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <TrendingUp className="w-5 h-5 text-green-600" />
              </div>
              <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Total Returns</p>
            </div>
            <p className="text-2xl font-extrabold text-green-600">৳{investor.totalEarnings.toLocaleString()}</p>
          </div>
          <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
                <Clock className="w-5 h-5 text-amber-600" />
              </div>
              <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Active Bikes</p>
            </div>
            <p className="text-2xl font-extrabold text-slate-800">{investor.activeBikes} Units</p>
          </div>
        </div>
      </div>

      {/* My Active Investments List */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div className="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
          <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
            <Zap className="w-5 h-5 text-investor" /> Active Investment Plans
          </h2>
          <span className="text-xs font-bold px-3 py-1 bg-investor/10 text-investor rounded-full">
            {investor.investments?.length || 0} Total
          </span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="bg-slate-50 border-b border-slate-100">
                <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Investment Plan</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Capital Invested</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Actual Returns</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Status</th>
                <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {investor.investments && investor.investments.length > 0 ? investor.investments.map((inv) => (
                <tr key={inv.id} className="hover:bg-slate-50 transition-colors group">
                  <td className="px-6 py-5">
                    <p className="text-base font-bold text-slate-800">{inv.planName}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold uppercase">{inv.planType}</span>
                      <span className="text-[10px] text-slate-400 font-medium">Started: {inv.startDate}</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <p className="text-sm font-extrabold text-slate-700">৳{inv.totalInvestment.toLocaleString()}</p>
                  </td>
                  <td className="px-6 py-5 text-right">
                    <p className="text-sm font-extrabold text-green-600">৳{inv.actualEarnings.toLocaleString()}</p>
                    <p className="text-[10px] text-slate-400 font-bold uppercase mt-1">+{inv.expectedRoi}% ROI</p>
                  </td>
                  <td className="px-6 py-5">
                    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase ${inv.status === 'active' ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-slate-50 text-slate-600 border border-slate-100'
                      }`}>
                      <div className={`w-1.5 h-1.5 rounded-full ${inv.status === 'active' ? 'bg-green-500' : 'bg-slate-400'}`} />
                      {inv.status}
                    </span>
                  </td>
                  <td className="px-6 py-5 text-right">
                    <Link
                      href={`/investor/investments/${inv.id}`}
                      className="inline-flex items-center gap-2 text-investor hover:text-investor-dark font-bold text-sm transition-all group-hover:gap-3"
                    >
                      View Details <ChevronRight className="w-4 h-4" />
                    </Link>
                  </td>
                </tr>
              )) : (
                <tr>
                  <td colSpan={5} className="px-6 py-16 text-center">
                    <div className="flex flex-col items-center">
                      <Target className="w-12 h-12 text-slate-200 mb-3" />
                      <p className="text-slate-500 font-bold">No active investments found.</p>
                      <Link href="/investor/plans/new" className="mt-4 text-invest-600 font-bold text-sm hover:underline">
                        Start your first investment
                      </Link>
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}