'use client';

import { useState } from 'react';
import {
  Camera, Save, CheckCircle, Upload, Plus, Trash2,
  ShieldCheck, CreditCard, Building2, Smartphone, User, MapPin, Phone, Briefcase,
  Calendar, Mail, FileText, ChevronRight, Edit, Heart, PhoneCall, X, Eye, EyeOff,
  Lock, Key, Shield, Activity, LogOut, AlertCircle, Trash, Pencil, Home,
  Banknote,
  TrashIcon
} from 'lucide-react';
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';

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 InvestorProfilePage() {
  const investor = investors.find(i => i.id === 'inv1') || investors[0];
  const [activeTab, setActiveTab] = useState('personal');
  const [editingSection, setEditingSection] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<any>({});
  const [showPassword, setShowPassword] = useState({ current: false, new: false, confirm: false });
  const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
  const [showUploadDocModal, setShowUploadDocModal] = useState(false);
  const [uploadDocForm, setUploadDocForm] = useState({ docType: '', docNumber: '', docFile: null as File | null });

  const [showAddBankModal, setShowAddBankModal] = useState(false);
  const [showEditBankModal, setShowEditBankModal] = useState(false);
  const [showDeleteBankModal, setShowDeleteBankModal] = useState(false);
  const [editingBank, setEditingBank] = useState<any>({ id: '', bankName: '', accountName: '', accountNumber: '', branch: '', routing: '', isPrimary: false });
  const [bankToDelete, setBankToDelete] = useState<any>(null);

  const [showAddMobileModal, setShowAddMobileModal] = useState(false);
  const [showEditMobileModal, setShowEditMobileModal] = useState(false);
  const [showDeleteMobileModal, setShowDeleteMobileModal] = useState(false);
  const [showTaxModal, setShowTaxModal] = useState(false);
  const [editingMobile, setEditingMobile] = useState({ provider: '', number: '', isPrimary: false });
  const [editingMobileIndex, setEditingMobileIndex] = useState<number | null>(null);
  const [editingTax, setEditingTax] = useState({ tinNumber: '', passportNumber: '' });
  const [mobileToDelete, setMobileToDelete] = useState<any>(null);

  const [newBankForm, setNewBankForm] = useState({ bankName: '', accountName: '', accountNumber: '', branch: '', routing: '', isPrimary: false });
  const [newMobileForm, setNewMobileForm] = useState({ provider: '', number: '' });

  const currentBalance = investor.totalEarnings - investor.totalWithdrawn - investor.pendingEarnings;

  const sessionHistory = [
    { id: 1, device: 'iPhone 14 Pro', location: 'Dhaka, Bangladesh', time: '2 hours ago', current: true },
    { id: 2, device: 'Chrome on Windows', location: 'Dhaka, Bangladesh', time: '2 days ago', current: false },
  ];

  const handlePasswordChange = () => {
    if (passwordForm.new !== passwordForm.confirm) {
      toast.error('Passwords do not match!');
      return;
    }
    if (passwordForm.new.length < 8) {
      toast.error('Password must be at least 8 characters!');
      return;
    }
    toast.success('Password changed successfully!');
    setPasswordForm({ current: '', new: '', confirm: '' });
  };

  const handleSaveBank = () => {
    toast.success('Bank account saved successfully!');
    setShowAddBankModal(false);
    setShowEditBankModal(false);
    setNewBankForm({ bankName: '', accountName: '', accountNumber: '', branch: '', routing: '', isPrimary: false });
  };

  const handleDeleteBank = () => {
    toast.success('Bank account deleted!');
    setShowDeleteBankModal(false);
  };

  const handleSaveMobile = () => {
    toast.success('Mobile banking saved successfully!');
    setShowAddMobileModal(false);
    setShowEditMobileModal(false);
    setNewMobileForm({ provider: '', number: '' });
  };

  const handleDeleteMobile = () => {
    toast.success('Mobile banking deleted!');
    setShowDeleteMobileModal(false);
  };

  const tabs = [
    { id: 'personal', label: 'Personal Info', icon: User },
    { id: 'nominee', label: 'Nominee & Emergency', icon: Heart },
    { id: 'financial', label: 'Financial', icon: CreditCard },
    { id: 'kyc', label: 'KYC', icon: FileText },
    { id: 'security', label: 'Security', icon: Lock },
  ];

  return (
    <div className="p-4 sm:p-5 bg-slate-50 min-h-screen">
      <div className="max-w-8xl mx-auto">
        {/* Profile Header */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4 sm:mb-6">
          <div className="p-4 sm:p-5 flex flex-col sm:flex-row items-start gap-4 sm:gap-5">
            <div className="relative group shrink-0">
              <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg">
                <span className="text-xl sm:text-2xl font-bold text-white">{investor.name.charAt(0)}</span>
              </div>
              <label className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm: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-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
                <input type="file" accept="image/*" className="hidden" />
              </label>
            </div>

            <div className="flex-1 w-full">
              <div className="flex flex-wrap items-center gap-2 mb-2">
                <h1 className="text-xl sm:text-2xl font-bold text-slate-800">{investor.name}</h1>
                <span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.kycStatus === 'verified' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
                  <ShieldCheck className="w-3 h-3 inline mr-1" /> KYC {investor.kycStatus}
                </span>
                <span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
                  {investor.status}
                </span>
                <span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${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>
              <p className="text-xs sm:text-sm text-slate-500 mb-2">{investor.id} &bull; {investor.email}</p>
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                <span className="text-xs font-medium px-2 py-0.5 rounded bg-purple-50 text-purple-700">Ref: {investor.referralCode}</span>
                <span className="text-xs text-slate-400">{investor.totalReferrals} Referrals</span>
                <span className="text-xs text-slate-400">&bull; {investor.investments?.length || 0} Investments</span>
                <span className="text-xs text-slate-400">&bull; Referral Earnings: ৳{investor.referralEarnings?.toLocaleString() || 0}</span>
              </div>
            </div>
          </div>

          <div className="border-t border-slate-100 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x divide-slate-100 bg-slate-50/50">
            <div className="p-3 sm:p-4 text-center">
              <p className="text-xs text-purple-600 font-medium">Invested</p>
              <p className="text-base sm:text-lg font-bold text-slate-800">৳{investor.totalInvested.toLocaleString()}</p>
            </div>
            <div className="p-3 sm:p-4 text-center">
              <p className="text-xs text-green-600 font-medium">Earnings</p>
              <p className="text-base sm:text-lg font-bold text-green-600">৳{investor.totalEarnings.toLocaleString()}</p>
            </div>
            <div className="p-3 sm:p-4 text-center">
              <p className="text-xs text-slate-600 font-medium">Withdrawn</p>
              <p className="text-base sm:text-lg font-bold text-slate-800">৳{investor.totalWithdrawn.toLocaleString()}</p>
            </div>
            <div className="p-3 sm:p-4 text-center bg-white border-x border-slate-100">
              <p className="text-xs text-investor font-medium">Balance</p>
              <p className="text-base sm:text-lg font-bold text-investor">৳{currentBalance.toLocaleString()}</p>
            </div>
            <div className="p-3 sm:p-4 text-center">
              <p className="text-xs text-slate-600 font-medium">Bikes</p>
              <p className="text-base sm:text-lg font-bold text-slate-800">{investor.activeBikes}</p>
            </div>
            <div className="p-3 sm:p-4 text-center">
              <p className="text-xs text-amber-600 font-medium">Pending</p>
              <p className="text-base sm:text-lg font-bold text-amber-600">৳{investor.pendingEarnings.toLocaleString()}</p>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-100 mb-4 sm:mb-6">
          <div className="border-b border-slate-100 p-2 flex overflow-x-auto scrollbar-hide justify-between sm:justify-start sm:gap-2 gap-auto ">
            {tabs.map(tab => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`shrink-0 flex items-center justify-center w-12 sm:w-auto px-3 sm:px-4 py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${activeTab === tab.id ? 'bg-investor text-white shadow-md' : 'text-slate-500 hover:bg-slate-100'}`}
                >
                  <Icon className="w-4 h-4 sm:mr-2" />
                  <span className="hidden sm:inline">{tab.label}</span>
                </button>
              );
            })}
          </div>

          <div className="p-4 sm:p-5">
            {/* Personal Info Tab */}
            {activeTab === 'personal' && (
              <div className="flex flex-col lg:flex-row gap-4 lg:gap-6">
                <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 sm:grid-cols-2 gap-3">
                        <div>
                          <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>
                          <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="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>
                          <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" />
                        </div>
                        <div>
                          <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="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">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>
                    )}
                  </SectionCard>
                </div>

                <div className="flex-1 space-y-4">

                  <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] || '1205',
                        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-indigo-50" headerBorder="border-indigo-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] || '1205',
                        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</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</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>
                  <SectionCard title="Notes" icon={FileText} headerBg="bg-amber-50" headerBorder="border-amber-100"
                    editKey="note" editingSection={editingSection} setEditingSection={setEditingSection}
                    onEdit={() => setEditForm({ notes: investor.notes || '' })}
                    editForm={editForm} setEditForm={setEditForm}>
                    {editingSection === 'note' ? (
                      <div>
                        <textarea value={editForm.notes || ''} onChange={(e) => setEditForm({ ...editForm, notes: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={3} placeholder="Add notes about this investor..." />
                      </div>
                    ) : (
                      <p className="font-medium text-slate-700">{investor.notes || 'No notes added yet.'}</p>
                    )}
                  </SectionCard>
                </div>


              </div>

            )}

            {/* Nominee Tab */}
            {activeTab === 'nominee' && (
              <div className="flex flex-col lg:flex-row gap-4 lg:gap-6">
                <div className="flex-1">
                  <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 || '',
                      nomineeShare: (investor as any).nomineeShare || '',
                      nomineeAddress: (investor as any).nomineeAddress || ''
                    })} 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>
                </div>
                <div className="flex-1">
                  <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>
            )}

            {/* Financial Tab */}
            {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 Accounts ({(investor as any).bankAccounts?.length || 0})</h3>
                      <button onClick={() => { setEditingBank({ id: '', bankName: '', accountName: '', accountNumber: '', branch: '', routing: '', isPrimary: false }); setShowAddBankModal(true); }} className="text-sm text-investor hover:underline flex items-center gap-1">
                        <Plus className="w-4 h-4" /> Add Account
                      </button>
                    </div>
                    <div className="space-y-3">
                      {(investor as any).bankAccounts && (investor as any).bankAccounts.length > 0 ? (
                        (investor as any).bankAccounts.map((account: any) => (
                          <div key={account.id} className="p-4 bg-white border border-slate-200 rounded-xl hover:shadow-md transition-all">
                            <div className="flex items-start justify-between mb-3">
                              <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-lg flex items-center justify-center bg-slate-100">
                                  <Building2 className="w-5 h-5 text-slate-500" />
                                </div>
                                <div>
                                  <p className="font-semibold text-slate-800">{account.bankName}</p>
                                  <p className="text-xs text-slate-500">{account.branch}</p>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <button onClick={() => { setEditingBank(account); setShowEditBankModal(true); }} className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-500">
                                  <Edit className="w-4 h-4" />
                                </button>
                                <button onClick={() => { setBankToDelete(account); setShowDeleteBankModal(true); }} className="p-1.5 hover:bg-red-50 rounded-lg text-red-400">
                                  <Trash className="w-4 h-4" />
                                </button>
                              </div>
                            </div>
                            <div className="space-y-2 text-sm">
                              <div className="flex justify-between">
                                <span className="text-slate-500">Account Name</span>
                                <span className="font-medium text-slate-700">{account.accountName}</span>
                              </div>
                              <div className="flex justify-between">
                                <span className="text-slate-500">Account Number</span>
                                <span className="font-mono text-slate-700">{account.accountNumber}</span>
                              </div>
                              {account.routing && (
                                <div className="flex justify-between">
                                  <span className="text-slate-500">Routing</span>
                                  <span className="font-medium text-slate-700">{account.routing}</span>
                                </div>
                              )}
                            </div>
                          </div>
                        ))
                      ) : (
                        <div className="text-center py-10 border-2 border-dashed border-slate-200 rounded-xl">
                          <Building2 className="w-10 h-10 mx-auto mb-3 text-slate-300" />
                          <p className="text-sm text-slate-500 mb-2">No bank accounts added</p>
                          <button onClick={() => { setEditingBank({ id: '', bankName: '', accountName: '', accountNumber: '', branch: '', routing: '', isPrimary: false }); setShowAddBankModal(true); }} className="px-4 py-2 text-sm bg-investor text-white rounded-lg hover:bg-investor-dark">
                            Add First Account
                          </button>
                        </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={() => { setEditingMobile({ provider: '', number: '', isPrimary: false }); setEditingMobileIndex(null); setShowAddMobileModal(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 as any).mobileBanking && (
                        <div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
                          <Smartphone className="w-5 h-5 text-purple-500" />
                          <div className="flex-1">
                            <p className="text-xs text-purple-600 font-medium">{(investor as any).mobileBanking}</p>
                            <p className="text-xs text-slate-400">{(investor as any).mobileBankingNumber}</p>
                          </div>
                          <button onClick={() => { setEditingMobile({ provider: (investor as any).mobileBanking || '', number: (investor as any).mobileBankingNumber || '', isPrimary: true }); setEditingMobileIndex(-1); setShowEditMobileModal(true); }} className="p-1 hover:bg-purple-100 rounded">
                            <Edit className="w-4 h-4 text-purple-500" />
                          </button>
                        </div>
                      )}
                      {(investor as any).additionalMobileBanking?.map((mb: any, idx: number) => (
                        <div key={idx} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                          <Smartphone 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={() => { setEditingMobile({ provider: mb.provider, number: mb.number, isPrimary: false }); setEditingMobileIndex(idx); setShowEditMobileModal(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">
                            <Trash className="w-4 h-4 text-red-400" />
                          </button>
                        </div>
                      ))}
                      {(!((investor as any).mobileBanking) && (!((investor as any).additionalMobileBanking) || ((investor as any).additionalMobileBanking).length === 0)) && (
                        <div className="text-center py-8 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                          <Smartphone 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 as any).passportNumber || '' }); setShowTaxModal(true); }} className="text-sm text-investor hover:underline flex items-center gap-1">
                        <Edit className="w-4 h-4" /> {investor.tinNumber || (investor as any).passportNumber ? 'Edit' : 'Add'}
                      </button>
                    </div>
                    <div className="space-y-3">
                      {investor.tinNumber || (investor as any).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 as any).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 as any).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>
            )}

            {/* KYC Tab */}
            {activeTab === 'kyc' && (
              <div className="space-y-4">
                <SectionCard title="KYC Documents" icon={FileText} headerBg="bg-green-50" headerBorder="border-green-100">
                  <div className="space-y-4">
                    <div className={`p-4 rounded-lg border ${investor.kycStatus === 'verified' ? 'bg-green-50 border-green-200' : 'bg-amber-50 border-amber-200'}`}>
                      <div className="flex items-center gap-3">
                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${investor.kycStatus === 'verified' ? 'bg-green-100' : 'bg-amber-100'}`}>
                          <ShieldCheck className={`w-5 h-5 ${investor.kycStatus === 'verified' ? 'text-green-600' : 'text-amber-600'}`} />
                        </div>
                        <div>
                          <p className={`font-semibold ${investor.kycStatus === 'verified' ? 'text-green-700' : 'text-amber-700'}`}>Status: {investor.kycStatus.toUpperCase()}</p>
                          <p className="text-xs text-slate-500">{investor.kycStatus === 'verified' ? 'All documents verified' : 'Documents under review'}</p>
                        </div>
                      </div>
                    </div>

                    <div className="grid gap-3">
                      {investor.kycDocuments && investor.kycDocuments.map((doc: any, idx: number) => (
                        <div key={idx} className="flex items-center justify-between p-4 bg-slate-50 rounded-lg border border-slate-200">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 bg-investor/10 rounded-lg flex items-center justify-center">
                              <FileText className="w-5 h-5 text-investor" />
                            </div>
                            <div>
                              <p className="font-medium text-slate-700 capitalize">{doc.type}</p>
                              <p className="text-xs text-slate-400">{doc.number || 'Document uploaded'}</p>
                            </div>
                          </div>
                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
                            {doc.verified ? 'Verified' : 'Pending'}
                          </span>
                        </div>
                      ))}
                    </div>

                    <button onClick={() => setShowUploadDocModal(true)} className="w-full py-3 border-2 border-dashed border-slate-200 rounded-lg text-slate-500 hover:border-investor hover:text-investor transition-colors flex items-center justify-center gap-2">
                      <Upload className="w-4 h-4" /> Upload Document
                    </button>
                  </div>
                </SectionCard>
              </div>
            )}

            {/* Security Tab */}
            {activeTab === 'security' && (
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <SectionCard title="Change Password" icon={Lock} headerBg="bg-slate-50" headerBorder="border-slate-100">
                    <div className="space-y-4">
                      <div>
                        <label className="text-xs text-slate-500 mb-1 block">Current Password</label>
                        <div className="relative">
                          <input type={showPassword.current ? 'text' : 'password'} value={passwordForm.current} onChange={(e) => setPasswordForm({ ...passwordForm, current: e.target.value })} className="w-full px-3 py-2 pr-10 border border-slate-200 rounded-lg text-sm" placeholder="Enter current password" />
                          <button type="button" onClick={() => setShowPassword({ ...showPassword, current: !showPassword.current })} className="absolute right-3 top-1/2 -translate-y-1/2 p-1">{showPassword.current ? <EyeOff className="w-4 h-4 text-slate-400" /> : <Eye className="w-4 h-4 text-slate-400" />}</button>
                        </div>
                      </div>
                      <div>
                        <label className="text-xs text-slate-500 mb-1 block">New Password</label>
                        <div className="relative">
                          <input type={showPassword.new ? 'text' : 'password'} value={passwordForm.new} onChange={(e) => setPasswordForm({ ...passwordForm, new: e.target.value })} className="w-full px-3 py-2 pr-10 border border-slate-200 rounded-lg text-sm" placeholder="Min 8 characters" />
                          <button type="button" onClick={() => setShowPassword({ ...showPassword, new: !showPassword.new })} className="absolute right-3 top-1/2 -translate-y-1/2 p-1">{showPassword.new ? <EyeOff className="w-4 h-4 text-slate-400" /> : <Eye className="w-4 h-4 text-slate-400" />}</button>
                        </div>
                      </div>
                      <div>
                        <label className="text-xs text-slate-500 mb-1 block">Confirm New Password</label>
                        <div className="relative">
                          <input type={showPassword.confirm ? 'text' : 'password'} value={passwordForm.confirm} onChange={(e) => setPasswordForm({ ...passwordForm, confirm: e.target.value })} className="w-full px-3 py-2 pr-10 border border-slate-200 rounded-lg text-sm" placeholder="Confirm new password" />
                          <button type="button" onClick={() => setShowPassword({ ...showPassword, confirm: !showPassword.confirm })} className="absolute right-3 top-1/2 -translate-y-1/2 p-1">{showPassword.confirm ? <EyeOff className="w-4 h-4 text-slate-400" /> : <Eye className="w-4 h-4 text-slate-400" />}</button>
                        </div>
                      </div>
                      <button onClick={handlePasswordChange} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-2">
                        <Key className="w-4 h-4" /> Update Password
                      </button>
                    </div>
                  </SectionCard>

                  <SectionCard title="Two-Factor Authentication" icon={Shield} headerBg="bg-purple-50" headerBorder="border-purple-100">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                          <Shield className="w-5 h-5 text-purple-600" />
                        </div>
                        <div>
                          <p className="font-medium text-slate-700">Add extra security</p>
                          <p className="text-xs text-slate-500">Requires code from phone when logging in</p>
                        </div>
                      </div>
                      <button onClick={() => setTwoFactorEnabled(!twoFactorEnabled)} className={`px-4 py-2 rounded-lg text-sm font-medium ${twoFactorEnabled ? 'bg-green-100 text-green-700' : 'bg-investor text-white hover:bg-investor-dark'}`}>
                        {twoFactorEnabled ? 'Enabled' : 'Enable'}
                      </button>
                    </div>
                  </SectionCard>

                  <SectionCard title="Active Sessions" icon={Activity} headerBg="bg-blue-50" headerBorder="border-blue-100">
                    <div className="space-y-3">
                      {sessionHistory.map(session => (
                        <div key={session.id} className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
                          <div className="w-10 h-10 bg-investor/10 rounded-lg flex items-center justify-center">
                            <Smartphone className="w-5 h-5 text-investor" />
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center gap-2">
                              <p className="font-medium text-slate-700">{session.device}</p>
                              {session.current && <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Current</span>}
                            </div>
                            <p className="text-xs text-slate-400">{session.location} • {session.time}</p>
                          </div>
                          {!session.current && <button className="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg">Revoke</button>}
                        </div>
                      ))}
                      <button className="w-full py-3 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 flex items-center justify-center gap-2">
                        <LogOut className="w-4 h-4" /> Sign Out All Devices
                      </button>
                    </div>
                  </SectionCard>
                </div>

                <div className="flex items-center justify-center">
                  <div className="bg-gradient-to-br from-slate-50 to-purple-50 rounded-2xl p-8 w-full h-full flex flex-col items-center justify-center min-h-[400px]">
                    <div className="w-32 h-32 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-full flex items-center justify-center mb-6 shadow-lg">
                      <Lock className="w-16 h-16 text-white" />
                    </div>
                    <h3 className="text-xl font-bold text-slate-800 mb-2">Keep Your Account Secure</h3>
                    <p className="text-sm text-slate-500 text-center max-w-xs">Use a strong password with letters, numbers, and symbols to protect your account from unauthorized access.</p>
                    <div className="mt-6 flex items-center gap-4">
                      <div className="flex items-center gap-2 text-sm text-slate-600">
                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"><Shield className="w-4 h-4 text-green-600" /></div>
                        <span>256-bit Encryption</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-slate-600">
                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"><Activity className="w-4 h-4 text-blue-600" /></div>
                        <span>Real-time Monitoring</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Bank Modals */}
      {showAddBankModal && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Add Bank Account</h3>
              <button onClick={() => setShowAddBankModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div><label className="text-xs text-slate-500 mb-1 block">Bank Name *</label><input type="text" value={newBankForm.bankName} onChange={(e) => setNewBankForm({ ...newBankForm, bankName: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="e.g., Standard Chartered" /></div>
              <div><label className="text-xs text-slate-500 mb-1 block">Account Name *</label><input type="text" value={newBankForm.accountName} onChange={(e) => setNewBankForm({ ...newBankForm, accountName: 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">Account Number *</label><input type="text" value={newBankForm.accountNumber} onChange={(e) => setNewBankForm({ ...newBankForm, accountNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" /></div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="text-xs text-slate-500 mb-1 block">Branch</label><input type="text" value={newBankForm.branch} onChange={(e) => setNewBankForm({ ...newBankForm, branch: 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">Routing</label><input type="text" value={newBankForm.routing} onChange={(e) => setNewBankForm({ ...newBankForm, routing: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" /></div>
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowAddBankModal(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={handleSaveBank} disabled={!newBankForm.bankName || !newBankForm.accountNumber} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark disabled:opacity-50">Save</button>
            </div>
          </div>
        </div>
      )}

      {showEditBankModal && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Edit Bank Account</h3>
              <button onClick={() => setShowEditBankModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div><label className="text-xs text-slate-500 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" /></div>
              <div><label className="text-xs text-slate-500 mb-1 block">Account Name</label><input type="text" value={editingBank.accountName} onChange={(e) => setEditingBank({ ...editingBank, accountName: 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">Account Number</label><input type="text" value={editingBank.accountNumber} onChange={(e) => setEditingBank({ ...editingBank, accountNumber: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" /></div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="text-xs text-slate-500 mb-1 block">Branch</label><input type="text" value={editingBank.branch} onChange={(e) => setEditingBank({ ...editingBank, branch: 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">Routing</label><input type="text" value={editingBank.routing} onChange={(e) => setEditingBank({ ...editingBank, routing: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" /></div>
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowEditBankModal(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={handleSaveBank} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark">Save Changes</button>
            </div>
          </div>
        </div>
      )}

      {showDeleteBankModal && bankToDelete && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Delete Bank Account</h3>
              <button onClick={() => setShowDeleteBankModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5">
              <p className="text-slate-600 mb-4">Are you sure you want to delete this bank account?</p>
              <div className="p-4 bg-slate-50 rounded-lg"><p className="font-medium text-slate-800">{bankToDelete.bankName}</p><p className="text-sm text-slate-500">{bankToDelete.accountNumber}</p></div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowDeleteBankModal(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={handleDeleteBank} className="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600">Delete</button>
            </div>
          </div>
        </div>
      )}

      {/* Mobile Modals */}
      {showAddMobileModal && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Add Mobile Banking</h3>
              <button onClick={() => setShowAddMobileModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div><label className="text-xs text-slate-500 mb-1 block">Provider *</label><select value={newMobileForm.provider} onChange={(e) => setNewMobileForm({ ...newMobileForm, 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="SureCash">SureCash</option></select></div>
              <div><label className="text-xs text-slate-500 mb-1 block">Account Number *</label><input type="text" value={newMobileForm.number} onChange={(e) => setNewMobileForm({ ...newMobileForm, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="01XXXXXXXXX" /></div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowAddMobileModal(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={handleSaveMobile} disabled={!newMobileForm.provider || !newMobileForm.number} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark disabled:opacity-50">Save</button>
            </div>
          </div>
        </div>
      )}

      {showEditMobileModal && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Edit Mobile Banking</h3>
              <button onClick={() => setShowEditMobileModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div><label className="text-xs text-slate-500 mb-1 block">Provider</label><input type="text" value={editingMobile.provider} onChange={(e) => setEditingMobile({ ...editingMobile, provider: 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">Account Number</label><input type="text" value={editingMobile.number} onChange={(e) => setEditingMobile({ ...editingMobile, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" /></div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowEditMobileModal(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={handleSaveMobile} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark">Save Changes</button>
            </div>
          </div>
        </div>
      )}

      {showDeleteMobileModal && mobileToDelete && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Delete Mobile Banking</h3>
              <button onClick={() => setShowDeleteMobileModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5">
              <p className="text-slate-600 mb-4">Are you sure you want to delete this mobile banking account?</p>
              <div className="p-4 bg-slate-50 rounded-lg"><p className="font-medium text-slate-800">{mobileToDelete.provider}</p><p className="text-sm text-slate-500 font-mono">{mobileToDelete.number}</p></div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowDeleteMobileModal(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={handleDeleteMobile} className="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600">Delete</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">
              <h3 className="text-lg font-bold text-slate-800">Tax Information</h3>
              <button onClick={() => setShowTaxModal(false)} className="p-1 hover:bg-slate-100 rounded-lg"><X className="w-5 h-5 text-slate-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div>
                <label className="text-xs text-slate-500 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="e.g., 1234567890" />
              </div>
              <div>
                <label className="text-xs text-slate-500 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="e.g., AB1234567" />
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <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={() => { toast.success('Tax information updated'); setShowTaxModal(false); }} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark">Save</button>
            </div>
          </div>
        </div>
      )}

      {showUploadDocModal && (
        <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">
              <h3 className="text-lg font-bold text-slate-800">Upload Document</h3>
              <button onClick={() => setShowUploadDocModal(false)} className="p-1.5 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-xs text-slate-500 mb-1 block">Document Type *</label>
                <select
                  value={uploadDocForm.docType}
                  onChange={(e) => setUploadDocForm({ ...uploadDocForm, docType: e.target.value })}
                  className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm bg-white"
                >
                  <option value="">Select Document Type</option>
                  <option value="nid">National ID (NID)</option>
                  <option value="passport">Passport</option>
                  <option value="driving_license">Driving License</option>
                  <option value="tax_certificate">Tax Certificate</option>
                  <option value="birth_certificate">Birth Certificate</option>
                </select>
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">Document Number</label>
                <input
                  type="text"
                  value={uploadDocForm.docNumber}
                  onChange={(e) => setUploadDocForm({ ...uploadDocForm, docNumber: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  placeholder="Enter document number"
                />
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">Upload File *</label>
                <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-investor transition-colors cursor-pointer"
                  onClick={() => document.getElementById('docFileInput')?.click()}
                >
                  {uploadDocForm.docFile ? (
                    <div className="flex items-center justify-center gap-2 text-green-600">
                      <FileText className="w-5 h-5" />
                      <span className="text-sm font-medium">{uploadDocForm.docFile.name}</span>
                    </div>
                  ) : (
                    <>
                      <Upload className="w-8 h-8 mx-auto mb-2 text-slate-300" />
                      <p className="text-sm text-slate-500">Click to upload or drag and drop</p>
                      <p className="text-xs text-slate-400 mt-1">PDF, JPG, PNG (max 5MB)</p>
                    </>
                  )}
                  <input
                    id="docFileInput"
                    type="file"
                    accept=".pdf,.jpg,.jpeg,.png"
                    className="hidden"
                    onChange={(e) => {
                      const file = e.target.files?.[0];
                      if (file) setUploadDocForm({ ...uploadDocForm, docFile: file });
                    }}
                  />
                </div>
              </div>
            </div>
            <div className="p-5 border-t border-slate-100 flex justify-end gap-3 bg-slate-50">
              <button onClick={() => setShowUploadDocModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-white">Cancel</button>
              <button
                onClick={() => {
                  if (!uploadDocForm.docType || !uploadDocForm.docFile) {
                    toast.error('Please fill all required fields');
                    return;
                  }
                  toast.success('Document uploaded successfully!');
                  setShowUploadDocModal(false);
                  setUploadDocForm({ docType: '', docNumber: '', docFile: null });
                }}
                className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark"
              >
                Upload
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}