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

interface AccountTitle {
  id: number;
  name: string;
  bank_accounts: BankAccount[];
}

interface BankAccount {
  id: number;
  account_title_id: number | null;
  bank_name: string;
  iban: string | null;
  account_number: string | null;
  sort_order: number;
}

function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
    </svg>
  );
}

export default function BankAccounts() {
  const [titles, setTitles] = useState<AccountTitle[]>([]);
  const [loading, setLoading] = useState(true);

  // ─── Account Title modal ──────────────────────────────────────────────────
  const [showTitleModal, setShowTitleModal] = useState(false);
  const [editingTitle, setEditingTitle] = useState<AccountTitle | null>(null);
  const [titleName, setTitleName] = useState('');
  const [titleSaving, setTitleSaving] = useState(false);
  const [titleError, setTitleError] = useState('');

  // ─── Bank Account modal ───────────────────────────────────────────────────
  const [showAccountModal, setShowAccountModal] = useState(false);
  const [editingAccount, setEditingAccount] = useState<BankAccount | null>(null);
  const [acForm, setAcForm] = useState({
    account_title_id: '',
    bank_name: '',
    iban: '',
    account_number: '',
  });
  const [acSaving, setAcSaving] = useState(false);
  const [acError, setAcError] = useState('');

  const load = () =>
    api.get('/settings/account-titles')
      .then(r => setTitles(r.data))
      .finally(() => setLoading(false));

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

  // ─── Title CRUD ───────────────────────────────────────────────────────────
  const openAddTitle = () => {
    setEditingTitle(null);
    setTitleName('');
    setTitleError('');
    setShowTitleModal(true);
  };

  const openEditTitle = (t: AccountTitle) => {
    setEditingTitle(t);
    setTitleName(t.name);
    setTitleError('');
    setShowTitleModal(true);
  };

  const saveTitle = async () => {
    if (!titleName.trim()) { setTitleError('Title name required'); return; }
    setTitleSaving(true); setTitleError('');
    try {
      if (editingTitle) {
        await api.put(`/settings/account-titles/${editingTitle.id}`, { name: titleName.trim() });
      } else {
        await api.post('/settings/account-titles', { name: titleName.trim() });
      }
      setShowTitleModal(false);
      load();
    } catch { setTitleError('Failed to save'); }
    finally { setTitleSaving(false); }
  };

  const delTitle = async (id: number) => {
    if (!confirm('Delete this account title and all its bank accounts?')) return;
    await api.delete(`/settings/account-titles/${id}`);
    load();
  };

  // ─── Account CRUD ─────────────────────────────────────────────────────────
  const openAddAccount = (titleId?: number) => {
    setEditingAccount(null);
    setAcForm({
      account_title_id: titleId ? String(titleId) : (titles[0]?.id ? String(titles[0].id) : ''),
      bank_name: '',
      iban: '',
      account_number: '',
    });
    setAcError('');
    setShowAccountModal(true);
  };

  const openEditAccount = (a: BankAccount) => {
    setEditingAccount(a);
    setAcForm({
      account_title_id: a.account_title_id ? String(a.account_title_id) : '',
      bank_name: a.bank_name,
      iban: a.iban ?? '',
      account_number: a.account_number ?? '',
    });
    setAcError('');
    setShowAccountModal(true);
  };

  const saveAccount = async () => {
    if (!acForm.bank_name.trim()) { setAcError('Bank name required'); return; }
    setAcSaving(true); setAcError('');
    try {
      const payload = {
        account_title_id: acForm.account_title_id ? parseInt(acForm.account_title_id) : null,
        bank_name: acForm.bank_name.trim(),
        iban: acForm.iban.trim() || null,
        account_number: acForm.account_number.trim() || null,
      };
      if (editingAccount) {
        await api.put(`/settings/bank-accounts/${editingAccount.id}`, payload);
      } else {
        await api.post('/settings/bank-accounts', payload);
      }
      setShowAccountModal(false);
      load();
    } catch { setAcError('Failed to save'); }
    finally { setAcSaving(false); }
  };

  const delAccount = async (id: number) => {
    if (!confirm('Delete this bank account?')) return;
    await api.delete(`/settings/bank-accounts/${id}`);
    load();
  };

  const shareOne = (title: AccountTitle, a: BankAccount) => {
    const lines = [title.name, a.bank_name];
    if (a.iban) lines.push(`IBAN: ${a.iban}`);
    if (a.account_number) lines.push(`A/C: ${a.account_number}`);
    window.open(`https://wa.me/?text=${encodeURIComponent(lines.join('\n'))}`, '_blank');
  };

  return (
    <div className="space-y-8 max-w-3xl">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-gray-900">Bank Accounts</h1>
          <p className="text-sm text-gray-500 mt-0.5">Manage account titles and their bank accounts</p>
        </div>
        <button
          onClick={openAddTitle}
          className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium transition-colors"
        >
          + Add Account Title
        </button>
      </div>

      {loading ? (
        <div className="py-12 text-center text-gray-400 text-sm">Loading…</div>
      ) : titles.length === 0 ? (
        <div className="rounded-xl bg-white border border-dashed border-gray-300 py-12 text-center">
          <p className="text-gray-400 text-sm">No account titles yet.</p>
          <p className="text-gray-400 text-sm">Add a title like "Wattoo Traders" first, then add bank accounts under it.</p>
        </div>
      ) : (
        <div className="space-y-6">
          {titles.map(title => (
            <div key={title.id} className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-hidden">
              {/* Title header */}
              <div className="flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200">
                <h2 className="font-semibold text-gray-900">{title.name}</h2>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => openAddAccount(title.id)}
                    className="px-3 py-1.5 rounded-lg bg-emerald-50 hover:bg-emerald-100 text-emerald-700 text-xs font-medium transition-colors"
                  >
                    + Add Bank
                  </button>
                  <button
                    onClick={() => openEditTitle(title)}
                    className="px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs font-medium transition-colors"
                  >
                    Edit Title
                  </button>
                  <button
                    onClick={() => delTitle(title.id)}
                    className="px-3 py-1.5 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 text-xs font-medium transition-colors"
                  >
                    Delete
                  </button>
                </div>
              </div>

              {/* Bank accounts */}
              {title.bank_accounts.length === 0 ? (
                <div className="px-5 py-6 text-center text-sm text-gray-400">
                  No bank accounts yet.{' '}
                  <button onClick={() => openAddAccount(title.id)} className="text-emerald-700 font-medium hover:underline">
                    Add one
                  </button>
                </div>
              ) : (
                <div className="divide-y divide-gray-100">
                  {title.bank_accounts.map(a => (
                    <div key={a.id} className="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50 transition-colors">
                      <div className="w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-100 flex items-center justify-center shrink-0">
                        <svg className="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
                        </svg>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-gray-900 text-sm">{a.bank_name}</p>
                        {a.iban && <p className="text-xs text-gray-400 font-mono mt-0.5">{a.iban}</p>}
                        {a.account_number && <p className="text-xs text-gray-400 font-mono">{a.account_number}</p>}
                      </div>
                      <div className="flex items-center gap-2 shrink-0">
                        <button
                          onClick={() => shareOne(title, a)}
                          title="Share on WhatsApp"
                          className="p-1.5 rounded-lg bg-green-50 hover:bg-green-100 text-green-600 transition-colors"
                        >
                          <WhatsAppIcon />
                        </button>
                        <button
                          onClick={() => openEditAccount(a)}
                          className="px-2.5 py-1 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs transition-colors"
                        >
                          Edit
                        </button>
                        <button
                          onClick={() => delAccount(a.id)}
                          className="px-2.5 py-1 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 text-xs transition-colors"
                        >
                          Del
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* ─── Account Title Modal ─────────────────────────────────────────────── */}
      <Modal
        open={showTitleModal}
        onClose={() => setShowTitleModal(false)}
        title={editingTitle ? 'Edit Account Title' : 'Add Account Title'}
      >
        <div className="space-y-4">
          <Field label="Title Name (e.g. Wattoo Traders)">
            <Input
              value={titleName}
              onChange={e => setTitleName(e.target.value)}
              placeholder="e.g. Wattoo Traders"
              onKeyDown={e => e.key === 'Enter' && saveTitle()}
            />
          </Field>
          {titleError && <p className="text-red-500 text-sm">{titleError}</p>}
          <div className="flex gap-3 pt-1">
            <button
              onClick={() => setShowTitleModal(false)}
              className="flex-1 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={saveTitle}
              disabled={titleSaving}
              className="flex-1 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white text-sm font-medium transition-colors"
            >
              {titleSaving ? 'Saving…' : editingTitle ? 'Save' : 'Add Title'}
            </button>
          </div>
        </div>
      </Modal>

      {/* ─── Bank Account Modal ──────────────────────────────────────────────── */}
      <Modal
        open={showAccountModal}
        onClose={() => setShowAccountModal(false)}
        title={editingAccount ? 'Edit Bank Account' : 'Add Bank Account'}
      >
        <div className="space-y-4">
          <Field label="Account Title">
            <select
              value={acForm.account_title_id}
              onChange={e => setAcForm(f => ({ ...f, account_title_id: e.target.value }))}
              className="w-full rounded-lg bg-white border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
            >
              <option value="">— No title —</option>
              {titles.map(t => (
                <option key={t.id} value={String(t.id)}>{t.name}</option>
              ))}
            </select>
          </Field>
          <Field label="Bank Name">
            <Input
              value={acForm.bank_name}
              onChange={e => setAcForm(f => ({ ...f, bank_name: e.target.value }))}
              placeholder="e.g. Bank Al Habib"
            />
          </Field>
          <Field label="IBAN">
            <Input
              value={acForm.iban}
              onChange={e => setAcForm(f => ({ ...f, iban: e.target.value }))}
              placeholder="e.g. PK84BAHL015009810035830"
              className="font-mono tracking-wide"
            />
          </Field>
          <Field label="Account Number (optional)">
            <Input
              value={acForm.account_number}
              onChange={e => setAcForm(f => ({ ...f, account_number: e.target.value }))}
              placeholder="e.g. 0358301"
            />
          </Field>
          {acError && <p className="text-red-500 text-sm">{acError}</p>}
          <div className="flex gap-3 pt-1">
            <button
              onClick={() => setShowAccountModal(false)}
              className="flex-1 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={saveAccount}
              disabled={acSaving}
              className="flex-1 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white text-sm font-medium transition-colors"
            >
              {acSaving ? 'Saving…' : editingAccount ? 'Save Changes' : 'Add Account'}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}