// FRAZIER Finance OS — Invoices (Phase 2 demo). FRONTEND-ONLY: no
// fin_invoice_* backend exists yet, so this seeds a realistic in-memory
// dummy dataset below (clearly labeled, same pattern as FIN_HOME_MOCK in
// fin-home.jsx) and operates entirely on local React state — no finApi/
// fetch calls. A real backend swap is a later phase; the UI/behavior built
// here should not need to change shape when that lands.

const FIN_INV_CLIENTS_SEED = [
  { id: 'c1', name: 'Kopi Kenangan' },
  { id: 'c2', name: 'Sociolla' },
  { id: 'c3', name: 'Erigo' },
  { id: 'c4', name: 'Wardah Beauty' },
  { id: 'c5', name: 'Ternak Uang Media' },
  { id: 'c6', name: 'Bank Jago Digital' },
];

const FIN_INV_SEED = [
  { id: 'i1', clientId: 'c1', number: 'FRZ/INV/2026/09/0041', service: 'Social Media Management — September', amount: 32_000_000, discount: 0, tax: 11, issueDate: '2026-09-01', dueDate: '2026-09-20', status: 'overdue', notes: '' },
  { id: 'i2', clientId: 'c2', number: 'FRZ/INV/2026/09/0042', service: 'Campaign Production — Ramadan Refresh', amount: 58_500_000, discount: 5, tax: 11, issueDate: '2026-09-05', dueDate: '2026-09-28', status: 'overdue', notes: '' },
  { id: 'i3', clientId: 'c3', number: 'FRZ/INV/2026/09/0043', service: 'Content Shoot — Lookbook Vol. 4', amount: 24_750_000, discount: 0, tax: 11, issueDate: '2026-08-28', dueDate: '2026-09-15', status: 'paid', notes: '' },
  { id: 'i4', clientId: 'c4', number: 'FRZ/INV/2026/08/0039', service: 'Influencer Management — August', amount: 45_000_000, discount: 0, tax: 11, issueDate: '2026-08-10', dueDate: '2026-08-30', status: 'paid', notes: '' },
  { id: 'i5', clientId: 'c5', number: 'FRZ/INV/2026/10/0044', service: 'Podcast Editing Retainer — October', amount: 18_200_000, discount: 0, tax: 11, issueDate: '2026-10-01', dueDate: '2026-10-20', status: 'sent', notes: '' },
  { id: 'i6', clientId: 'c6', number: 'FRZ/INV/2026/10/0045', service: 'Brand Campaign — Q4 Launch', amount: 60_000_000, discount: 10, tax: 11, issueDate: '2026-10-05', dueDate: '2026-10-25', status: 'ready', notes: '' },
  { id: 'i7', clientId: 'c1', number: 'FRZ/INV/2026/10/0046', service: 'TikTok Series — November batch', amount: 15_000_000, discount: 0, tax: 11, issueDate: '2026-10-05', dueDate: '2026-11-05', status: 'draft', notes: '' },
  { id: 'i8', clientId: 'c2', number: 'FRZ/INV/2026/10/0047', service: 'Photo Retouching Batch 12', amount: 21_000_000, discount: 0, tax: 11, issueDate: '2026-10-06', dueDate: '2026-11-06', status: 'draft', notes: '' },
];

const FIN_INV_STATUS = {
  draft:   { label: 'Draft',         tone: 'neutral' },
  ready:   { label: 'Ready to Send', tone: 'info' },
  sent:    { label: 'Sent',          tone: 'info' },
  paid:    { label: 'Paid',          tone: 'ok' },
  overdue: { label: 'Overdue',       tone: 'crit' },
};

const FIN_INV_FILTERS = [
  { id: 'needs',   label: 'Needs Action',  test: (s) => s === 'draft' },
  { id: 'ready',   label: 'Ready to Send', test: (s) => s === 'ready' },
  { id: 'sent',    label: 'Sent',          test: (s) => s === 'sent' },
  { id: 'paid',    label: 'Paid',          test: (s) => s === 'paid' },
  { id: 'overdue', label: 'Overdue',       test: (s) => s === 'overdue' },
  { id: 'all',     label: 'All',           test: () => true },
];

function finInvDateFmt(iso) {
  if (!iso) return '—';
  const d = new Date(iso + 'T00:00:00');
  if (isNaN(d.getTime())) return iso;
  return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
}

// Simple sequential number — good enough for the demo dataset; a real
// backend would own the counter + year/month bucketing server-side.
function finInvNextNumber(invoices, issueDateIso) {
  const d = issueDateIso ? new Date(issueDateIso + 'T00:00:00') : new Date();
  const base = isNaN(d.getTime()) ? new Date() : d;
  const y = base.getFullYear();
  const m = String(base.getMonth() + 1).padStart(2, '0');
  const seq = String(invoices.length + 1).padStart(4, '0');
  return `FRZ/INV/${y}/${m}/${seq}`;
}

