'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft, TrendingUp, Bike, DollarSign, Calendar,
  CreditCard, FileText, Download, Check, X,
  Printer, BarChart3, Wallet, Clock, Shield,
  Receipt, Zap, Smartphone, ChevronRight, Target, Battery, MapPin, Gauge, Building2
} from 'lucide-react';
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';
import InvestorNotification from '@/components/InvestorNotification';

interface PaymentRecord {
  id: string;
  date: string;
  amount: number;
  installmentNo: number | null;
  type: 'full' | 'partial' | 'installment';
  method: string;
  status: 'completed' | 'pending';
}

export default function InvestorInvestmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const { id: investmentId } = resolvedParams;
  const router = useRouter();

  const investor = investors[0];
  const investment = investor.investments?.find((inv: any) => inv.id === investmentId);

  const [activeTab, setActiveTab] = useState('overview');
  const [showPaymentModal, setShowPaymentModal] = useState(false);

  if (!investment) {
    return (
      <div className="min-h-screen pb-20 lg:pb-0">
        <InvestorNotification isMobile />
        <div className="pt-18 lg:pt-0 p-4 lg:p-6">
          <div className="text-center py-12">
            <h2 className="text-xl font-bold text-slate-800">Investment Not Found</h2>
            <p className="text-sm text-slate-500 mt-2">The investment you're looking for doesn't exist.</p>
            <Link href="/investor/plans" className="mt-4 inline-flex items-center gap-2 text-investor hover:underline">
              <ArrowLeft className="w-4 h-4" /> Back to Investments
            </Link>
          </div>
        </div>
      </div>
    );
  }

  const isBattery = investment.assetType === 'battery' || investment.planName?.toLowerCase().includes('battery');

  const paymentHistory: PaymentRecord[] = [
    {
      id: `pay_${investment.id}`,
      date: investment.startDate || '2024-02-01',
      amount: investment.totalInvestment,
      installmentNo: null,
      type: 'full',
      method: investment.paymentMethod === 'bank' ? 'Bank Transfer' : 'bKash',
      status: 'completed'
    }
  ];

  const totalPaid = paymentHistory.reduce((sum, p) => p.status === 'completed' ? sum + p.amount : sum, 0);
  const dueAmount = investment.totalInvestment - totalPaid;

  const planConfig: Record<string, { badge: string }> = {
    silver: { badge: 'bg-slate-200 text-slate-700' },
    gold: { badge: 'bg-amber-100 text-amber-700' },
    platinum: { badge: 'bg-purple-100 text-purple-700' },
    diamond: { badge: 'bg-blue-100 text-blue-700' },
  };
  const style = planConfig[investment.planType] || planConfig.gold;

  const bikeIds = investment.bikeIds || (investmentId === 'ip1' ? ['b1'] : investmentId === 'ip2' ? ['b2'] : []);
  const batteryIds = investment.batteryIds || (isBattery ? ['BAT-001', 'BAT-002', 'BAT-005'] : []);

  const assignedBikes = [
    { id: 'b1', model: 'Etron ET50', brand: 'Etron', plateNumber: 'Dhaka Metro Cha-1234', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop', status: 'rented', currentRent: 350, totalEarnings: 114250, batteryLevel: 78, range: 60, location: 'Gulshan 1' },
    { id: 'b2', model: 'Yadea DT3', brand: 'Yadea', plateNumber: 'Dhaka Metro Cha-5678', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop', status: 'available', currentRent: 300, totalEarnings: 12750, batteryLevel: 95, range: 75, location: 'Banani' }
  ].filter(bike => bikeIds.includes(bike.id));

  const assignedBatteries = [
    { id: 'BAT-001', serialNumber: 'SN-2024-00001', brand: 'EVE Energy', model: 'Li-Ion 60V50Ah', status: 'In-Use', cycleCount: 156, soc: '78% / 95%', earnings: 4500, batteryLevel: 78, location: 'Dhaka Central Hub' },
    { id: 'BAT-002', serialNumber: 'SN-2024-00002', brand: 'EVE Energy', model: 'Li-Ion 60V50Ah', status: 'In-Use', cycleCount: 142, soc: '82% / 96%', earnings: 4500, batteryLevel: 82, location: 'Dhaka Central Hub' },
    { id: 'BAT-005', serialNumber: 'SN-2024-00005', brand: 'EVE Energy', model: 'Li-Ion 60V50Ah', status: 'Available', cycleCount: 88, soc: '91% / 98%', earnings: 0, batteryLevel: 91, location: 'Dhaka Central Hub' }
  ].filter(bat => batteryIds.includes(bat.id));

  const demoPnl = isBattery ? { grossRevenue: 22500, platformFee: 13500, insurance: 0, maintenance: 0, netProfit: 9000 } : { grossRevenue: 185000, platformFee: 83250, insurance: 15000, maintenance: 8500, netProfit: 78250 };

  const demoTransactions = isBattery ? [
    { id: 'tx-bat-1', date: '2024-03-01', description: 'Monthly Yield Share - BAT-001', amount: 4500, status: 'completed' },
    { id: 'tx-bat-2', date: '2024-02-15', description: 'Monthly Yield Share - BAT-002', amount: 4500, status: 'completed' },
    { id: 'tx-bat-funded', date: investment.startDate || '2024-02-01', description: 'Investment Funded - Standard Battery Plan', amount: investment.totalInvestment, status: 'completed' }
  ] : [
    { id: 'tx1', date: '2024-05-15', description: 'Rental Income - Bike Dhaka Metro Cha-1234', amount: 350, status: 'completed' },
    { id: 'tx2', date: '2024-05-14', description: 'Rental Income - Bike Dhaka Metro Cha-5678', amount: 300, status: 'completed' },
    { id: 'tx3', date: '2024-05-13', description: 'Rental Income - Bike Dhaka Metro Cha-1234', amount: 350, status: 'completed' },
    { id: 'tx4', date: '2024-05-12', description: 'Rental Income - Bike Dhaka Metro Cha-5678', amount: 300, status: 'completed' },
    { id: 'tx-funded', date: investment.startDate || '2024-01-15', description: `Investment Funded - ${investment.planName}`, amount: investment.totalInvestment, status: 'completed' }
  ];

  const handlePaymentSubmit = () => {
    const amount = dueAmount;
    toast.success(`Payment of ৳${amount.toLocaleString()} submitted successfully!`);
    setShowPaymentModal(false);
  };

  return (
    <div className="min-h-screen lg:pt-6 pt-0">
      <InvestorNotification isMobile />
      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
        <div className="mb-6">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div className="flex items-center gap-3">
              <button onClick={() => router.back()} className="p-2 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200">
                <ArrowLeft className="w-5 h-5 text-slate-600" />
              </button>
              <div>
                <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                  <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" />
                    {investment.planName}
                  </h1>

                  <div className="flex flex-wrap items-center gap-2">
                    <span
                      className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}
                    >
                      {investment.planType}
                    </span>

                    <span
                      className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active'
                        ? 'bg-green-100 text-green-700'
                        : 'bg-slate-100 text-slate-600'
                        } capitalize`}
                    >
                      {investment.status}
                    </span>
                  </div>
                </div>
                <p className="text-sm text-slate-500 mt-1">ID: #{investment.id?.toUpperCase()} • Started: {investment.startDate}</p>
              </div>
            </div>
            <button onClick={() => toast.success('Download started')} className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex justify-center lg:justify-start items-center gap-2 shadow-sm">
              <Download className="w-4 h-4" /> Download
            </button>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4 mb-6">
          <div className="bg-white rounded-xl p-4 lg:p-5 border border-slate-200 shadow-sm">
            <div className="flex items-center gap-2 mb-2">
              <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                <Wallet className="w-4 h-4 text-purple-600" />
              </div>
              <p className="text-xs text-slate-500 font-medium">Total Investment</p>
            </div>
            <p className="text-xl lg:text-2xl font-bold text-slate-800">৳{investment.totalInvestment.toLocaleString()}</p>
          </div>

          <div className="bg-white rounded-xl p-4 lg:p-5 border border-slate-200 shadow-sm bg-green-50/10">
            <div className="flex items-center gap-2 mb-2">
              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                <Check className="w-4 h-4 text-green-600" />
              </div>
              <p className="text-xs text-slate-500 font-medium">Already Paid</p>
            </div>
            <p className="text-xl lg:text-2xl font-bold text-green-600">৳{totalPaid.toLocaleString()}</p>
          </div>




          <div className="bg-white rounded-xl p-4 lg:p-5 border border-slate-200 shadow-sm">
            <div className="flex items-center gap-2 mb-2">
              <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                <TrendingUp className="w-4 h-4 text-green-600" />
              </div>
              <p className="text-xs text-slate-500 font-medium">Total Return</p>
            </div>
            <p className="text-xl lg:text-2xl font-bold text-green-600">৳{investment.actualEarnings.toLocaleString()}</p>
          </div>

          <div className="bg-white rounded-xl p-4 lg:p-5 border border-slate-200 shadow-sm">
            <div className="flex items-center gap-2 mb-2">
              <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isBattery ? 'bg-emerald-100' : 'bg-blue-100'}`}>
                {isBattery ? (
                  <Battery className="w-4 h-4 text-emerald-600" />
                ) : (
                  <Bike className="w-4 h-4 text-blue-600" />
                )}
              </div>
              <p className="text-xs text-slate-500 font-medium">{isBattery ? 'Batteries' : 'Bikes'}</p>
            </div>
            <p className={`text-xl lg:text-2xl font-bold ${isBattery ? 'text-emerald-600' : 'text-blue-600'}`}>
              {isBattery ? assignedBatteries.length : assignedBikes.length}
            </p>
          </div>
        </div>


        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
          <div className="flex overflow-x-auto border-b border-slate-100 justify-between sm:justify-start px-4 lg:px-0">
            {[
              { key: 'overview', label: 'Overview', icon: FileText, count: null },
              { key: 'bikes', label: isBattery ? 'Batteries' : 'Bikes', icon: isBattery ? Battery : Bike, count: isBattery ? assignedBatteries.length : assignedBikes.length },
              { key: 'transactions', label: 'Transactions', icon: CreditCard, count: demoTransactions.length },
              { key: 'statement', label: 'Statement', icon: Receipt, count: null },
            ].map((tab) => {
              const Icon = tab.icon;
              return (
                <button key={tab.key} onClick={() => setActiveTab(tab.key)}
                  className={`px-4 lg:px-6 py-3 w-full lg:w-auto text-sm font-semibold capitalize whitespace-nowrap transition-colors flex justify-center items-center gap-2 ${activeTab === tab.key ? 'text-investor bg-investor/5 border-b-2 border-investor' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'}`}>
                  <Icon className="w-4 h-4 " />
                  <span className="hidden lg:inline">{tab.label}</span>
                  {tab.count !== null && <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${activeTab === tab.key ? 'bg-investor text-white' : 'bg-slate-200 text-slate-600'}`}>{tab.count}</span>}
                </button>
              );
            })}
          </div>

          <div className="p-4 lg:p-6">
            {activeTab === 'overview' && (
              <div className="space-y-6">
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="bg-slate-50 rounded-xl p-5 border border-slate-200">
                    <h4 className="font-semibold text-slate-800 mb-4 flex items-center gap-2">
                      <FileText className="w-4 h-4 text-slate-400" /> Investment Details
                    </h4>
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Plan Name</span>
                        <span className="font-semibold text-slate-800">{investment.planName}</span>
                      </div>
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Plan Type</span>
                        <span className="font-semibold text-slate-800 capitalize">{investment.planType}</span>
                      </div>
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Period</span>
                        <span className="font-semibold text-slate-800">{investment.startDate} - {investment.endDate || 'Ongoing'}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Payment Method</span>
                        <span className="font-semibold text-slate-800 capitalize">{investment.paymentMethod}</span>
                      </div>
                    </div>
                  </div>

                  <div className="bg-slate-50 rounded-xl p-5 border border-slate-200">
                    <h4 className="font-semibold text-slate-800 mb-4 flex items-center gap-2">
                      <Shield className="w-4 h-4 text-slate-400" /> Plan Policy
                    </h4>
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Min Duration</span>
                        <span className="font-semibold text-slate-800">12 Months</span>
                      </div>
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Lock-in Period</span>
                        <span className="font-semibold text-slate-800">3 Months</span>
                      </div>
                      <div className="flex justify-between border-b border-slate-200 pb-2">
                        <span className="text-slate-500">Exit Penalty</span>
                        <span className="font-semibold text-red-500">10%</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Maintenance</span>
                        <span className="font-semibold text-green-600">Included</span>
                      </div>
                    </div>
                  </div>
                </div>

                {isBattery ? (
                  <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-5">
                    <h4 className="font-semibold text-emerald-800 mb-4 flex items-center gap-2">
                      <Percent className="w-4 h-4 text-emerald-600" /> Profit Sharing
                    </h4>
                    <p className="text-xs text-emerald-600 mb-4 font-medium">Profit sharing ratio when batteries are utilized</p>
                    <div className="max-w-xs">
                      <div className="bg-white rounded-lg p-3 text-center border border-emerald-200">
                        <p className="text-xs text-slate-500 mb-1 font-medium">Profit Share</p>
                        <p className="text-xl font-bold text-slate-800">40%</p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
                    <h4 className="font-semibold text-amber-800 mb-4 flex items-center gap-2">
                      <Percent className="w-4 h-4 text-amber-600" /> Profit Sharing
                    </h4>
                    <p className="text-xs text-amber-600 mb-4 font-medium">Your share based on rental model</p>
                    <div className="grid grid-cols-3 gap-3">
                      <div className="bg-white rounded-lg p-3 text-center border border-amber-200">
                        <p className="text-xs text-slate-500 mb-1 font-medium">Single Rent</p>
                        <p className="text-xl font-bold text-slate-800">40%</p>
                      </div>
                      <div className="bg-white rounded-lg p-3 text-center border border-amber-200">
                        <p className="text-xs text-slate-500 mb-1 font-medium">Rent to Own</p>
                        <p className="text-xl font-bold text-slate-800">50%</p>
                      </div>
                      <div className="bg-white rounded-lg p-3 text-center border border-amber-200">
                        <p className="text-xs text-slate-500 mb-1 font-medium">Share EV</p>
                        <p className="text-xl font-bold text-slate-800">55%</p>
                      </div>
                    </div>
                  </div>
                )}


              </div>
            )}

            {activeTab === 'bikes' && (
              isBattery ? (
                <div className="space-y-4">
                  <p className="text-sm text-slate-500">{assignedBatteries.length} battery pack{assignedBatteries.length !== 1 ? 's' : ''} assigned to this investment</p>
                  {assignedBatteries.map((battery) => (
                    <Link
                      href={`/investor/investments/${investmentId}/rental-history/${battery.id}`}
                      key={battery.id}
                      className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-emerald-500 hover:shadow-md transition-all block group cursor-pointer"
                    >
                      <div className="w-16 h-16 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform duration-300">
                        <Battery className="w-8 h-8 text-emerald-600 animate-pulse" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h5 className="font-semibold text-slate-800 group-hover:text-emerald-700 transition-colors">{battery.model}</h5>
                          <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${battery.status === 'In-Use' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}`}>{battery.status}</span>
                        </div>
                        <p className="text-sm text-slate-500">{battery.serialNumber} • {battery.brand}</p>
                        <div className="mt-2 flex flex-wrap gap-3 text-xs text-slate-500">
                          <span className="flex items-center gap-1">Cycle Count: {battery.cycleCount}</span>
                          <span className="flex items-center gap-1">SoC / Health: {battery.soc}</span>
                          <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {battery.location}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 self-center shrink-0">
                        <div className="text-right">
                          <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
                          <p className="text-lg font-bold text-slate-800">৳{(investment.monthlyReturn / assignedBatteries.length).toLocaleString()}</p>
                          <p className="text-xs text-slate-400 mt-1">Total: ৳{battery.earnings.toLocaleString()}</p>
                        </div>
                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-emerald-600 group-hover:translate-x-1 transition-all" />
                      </div>
                    </Link>
                  ))}
                </div>
              ) : (
                <div className="space-y-4">
                  <p className="text-sm text-slate-500">{assignedBikes.length} bike{assignedBikes.length !== 1 ? 's' : ''} assigned to this investment</p>
                  {assignedBikes.map((bike) => (
                    <Link
                      href={`/investor/investments/${investmentId}/rental-history/${bike.id}`}
                      key={bike.id}
                      className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-investor hover:shadow-md transition-all block group cursor-pointer"
                    >
                      <div className="w-24 h-20 bg-slate-100 rounded-lg overflow-hidden shrink-0 group-hover:scale-102 transition-transform duration-300">
                        <img src={bike.image} alt={bike.model} className="w-full h-full object-cover animate-fade-in" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h5 className="font-semibold text-slate-800 group-hover:text-investor transition-colors">{bike.model}</h5>
                          <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${bike.status === 'rented' ? 'bg-green-100 text-green-700' : bike.status === 'available' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'}`}>{bike.status}</span>
                        </div>
                        <p className="text-sm text-slate-500">{bike.plateNumber} • {bike.brand}</p>
                        <div className="mt-2 flex flex-wrap gap-3 text-xs text-slate-500">
                          <span className="flex items-center gap-1"><Battery className="w-3 h-3" /> {bike.batteryLevel}%</span>
                          <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {bike.location}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 self-center shrink-0">
                        <div className="text-right">
                          <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
                          <p className="text-lg font-bold text-slate-800">৳{bike.currentRent}</p>
                          <p className="text-xs text-slate-400 mt-1">Total: ৳{bike.totalEarnings.toLocaleString()}</p>
                        </div>
                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-investor group-hover:translate-x-1 transition-all" />
                      </div>
                    </Link>
                  ))}
                </div>
              )
            )}

            {activeTab === 'statement' && (
              <div className="max-w-2xl mx-auto">
                <div className="bg-slate-50 rounded-xl p-5 border border-slate-200">
                  <h3 className="font-semibold text-slate-800 mb-5 text-center text-lg">Profit & Loss Statement</h3>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center pb-3 border-b border-slate-200">
                      <span className="font-medium text-slate-600">Gross Rental Revenue</span>
                      <span className="text-xl font-bold text-slate-800">৳{demoPnl.grossRevenue.toLocaleString()}</span>
                    </div>
                    <div className="space-y-2 py-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-500">Platform Fee {isBattery ? '(60%)' : '(45%)'}</span>
                        <span className="font-medium text-red-500">-৳{demoPnl.platformFee.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-500">Insurance Coverage</span>
                        <span className="font-medium text-slate-600">-৳{demoPnl.insurance.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-500">Maintenance</span>
                        <span className="font-medium text-slate-600">-৳{demoPnl.maintenance.toLocaleString()}</span>
                      </div>
                    </div>
                    <div className="flex justify-between items-center pt-4 border-t-2 border-slate-300">
                      <span className="text-lg font-semibold text-slate-800">Your Share {isBattery ? '(40%)' : '(55%)'}</span>
                      <span className="text-2xl font-bold text-green-600">৳{demoPnl.netProfit.toLocaleString()}</span>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'transactions' && (
              <div className="space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                  <p className="text-sm text-slate-500">{demoTransactions.length} transactions found</p>
                  <div className="flex items-center gap-2">
                    <select className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"><option>All Types</option><option>Income</option><option>Withdrawal</option></select>
                    <select className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"><option>Last 30 Days</option><option>Last 7 Days</option><option>This Month</option><option>All Time</option></select>
                  </div>
                </div>

                <div className="lg:overflow-x-auto">
                  <table className="hidden lg:table w-full text-left">
                    <thead className="bg-slate-50">
                      <tr><th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Date</th><th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Description</th><th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase text-right">Amount</th><th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Status</th></tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {demoTransactions.map((tx) => (
                        <tr key={tx.id} className="hover:bg-slate-50 transition-colors">
                          <td className="px-4 py-3 text-sm text-slate-600 whitespace-nowrap">{tx.date}</td>
                          <td className="px-4 py-3"><p className="text-sm font-medium text-slate-800">{tx.description}</p><p className="text-xs text-slate-400">Ref: {tx.id}</p></td>
                          <td className={`px-4 py-3 text-sm font-bold text-right ${tx.amount > 0 ? 'text-green-600' : 'text-red-500'}`}>{tx.amount > 0 ? '+' : ''}৳{tx.amount.toLocaleString()}</td>
                          <td className="px-4 py-3"><span className="inline-flex px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">{tx.status}</span></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                <div className="lg:hidden space-y-3">
                  {demoTransactions.map((tx) => (
                    <div key={tx.id} className="p-4 bg-white rounded-xl border border-slate-200">
                      <div className="flex items-start justify-between mb-2">
                        <div><p className="text-sm font-medium text-slate-800">{tx.description}</p><p className="text-xs text-slate-400">Ref: {tx.id} • {tx.date}</p></div>
                        <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${tx.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{tx.status}</span>
                      </div>
                      <p className={`text-lg font-bold text-right ${tx.amount > 0 ? 'text-green-600' : 'text-red-500'}`}>{tx.amount > 0 ? '+' : ''}৳{tx.amount.toLocaleString()}</p>
                    </div>
                  ))}
                </div>

                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
                  <p className="text-sm text-slate-500">Showing 1-8 of 8</p>
                  <div className="flex items-center gap-2">
                    <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm text-slate-600 hover:bg-slate-50 disabled:opacity-50" disabled>Previous</button>
                    <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm text-slate-600 hover:bg-slate-50 disabled:opacity-50" disabled>Next</button>
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'payments' && (
              <div className="space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                  <p className="text-sm text-slate-500">{paymentHistory.length} payments made</p>
                  {dueAmount > 0 && (
                    <button onClick={() => setShowPaymentModal(true)} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-2">
                      <DollarSign className="w-4 h-4" /> Make Payment
                    </button>
                  )}

                </div>

                <div className="overflow-x-auto">
                  <table className="hidden lg:table w-full text-left">
                    <thead className="bg-slate-50">
                      <tr>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Date</th>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Type</th>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Installment</th>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Method</th>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase text-right">Amount</th>
                        <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase">Status</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {paymentHistory.map((payment) => (
                        <tr key={payment.id} className="hover:bg-slate-50 transition-colors">
                          <td className="px-4 py-3 text-sm text-slate-600 whitespace-nowrap">{payment.date}</td>
                          <td className="px-4 py-3"><span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-slate-100 text-slate-600">{payment.type}</span></td>
                          <td className="px-4 py-3 text-sm text-slate-600">{payment.installmentNo ? `#${payment.installmentNo}` : '-'}</td>
                          <td className="px-4 py-3 text-sm text-slate-600">{payment.method}</td>
                          <td className="px-4 py-3 text-sm font-bold text-green-600 text-right">৳{payment.amount.toLocaleString()}</td>
                          <td className="px-4 py-3"><span className="inline-flex px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">{payment.status}</span></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                <div className="lg:hidden space-y-3">
                  {paymentHistory.map((payment) => (
                    <div key={payment.id} className="p-4 bg-white rounded-xl border border-slate-200">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <p className="text-sm font-medium text-slate-800">৳{payment.amount.toLocaleString()}</p>
                          <p className="text-xs text-slate-400">{payment.date} • {payment.method}</p>
                        </div>
                        <span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">{payment.status}</span>
                      </div>
                      <div className="flex gap-2 mt-2">
                        <span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-slate-100 text-slate-600">{payment.type}</span>
                        {payment.installmentNo && <span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-blue-100 text-blue-600">Inst #{payment.installmentNo}</span>}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {showPaymentModal && dueAmount > 0 && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl w-full max-w-md shadow-2xl">
            <div className="flex items-center justify-between p-5 border-b border-slate-100">
              <h3 className="text-lg font-bold text-slate-800">Make Payment</h3>
              <button onClick={() => setShowPaymentModal(false)} className="p-1 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
                <div className="flex justify-between mb-2">
                  <span className="text-sm text-slate-500">Total Investment</span>
                  <span className="text-sm font-semibold text-slate-800">৳{investment.totalInvestment.toLocaleString()}</span>
                </div>
                <div className="flex justify-between mb-2">
                  <span className="text-sm text-slate-500">Already Paid</span>
                  <span className="text-sm font-semibold text-green-600">৳{totalPaid.toLocaleString()}</span>
                </div>
                <div className="flex justify-between pt-2 border-t border-slate-200">
                  <span className="text-sm font-semibold text-slate-800">Due Amount</span>
                  <span className="text-sm font-bold text-amber-600">৳{dueAmount.toLocaleString()}</span>
                </div>
              </div>

              <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 text-center">
                <p className="text-sm text-amber-600 mb-1">Fixed Payment Amount</p>
                <p className="text-3xl font-bold text-amber-700">৳{dueAmount.toLocaleString()}</p>
              </div>

              <div className="pt-2">
                <label className="text-sm font-semibold text-slate-700 mb-2 block">Payment Method</label>
                <div className="flex gap-2">
                  <button className="flex-1 p-3 border border-slate-200 rounded-lg text-center hover:border-investor hover:bg-investor/5 transition-colors">
                    <Building2 className="w-5 h-5 mx-auto text-slate-600 mb-1" />
                    <span className="text-xs font-medium text-slate-700">Bank</span>
                  </button>
                  <button className="flex-1 p-3 border border-slate-200 rounded-lg text-center hover:border-investor hover:bg-investor/5 transition-colors">
                    <Smartphone className="w-5 h-5 mx-auto text-slate-600 mb-1" />
                    <span className="text-xs font-medium text-slate-700">bKash</span>
                  </button>
                </div>
              </div>

              <button onClick={handlePaymentSubmit} className="w-full py-3 bg-investor text-white rounded-xl font-bold hover:bg-investor-dark transition-colors">
                Pay ৳{dueAmount.toLocaleString()}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

import { Percent } from 'lucide-react';