import { useEffect, useState } from 'react';
import api from '../api/client';
import type { InvestorCashout } from '../types';
import Modal from '../components/Modal';
import { Field, Input } from '../components/FormField';

const today = new Date().toISOString().slice(0, 10);
const emptyForm = { amount: '', cashout_date: today };

export default function BankTransfers() {
  const [transfers, setTransfers] = useState<InvestorCashout[]>([]);
  const [total, setTotal] = useState(0);
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<InvestorCashout | null>(null);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState(emptyForm);

  const load = () =>
    api.get('/cashouts', { params: { type: 'bank_withdrawal' } }).then(r => {
      setTransfers(r.data.cashouts);
      setTotal(r.data.total);
    });

  useEffect(() => { load(); }, []);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setShowModal(true);
  };

  const openEdit = (t: InvestorCashout) => {
    setEditing(t);
    setForm({ amount: String(t.amount), cashout_date: t.cashout_date.slice(0, 10) });
    setShowModal(true);
  };

  const save = async () => {
    setSaving(true);
    try {
      const payload = { cashout_type: 'bank_withdrawal', amount: Number(form.amount), cashout_date: form.cashout_date };
      if (editing) await api.put(`/cashouts/${editing.id}`, payload);
      else await api.post('/cashouts', payload);
      setShowModal(false);
      load();
    } finally { setSaving(false); }
  };

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

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

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-gray-900">Bank Transfers</h1>
          <p className="text-sm text-blue-700 mt-0.5">Total drawn to shop: PKR {Number(total).toLocaleString()}</p>
        </div>
        <button onClick={openCreate} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium transition-colors">
          + 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', 'Actions'].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 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">{new Date(t.cashout_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
                <td className="px-4 py-3 font-medium text-blue-700">PKR {Number(t.amount).toLocaleString()}</td>
                <td className="px-4 py-3">
                  <div className="flex gap-1.5">
                    <button onClick={() => openEdit(t)} className="px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs">Edit</button>
                    <button onClick={() => del(t.id)} className="px-2 py-1 rounded-md bg-red-50 hover:bg-red-100 text-red-600 text-xs">Del</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Modal open={showModal} onClose={() => setShowModal(false)} title={editing ? '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={form.amount} onChange={e => set('amount', e.target.value)} step="1" min="1" autoFocus placeholder="0" />
            </Field>
            <Field label="Date">
              <Input type="date" value={form.cashout_date} onChange={e => set('cashout_date', e.target.value)} />
            </Field>
          </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 || !form.amount} 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>
    </div>
  );
}