function finInvTotals(amount, discountPct, taxPct) {
  const subtotal = Number(amount) || 0;
  const discountAmt = subtotal * (Number(discountPct) || 0) / 100;
  const afterDiscount = subtotal - discountAmt;
  const taxAmt = afterDiscount * (Number(taxPct) || 0) / 100;
  return { subtotal, discountAmt, afterDiscount, taxAmt, total: afterDiscount + taxAmt };
}

function finInvDaysOverdue(dueIso) {
  const d = new Date(dueIso + 'T00:00:00');
  if (isNaN(d.getTime())) return 0;
  return Math.max(0, Math.round((Date.now() - d.getTime()) / 86400000));
}

function finInvNewDraft() {
  return {
    step: 1,
    clientId: null,
    clientSearch: '',
    addingClient: false,
    newClientName: '',
    service: '',
    amount: '',
    discount: '0',
    tax: '11',
    issueDate: new Date().toISOString().slice(0, 10),
    dueDate: '',
    notes: '',
  };
}

function FinInvPill({ status }) {
  const meta = FIN_INV_STATUS[status] || FIN_INV_STATUS.draft;
  return <FinStatusPill tone={meta.tone} dot>{meta.label}</FinStatusPill>;
}

function FinInvRow({ invoice, clientName }) {
  const overdue = invoice.status === 'overdue';
  return (
    <div className={finCls('fin-inv-row', overdue ? 'is-overdue' : '')}>
      <div className="fin-inv-row-main">
        <span className="fin-inv-row-client">{clientName}</span>
        <span className="fin-inv-row-svc">{invoice.service}</span>
        <span className="fin-inv-row-num">{invoice.number}</span>
      </div>
      <div className="fin-inv-row-side">
        <div className="fin-inv-row-due">
          <span className="fin-inv-row-due-l">Due</span>
          <span className="fin-inv-row-due-v">{finInvDateFmt(invoice.dueDate)}</span>
          {overdue ? <span className="fin-inv-row-overdue-tag">{finInvDaysOverdue(invoice.dueDate)}d overdue</span> : null}
        </div>
        <span className="fin-inv-row-amt">{finIDR(invoice.amount)}</span>
        <FinInvPill status={invoice.status} />
      </div>
    </div>
  );
}

