import { useEffect, useState } from 'react';
import api from '../api/client';
import type { Purchase, PurchaseExpense, ItemType, InvestorCashout, Expense, Investor } from '../types';
import Modal from '../components/Modal';
import { Field, Input, Select } from '../components/FormField';

const today = new Date().toISOString().slice(0, 10);

function fmtDate(d: string) {
  return new Date(d).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
}

function addDays(date: string, n: number) {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
}

const emptyForm = {
  description: '', seller_name: '',
  quantity_mann: '', quantity_kg: '', quantity_grams: '',
  price_per_mann: '', paid_amount: '',
};

const EXP_CATEGORIES = ['bill', 'rent', 'petrol', 'labour', 'transport', 'other'];

export default function Purchases() {
  const [purchases, setPurchases] = useState<Purchase[]>([]);
  const [itemTypes, setItemTypes] = useState<ItemType[]>([]);
  const [total, setTotal] = useState(0);
  const [paidTotal, setPaidTotal] = useState(0);
  const [purchaseExpensesTotal, setPurchaseExpensesTotal] = useState(0);
  const [shopBalance, setShopBalance] = useState(0);
  const [viewDate, setViewDate] = useState(today);
  const [viewAll, setViewAll] = useState(false);

  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<Purchase | null>(null);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({ ...emptyForm });

  const [showExpModal, setShowExpModal] = useState(false);
  const [expPurchase, setExpPurchase] = useState<Purchase | null>(null);
  const [expForm, setExpForm] = useState({ amount: '', note: '' });
  const [expSaving, setExpSaving] = useState(false);

  // ── Bank to Shop ───────────────────────────────────────────────────────────
  const [transfers, setTransfers] = useState<InvestorCashout[]>([]);
  const [transferTotal, setTransferTotal] = useState(0);
  const [showTransferModal, setShowTransferModal] = useState(false);
  const [editingTransfer, setEditingTransfer] = useState<InvestorCashout | null>(null);
  const [transferForm, setTransferForm] = useState({ amount: '', cashout_date: today });
  const [transferSaving, setTransferSaving] = useState(false);

  // ── General Expenses ───────────────────────────────────────────────────────
  const [genExpenses, setGenExpenses] = useState<Expense[]>([]);
  const [genExpTotal, setGenExpTotal] = useState(0);
  const [showGenExpModal, setShowGenExpModal] = useState(false);
  const [editingGenExp, setEditingGenExp] = useState<Expense | null>(null);
  const [genExpForm, setGenExpForm] = useState({ description: '', category: 'bill', amount: '' });
  const [genExpSaving, setGenExpSaving] = useState(false);

  // ── Tab & Personal Use ────────────────────────────────────────────────────
  const [activeTab, setActiveTab] = useState<'purchases' | 'bank' | 'expenses' | 'personal'>('purchases');
  const [mainInvestors, setMainInvestors] = useState<Investor[]>([]);
  const [personalCashouts, setPersonalCashouts] = useState<InvestorCashout[]>([]);
  const [personalTotal, setPersonalTotal] = useState(0);
  const [showPersonalModal, setShowPersonalModal] = useState(false);
  const [editingPersonal, setEditingPersonal] = useState<InvestorCashout | null>(null);
  const [personalForm, setPersonalForm] = useState({ investor_id: '', amount: '', cashout_date: today });
  const [personalSaving, setPersonalSaving] = useState(false);
  const [personalError, setPersonalError] = useState('');

  const loadTransfers = () =>
    api.get('/cashouts', { params: { type: 'bank_withdrawal' } }).then(r => {
      setTransfers(r.data.cashouts ?? []);
      setTransferTotal(r.data.total ?? 0);
    });

  const loadGenExpenses = () =>
    api.get('/expenses').then(r => {
      setGenExpenses(r.data.expenses ?? []);
      setGenExpTotal(r.data.total ?? 0);
    });

  const loadPersonal = () =>
    api.get('/cashouts', { params: { type: 'investor_return' } }).then(r => {
      setPersonalCashouts(r.data.cashouts ?? []);
      setPersonalTotal(r.data.total ?? 0);
      const inv: Investor[] = r.data.investors ?? [];
      setMainInvestors(inv.filter(i => i.type === 'main'));
    });

  const load = (date = viewDate, all = viewAll) => {
    const params = all ? { all: 1 } : { date };
    api.get('/purchases', { params }).then(r => {
      setPurchases(r.data.purchases);
      setItemTypes(r.data.item_types);
      setTotal(r.data.total);
      setPaidTotal(r.data.paid_total);
      setPurchaseExpensesTotal(r.data.purchase_expenses_total ?? 0);
      setShopBalance(r.data.shop_balance ?? 0);
    });
  };

  useEffect(() => { load(); loadTransfers(); loadGenExpenses(); loadPersonal(); }, []);
  useEffect(() => { load(viewDate, viewAll); }, [viewDate, viewAll]);

  const openPersonalModal = (c?: InvestorCashout) => {
    setEditingPersonal(c ?? null);
    setPersonalForm(c
      ? { investor_id: String(c.investor_id ?? ''), amount: String(c.amount), cashout_date: c.cashout_date.slice(0, 10) }
      : { investor_id: '', amount: '', cashout_date: today });
    setPersonalError('');
    setShowPersonalModal(true);
  };

  const savePersonal = async () => {
    if (!personalForm.investor_id || !personalForm.amount) { setPersonalError('Select investor and enter amount'); return; }
    setPersonalSaving(true); setPersonalError('');
    try {
      const payload = {
        cashout_type: 'investor_return',
        investor_id: Number(personalForm.investor_id),
        amount: Number(personalForm.amount),
        cashout_date: personalForm.cashout_date,
      };
      if (editingPersonal) await api.put(`/cashouts/${editingPersonal.id}`, payload);
      else await api.post('/cashouts', payload);
      setShowPersonalModal(false);
      loadPersonal();
    } catch { setPersonalError('Failed to save'); }
    finally { setPersonalSaving(false); }
  };

  const delPersonal = async (id: number) => {
    if (!confirm('Delete this withdrawal?')) return;
    await api.delete(`/cashouts/${id}`);
    loadPersonal();
  };

  const openTransferModal = (t?: InvestorCashout) => {
    setEditingTransfer(t ?? null);
    setTransferForm(t ? { amount: String(t.amount), cashout_date: t.cashout_date.slice(0, 10) } : { amount: '', cashout_date: today });
    setShowTransferModal(true);
  };
  const saveTransfer = async () => {
    setTransferSaving(true);
    try {
      const payload = { cashout_type: 'bank_withdrawal', amount: Number(transferForm.amount), cashout_date: transferForm.cashout_date };
      if (editingTransfer) await api.put(`/cashouts/${editingTransfer.id}`, payload);
      else await api.post('/cashouts', payload);
      setShowTransferModal(false);
      loadTransfers();
      load();
    } finally { setTransferSaving(false); }
  };
  const delTransfer = async (id: number) => {
    if (!confirm('Delete this transfer?')) return;
    await api.delete(`/cashouts/${id}`);
    loadTransfers(); load();
  };

  const openGenExpModal = (e?: Expense) => {
    setEditingGenExp(e ?? null);
    setGenExpForm(e ? { description: e.description, category: e.category, amount: String(e.amount) } : { description: '', category: 'bill', amount: '' });
    setShowGenExpModal(true);
  };
  const saveGenExp = async () => {
    setGenExpSaving(true);
    try {
      const payload = { description: genExpForm.description, category: genExpForm.category, amount: Number(genExpForm.amount) };
      if (editingGenExp) await api.put(`/expenses/${editingGenExp.id}`, payload);
      else await api.post('/expenses', payload);
      setShowGenExpModal(false);
      loadGenExpenses();
    } finally { setGenExpSaving(false); }
  };
  const delGenExp = async (id: number) => {
    if (!confirm('Delete this expense?')) return;
    await api.delete(`/expenses/${id}`);
    loadGenExpenses();
  };

  const openCreate = () => {
    setEditing(null);
    setForm({ ...emptyForm, description: itemTypes[0]?.name ?? '' });
    setShowModal(true);
  };

  const openEdit = (p: Purchase) => {
    setEditing(p);
    setForm({
      description: p.description ?? '',
      seller_name: p.seller_name ?? '',
      quantity_mann: p.quantity_mann != null ? String(p.quantity_mann) : '',
      quantity_kg: p.quantity_kg != null ? String(p.quantity_kg) : '',
      quantity_grams: p.quantity_grams != null ? String(p.quantity_grams) : '',
      price_per_mann: p.price_per_mann != null ? String(p.price_per_mann) : '',
      paid_amount: String(p.paid_amount),
    });
    setShowModal(true);
  };

  const openAddExpense = (p: Purchase) => {
    setExpPurchase(p);
    setExpForm({ amount: '', note: '' });
    setShowExpModal(true);
  };

  const set = (k: string, v: string) => setForm(f => ({ ...f, [k]: v }));

  const previewMann = parseFloat(form.quantity_mann) || 0;
  const previewKg = parseFloat(form.quantity_kg) || 0;
  const previewGrams = parseFloat(form.quantity_grams) || 0;
  const previewPrice = parseFloat(form.price_per_mann) || 0;
  const totalMannEquiv = previewMann + previewKg / 40 + previewGrams / 40000;
  const previewTotal = totalMannEquiv > 0 && previewPrice > 0 ? Math.floor(totalMannEquiv * previewPrice) : parseFloat(form.paid_amount) || 0;
  const previewPaid = parseFloat(form.paid_amount) || 0;
  const previewRemaining = Math.max(0, previewTotal - previewPaid);
  const previewStatus = previewPaid >= previewTotal && previewTotal > 0 ? 'paid' : previewPaid > 0 ? 'partial' : 'pending';
  const totalPending = total - paidTotal;

  const save = async () => {
    setSaving(true);
    try {
      const payload = {
        description: form.description || null,
        seller_name: form.seller_name || null,
        quantity_mann: form.quantity_mann ? Number(form.quantity_mann) : null,
        quantity_kg: form.quantity_kg ? Number(form.quantity_kg) : null,
        quantity_grams: form.quantity_grams ? Number(form.quantity_grams) : null,
        price_per_mann: form.price_per_mann ? Number(form.price_per_mann) : null,
        paid_amount: Number(form.paid_amount) || 0,
      };
      if (editing) await api.put(`/purchases/${editing.id}`, payload);
      else await api.post('/purchases', payload);
      setShowModal(false);
      load();
    } finally { setSaving(false); }
  };

  const saveExpense = async () => {
    if (!expPurchase) return;
    setExpSaving(true);
    try {
      await api.post(`/purchases/${expPurchase.id}/expenses`, {
        amount: Number(expForm.amount),
        note: expForm.note || null,
      });
      setShowExpModal(false);
      load();
    } finally { setExpSaving(false); }
  };

  // Per-item summary
  const byItemMap = purchases.reduce((acc, p) => {
    const key = p.description ?? 'Unknown';
    if (!acc[key]) acc[key] = { count: 0, mann: 0, kg: 0, amount: 0 };
    acc[key].count += 1;
    acc[key].mann += Number(p.quantity_mann || 0);
    acc[key].kg += Number(p.quantity_kg || 0);
    acc[key].amount += Number(p.paid_amount || 0);
    return acc;
  }, {} as Record<string, { count: number; mann: number; kg: number; amount: number }>);
  const byItemList = Object.entries(byItemMap).map(([name, d]) => {
    const extraMann = Math.floor(d.kg / 40);
    return { name, count: d.count, mann: d.mann + extraMann, kg: +(d.kg % 40).toFixed(3), amount: d.amount };
  });

  const TABS = [
    { key: 'purchases', label: 'Daily Purchases' },
    { key: 'bank',      label: 'Bank to Shop'    },
    { key: 'expenses',  label: 'Shop Expenses'   },
    { key: 'personal',  label: 'Personal Use'    },
  ] as const;

  return (
    <div className="space-y-5">
      {/* ── Page header ── */}
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <h1 className="text-xl font-semibold text-gray-900">Purchases</h1>
      </div>

      {/* ── Tab bar ── */}
      <div className="flex gap-1 bg-gray-100 p-1 rounded-xl w-full sm:w-auto overflow-x-auto">
        {TABS.map(t => (
          <button
            key={t.key}
            onClick={() => setActiveTab(t.key)}
            className={`flex-1 sm:flex-none px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
              activeTab === t.key
                ? 'bg-white text-gray-900 shadow-sm'
                : 'text-gray-500 hover:text-gray-700'
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* ═══ Tab 1: Daily Purchases ═══ */}
      {activeTab === 'purchases' && (
        <div className="space-y-5">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <div className="flex items-center gap-2 flex-wrap">
              {!viewAll && (
                <div className="flex items-center gap-1 bg-gray-100 border border-gray-300 rounded-lg px-2 py-1.5">
                  <button onClick={() => setViewDate(d => addDays(d, -1))} className="text-gray-500 hover:text-gray-900 w-6 h-6 flex items-center justify-center text-lg leading-none">‹</button>
                  <input type="date" value={viewDate} onChange={e => setViewDate(e.target.value)} className="bg-transparent text-gray-900 text-sm outline-none cursor-pointer w-32 text-center" />
                  <button onClick={() => setViewDate(d => addDays(d, 1))} disabled={viewDate >= today} className="text-gray-500 hover:text-gray-900 disabled:opacity-30 w-6 h-6 flex items-center justify-center text-lg leading-none">›</button>
                </div>
              )}
              <button onClick={() => setViewAll(v => !v)} className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors border ${viewAll ? 'bg-emerald-600 border-emerald-600 text-white' : 'bg-gray-100 border-gray-300 text-gray-700 hover:text-gray-900'}`}>
                {viewAll ? 'Today' : 'All Records'}
              </button>
            </div>
            <button onClick={openCreate} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium">
              + Add Purchase
            </button>
          </div>

          {/* Stat boxes */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div className="rounded-xl bg-white border border-gray-200 shadow-sm p-4">
              <div className="text-xs text-gray-500 uppercase tracking-wider mb-2">Total Purchases</div>
              <div className="text-2xl font-bold text-gray-900">PKR {Number(total).toLocaleString()}</div>
              <div className="flex gap-3 mt-1 text-xs">
                <span className="text-gray-500">Paid: PKR {Number(paidTotal + purchaseExpensesTotal).toLocaleString()}</span>
                {totalPending > 0 && <span className="text-amber-700">Pending: PKR {totalPending.toLocaleString()}</span>}
              </div>
            </div>
            <div className="rounded-xl bg-white border border-gray-200 shadow-sm p-4">
              <div className="text-xs text-gray-500 uppercase tracking-wider mb-2">Shop Balance</div>
              <div className={`text-2xl font-bold ${shopBalance >= 0 ? 'text-emerald-700' : 'text-red-600'}`}>PKR {Number(shopBalance).toLocaleString()}</div>
              <div className="text-xs text-gray-400 mt-1">{purchases.length} purchase{purchases.length !== 1 ? 's' : ''} in view</div>
            </div>
            <div className="rounded-xl bg-white border border-gray-200 shadow-sm p-4">
              <div className="text-xs text-gray-500 uppercase tracking-wider mb-2">By Item</div>
              {byItemList.length === 0 ? <div className="text-sm text-gray-400">No purchases in view</div> : (
                <div className="space-y-2">
                  {byItemList.map(item => (
                    <div key={item.name}>
                      <div className="flex justify-between items-baseline">
                        <span className="text-sm text-gray-900 font-medium">{item.name}</span>
                        <span className="text-xs text-gray-500">{item.count} purchase{item.count !== 1 ? 's' : ''}</span>
                      </div>
                      <div className="flex justify-between items-baseline mt-0.5">
                        <span className="text-xs text-gray-400">
                          {item.mann > 0 ? `${item.mann} mann` : ''}{item.mann > 0 && item.kg > 0 ? ' + ' : ''}{item.kg > 0 ? `${item.kg} kg` : ''}{item.mann === 0 && item.kg === 0 ? '—' : ''}
                        </span>
                        <span className="text-xs text-emerald-700">PKR {item.amount.toLocaleString()}</span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  {[...(viewAll ? ['Date'] : []), 'Item', 'Seller', 'Qty', 'Price/Mann', 'Paid', 'Expenses', 'Total', ''].map(h => (
                    <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {purchases.length === 0 && (
                  <tr><td colSpan={viewAll ? 9 : 8} className="px-4 py-12 text-center text-gray-400">
                    {viewAll ? 'No purchases yet.' : `No purchases on ${fmtDate(viewDate)}.`}
                  </td></tr>
                )}
                {purchases.map(p => {
                  const expList = p.expenses ?? [];
                  const expTotal = expList.reduce((s, e) => s + Number(e.amount), 0);
                  return (
                    <tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
                      {viewAll && <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{fmtDate(p.purchase_date)}</td>}
                      <td className="px-4 py-3 font-medium text-gray-900">{p.description ?? '—'}</td>
                      <td className="px-4 py-3 text-gray-700">{p.seller_name ?? '—'}</td>
                      <td className="px-4 py-3">
                        {p.quantity_mann != null && <div className="text-gray-700 text-xs">{Number(p.quantity_mann).toLocaleString()} mann</div>}
                        {p.quantity_kg != null && <div className="text-gray-500 text-xs">{Number(p.quantity_kg).toLocaleString()} kg</div>}
                        {p.quantity_grams != null && <div className="text-gray-400 text-xs">{Number(p.quantity_grams).toLocaleString()} g</div>}
                        {p.quantity_mann == null && p.quantity_kg == null && p.quantity_grams == null && <span className="text-gray-400">—</span>}
                      </td>
                      <td className="px-4 py-3 text-gray-700">{p.price_per_mann != null ? `PKR ${Number(p.price_per_mann).toLocaleString()}` : '—'}</td>
                      <td className="px-4 py-3 font-medium text-gray-900">PKR {Number(p.paid_amount).toLocaleString()}</td>
                      <td className="px-4 py-3">
                        {expList.length > 0 ? (
                          <div className="space-y-0.5">
                            {expList.map((e: PurchaseExpense) => (
                              <div key={e.id} className="flex justify-between gap-3 text-xs">
                                <span className="text-gray-500">{e.description || 'Expense'}</span>
                                <span className="text-orange-500 whitespace-nowrap">PKR {Number(e.amount).toLocaleString()}</span>
                              </div>
                            ))}
                          </div>
                        ) : <span className="text-gray-400">—</span>}
                      </td>
                      <td className="px-4 py-3 font-semibold text-gray-900">PKR {(Number(p.paid_amount) + expTotal).toLocaleString()}</td>
                      <td className="px-4 py-3">
                        <div className="flex gap-1.5">
                          <button onClick={() => openAddExpense(p)} className="px-2 py-1 rounded-md bg-orange-500/10 hover:bg-orange-500/20 text-orange-500 text-xs">+ Exp</button>
                          <button onClick={() => openEdit(p)} className="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* ═══ Tab 2: Bank to Shop ═══ */}
      {activeTab === 'bank' && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-sm font-semibold text-gray-700">Bank → Shop Cash</h2>
              {transferTotal > 0 && <p className="text-xs text-blue-700 mt-0.5">Total: PKR {Number(transferTotal).toLocaleString()}</p>}
            </div>
            <button onClick={() => openTransferModal()} className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium">+ Add Transfer</button>
          </div>
          <div className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  {['Date', 'Amount', ''].map(h => <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {transfers.length === 0 && <tr><td colSpan={3} className="px-4 py-12 text-center text-gray-400">No bank transfers yet.</td></tr>}
                {transfers.map(t => (
                  <tr key={t.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{fmtDate(t.cashout_date.slice(0, 10))}</td>
                    <td className="px-4 py-3 font-semibold text-blue-700">PKR {Number(t.amount).toLocaleString()}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-1.5 justify-end">
                        <button onClick={() => openTransferModal(t)} className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                        <button onClick={() => delTransfer(t.id)} className="px-2 py-1 rounded bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
              {transfers.length > 0 && (
                <tfoot>
                  <tr className="border-t border-gray-200 bg-gray-50">
                    <td className="px-4 py-2 text-xs text-gray-500 font-medium">Total</td>
                    <td className="px-4 py-2 font-bold text-blue-700">PKR {Number(transferTotal).toLocaleString()}</td>
                    <td />
                  </tr>
                </tfoot>
              )}
            </table>
          </div>
        </div>
      )}

      {/* ═══ Tab 3: Shop Expenses ═══ */}
      {activeTab === 'expenses' && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-sm font-semibold text-gray-700">Shop Expenses</h2>
              {genExpTotal > 0 && <p className="text-xs text-orange-700 mt-0.5">Total: PKR {Number(genExpTotal).toLocaleString()}</p>}
            </div>
            <button onClick={() => openGenExpModal()} className="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-400 text-white text-sm font-medium">+ Add Expense</button>
          </div>
          <div className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  {['Date', 'Name', 'Category', 'Amount', ''].map(h => <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {genExpenses.length === 0 && <tr><td colSpan={5} className="px-4 py-12 text-center text-gray-400">No expenses yet.</td></tr>}
                {genExpenses.map(e => (
                  <tr key={e.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{fmtDate(e.expense_date)}</td>
                    <td className="px-4 py-3 font-medium text-gray-900">{e.description}</td>
                    <td className="px-4 py-3 capitalize text-gray-500 text-xs">{e.category}</td>
                    <td className="px-4 py-3 font-semibold text-orange-700">PKR {Number(e.amount).toLocaleString()}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-1.5 justify-end">
                        <button onClick={() => openGenExpModal(e)} className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                        <button onClick={() => delGenExp(e.id)} className="px-2 py-1 rounded bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
              {genExpenses.length > 0 && (
                <tfoot>
                  <tr className="border-t border-gray-200 bg-gray-50">
                    <td colSpan={3} className="px-4 py-2 text-xs text-gray-500 font-medium">Total</td>
                    <td className="px-4 py-2 font-bold text-orange-700">PKR {Number(genExpTotal).toLocaleString()}</td>
                    <td />
                  </tr>
                </tfoot>
              )}
            </table>
          </div>
        </div>
      )}

      {/* ═══ Tab 4: Personal Use ═══ */}
      {activeTab === 'personal' && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-sm font-semibold text-gray-700">Personal Use — Investor Withdrawals</h2>
              {personalTotal > 0 && <p className="text-xs text-purple-700 mt-0.5">Total: PKR {Number(personalTotal).toLocaleString()}</p>}
            </div>
            <button onClick={() => openPersonalModal()} className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium">+ Add Withdrawal</button>
          </div>
          <div className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  {['Date', 'Investor', 'Amount', ''].map(h => <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {personalCashouts.length === 0 && <tr><td colSpan={4} className="px-4 py-12 text-center text-gray-400">No personal withdrawals yet.</td></tr>}
                {personalCashouts.map(c => (
                  <tr key={c.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{fmtDate(c.cashout_date.slice(0, 10))}</td>
                    <td className="px-4 py-3 font-medium text-gray-900">{c.investor?.name ?? '—'}</td>
                    <td className="px-4 py-3 font-semibold text-purple-700">PKR {Number(c.amount).toLocaleString()}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-1.5 justify-end">
                        <button onClick={() => openPersonalModal(c)} className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                        <button onClick={() => delPersonal(c.id)} className="px-2 py-1 rounded bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
              {personalCashouts.length > 0 && (
                <tfoot>
                  <tr className="border-t border-gray-200 bg-gray-50">
                    <td colSpan={2} className="px-4 py-2 text-xs text-gray-500 font-medium">Total</td>
                    <td className="px-4 py-2 font-bold text-purple-700">PKR {Number(personalTotal).toLocaleString()}</td>
                    <td />
                  </tr>
                </tfoot>
              )}
            </table>
          </div>
        </div>
      )}

      {/* ── Modals ── */}
      <Modal open={showModal} onClose={() => setShowModal(false)} title={editing ? 'Edit Purchase' : 'New Purchase'} maxWidth="max-w-lg">
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Field label="Item">
              {itemTypes.length > 0 ? (
                <Select value={form.description} onChange={e => set('description', e.target.value)}>
                  <option value="">— Select Item —</option>
                  {itemTypes.map(t => <option key={t.id} value={t.name}>{t.name}</option>)}
                </Select>
              ) : (
                <Input value={form.description} onChange={e => set('description', e.target.value)} placeholder="e.g. Wheat" autoFocus />
              )}
            </Field>
            <Field label="Seller Name">
              <Input value={form.seller_name} onChange={e => set('seller_name', e.target.value)} placeholder="Seller name" />
            </Field>
          </div>
          <div className="grid grid-cols-3 gap-3">
            <Field label="Quantity (Mann)"><Input type="number" value={form.quantity_mann} onChange={e => set('quantity_mann', e.target.value)} step="0.001" min="0" placeholder="0" /></Field>
            <Field label="Quantity (KG)"><Input type="number" value={form.quantity_kg} onChange={e => set('quantity_kg', e.target.value)} step="0.001" min="0" placeholder="0" /></Field>
            <Field label="Quantity (Grams)"><Input type="number" value={form.quantity_grams} onChange={e => set('quantity_grams', e.target.value)} step="1" min="0" placeholder="0" /></Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Price per Mann (PKR)"><Input type="number" value={form.price_per_mann} onChange={e => set('price_per_mann', e.target.value)} step="1" min="0" placeholder="0" /></Field>
            <Field label="Total Amount">
              <div className="px-3 py-2 rounded-lg bg-gray-50 border border-gray-300 text-sm font-medium flex items-center h-9">
                {totalMannEquiv > 0 && previewPrice > 0
                  ? <span className="text-gray-900">PKR {Math.floor(totalMannEquiv * previewPrice).toLocaleString()}</span>
                  : <span className="text-gray-400 text-xs">= (mann + kg÷40 + g÷40000) × price</span>}
              </div>
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Amount Paid (PKR)"><Input type="number" value={form.paid_amount} onChange={e => set('paid_amount', e.target.value)} step="1" min="0" placeholder="0" /></Field>
            <div className="space-y-1.5 pt-6">
              {previewRemaining > 0 && <div className="flex justify-between text-sm"><span className="text-gray-500">Remaining</span><span className="text-amber-700 font-medium">PKR {previewRemaining.toLocaleString()}</span></div>}
              {form.paid_amount && <div className="flex justify-between text-xs"><span className="text-gray-400">Status</span><span className={previewStatus === 'paid' ? 'text-emerald-700 font-medium' : previewStatus === 'partial' ? 'text-amber-700 font-medium' : 'text-gray-500'}>{previewStatus}</span></div>}
            </div>
          </div>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={save} disabled={saving} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 text-white text-sm">{saving ? 'Saving…' : 'Save'}</button>
          </div>
        </div>
      </Modal>

      <Modal open={showExpModal} onClose={() => setShowExpModal(false)} title={`Add Expense — ${expPurchase?.description ?? 'Purchase'}`} maxWidth="max-w-sm">
        <div className="space-y-4">
          <Field label="Amount (PKR)"><Input type="number" value={expForm.amount} onChange={e => setExpForm(f => ({ ...f, amount: e.target.value }))} step="1" min="1" placeholder="0" autoFocus /></Field>
          <Field label="Note"><Input value={expForm.note} onChange={e => setExpForm(f => ({ ...f, note: e.target.value }))} placeholder="e.g. Transport, Loading..." /></Field>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowExpModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={saveExpense} disabled={expSaving || !expForm.amount} className="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-400 disabled:opacity-60 text-white text-sm">{expSaving ? 'Saving…' : 'Add Expense'}</button>
          </div>
        </div>
      </Modal>

      <Modal open={showTransferModal} onClose={() => setShowTransferModal(false)} title={editingTransfer ? 'Edit Transfer' : 'Bank → Shop Transfer'} maxWidth="max-w-xs">
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Field label="Amount (PKR)"><Input type="number" value={transferForm.amount} onChange={e => setTransferForm(f => ({ ...f, amount: e.target.value }))} step="1" min="1" autoFocus placeholder="0" /></Field>
            <Field label="Date"><Input type="date" value={transferForm.cashout_date} onChange={e => setTransferForm(f => ({ ...f, cashout_date: e.target.value }))} /></Field>
          </div>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowTransferModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={saveTransfer} disabled={transferSaving || !transferForm.amount} className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-60 text-white text-sm">{transferSaving ? 'Saving…' : 'Save'}</button>
          </div>
        </div>
      </Modal>

      <Modal open={showGenExpModal} onClose={() => setShowGenExpModal(false)} title={editingGenExp ? 'Edit Expense' : 'Add Expense'} maxWidth="max-w-sm">
        <div className="space-y-4">
          <Field label="Name"><Input value={genExpForm.description} onChange={e => setGenExpForm(f => ({ ...f, description: e.target.value }))} placeholder="e.g. Transport, Rent" autoFocus /></Field>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Category">
              <Select value={genExpForm.category} onChange={e => setGenExpForm(f => ({ ...f, category: e.target.value }))}>
                {EXP_CATEGORIES.map(c => <option key={c} value={c}>{c.charAt(0).toUpperCase() + c.slice(1)}</option>)}
              </Select>
            </Field>
            <Field label="Amount (PKR)"><Input type="number" value={genExpForm.amount} onChange={e => setGenExpForm(f => ({ ...f, amount: e.target.value }))} step="1" min="0" placeholder="0" /></Field>
          </div>
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowGenExpModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={saveGenExp} disabled={genExpSaving || !genExpForm.description || !genExpForm.amount} className="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-400 disabled:opacity-60 text-white text-sm">{genExpSaving ? 'Saving…' : 'Save'}</button>
          </div>
        </div>
      </Modal>

      <Modal open={showPersonalModal} onClose={() => setShowPersonalModal(false)} title={editingPersonal ? 'Edit Withdrawal' : 'Personal Use Withdrawal'} maxWidth="max-w-sm">
        <div className="space-y-4">
          <Field label="Main Investor">
            <Select value={personalForm.investor_id} onChange={e => setPersonalForm(f => ({ ...f, investor_id: e.target.value }))}>
              <option value="">— Select Investor —</option>
              {mainInvestors.map(i => <option key={i.id} value={i.id}>{i.name}</option>)}
            </Select>
          </Field>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Amount (PKR)"><Input type="number" value={personalForm.amount} onChange={e => setPersonalForm(f => ({ ...f, amount: e.target.value }))} step="1" min="1" placeholder="0" autoFocus /></Field>
            <Field label="Date"><Input type="date" value={personalForm.cashout_date} onChange={e => setPersonalForm(f => ({ ...f, cashout_date: e.target.value }))} /></Field>
          </div>
          {personalError && <div className="text-red-600 text-sm">{personalError}</div>}
          <div className="flex justify-end gap-2 pt-2">
            <button onClick={() => setShowPersonalModal(false)} className="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 text-sm">Cancel</button>
            <button onClick={savePersonal} disabled={personalSaving || !personalForm.investor_id || !personalForm.amount} className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-60 text-white text-sm">{personalSaving ? 'Saving…' : 'Save'}</button>
          </div>
        </div>
      </Modal>
    </div>
  );
}