'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { investors as initialInvestors, bikes as initialBikes, transactions as initialTransactions } from '@/data/mockData';
import type { Investor } from '@/data/mockData';
import toast from 'react-hot-toast';
import {
  ArrowLeft, Wallet, TrendingUp, Banknote, Calendar, Phone, Mail, MapPin, Edit, Trash2, Plus, X, Bike,
  User, FileText, CreditCard, DollarSign, Clock, ChevronDown, ExternalLink, Download, Upload,
  AlertTriangle, Shield, Star, CheckCircle, XCircle, Search, Filter, BookOpen, ArrowRight, Printer,
  UserCircle, Home, Briefcase, CreditCardIcon, Heart, PhoneCall, PhoneOutgoing, MessageSquare, Save,
  ShieldCheck, Building2, Users, Check, AlertOctagon, Activity, Award, Camera
} from 'lucide-react';

const statusColors: Record<string, string> = {
  active: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
  inactive: 'bg-slate-100 text-slate-500',
  suspended: 'bg-red-100 text-red-700',
};

const planColors: Record<string, string> = {
  silver: 'bg-slate-200 text-slate-700',
  gold: 'bg-yellow-100 text-yellow-700',
  platinum: 'bg-purple-100 text-purple-700',
  diamond: 'bg-blue-100 text-blue-700',
};

const kycColors: Record<string, string> = {
  verified: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
  rejected: 'bg-red-100 text-red-700',
  not_submitted: 'bg-slate-100 text-slate-500',
};

const bikeStatusColors: Record<string, string> = {
  available: 'bg-blue-100 text-blue-700',
  rented: 'bg-green-100 text-green-700',
  maintenance: 'bg-amber-100 text-amber-700',
  retired: 'bg-slate-100 text-slate-500',
};

function SectionCard({ title, icon: Icon, children, headerBg = 'bg-slate-50', headerBorder = 'border-slate-100', editKey, editingSection, setEditingSection, onEdit, editForm, setEditForm }: { title: string; icon: any; children: React.ReactNode; headerBg?: string; headerBorder?: string; editKey?: string; editingSection?: string | null; setEditingSection?: (s: string | null) => void; onEdit?: () => void; editForm?: any; setEditForm?: any }) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div className={`${headerBg} px-5 py-4 border-b ${headerBorder} flex items-center justify-between`}>
        <div className="flex items-center gap-2">
          <Icon className="w-5 h-5 text-slate-600" />
          <h3 className="font-semibold text-slate-800">{title}</h3>
        </div>
        {editKey && setEditingSection ? (
          editingSection !== editKey ? (
            <button onClick={() => { setEditingSection(editKey); onEdit?.(); }} className="p-1.5 hover:bg-white rounded-lg transition-colors">
              <Edit className="w-4 h-4 text-slate-500" />
            </button>
          ) : (
            <div className="flex gap-1">
              <button onClick={() => { toast.success('Updated'); setEditingSection(null); }} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700">Save</button>
              <button onClick={() => setEditingSection(null)} className="px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50">Cancel</button>
            </div>
          )
        ) : null}
      </div>
      <div className="p-4">
        {children}
      </div>
    </div>
  );
}