function FinInvWizard({ wizard, setWizard, clients, invoices, onAddClient, onClose, onMarkAsSent }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  const set = (patch) => setWizard((w) => ({ ...w, ...patch }));
  const goStep = (step) => set({ step });

  const filteredClients = clients.filter((c) =>
    c.name.toLowerCase().includes(wizard.clientSearch.trim().toLowerCase()));
  const selectedClient = clients.find((c) => c.id === wizard.clientId);

  const handleAddClient = () => {
    const c = onAddClient(wizard.newClientName);
    if (c) set({ clientId: c.id, newClientName: '', addingClient: false, clientSearch: '' });
  };

  const handleDownloadPdf = () => {
    // Real PDF generation is a later phase (see Finance OS plan) — the
    // browser's print dialog (which can "Save as PDF") stands in for now.
    window.print();
  };

  const step1Valid = !!wizard.clientId;
  const step2Valid = !!(wizard.service.trim() && Number(wizard.amount) > 0 && wizard.issueDate && wizard.dueDate);

  const totals = finInvTotals(wizard.amount, wizard.discount, wizard.tax);
  const previewNumber = finInvNextNumber(invoices, wizard.issueDate);

  return (
    <div className="fin-inv-overlay" onClick={onClose}>
      <div className="fin-inv-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Create invoice">
        <header className="fin-inv-modal-h">
          <div className="fin-inv-steps">
            <span className={finCls('fin-inv-step', wizard.step >= 1 ? 'is-on' : '')}>1 Client</span>
            <span className={finCls('fin-inv-step', wizard.step >= 2 ? 'is-on' : '')}>2 Details</span>
            <span className={finCls('fin-inv-step', wizard.step >= 3 ? 'is-on' : '')}>3 Preview</span>
          </div>
          <button type="button" className="fin-inv-modal-x" onClick={onClose} aria-label="Close">
            <FinIcon name="x" size={16} />
          </button>
        </header>

        <div className="fin-inv-modal-body">
          {wizard.step === 1 ? (
            <div className="fin-inv-step1">
              <div className="fin-inv-search-wrap">
                <FinIcon name="search" size={15} className="fin-inv-search-ico" />
                <input className="fin-input fin-inv-search" placeholder="Search clients…"
                  value={wizard.clientSearch} onChange={(e) => set({ clientSearch: e.target.value })} autoFocus />
              </div>

              <div className="fin-inv-client-list">
                {filteredClients.map((c) => (
                  <button key={c.id} type="button"
                    className={finCls('fin-inv-client-row', wizard.clientId === c.id ? 'is-selected' : '')}
                    onClick={() => set({ clientId: c.id })}>
                    <span>{c.name}</span>
                    {wizard.clientId === c.id ? <FinIcon name="check" size={15} /> : null}
                  </button>
                ))}
                {!filteredClients.length ? <p className="fin-inv-noclient">No clients match "{wizard.clientSearch}".</p> : null}
              </div>

              {wizard.addingClient ? (
                <div className="fin-inv-add-client">
                  <input className="fin-input" placeholder="New client name" autoFocus
                    value={wizard.newClientName} onChange={(e) => set({ newClientName: e.target.value })}
                    onKeyDown={(e) => { if (e.key === 'Enter') handleAddClient(); }} />
                  <button type="button" className="fin-btn is-primary" disabled={!wizard.newClientName.trim()} onClick={handleAddClient}>Add</button>
                  <button type="button" className="fin-btn is-ghost" onClick={() => set({ addingClient: false, newClientName: '' })}>Cancel</button>
                </div>
              ) : (
                <button type="button" className="fin-inv-add-toggle" onClick={() => set({ addingClient: true })}>+ Add new client</button>
              )}
            </div>
          ) : null}

          {wizard.step === 2 ? (
            <div className="fin-inv-step2">
              <label className="fin-field">Client
                <input className="fin-input" value={selectedClient ? selectedClient.name : ''} disabled />
              </label>

              <label className="fin-field">Service
                <input className="fin-input" placeholder="e.g. Social Media Management — October"
                  value={wizard.service} onChange={(e) => set({ service: e.target.value })} />
              </label>

              <div className="fin-inv-form-grid">
                <label className="fin-field">Amount (Rp)
                  <input className="fin-input" type="number" min="0" placeholder="0"
                    value={wizard.amount} onChange={(e) => set({ amount: e.target.value })} />
                </label>
                <label className="fin-field">Issue Date
                  <input className="fin-input" type="date" value={wizard.issueDate} onChange={(e) => set({ issueDate: e.target.value })} />
                </label>
                <label className="fin-field">Due Date
                  <input className="fin-input" type="date" value={wizard.dueDate} onChange={(e) => set({ dueDate: e.target.value })} />
                </label>
              </div>

              <div className="fin-inv-form-grid is-2">
                <label className="fin-field">Discount (%) <span className="fin-inv-optional">(optional)</span>
                  <input className="fin-input" type="number" min="0" max="100" value={wizard.discount} onChange={(e) => set({ discount: e.target.value })} />
                </label>
                <label className="fin-field">Tax / PPN (%) <span className="fin-inv-optional">(optional)</span>
                  <input className="fin-input" type="number" min="0" max="100" value={wizard.tax} onChange={(e) => set({ tax: e.target.value })} />
                </label>
              </div>

              <label className="fin-field">Notes <span className="fin-inv-optional">(optional)</span>
                <textarea className="fin-input fin-inv-textarea" rows={3} value={wizard.notes} onChange={(e) => set({ notes: e.target.value })} />
              </label>
            </div>
          ) : null}

          {wizard.step === 3 ? (
            <div className="fin-inv-preview">
              <div className="fin-inv-preview-card">
                <div className="fin-inv-preview-top">
                  <div>
                    <div className="fin-inv-preview-brand">FRAZIER</div>
                    <div className="fin-inv-preview-num">{previewNumber}</div>
                  </div>
                  <FinInvPill status="sent" />
                </div>

                <div className="fin-inv-preview-meta">
                  <div><span className="fin-inv-preview-l">Billed to</span><span className="fin-inv-preview-v">{selectedClient ? selectedClient.name : '—'}</span></div>
                  <div><span className="fin-inv-preview-l">Issue date</span><span className="fin-inv-preview-v">{finInvDateFmt(wizard.issueDate)}</span></div>
                  <div><span className="fin-inv-preview-l">Due date</span><span className="fin-inv-preview-v">{finInvDateFmt(wizard.dueDate)}</span></div>
                </div>

                <div className="fin-inv-preview-line">
                  <span>{wizard.service || 'Service'}</span>
                  <span>{finIDR(totals.subtotal)}</span>
                </div>

                <div className="fin-inv-preview-totals">
                  {Number(wizard.discount) > 0 ? (
                    <div className="fin-inv-preview-trow"><span>Discount ({Number(wizard.discount)}%)</span><span>-{finIDR(totals.discountAmt)}</span></div>
                  ) : null}
                  <div className="fin-inv-preview-trow"><span>Tax / PPN ({Number(wizard.tax) || 0}%)</span><span>+{finIDR(totals.taxAmt)}</span></div>
                  <div className="fin-inv-preview-trow fin-inv-preview-total"><span>Total</span><span>{finIDR(totals.total)}</span></div>
                </div>

                {wizard.notes ? <p className="fin-inv-preview-notes">{wizard.notes}</p> : null}
              </div>
            </div>
          ) : null}
        </div>

        <footer className="fin-inv-modal-f">
          <div className="fin-inv-modal-f-left">
            {wizard.step === 1 ? <button type="button" className="fin-btn is-ghost" onClick={onClose}>Cancel</button> : null}
            {wizard.step === 2 ? <button type="button" className="fin-btn is-ghost" onClick={() => goStep(1)}><FinIcon name="chevl" size={15} /> Back</button> : null}
            {wizard.step === 3 ? (
              <>
                <button type="button" className="fin-btn is-ghost" onClick={() => goStep(2)}>Edit</button>
                <button type="button" className="fin-btn is-ghost" onClick={handleDownloadPdf}>Download PDF</button>
              </>
            ) : null}
          </div>
          <div className="fin-inv-modal-f-right">
            {wizard.step === 1 ? <button type="button" className="fin-btn is-primary" disabled={!step1Valid} onClick={() => goStep(2)}>Next: Details <FinIcon name="chevr" size={15} /></button> : null}
            {wizard.step === 2 ? <button type="button" className="fin-btn is-primary" disabled={!step2Valid} onClick={() => goStep(3)}>Preview <FinIcon name="chevr" size={15} /></button> : null}
            {wizard.step === 3 ? <button type="button" className="fin-btn is-primary" onClick={onMarkAsSent}>Mark as Sent <FinIcon name="check" size={15} /></button> : null}
          </div>
        </footer>
      </div>
    </div>
  );
}