export default function InvestorDetailPage() {
  const params = useParams();
  const router = useRouter();
  const investorId = params.id as string;

  const [investors] = useState<Investor[]>(initialInvestors);
  const investor = investors.find(i => i.id === investorId);

  const assignedBikes = initialBikes.filter(b => b.investorId === investorId);
  // Investor transactions are filtered below

  const [activeTab, setActiveTab] = useState('overview');
  const [showEditModal, setShowEditModal] = useState(false);
  const [showAssignBikeModal, setShowAssignBikeModal] = useState(false);
  const [selectedBikeId, setSelectedBikeId] = useState('');
  const [showCreateInvestmentModal, setShowCreateInvestmentModal] = useState(false);
  const [showInvoiceModal, setShowInvoiceModal] = useState(false);
  const [showJournalModal, setShowJournalModal] = useState(false);
  const [selectedInvoice, setSelectedInvoice] = useState<any>(null);
  const [investorJournals, setInvestorJournals] = useState<any[]>([]);
  const [showBankModal, setShowBankModal] = useState(false);
  const [editingSection, setEditingSection] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<any>({});
  const [showMobileBankingModal, setShowMobileBankingModal] = useState(false);
  const [showTaxModal, setShowTaxModal] = useState(false);
  const [showDocModal, setShowDocModal] = useState(false);
  const [editingBank, setEditingBank] = useState({ bankName: '', bankAccountName: '', bankAccountNumber: '', bankBranch: '', bankRouting: '' });
  const [editingMobileBanking, setEditingMobileBanking] = useState({ provider: '', number: '', isPrimary: false });
  const [editingTax, setEditingTax] = useState({ tinNumber: '', passportNumber: '' });
  const [newDoc, setNewDoc] = useState({ type: 'nid', number: '', url: '' });
  const [editingMobileIndex, setEditingMobileIndex] = useState<number | null>(null);
  const investorTransactions = initialTransactions.filter(t => t.investorId === investorId);
  const [newInvestment, setNewInvestment] = useState({
    planName: '',
    planType: 'gold' as 'silver' | 'gold' | 'platinum' | 'diamond',
    selectedBikeIds: [] as string[],
    totalInvestment: 0,
    monthlyReturn: 0,
    expectedRoi: 15,
    startDate: new Date().toISOString().split('T')[0],
    endDate: '',
    paymentMethod: 'bank' as 'bank' | 'mobile' | 'cash' | 'cheque',
    transactionReference: '',
    notes: ''
  });

  if (!investor) {
    return (
      <div className="p-4 lg:p-6">
        <div className="text-center py-12">
          <h2 className="text-xl font-bold text-slate-800">Investor Not Found</h2>
          <p className="text-slate-500 mt-2">The investor you're looking for doesn't exist.</p>
          <Link href="/admin/investors" className="mt-4 inline-flex items-center gap-2 text-investor hover:underline">
            <ArrowLeft className="w-4 h-4" /> Back to Investors
          </Link>
        </div>
      </div>
    );
  }

  const availableBikesForAssignment = initialBikes.filter(b => !b.investorId && b.status === 'available');

  const handleAssignBike = () => {
    alert('Bike assignment functionality - would update bike investorId here');
    setShowAssignBikeModal(false);
    setSelectedBikeId('');
  };

  const handleCreateInvestment = () => {
    const invId = `INV-${Date.now()}`;
    const year = new Date().getFullYear();
    const transactionRef = newInvestment.transactionReference || `INV/${year}/${String(investor.investments.length + 1).padStart(4, '0')}`;

    const getDebitAccount = (method: string) => {
      switch (method) {
        case 'bank': return { code: '1200', name: 'Bank - City Bank' };
        case 'cash': return { code: '1100', name: 'Cash in Hand' };
        case 'mobile': return { code: '1300', name: 'bKash Business' };
        case 'cheque': return { code: '1410', name: 'Cheque Receivable' };
        default: return { code: '1200', name: 'Bank - City Bank' };
      }
    };

    const debitAccount = getDebitAccount(newInvestment.paymentMethod);

    const journalEntry = {
      entryId: `JE-${Date.now()}`,
      date: newInvestment.startDate,
      reference: transactionRef,
      description: `${investor.name} - ${newInvestment.planName}`,
      entries: [
        { accountCode: debitAccount.code, accountName: debitAccount.name, debit: newInvestment.totalInvestment, credit: 0 },
        { accountCode: '2200', accountName: 'Investor Liabilities', debit: 0, credit: newInvestment.totalInvestment },
      ],
      isAuto: true,
      sourceType: 'investor_funding',
      createdAt: new Date().toISOString(),
      type: 'investment',
      amount: newInvestment.totalInvestment,
      paymentMethod: newInvestment.paymentMethod
    };

    setInvestorJournals([journalEntry, ...investorJournals]);

    console.log('Creating Investment:', {
      id: invId,
      investorId: investor.id,
      ...newInvestment,
      actualEarnings: 0,
      status: 'active' as const,
      transactionId: transactionRef,
      createdAt: new Date().toISOString()
    });

    alert(`Investment created successfully!

Investor: ${investor.name}
Investment ID: ${invId}
Transaction Ref: ${transactionRef}
Amount: ৳${newInvestment.totalInvestment.toLocaleString()}

Accounting Entry Created (Auto-Journal):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Date: ${newInvestment.startDate}
Ref: ${transactionRef}
Description: ${investor.name} - ${newInvestment.planName}

Debit (Dr): ${debitAccount.name}    ৳${newInvestment.totalInvestment.toLocaleString()}
Credit (Cr): Investor Liability  ৳${newInvestment.totalInvestment.toLocaleString()}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
    setShowCreateInvestmentModal(false);
    setNewInvestment({
      planName: '',
      planType: 'gold',
      selectedBikeIds: [],
      totalInvestment: 0,
      monthlyReturn: 0,
      expectedRoi: 15,
      startDate: new Date().toISOString().split('T')[0],
      endDate: '',
      paymentMethod: 'bank',
      transactionReference: '',
      notes: ''
    });
  };

  return (
    <div className="p-4 lg:p-6">
      <button onClick={() => router.push('/admin/investors')} className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4">
        <ArrowLeft className="w-4 h-4" /> Back to Investors
      </button>
      {/* Profile Card Header */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-6">
        <div className="p-5">
          <div className="flex flex-col lg:flex-row lg:items-start gap-5">
            {/* Profile Image */}
            <div className="relative group flex-shrink-0 mx-auto lg:mx-0">
              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg border-4 border-white">
                <span className="text-3xl font-extrabold text-white">{investor.name.charAt(0)}</span>
              </div>
              <label className="absolute bottom-0 right-0 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity shadow-lg border-2 border-white">
                <Camera className="w-4 h-4 text-white" />
                <input type="file" accept="image/*" className="hidden" onChange={() => toast.success('Profile image updated')} />
              </label>
            </div>

            {/* Profile Info */}
            <div className="flex-1">
              <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                <div>
                  <h1 className="text-2xl font-extrabold text-slate-800">{investor.name}</h1>
                  <p className="text-sm text-slate-500 mt-0.5">{investor.id} &bull; {investor.email}</p>
                  <div className="flex items-center gap-2 mt-1">
                    {investor.referralCode && (
                      <span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded bg-purple-50 text-purple-700 border border-purple-100">
                        <Star className="w-3 h-3" /> Ref: {investor.referralCode}
                      </span>
                    )}
                    {investor.totalReferrals > 0 && (
                      <span className="text-xs text-slate-400">Referrals: {investor.totalReferrals}</span>
                    )}
                  </div>
                  <div className="flex flex-wrap items-center gap-2 mt-2">
                    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[investor.status]}`}>{investor.status}</span>
                    {investor.investments && investor.investments.length > 0 && (
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${planColors[investor.investments[0].planType]}`}>
                        {investor.investments.length} Investment{investor.investments.length > 1 ? 's' : ''}
                      </span>
                    )}
                    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[investor.kycStatus]}`}>
                      <ShieldCheck className="w-3 h-3" /> KYC {investor.kycStatus}
                    </span>
                    <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${investor.riskLevel === 'low' ? 'bg-green-100 text-green-700' : investor.riskLevel === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
                      Risk: {investor.riskLevel}
                    </span>
                  </div>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <button onClick={() => setShowEditModal(true)} className="py-2 px-4 border border-slate-200 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-50 flex items-center gap-2">
                    <Edit className="w-4 h-4" /> Edit
                  </button>
                  <button className="py-2 px-4 bg-red-500 text-white rounded-lg font-semibold text-sm hover:bg-red-600 flex items-center gap-2">
                    <Trash2 className="w-4 h-4" /> Delete
                  </button>
                </div>
              </div>

              {/* Stats Row */}
              <div className="grid grid-cols-3 lg:grid-cols-6 gap-3 mt-5">
                <div className="p-3 bg-purple-50 rounded-lg border border-purple-100">
                  <p className="text-xs text-purple-600 font-medium">Total Invested</p>
                  <p className="text-sm font-bold text-purple-700">৳{investor.totalInvested.toLocaleString()}</p>
                </div>
                <div className="p-3 bg-green-50 rounded-lg border border-green-100">
                  <p className="text-xs text-green-600 font-medium">Total Earnings</p>
                  <p className="text-sm font-bold text-green-700">৳{investor.totalEarnings.toLocaleString()}</p>
                </div>
                <div className="p-3 bg-blue-50 rounded-lg border border-blue-100">
                  <p className="text-xs text-blue-600 font-medium">ROI</p>
                  <p className="text-sm font-bold text-blue-700">{investor.roi}%</p>
                </div>
                <div className="p-3 bg-amber-50 rounded-lg border border-amber-100">
                  <p className="text-xs text-amber-600 font-medium">Active Bikes</p>
                  <p className="text-sm font-bold text-amber-700">{investor.activeBikes}</p>
                </div>
                <div className="p-3 bg-red-50 rounded-lg border border-red-100">
                  <p className="text-xs text-red-600 font-medium">Pending Earning</p>
                  <p className="text-sm font-bold text-red-700">৳{investor.pendingEarnings.toLocaleString()}</p>
                </div>
                <div className="p-3 bg-slate-50 rounded-lg border border-slate-100">
                  <p className="text-xs text-slate-600 font-medium">Withdrawn</p>
                  <p className="text-sm font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 mb-6">
        <div className="border-b border-slate-100 flex overflow-x-auto">
          <button
            onClick={() => setActiveTab('overview')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'overview' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <User className="w-4 h-4 inline mr-1" /> Overview
          </button>
          <button
            onClick={() => setActiveTab('investments')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'investments' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <TrendingUp className="w-4 h-4 inline mr-1" /> Investments ({investor.investments?.length || 0})
          </button>
          <button
            onClick={() => setActiveTab('bikes')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'bikes' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <Bike className="w-4 h-4 inline mr-1" /> Bikes ({assignedBikes.length})
          </button>
          <button
            onClick={() => setActiveTab('financial')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'financial' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <Banknote className="w-4 h-4 inline mr-1" /> Financial
          </button>
          <button
            onClick={() => setActiveTab('transactions')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'transactions' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <DollarSign className="w-4 h-4 inline mr-1" /> Transactions
          </button>
          <button
            onClick={() => setActiveTab('documents')}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'documents' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
          >
            <FileText className="w-4 h-4 inline mr-1" /> Documents
          </button>
        </div>

        <div className="p-5">
          {activeTab === 'overview' && (
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="flex-1 space-y-4">
                  <SectionCard title="Personal Information" icon={User} headerBg="bg-emerald-50" headerBorder="border-emerald-100" editKey="personal" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => setEditForm({
                    fullName: investor.name,
                    phone: investor.phone,
                    phoneAlt: investor.phoneAlt || '',
                    email: investor.email,
                    nidNumber: investor.nidNumber || '',
                    tinNumber: investor.tinNumber || '',
                    dateOfBirth: investor.dateOfBirth || '',
                    gender: investor.gender || '',
                    occupation: investor.occupation || '',
                    bloodGroup: (investor as any).bloodGroup || '',
                    maritalStatus: (investor as any).maritalStatus || '',
                    religion: (investor as any).religion || '',
                    nationality: (investor as any).nationality || 'Bangladeshi'
                  })} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'personal' ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Full Name</label>
                          <input type="text" value={editForm.fullName || ''} onChange={(e) => setEditForm({ ...editForm, fullName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Phone</label>
                          <input type="text" value={editForm.phone || ''} onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Alternate Phone</label>
                          <input type="text" value={editForm.phoneAlt || ''} onChange={(e) => setEditForm({ ...editForm, phoneAlt: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Email</label>
                          <input type="email" value={editForm.email || ''} onChange={(e) => setEditForm({ ...editForm, email: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">NID Number</label>
                          <input type="text" value={editForm.nidNumber || ''} onChange={(e) => setEditForm({ ...editForm, nidNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">TIN Number</label>
                          <input type="text" value={editForm.tinNumber || ''} onChange={(e) => setEditForm({ ...editForm, tinNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Date of Birth</label>
                          <input type="date" value={editForm.dateOfBirth || ''} onChange={(e) => setEditForm({ ...editForm, dateOfBirth: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Gender</label>
                          <select value={editForm.gender || ''} onChange={(e) => setEditForm({ ...editForm, gender: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Occupation</label>
                          <input type="text" value={editForm.occupation || ''} onChange={(e) => setEditForm({ ...editForm, occupation: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Blood Group</label>
                          <select value={editForm.bloodGroup || ''} onChange={(e) => setEditForm({ ...editForm, bloodGroup: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Marital Status</label>
                          <select value={editForm.maritalStatus || ''} onChange={(e) => setEditForm({ ...editForm, maritalStatus: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                            <option value="Divorced">Divorced</option>
                            <option value="Widowed">Widowed</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Religion</label>
                          <select value={editForm.religion || ''} onChange={(e) => setEditForm({ ...editForm, religion: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="Islam">Islam</option>
                            <option value="Hinduism">Hinduism</option>
                            <option value="Christianity">Christianity</option>
                            <option value="Buddhism">Buddhism</option>
                            <option value="Other">Other</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Nationality</label>
                          <input type="text" value={editForm.nationality || ''} onChange={(e) => setEditForm({ ...editForm, nationality: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                      </div>
                    ) : (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Full Name</p>
                          <p className="font-medium text-slate-700">{investor.name}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Phone</p>
                          <p className="font-medium text-slate-700">{investor.phone}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Alternate Phone</p>
                          <p className="font-medium text-slate-700">{investor.phoneAlt || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Email</p>
                          <p className="font-medium text-slate-700">{investor.email}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">NID Number</p>
                          <p className="font-medium text-slate-700">{investor.nidNumber || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">TIN Number</p>
                          <p className="font-medium text-slate-700">{investor.tinNumber || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Date of Birth</p>
                          <p className="font-medium text-slate-700">{investor.dateOfBirth || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Gender</p>
                          <p className="font-medium text-slate-700">{investor.gender || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Occupation</p>
                          <p className="font-medium text-slate-700">{investor.occupation || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Blood Group</p>
                          <p className="font-medium text-slate-700">{(investor as any).bloodGroup || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Marital Status</p>
                          <p className="font-medium text-slate-700">{(investor as any).maritalStatus || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Religion</p>
                          <p className="font-medium text-slate-700">{(investor as any).religion || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Nationality</p>
                          <p className="font-medium text-slate-700">{(investor as any).nationality || 'Bangladeshi'}</p>
                        </div>
                      </div>
                    )}
                  </SectionCard>



                  <SectionCard title="Nominee Details" icon={Heart} headerBg="bg-orange-50" headerBorder="border-orange-100" editKey="nominee" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => setEditForm({
                    nomineeName: (investor as any).nomineeName || '',
                    nomineeRelation: (investor as any).nomineeRelation || '',
                    nomineeNid: (investor as any).nomineeNid || '',
                    nomineePhone: (investor as any).nomineePhone || '',
                    nomineeEmail: (investor as any).nomineeEmail || '',
                    nomineeAddress: (investor as any).nomineeAddress || '',
                    nomineeShare: (investor as any).nomineeShare || ''
                  })} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'nominee' ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Nominee Name</label>
                          <input type="text" value={editForm.nomineeName || ''} onChange={(e) => setEditForm({ ...editForm, nomineeName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Relationship</label>
                          <select value={editForm.nomineeRelation || ''} onChange={(e) => setEditForm({ ...editForm, nomineeRelation: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="Spouse">Spouse</option>
                            <option value="Child">Child</option>
                            <option value="Parent">Parent</option>
                            <option value="Sibling">Sibling</option>
                            <option value="Other">Other</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">NID Number</label>
                          <input type="text" value={editForm.nomineeNid || ''} onChange={(e) => setEditForm({ ...editForm, nomineeNid: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Phone</label>
                          <input type="text" value={editForm.nomineePhone || ''} onChange={(e) => setEditForm({ ...editForm, nomineePhone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Email</label>
                          <input type="email" value={editForm.nomineeEmail || ''} onChange={(e) => setEditForm({ ...editForm, nomineeEmail: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Share %</label>
                          <input type="number" value={editForm.nomineeShare || ''} onChange={(e) => setEditForm({ ...editForm, nomineeShare: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Address</label>
                          <input type="text" value={editForm.nomineeAddress || ''} onChange={(e) => setEditForm({ ...editForm, nomineeAddress: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                      </div>
                    ) : (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Nominee Name</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeName || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Relationship</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeRelation || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">NID Number</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeNid || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Phone</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineePhone || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Email</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeEmail || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Share %</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeShare || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg md:col-span-2">
                          <p className="text-xs text-slate-500">Address</p>
                          <p className="font-medium text-slate-700">{(investor as any).nomineeAddress || '-'}</p>
                        </div>
                      </div>
                    )}
                  </SectionCard>

                  <SectionCard title="Emergency Contact" icon={PhoneCall} headerBg="bg-red-50" headerBorder="border-red-100" editKey="emergency" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => setEditForm({
                    emergencyName: investor.emergencyContactName || '',
                    emergencyRelation: investor.emergencyContactRelation || '',
                    emergencyPhone: investor.emergencyContactPhone || '',
                    emergencyEmail: (investor as any).emergencyEmail || '',
                    emergencyAddress: (investor as any).emergencyAddress || ''
                  })} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'emergency' ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Contact Name</label>
                          <input type="text" value={editForm.emergencyName || ''} onChange={(e) => setEditForm({ ...editForm, emergencyName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Relationship</label>
                          <select value={editForm.emergencyRelation || ''} onChange={(e) => setEditForm({ ...editForm, emergencyRelation: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="">Select</option>
                            <option value="Spouse">Spouse</option>
                            <option value="Child">Child</option>
                            <option value="Parent">Parent</option>
                            <option value="Sibling">Sibling</option>
                            <option value="Friend">Friend</option>
                            <option value="Other">Other</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Phone</label>
                          <input type="text" value={editForm.emergencyPhone || ''} onChange={(e) => setEditForm({ ...editForm, emergencyPhone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Email</label>
                          <input type="email" value={editForm.emergencyEmail || ''} onChange={(e) => setEditForm({ ...editForm, emergencyEmail: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Address</label>
                          <input type="text" value={editForm.emergencyAddress || ''} onChange={(e) => setEditForm({ ...editForm, emergencyAddress: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                      </div>
                    ) : (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Contact Name</p>
                          <p className="font-medium text-slate-700">{investor.emergencyContactName || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Relationship</p>
                          <p className="font-medium text-slate-700">{investor.emergencyContactRelation || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Phone</p>
                          <p className="font-medium text-slate-700">{investor.emergencyContactPhone || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Email</p>
                          <p className="font-medium text-slate-700">{(investor as any).emergencyEmail || '-'}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg md:col-span-2">
                          <p className="text-xs text-slate-500">Address</p>
                          <p className="font-medium text-slate-700">{(investor as any).emergencyAddress || '-'}</p>
                        </div>
                      </div>
                    )}
                  </SectionCard>
                </div>
                <div className="flex-1 space-y-4">
                  <SectionCard title="Investment Information" icon={Briefcase} headerBg="bg-blue-50" headerBorder="border-blue-100" editKey="investmentInfo" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => setEditForm({
                    companyName: (investor as any).companyName || '',
                    monthlyIncome: (investor as any).monthlyIncome || '',
                    investmentSource: (investor as any).investmentSource || '',
                    profession: investor.occupation || ''
                  })} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'investmentInfo' ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Company / Business Name</label>
                          <input type="text" value={editForm.companyName || ''} onChange={(e) => setEditForm({ ...editForm, companyName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Monthly Income (৳)</label>
                          <input type="number" value={editForm.monthlyIncome || ''} onChange={(e) => setEditForm({ ...editForm, monthlyIncome: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Investment Source</label>
                          <input type="text" value={editForm.investmentSource || ''} onChange={(e) => setEditForm({ ...editForm, investmentSource: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="e.g., Savings, Business profit, Inheritance" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Profession / Occupation</label>
                          <input type="text" value={editForm.profession || ''} onChange={(e) => setEditForm({ ...editForm, profession: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                      </div>
                    ) : (
                      <div className="space-y-2">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Company / Business Name</p>
                            <p className="font-medium text-slate-700">{(investor as any).companyName || '-'}</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Monthly Income</p>
                            <p className="font-medium text-slate-700">{(investor as any).monthlyIncome || '-'}</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Investment Source</p>
                            <p className="font-medium text-slate-700">{(investor as any).investmentSource || '-'}</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Profession / Occupation</p>
                            <p className="font-medium text-slate-700">{investor.occupation || '-'}</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </SectionCard>
                  <SectionCard title="Present Address" icon={Home} headerBg="bg-green-50" headerBorder="border-green-100" editKey="presentAddress" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => {
                    const parts = investor.address.split(',').map(s => s.trim());
                    setEditForm({
                      addressLine1: parts.slice(0, 2).join(', '),
                      addressLine2: parts.slice(2, 4).join(', '),
                      division: parts[4] || 'Dhaka',
                      district: parts[5] || 'Dhaka',
                      thana: parts[3] || '',
                      zipCode: parts[6] || '',
                      landmark: parts[7] || ''
                    });
                  }} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'presentAddress' ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Address Line 1 (House/Flat + Road)</label>
                          <input type="text" value={editForm.addressLine1 || ''} onChange={(e) => setEditForm({ ...editForm, addressLine1: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Address Line 2 (Block + Area)</label>
                          <input type="text" value={editForm.addressLine2 || ''} onChange={(e) => setEditForm({ ...editForm, addressLine2: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Division</label>
                          <select value={editForm.division || ''} onChange={(e) => setEditForm({ ...editForm, division: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="Dhaka">Dhaka</option>
                            <option value="Chittagong">Chittagong</option>
                            <option value="Sylhet">Sylhet</option>
                            <option value="Khulna">Khulna</option>
                            <option value="Barisal">Barisal</option>
                            <option value="Rangpur">Rangpur</option>
                            <option value="Mymensingh">Mymensingh</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">District</label>
                          <select value={editForm.district || ''} onChange={(e) => setEditForm({ ...editForm, district: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="Dhaka">Dhaka</option>
                            <option value="Gazipur">Gazipur</option>
                            <option value="Narayanganj">Narayanganj</option>
                            <option value="Tangail">Tangail</option>
                            <option value="Kishoreganj">Kishoreganj</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Thana</label>
                          <input type="text" value={editForm.thana || ''} onChange={(e) => setEditForm({ ...editForm, thana: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Zip Code</label>
                          <input type="text" value={editForm.zipCode || ''} onChange={(e) => setEditForm({ ...editForm, zipCode: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                        <div className="md:col-span-2">
                          <label className="text-xs text-slate-500 mb-1 block">Landmark</label>
                          <input type="text" value={editForm.landmark || ''} onChange={(e) => setEditForm({ ...editForm, landmark: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                        </div>
                      </div>
                    ) : (
                      <div className="space-y-2">
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Address Line 1</p>
                          <p className="font-medium text-slate-700">{investor.address}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Landmark</p>
                          <p className="font-medium text-slate-700">-</p>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Division</p>
                            <p className="font-medium text-slate-700">Dhaka</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">District</p>
                            <p className="font-medium text-slate-700">Dhaka</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Thana</p>
                            <p className="font-medium text-slate-700">-</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Zip Code</p>
                            <p className="font-medium text-slate-700">1205</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </SectionCard>

                  <SectionCard title="Permanent Address" icon={Home} headerBg="bg-emerald-50" headerBorder="border-emerald-100" editKey="permanentAddress" editingSection={editingSection} setEditingSection={setEditingSection} onEdit={() => {
                    const parts = investor.address.split(',').map(s => s.trim());
                    setEditForm({
                      addressLine1: parts.slice(0, 2).join(', '),
                      addressLine2: parts.slice(2, 4).join(', '),
                      division: parts[4] || 'Dhaka',
                      district: parts[5] || 'Dhaka',
                      thana: parts[3] || '',
                      zipCode: parts[6] || '',
                      isSameAsPresent: true
                    });
                  }} editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'permanentAddress' ? (
                      <div>
                        <div className="flex items-center gap-2 mb-4">
                          <input type="checkbox" id="sameAsPresent" checked={editForm.isSameAsPresent || false} onChange={(e) => setEditForm({ ...editForm, isSameAsPresent: e.target.checked })} className="rounded text-investor" />
                          <label htmlFor="sameAsPresent" className="text-sm text-slate-600">Same as Present Address</label>
                        </div>
                        {!editForm.isSameAsPresent && (
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div className="md:col-span-2">
                              <label className="text-xs text-slate-500 mb-1 block">Address Line 1 (House/Flat + Road)</label>
                              <input type="text" value={editForm.addressLine1 || ''} onChange={(e) => setEditForm({ ...editForm, addressLine1: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                            </div>
                            <div className="md:col-span-2">
                              <label className="text-xs text-slate-500 mb-1 block">Address Line 2 (Block + Area)</label>
                              <input type="text" value={editForm.addressLine2 || ''} onChange={(e) => setEditForm({ ...editForm, addressLine2: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                            </div>
                            <div>
                              <label className="text-xs text-slate-500 mb-1 block">Division</label>
                              <select value={editForm.division || ''} onChange={(e) => setEditForm({ ...editForm, division: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                                <option value="Dhaka">Dhaka</option>
                                <option value="Chittagong">Chittagong</option>
                                <option value="Sylhet">Sylhet</option>
                                <option value="Khulna">Khulna</option>
                                <option value="Barisal">Barisal</option>
                                <option value="Rangpur">Rangpur</option>
                                <option value="Mymensingh">Mymensingh</option>
                              </select>
                            </div>
                            <div>
                              <label className="text-xs text-slate-500 mb-1 block">District</label>
                              <select value={editForm.district || ''} onChange={(e) => setEditForm({ ...editForm, district: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                                <option value="Dhaka">Dhaka</option>
                                <option value="Gazipur">Gazipur</option>
                                <option value="Narayanganj">Narayanganj</option>
                                <option value="Tangail">Tangail</option>
                                <option value="Kishoreganj">Kishoreganj</option>
                              </select>
                            </div>
                            <div>
                              <label className="text-xs text-slate-500 mb-1 block">Thana</label>
                              <input type="text" value={editForm.thana || ''} onChange={(e) => setEditForm({ ...editForm, thana: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                            </div>
                            <div>
                              <label className="text-xs text-slate-500 mb-1 block">Zip Code</label>
                              <input type="text" value={editForm.zipCode || ''} onChange={(e) => setEditForm({ ...editForm, zipCode: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                            </div>
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="space-y-2">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">Same as Present</span>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Address Line 1</p>
                          <p className="font-medium text-slate-700">{investor.address}</p>
                        </div>
                        <div className="p-3 bg-slate-50 rounded-lg">
                          <p className="text-xs text-slate-500">Landmark</p>
                          <p className="font-medium text-slate-700">-</p>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Division</p>
                            <p className="font-medium text-slate-700">Dhaka</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">District</p>
                            <p className="font-medium text-slate-700">Dhaka</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Thana</p>
                            <p className="font-medium text-slate-700">-</p>
                          </div>
                          <div className="p-3 bg-slate-50 rounded-lg">
                            <p className="text-xs text-slate-500">Zip Code</p>
                            <p className="font-medium text-slate-700">1205</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </SectionCard>


                </div>


              </div>
              {investor.notes && (
                <div className="mt-6">
                  <h3 className="font-semibold text-slate-800 mb-2">Notes</h3>
                  <p className="text-sm text-slate-600 bg-slate-50 p-3 rounded-lg">{investor.notes}</p>
                </div>
              )}
            </div>
          )}

          {activeTab === 'bikes' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">Assigned Bikes</h3>
                <button
                  onClick={() => setShowAssignBikeModal(true)}
                  className="py-2 px-3 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-1"
                >
                  <Plus className="w-4 h-4" /> Assign Bike
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {assignedBikes.map(bike => (
                  <div key={bike.id} className="bg-slate-50 rounded-xl p-4">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-sm">
                          <Bike className="w-6 h-6 text-blue-600" />
                        </div>
                        <div>
                          <p className="font-semibold text-slate-700">{bike.model}</p>
                          <p className="text-xs text-slate-400">{bike.brand}</p>
                        </div>
                      </div>
                      <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${bikeStatusColors[bike.status]}`}>
                        {bike.status}
                      </span>
                    </div>
                    <div className="space-y-2 text-xs">
                      <div className="flex justify-between">
                        <span className="text-slate-500">Plate</span>
                        <span className="font-medium">{bike.plateNumber}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Location</span>
                        <span className="font-medium">{bike.location}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Battery</span>
                        <span className={`font-medium ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Purchase Price</span>
                        <span className="font-medium text-purple-600">৳{bike.purchasePrice?.toLocaleString() || 0}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-500">Total Earnings</span>
                        <span className="font-medium text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
                      </div>
                    </div>
                  </div>
                ))}
                {assignedBikes.length === 0 && (
                  <div className="col-span-full text-center py-8 text-slate-400">
                    <Bike className="w-12 h-12 mx-auto mb-2 opacity-50" />
                    <p>No bikes assigned yet</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {activeTab === 'investments' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="font-semibold text-slate-800">Investment Plans</h3>
                <button onClick={() => setShowCreateInvestmentModal(true)} className="py-2 px-3 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-1">
                  <Plus className="w-4 h-4" /> Add Investment
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {investor.investments?.map((inv) => (
                  <div key={inv.id} className="bg-slate-50 rounded-xl p-4">
                    <div className="flex items-start justify-between mb-3">
                      <div>
                        <p className="font-semibold text-slate-700">{inv.planName}</p>
                        <p className="text-xs text-slate-400">{inv.planType} Plan</p>
                      </div>
                      <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${planColors[inv.planType]}`}>
                        {inv.status}
                      </span>
                    </div>
                    <div className="grid grid-cols-2 gap-2 text-xs mb-3">
                      <div className="bg-white rounded-lg p-2">
                        <p className="text-slate-400">Investment</p>
                        <p className="font-medium text-purple-600">৳{inv.totalInvestment.toLocaleString()}</p>
                      </div>
                      <div className="bg-white rounded-lg p-2">
                        <p className="text-slate-400">Monthly Return</p>
                        <p className="font-medium text-green-600">৳{inv.monthlyReturn.toLocaleString()}</p>
                      </div>
                      <div className="bg-white rounded-lg p-2">
                        <p className="text-slate-400">Expected ROI</p>
                        <p className="font-medium text-slate-700">{inv.expectedRoi}%</p>
                      </div>
                      <div className="bg-white rounded-lg p-2">
                        <p className="text-slate-400">Actual Earned</p>
                        <p className="font-medium text-green-600">৳{inv.actualEarnings.toLocaleString()}</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-slate-400">{inv.startDate} to {inv.endDate || 'Ongoing'}</span>
                      <span className="capitalize">{inv.paymentMethod}</span>
                    </div>
                  </div>
                ))}
                {(!investor.investments || investor.investments.length === 0) && (
                  <div className="col-span-full text-center py-8 text-slate-400">
                    <TrendingUp className="w-12 h-12 mx-auto mb-2 opacity-50" />
                    <p>No investments yet</p>
                    <button className="mt-2 px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark">
                      Create First Investment
                    </button>
                  </div>
                )}
              </div>
            </div>
          )}

          {activeTab === 'financial' && (
            <div className="space-y-6">
              <div className="grid lg:grid-cols-2 gap-6">
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold text-slate-800">Bank Details</h3>
                    <button onClick={() => {
                      setEditingBank({
                        bankName: investor.bankName || '',
                        bankAccountName: investor.bankAccountName || '',
                        bankAccountNumber: investor.bankAccountNumber || '',
                        bankBranch: investor.bankBranch || '',
                        bankRouting: investor.bankRouting || ''
                      });
                      setShowBankModal(true);
                    }} className="text-sm text-investor hover:underline flex items-center gap-1">
                      <Edit className="w-4 h-4" /> {investor.bankName ? 'Edit' : 'Add'}
                    </button>
                  </div>
                  <div className="space-y-3">
                    {investor.bankName ? (
                      <>
                        <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                          <Banknote className="w-5 h-5 text-slate-400" />
                          <div className="flex-1">
                            <p className="text-xs text-slate-500">Bank</p>
                            <p className="font-medium text-slate-700">{investor.bankName}</p>
                            <p className="text-xs text-slate-400">{investor.bankBranch}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                          <CreditCard className="w-5 h-5 text-slate-400" />
                          <div className="flex-1">
                            <p className="text-xs text-slate-500">Account</p>
                            <p className="font-medium text-slate-700">{investor.bankAccountName}</p>
                            <p className="text-xs text-slate-400">{investor.bankAccountNumber}</p>
                            {investor.bankRouting && <p className="text-xs text-slate-400">Routing: {investor.bankRouting}</p>}
                          </div>
                        </div>
                      </>
                    ) : (
                      <div className="text-center py-8 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                        <Banknote className="w-8 h-8 mx-auto mb-2 opacity-50" />
                        <p className="text-sm">No bank details added</p>
                      </div>
                    )}
                  </div>
                </div>

                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold text-slate-800">Mobile Banking</h3>
                    <button onClick={() => {
                      setEditingMobileBanking({ provider: '', number: '', isPrimary: !investor.mobileBanking });
                      setEditingMobileIndex(null);
                      setShowMobileBankingModal(true);
                    }} className="text-sm text-investor hover:underline flex items-center gap-1">
                      <Plus className="w-4 h-4" /> Add
                    </button>
                  </div>
                  <div className="space-y-3">
                    {investor.mobileBanking ? (
                      <div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
                        <Phone className="w-5 h-5 text-purple-500" />
                        <div className="flex-1">
                          <p className="text-xs text-purple-600">Primary</p>
                          <p className="font-medium text-slate-700">{investor.mobileBanking}</p>
                          <p className="text-xs text-slate-400">{investor.mobileBankingNumber}</p>
                        </div>
                        <button onClick={() => {
                          setEditingMobileBanking({ provider: investor.mobileBanking || '', number: investor.mobileBankingNumber || '', isPrimary: true });
                          setEditingMobileIndex(-1);
                          setShowMobileBankingModal(true);
                        }} className="p-1 hover:bg-purple-100 rounded">
                          <Edit className="w-4 h-4 text-purple-500" />
                        </button>
                      </div>
                    ) : null}
                    {investor.additionalMobileBanking?.map((mb, idx) => (
                      <div key={idx} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                        <Phone className="w-5 h-5 text-slate-400" />
                        <div className="flex-1">
                          <p className="text-xs text-slate-500">{mb.provider}</p>
                          <p className="font-medium text-slate-700">{mb.number}</p>
                        </div>
                        {mb.verified ? (
                          <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Verified</span>
                        ) : (
                          <span className="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded-full">Pending</span>
                        )}
                        <button onClick={() => {
                          setEditingMobileBanking({ provider: mb.provider, number: mb.number, isPrimary: false });
                          setEditingMobileIndex(idx);
                          setShowMobileBankingModal(true);
                        }} className="p-1 hover:bg-slate-200 rounded">
                          <Edit className="w-4 h-4 text-slate-400" />
                        </button>
                        <button onClick={() => alert(`Delete mobile banking ${mb.provider}`)} className="p-1 hover:bg-red-50 rounded">
                          <Trash2 className="w-4 h-4 text-red-400" />
                        </button>
                      </div>
                    ))}
                    {(!investor.mobileBanking && (!investor.additionalMobileBanking || investor.additionalMobileBanking.length === 0)) && (
                      <div className="text-center py-8 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                        <Phone className="w-8 h-8 mx-auto mb-2 opacity-50" />
                        <p className="text-sm">No mobile banking added</p>
                      </div>
                    )}
                  </div>

                  <div className="flex items-center justify-between mb-4 mt-6">
                    <h3 className="font-semibold text-slate-800">Tax Information</h3>
                    <button onClick={() => {
                      setEditingTax({
                        tinNumber: investor.tinNumber || '',
                        passportNumber: investor.passportNumber || ''
                      });
                      setShowTaxModal(true);
                    }} className="text-sm text-investor hover:underline flex items-center gap-1">
                      <Edit className="w-4 h-4" /> {investor.tinNumber || investor.passportNumber ? 'Edit' : 'Add'}
                    </button>
                  </div>
                  <div className="space-y-3">
                    {investor.tinNumber || investor.passportNumber ? (
                      <>
                        {investor.tinNumber && (
                          <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                            <FileText className="w-5 h-5 text-slate-400" />
                            <div>
                              <p className="text-xs text-slate-500">TIN</p>
                              <p className="font-medium text-slate-700">{investor.tinNumber}</p>
                            </div>
                          </div>
                        )}
                        {investor.passportNumber && (
                          <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                            <FileText className="w-5 h-5 text-slate-400" />
                            <div>
                              <p className="text-xs text-slate-500">Passport</p>
                              <p className="font-medium text-slate-700">{investor.passportNumber}</p>
                            </div>
                          </div>
                        )}
                      </>
                    ) : (
                      <div className="text-center py-8 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                        <FileText className="w-8 h-8 mx-auto mb-2 opacity-50" />
                        <p className="text-sm">No tax info added</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              <div>
                <h3 className="font-semibold text-slate-800 mb-4">Investment Summary</h3>
                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                  <div className="bg-purple-50 rounded-lg p-4">
                    <p className="text-sm text-purple-600">Total Invested</p>
                    <p className="text-xl font-bold text-purple-700">৳{investor.totalInvested.toLocaleString()}</p>
                  </div>
                  <div className="bg-green-50 rounded-lg p-4">
                    <p className="text-sm text-green-600">Total Earnings</p>
                    <p className="text-xl font-bold text-green-700">৳{investor.totalEarnings.toLocaleString()}</p>
                  </div>
                  <div className="bg-amber-50 rounded-lg p-4">
                    <p className="text-sm text-amber-600">Pending Earnings</p>
                    <p className="text-xl font-bold text-amber-700">৳{investor.pendingEarnings.toLocaleString()}</p>
                  </div>
                  <div className="bg-slate-50 rounded-lg p-4">
                    <p className="text-sm text-slate-600">Total Withdrawn</p>
                    <p className="text-xl font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'transactions' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">All Transactions</h3>
                <div className="flex gap-2">
                  <button onClick={() => alert('Withdrawal request modal would open here')} className="py-2 px-3 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 flex items-center gap-1">
                    <Banknote className="w-4 h-4" /> Request Withdrawal
                  </button>
                  <button className="py-2 px-3 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-1">
                    <Download className="w-4 h-4" /> Export
                  </button>
                </div>
              </div>

              <div className="mb-6">
                <h4 className="font-semibold text-slate-700 mb-3">Pending Withdrawals</h4>
                <div className="space-y-2">
                  {investorTransactions.filter(t => t.type === 'withdrawal' && t.status === 'pending').map(tx => (
                    <div key={tx.id} className="flex items-center justify-between p-4 bg-amber-50 border border-amber-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                          <Banknote className="w-6 h-6 text-red-600" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-700">{tx.description}</p>
                          <p className="text-xs text-amber-600">Ref: {tx.referenceNumber || tx.id} • {tx.createdAt}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="text-lg font-bold text-red-600">-৳{tx.amount.toLocaleString()}</p>
                        <span className="text-xs font-medium px-2 py-1 rounded-full bg-amber-100 text-amber-700">
                          Pending
                        </span>
                      </div>
                    </div>
                  ))}
                  {investorTransactions.filter(t => t.type === 'withdrawal' && t.status === 'pending').length === 0 && (
                    <div className="text-center py-4 text-slate-400 border border-dashed border-slate-200 rounded-lg">
                      <p className="text-sm">No pending withdrawals</p>
                    </div>
                  )}
                </div>
              </div>

              <div>
                <h4 className="font-semibold text-slate-700 mb-3">Transaction History</h4>
                <div className="space-y-2">
                  {investorTransactions.map(tx => (
                    <div key={tx.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' ? 'bg-green-100' :
                          tx.type === 'withdrawal' ? 'bg-red-100' :
                            tx.type === 'investment' ? 'bg-purple-100' :
                              tx.type === 'referral_bonus' ? 'bg-yellow-100' :
                                tx.type === 'adjustment' || tx.type === 'penalty' ? 'bg-orange-100' : 'bg-blue-100'
                          }`}>
                          <DollarSign className={`w-5 h-5 ${tx.type === 'earning' || tx.type === 'bike_earning' ? 'text-green-600' :
                            tx.type === 'withdrawal' ? 'text-red-600' :
                              tx.type === 'investment' ? 'text-purple-600' :
                                tx.type === 'referral_bonus' ? 'text-yellow-600' :
                                  tx.type === 'adjustment' || tx.type === 'penalty' ? 'text-orange-600' : 'text-blue-600'
                            }`} />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-700">{tx.description}</p>
                          <div className="flex items-center gap-2">
                            <p className="text-xs text-slate-400">{tx.createdAt}</p>
                            {tx.referenceNumber && (
                              <button
                                onClick={() => {
                                  const getAccountingInfo = (type: string, amount: number) => {
                                    if (type === 'investment') {
                                      return {
                                        debitAccount: 'Bank - City Bank (1200)',
                                        creditAccount: 'Investor Liabilities (2200)',
                                        amount: amount
                                      };
                                    } else if (type === 'earning' || type === 'bike_earning' || type === 'investment_return') {
                                      return {
                                        debitAccount: 'Investor Liabilities (2200)',
                                        creditAccount: 'Rental Income (4200)',
                                        amount: amount
                                      };
                                    } else if (type === 'withdrawal') {
                                      return {
                                        debitAccount: 'Investor Liabilities (2200)',
                                        creditAccount: 'Bank - City Bank (1200)',
                                        amount: amount
                                      };
                                    }
                                    return {
                                      debitAccount: 'N/A',
                                      creditAccount: 'N/A',
                                      amount: amount
                                    };
                                  };
                                  const accounting = getAccountingInfo(tx.type, tx.amount);
                                  setSelectedInvoice({
                                    reference: tx.referenceNumber,
                                    date: tx.createdAt,
                                    type: tx.type,
                                    amount: tx.amount,
                                    description: tx.description,
                                    status: tx.status,
                                    investorName: investor.name,
                                    investorId: investor.id,
                                    debitAccount: accounting.debitAccount,
                                    creditAccount: accounting.creditAccount
                                  });
                                  setShowInvoiceModal(true);
                                }}
                                className="text-xs text-investor hover:underline flex items-center gap-1"
                              >
                                • Ref: {tx.referenceNumber}
                                <BookOpen className="w-3 h-3" />
                              </button>
                            )}
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className={`text-sm font-medium ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? 'text-green-600' :
                          tx.type === 'withdrawal' || tx.type === 'penalty' || tx.type === 'adjustment' ? 'text-red-600' : 'text-blue-600'
                          }`}>
                          {tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? '+' : tx.type === 'withdrawal' || tx.type === 'penalty' || tx.type === 'adjustment' ? '-' : '+'}৳{tx.amount.toLocaleString()}
                        </p>
                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${tx.status === 'completed' ? 'bg-green-100 text-green-700' :
                          tx.status === 'pending' ? 'bg-amber-100 text-amber-700' :
                            tx.status === 'cancelled' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-700'
                          }`}>
                          {tx.status}
                        </span>
                      </div>
                    </div>
                  ))}
                  {investorTransactions.length === 0 && (
                    <div className="text-center py-8 text-slate-400">
                      <DollarSign className="w-12 h-12 mx-auto mb-2 opacity-50" />
                      <p>No transactions yet</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {activeTab === 'documents' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">KYC Documents</h3>
                <button onClick={() => setShowDocModal(true)} className="py-2 px-3 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-1">
                  <Plus className="w-4 h-4" /> Upload Document
                </button>
              </div>

              <div className="space-y-2 mb-6">
                {investor.kycDocuments?.map((doc, idx) => (
                  <div key={idx} className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${doc.type === 'nid' ? 'bg-blue-100' :
                        doc.type === 'passport' ? 'bg-purple-100' :
                          doc.type === 'bank_statement' ? 'bg-green-100' :
                            doc.type === 'tin_certificate' ? 'bg-amber-100' : 'bg-slate-100'
                        }`}>
                        <FileText className={`w-6 h-6 ${doc.type === 'nid' ? 'text-blue-600' :
                          doc.type === 'passport' ? 'text-purple-600' :
                            doc.type === 'bank_statement' ? 'text-green-600' :
                              doc.type === 'tin_certificate' ? 'text-amber-600' : 'text-slate-600'
                          }`} />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-700 capitalize">{doc.type.replace('_', ' ')}</p>
                        <p className="text-xs text-slate-400">{doc.number || 'No document number'} • Uploaded: {doc.uploadedAt || 'N/A'}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {doc.verified ? (
                        <span className="flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-full bg-green-100 text-green-700">
                          <CheckCircle className="w-3 h-3" /> Verified
                        </span>
                      ) : (
                        <span className="flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-full bg-amber-100 text-amber-700">
                          <Clock className="w-3 h-3" /> Pending Review
                        </span>
                      )}
                      <button onClick={() => alert('Edit document')} className="p-2 hover:bg-slate-200 rounded-lg">
                        <Edit className="w-4 h-4 text-slate-400" />
                      </button>
                      <button onClick={() => { if (confirm('Delete this document?')) alert('Document deleted'); }} className="p-2 hover:bg-red-50 rounded-lg">
                        <Trash2 className="w-4 h-4 text-red-400" />
                      </button>
                    </div>
                  </div>
                ))}
                {(!investor.kycDocuments || investor.kycDocuments.length === 0) && (
                  <div className="text-center py-12 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                    <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
                    <p>No documents uploaded yet</p>
                  </div>
                )}
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h4 className="font-semibold text-blue-800 mb-2">KYC Status: {investor.kycStatus.toUpperCase()}</h4>
                <p className="text-sm text-blue-700">
                  {investor.kycStatus === 'verified'
                    ? 'All documents have been verified. Investor is fully verified.'
                    : investor.kycStatus === 'pending'
                      ? 'Documents are under review. Verification typically takes 24-48 hours.'
                      : 'Please upload required documents for verification.'}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>

      {showAssignBikeModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Assign Bike to Investor</h2>
              <button onClick={() => setShowAssignBikeModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="p-5">
              <label className="text-sm font-medium text-slate-600 mb-1 block">Select Bike</label>
              <select
                value={selectedBikeId}
                onChange={(e) => setSelectedBikeId(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              >
                <option value="">Select a bike</option>
                {availableBikesForAssignment.map(bike => (
                  <option key={bike.id} value={bike.id}>
                    {bike.model} - {bike.plateNumber} (৳{bike.purchasePrice?.toLocaleString() || 0})
                  </option>
                ))}
              </select>
            </div>

            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowAssignBikeModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button onClick={handleAssignBike} disabled={!selectedBikeId} className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark disabled:opacity-50">Assign Bike</button>
            </div>
          </div>
        </div>
      )}

      {showCreateInvestmentModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Create New Investment</h2>
              <button onClick={() => setShowCreateInvestmentModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="p-5 overflow-y-auto flex-1 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Plan Name *</label>
                  <input
                    type="text"
                    value={newInvestment.planName}
                    onChange={(e) => setNewInvestment({ ...newInvestment, planName: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="e.g., Gold EV Fleet 2024"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Plan Type *</label>
                  <select
                    value={newInvestment.planType}
                    onChange={(e) => setNewInvestment({ ...newInvestment, planType: e.target.value as any, expectedRoi: e.target.value === 'silver' ? 12 : e.target.value === 'gold' ? 15 : e.target.value === 'platinum' ? 18 : 20 })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  >
                    <option value="silver">Silver (12% ROI)</option>
                    <option value="gold">Gold (15% ROI)</option>
                    <option value="platinum">Platinum (18% ROI)</option>
                    <option value="diamond">Diamond (20% ROI)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Select Bikes</label>
                <div className="grid grid-cols-2 gap-2 max-h-32 overflow-y-auto border border-slate-200 rounded-lg p-2">
                  {availableBikesForAssignment.map(bike => (
                    <label key={bike.id} className="flex items-center gap-2 p-2 hover:bg-slate-50 rounded cursor-pointer">
                      <input
                        type="checkbox"
                        checked={newInvestment.selectedBikeIds.includes(bike.id)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setNewInvestment({ ...newInvestment, selectedBikeIds: [...newInvestment.selectedBikeIds, bike.id] });
                          } else {
                            setNewInvestment({ ...newInvestment, selectedBikeIds: newInvestment.selectedBikeIds.filter(id => id !== bike.id) });
                          }
                        }}
                        className="rounded text-investor"
                      />
                      <span className="text-sm">{bike.model} ({bike.plateNumber})</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Investment Amount (৳) *</label>
                  <input
                    type="number"
                    value={newInvestment.totalInvestment}
                    onChange={(e) => setNewInvestment({ ...newInvestment, totalInvestment: Number(e.target.value), monthlyReturn: Math.round(Number(e.target.value) * newInvestment.expectedRoi / 100 / 12) })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="0"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Monthly Return (৳)</label>
                  <input
                    type="number"
                    value={newInvestment.monthlyReturn}
                    onChange={(e) => setNewInvestment({ ...newInvestment, monthlyReturn: Number(e.target.value) })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="0"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Expected ROI (%)</label>
                  <input
                    type="number"
                    value={newInvestment.expectedRoi}
                    onChange={(e) => setNewInvestment({ ...newInvestment, expectedRoi: Number(e.target.value) })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="15"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Start Date *</label>
                  <input
                    type="date"
                    value={newInvestment.startDate}
                    onChange={(e) => setNewInvestment({ ...newInvestment, startDate: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">End Date</label>
                  <input
                    type="date"
                    value={newInvestment.endDate}
                    onChange={(e) => setNewInvestment({ ...newInvestment, endDate: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Payment Method *</label>
                  <select
                    value={newInvestment.paymentMethod}
                    onChange={(e) => setNewInvestment({ ...newInvestment, paymentMethod: e.target.value as any })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  >
                    <option value="bank">Bank Transfer</option>
                    <option value="mobile">Mobile Banking</option>
                    <option value="cash">Cash</option>
                    <option value="cheque">Cheque</option>
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-600 mb-1 block">Transaction Reference</label>
                  <input
                    type="text"
                    value={newInvestment.transactionReference}
                    onChange={(e) => setNewInvestment({ ...newInvestment, transactionReference: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    placeholder="Auto-generated if empty"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Notes</label>
                <textarea
                  value={newInvestment.notes}
                  onChange={(e) => setNewInvestment({ ...newInvestment, notes: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  rows={2}
                  placeholder="Additional notes..."
                />
              </div>

              {(() => {
                const getDebitAccountDisplay = (method: string) => {
                  switch (method) {
                    case 'bank': return 'Bank - City Bank (1200)';
                    case 'cash': return 'Cash in Hand (1100)';
                    case 'mobile': return 'bKash Business (1300)';
                    case 'cheque': return 'Cheque Receivable (1410)';
                    default: return 'Bank - City Bank (1200)';
                  }
                };
                const debitDisplay = getDebitAccountDisplay(newInvestment.paymentMethod);

                return (
                  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div className="flex items-center gap-2 mb-3">
                      <TrendingUp className="w-5 h-5 text-green-600" />
                      <h4 className="font-semibold text-green-800">Auto-Journal Entry</h4>
                    </div>
                    <div className="text-sm text-green-700 space-y-2">
                      <p className="text-xs text-green-600 uppercase font-medium mb-2">Double EntryAccounting</p>
                      <div className="flex items-center justify-between bg-white rounded p-2 border border-green-100">
                        <div>
                          <p className="font-medium">Debit (Dr)</p>
                          <p className="text-xs text-green-600">{debitDisplay}</p>
                        </div>
                        <p className="font-bold text-green-700">৳{newInvestment.totalInvestment.toLocaleString()}</p>
                      </div>
                      <div className="flex items-center justify-center py-1">
                        <div className="w-6 h-6 rounded-full bg-green-200 flex items-center justify-center">
                          <span className="text-green-600 text-xs">▼</span>
                        </div>
                      </div>
                      <div className="flex items-center justify-between bg-white rounded p-2 border border-green-100">
                        <div>
                          <p className="font-medium">Credit (Cr)</p>
                          <p className="text-xs text-green-600">Investor Liabilities (2200)</p>
                        </div>
                        <p className="font-bold text-green-700">৳{newInvestment.totalInvestment.toLocaleString()}</p>
                      </div>
                      <div className="mt-3 pt-2 border-t border-green-200">
                        <p className="text-xs text-green-600">Transaction Ref: Auto Generate</p>
                      </div>
                    </div>
                  </div>
                );
              })()}
            </div>

            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowCreateInvestmentModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={handleCreateInvestment}
                disabled={!newInvestment.planName || !newInvestment.totalInvestment}
                className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark disabled:opacity-50 flex items-center gap-2"
              >
                <TrendingUp className="w-4 h-4" /> Create Investment
              </button>
            </div>
          </div>
        </div>
      )}

      {showBankModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Bank Details</h2>
              <button onClick={() => setShowBankModal(false)} className="p-2 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>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Bank Name</label>
                <input type="text" value={editingBank.bankName} onChange={(e) => setEditingBank({ ...editingBank, bankName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="e.g., Standard Chartered Bank" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Branch</label>
                <input type="text" value={editingBank.bankBranch} onChange={(e) => setEditingBank({ ...editingBank, bankBranch: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="e.g., Gulshan Branch" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Account Name</label>
                <input type="text" value={editingBank.bankAccountName} onChange={(e) => setEditingBank({ ...editingBank, bankAccountName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Account holder name" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Account Number</label>
                <input type="text" value={editingBank.bankAccountNumber} onChange={(e) => setEditingBank({ ...editingBank, bankAccountNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Account number" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Routing Number</label>
                <input type="text" value={editingBank.bankRouting} onChange={(e) => setEditingBank({ ...editingBank, bankRouting: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Routing number" />
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-between">
              {investor.bankName && (
                <button onClick={() => { alert('Bank details deleted'); setShowBankModal(false); }} className="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm hover:bg-red-50">Delete</button>
              )}
              <div className="flex gap-2 ml-auto">
                <button onClick={() => setShowBankModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
                <button onClick={() => { alert('Bank details saved!'); setShowBankModal(false); }} className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark">Save</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {showMobileBankingModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">{editingMobileIndex !== null ? 'Edit' : 'Add'} Mobile Banking</h2>
              <button onClick={() => setShowMobileBankingModal(false)} className="p-2 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>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Provider</label>
                <select value={editingMobileBanking.provider} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, provider: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                  <option value="">Select Provider</option>
                  <option value="Bkash">Bkash</option>
                  <option value="Nagad">Nagad</option>
                  <option value="Rocket">Rocket</option>
                  <option value="Upay">Upay</option>
                </select>
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Mobile Number</label>
                <input type="text" value={editingMobileBanking.number} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="01XXXXXXXXX" />
              </div>
              <div className="flex items-center gap-2">
                <input type="checkbox" checked={editingMobileBanking.isPrimary} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, isPrimary: e.target.checked })} className="rounded text-investor" />
                <span className="text-sm text-slate-600">Set as primary account</span>
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowMobileBankingModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button onClick={() => { alert('Mobile banking saved!'); setShowMobileBankingModal(false); }} className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark">Save</button>
            </div>
          </div>
        </div>
      )}

      {showTaxModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Tax Information</h2>
              <button onClick={() => setShowTaxModal(false)} className="p-2 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>
                <label className="text-sm font-medium text-slate-600 mb-1 block">TIN Number</label>
                <input type="text" value={editingTax.tinNumber} onChange={(e) => setEditingTax({ ...editingTax, tinNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="TIN Number" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Passport Number</label>
                <input type="text" value={editingTax.passportNumber} onChange={(e) => setEditingTax({ ...editingTax, passportNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Passport Number" />
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-between">
              {(investor.tinNumber || investor.passportNumber) && (
                <button onClick={() => { alert('Tax info deleted'); setShowTaxModal(false); }} className="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm hover:bg-red-50">Delete All</button>
              )}
              <div className="flex gap-2 ml-auto">
                <button onClick={() => setShowTaxModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
                <button onClick={() => { alert('Tax info saved!'); setShowTaxModal(false); }} className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark">Save</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {showDocModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Upload Document</h2>
              <button onClick={() => setShowDocModal(false)} className="p-2 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>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Document Type</label>
                <select value={newDoc.type} onChange={(e) => setNewDoc({ ...newDoc, type: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                  <option value="nid">NID Card</option>
                  <option value="passport">Passport</option>
                  <option value="bank_statement">Bank Statement</option>
                  <option value="tin_certificate">TIN Certificate</option>
                  <option value="trade_license">Trade License</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Document Number</label>
                <input type="text" value={newDoc.number} onChange={(e) => setNewDoc({ ...newDoc, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Document number (optional)" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Upload File</label>
                <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 text-center">
                  <FileText className="w-10 h-10 text-slate-300 mx-auto mb-2" />
                  <p className="text-sm text-slate-500 mb-2">Click to upload or drag and drop</p>
                  <p className="text-xs text-slate-400">PNG, JPG, PDF up to 10MB</p>
                </div>
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button onClick={() => { alert('Document uploaded successfully!'); setShowDocModal(false); }} className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark">Upload</button>
            </div>
          </div>
        </div>
      )}

      {showJournalModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Journal Records</h2>
              <button onClick={() => setShowJournalModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>
            <div className="p-5 overflow-y-auto flex-1">
              {investorJournals.length > 0 ? (
                <div className="space-y-3">
                  {investorJournals.map((journal, idx) => (
                    <div key={idx} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-mono text-slate-500">{journal.reference}</span>
                          <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700">Auto</span>
                        </div>
                        <span className="text-xs text-slate-500">{journal.date}</span>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between bg-white p-2 rounded border border-slate-200">
                          <div>
                            <p className="text-sm font-medium">Debit (Dr)</p>
                            <p className="text-xs text-slate-500">Bank - City Bank (1200)</p>
                          </div>
                          <p className="font-bold text-green-600">৳{journal.amount.toLocaleString()}</p>
                        </div>
                        <div className="flex items-center justify-center py-0.5">
                          <ArrowRight className="w-4 h-4 text-slate-400 rotate-90" />
                        </div>
                        <div className="flex items-center justify-between bg-white p-2 rounded border border-slate-200">
                          <div>
                            <p className="text-sm font-medium">Credit (Cr)</p>
                            <p className="text-xs text-slate-500">Investor Liabilities (2200)</p>
                          </div>
                          <p className="font-bold text-red-600">৳{journal.amount.toLocaleString()}</p>
                        </div>
                      </div>
                      <div className="mt-2 pt-2 border-t border-slate-200 text-xs text-slate-500">
                        {journal.description}
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-slate-400">
                  <BookOpen className="w-12 h-12 mx-auto mb-2 opacity-50" />
                  <p>No journal records yet</p>
                  <p className="text-sm">Create an investment to see auto-journal entries</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {showInvoiceModal && selectedInvoice && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Invoice</h2>
              <button onClick={() => setShowInvoiceModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="p-6" id="invoice-content">
              <div className="text-center border-b border-slate-200 pb-4 mb-4">
                <h1 className="text-xl font-extrabold text-investor">JAIBEN Mobility Ltd</h1>
                <p className="text-xs text-slate-500">EV Rental & Investment Company</p>
              </div>

              <div className="flex justify-between mb-4">
                <div>
                  <p className="text-xs text-slate-500">Invoice No</p>
                  <p className="text-sm font-medium">{selectedInvoice.reference}</p>
                </div>
                <div className="text-right">
                  <p className="text-xs text-slate-500">Date</p>
                  <p className="text-sm font-medium">{selectedInvoice.date}</p>
                </div>
              </div>

              <div className="mb-4">
                <p className="text-xs text-slate-500">Investor</p>
                <p className="text-sm font-medium">{selectedInvoice.investorName}</p>
                <p className="text-xs text-slate-400">{selectedInvoice.investorId}</p>
              </div>

              <table className="w-full mb-4">
                <thead>
                  <tr className="border-b border-slate-200">
                    <th className="text-left py-2 text-xs text-slate-500">Description</th>
                    <th className="text-right py-2 text-xs text-slate-500">Amount</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-slate-100">
                    <td className="py-3 text-sm">{selectedInvoice.description}</td>
                    <td className="py-3 text-sm text-right font-medium">৳{selectedInvoice.amount.toLocaleString()}</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td className="py-2 text-sm font-medium">Total</td>
                    <td className="py-2 text-sm font-bold text-right">৳{selectedInvoice.amount.toLocaleString()}</td>
                  </tr>
                </tfoot>
              </table>

              <div className="flex justify-between mb-2">
                <span className="text-xs text-slate-500">Status</span>
                <span className={`text-xs px-2 py-1 rounded-full ${selectedInvoice.status === 'completed' ? 'bg-green-100 text-green-700' :
                  selectedInvoice.status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-700'
                  }`}>
                  {selectedInvoice.status}
                </span>
              </div>

              <div className="mt-4 pt-4 border-t border-slate-200">
                <p className="text-xs text-slate-500 mb-2">Double Entry Accounting (Journal)</p>
                <div className="bg-slate-50 rounded-lg p-3 border border-slate-200">
                  <div className="flex items-center justify-between mb-2">
                    <div>
                      <p className="text-xs font-medium">Debit (Dr)</p>
                      <p className="text-xs text-slate-500">{selectedInvoice.debitAccount || 'N/A'}</p>
                    </div>
                    <p className="text-sm font-bold">৳{selectedInvoice.amount.toLocaleString()}</p>
                  </div>
                  <div className="flex items-center justify-center py-1">
                    <ArrowRight className="w-4 h-4 text-slate-400 rotate-90" />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs font-medium">Credit (Cr)</p>
                      <p className="text-xs text-slate-500">{selectedInvoice.creditAccount || 'N/A'}</p>
                    </div>
                    <p className="text-sm font-bold">৳{selectedInvoice.amount.toLocaleString()}</p>
                  </div>
                </div>
              </div>

              <div className="mt-6 pt-4 border-t border-slate-200 text-center">
                <p className="text-xs text-slate-400">Thank you for your investment!</p>
                <p className="text-xs text-slate-400">Generated on {new Date().toLocaleDateString()}</p>
              </div>
            </div>

            <div className="p-5 border-t border-slate-100 flex justify-between">
              <button
                onClick={() => window.print()}
                className="px-4 py-2 bg-investor text-white rounded-lg text-sm hover:bg-investor-dark flex items-center gap-2"
              >
                <Printer className="w-4 h-4" /> Print
              </button>
              <button
                onClick={() => {
                  import('jspdf').then(jsPDF => {
                    const doc = new jsPDF.default();
                    doc.setFontSize(18);
                    doc.setTextColor(6, 95, 70);
                    doc.text('JAIBEN Mobility Ltd', 20, 20);
                    doc.setFontSize(12);
                    doc.setTextColor(0);
                    doc.text('Invoice: ' + selectedInvoice.reference, 20, 30);
                    doc.text('Date: ' + selectedInvoice.date, 20, 38);
                    doc.text('Investor: ' + selectedInvoice.investorName, 20, 46);
                    doc.text('Description: ' + selectedInvoice.description, 20, 54);
                    doc.text('Amount: ৳' + selectedInvoice.amount.toLocaleString(), 20, 64);
                    doc.text('Status: ' + selectedInvoice.status, 20, 72);
                    if (selectedInvoice.debitAccount) {
                      doc.setFontSize(10);
                      doc.setTextColor(100);
                      doc.text('Double Entry Accounting:', 20, 85);
                      doc.text('Dr: ' + selectedInvoice.debitAccount + '  ৳' + selectedInvoice.amount.toLocaleString(), 20, 93);
                      doc.text('Cr: ' + selectedInvoice.creditAccount + '  ৳' + selectedInvoice.amount.toLocaleString(), 20, 101);
                    }
                    doc.setFontSize(9);
                    doc.setTextColor(150);
                    doc.text('Thank you for your investment!', 20, 115);
                    doc.save(`invoice-${selectedInvoice.reference}.pdf`);
                  });
                }}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2"
              >
                <Download className="w-4 h-4" /> PDF
              </button>
              <button onClick={() => setShowInvoiceModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Close</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}