function FinInvoices({ user }) {
  const [clients, setClients] = React.useState(FIN_INV_CLIENTS_SEED);
  const [invoices, setInvoices] = React.useState(FIN_INV_SEED);
  const [filter, setFilter] = React.useState('all');
  const [wizard, setWizard] = React.useState(null); // null = closed, else { step, ... }

  const clientName = (id) => (clients.find((c) => c.id === id) || {}).name || 'Unknown client';
  const activeFilter = FIN_INV_FILTERS.find((f) => f.id === filter) || FIN_INV_FILTERS[FIN_INV_FILTERS.length - 1];
  const visible = invoices.filter((inv) => activeFilter.test(inv.status));

  const addClient = (name) => {
    const trimmed = (name || '').trim();
    if (!trimmed) return null;
    const c = { id: 'c' + Date.now(), name: trimmed };
    setClients((prev) => [...prev, c]);
    return c;
  };

  const markAsSent = () => {
    const number = finInvNextNumber(invoices, wizard.issueDate);
    const newInv = {
      id: 'i' + Date.now(),
      clientId: wizard.clientId,
      number,
      service: wizard.service.trim() || 'Service',
      amount: Number(wizard.amount) || 0,
      discount: Number(wizard.discount) || 0,
      tax: Number(wizard.tax) || 0,
      issueDate: wizard.issueDate,
      dueDate: wizard.dueDate,
      status: 'sent',
      notes: wizard.notes,
    };
    setInvoices((prev) => [newInv, ...prev]);
    setWizard(null);
  };

  return (
    <div className="fin-inv">
      <FinPageHead title="Invoices" sub="Create, send and track client invoices."
        actions={
          <button type="button" className="fin-btn is-primary" onClick={() => setWizard(finInvNewDraft())}>
            <FinIcon name="invoice" size={15} /> Create Invoice
          </button>
        } />

      <div className="fin-inv-filters" role="tablist" aria-label="Filter invoices">
        {FIN_INV_FILTERS.map((f) => {
          const count = invoices.filter((inv) => f.test(inv.status)).length;
          return (
            <button key={f.id} type="button" role="tab" aria-selected={filter === f.id}
              className={finCls('fin-inv-chip', filter === f.id ? 'is-active' : '')}
              onClick={() => setFilter(f.id)}>
              {f.label}<span className="fin-inv-chip-n">{count}</span>
            </button>
          );
        })}
      </div>

      <FinPanel className="fin-inv-list-panel">
        {visible.length ? (
          <div className="fin-inv-list">
            {visible.map((inv) => <FinInvRow key={inv.id} invoice={inv} clientName={clientName(inv.clientId)} />)}
          </div>
        ) : (
          <div className="fin-inv-empty">
            <FinIcon name="invoice" size={26} />
            <p>No invoices in this view.</p>
          </div>
        )}
      </FinPanel>

      {wizard ? (
        <FinInvWizard wizard={wizard} setWizard={setWizard} clients={clients} invoices={invoices}
          onAddClient={addClient} onClose={() => setWizard(null)} onMarkAsSent={markAsSent} />
      ) : null}
    </div>
  );
}

Object.assign(window, { FinInvoices });