/* Outstanding invoices table + slide-in detail drawer.
   Drawer opens on row click, "Send reminder" fires a toast. */

function InvoicesPanel({ onOpen }) {
  const buckets = {
    current:  { label: 'Current',   sum: 0, count: 0, color: 'var(--cb-primary)' },
    'due-soon': { label: 'Due soon', sum: 0, count: 0, color: 'var(--cb-accent)' },
    overdue:  { label: 'Overdue',   sum: 0, count: 0, color: 'var(--cb-neg)' },
  };
  for (const inv of CB.invoices) {
    if (inv.status === 'overdue') buckets.overdue.sum += inv.amount, buckets.overdue.count++;
    else if (inv.status === 'due-soon') buckets['due-soon'].sum += inv.amount, buckets['due-soon'].count++;
    else buckets.current.sum += inv.amount, buckets.current.count++;
  }
  const total = CB.invoices.reduce((s, i) => s + i.amount, 0);

  return (
    <section className="cb-panel">
      <PanelHeader
        eyebrow="Money owed to you"
        title={CB.fmtMoney(total)}
        sub={`${CB.invoices.length} open invoices · avg ${Math.round(
          CB.invoices.reduce((s, i) => s + CB.daysAgo(i.sent), 0) / CB.invoices.length
        )} days outstanding`}
        right={
          <div className="cb-toolbar">
            <button type="button" className="cb-btn cb-btn-ghost">
              <IconFilter size={14} /> Filter
            </button>
            <button type="button" className="cb-btn cb-btn-ghost">
              <IconDownload size={14} /> Export
            </button>
            <button type="button" className="cb-btn cb-btn-primary">
              <IconPlus size={14} /> New invoice
            </button>
          </div>
        }
      />

      {/* aging bar */}
      <div className="cb-aging">
        <div className="cb-aging-bar">
          {Object.entries(buckets).map(([k, b]) => (
            b.sum > 0 ? (
              <span key={k} style={{ width: (b.sum / total) * 100 + '%', background: b.color }}
                    title={`${b.label}: ${CB.fmtMoney(b.sum)}`} />
            ) : null
          ))}
        </div>
        <div className="cb-aging-legend">
          {Object.entries(buckets).map(([k, b]) => (
            <span key={k}>
              <i style={{ background: b.color }} />
              <em>{b.label}</em>
              <b>{CB.fmtMoney(b.sum)}</b>
              <span>· {b.count}</span>
            </span>
          ))}
        </div>
      </div>

      <table className="cb-table">
        <thead>
          <tr>
            <th>Invoice</th>
            <th>Client</th>
            <th>Job</th>
            <th>Sent</th>
            <th>Due</th>
            <th className="cb-num">Amount</th>
            <th>Status</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {CB.invoices.map((inv) => {
            const days = CB.daysAgo(inv.due);
            const statusText = inv.status === 'overdue'
              ? `${days}d overdue`
              : inv.status === 'due-soon'
                ? `Due in ${-days}d`
                : 'Open';
            return (
              <tr key={inv.id} onClick={() => onOpen(inv)} className="cb-table-row">
                <td><span className="cb-mono">{inv.id}</span></td>
                <td className="cb-strong">{inv.client}</td>
                <td className="cb-fg-2">{inv.job}</td>
                <td>{CB.fmtDate(inv.sent)}</td>
                <td>{CB.fmtDate(inv.due)}</td>
                <td className="cb-num cb-strong">{CB.fmtMoney(inv.amount)}</td>
                <td>
                  <span className={`cb-pill cb-pill-${inv.status}`}>
                    <i /> {statusText}
                  </span>
                </td>
                <td className="cb-row-actions">
                  <IconChevRight size={16} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}

function InvoiceDrawer({ invoice, onClose, onToast }) {
  const open = !!invoice;
  // lock to last-shown so the slide-out animation doesn't blank out mid-flight
  const [shown, setShown] = React.useState(invoice);
  React.useEffect(() => { if (invoice) setShown(invoice); }, [invoice]);
  const inv = shown;

  const onReminder = () => {
    onToast({
      kind: 'success',
      icon: 'send',
      title: 'Reminder sent',
      body: `Polite nudge emailed to ${inv.client}.`,
    });
    onClose();
  };
  const onMarkPaid = () => {
    onToast({
      kind: 'success',
      icon: 'check',
      title: `${inv.id} marked paid`,
      body: `${CB.fmtMoney(inv.amount)} recorded to Income · ${CB.fmtDate('2026-05-19')}.`,
    });
    onClose();
  };

  return (
    <>
      <div className={`cb-scrim ${open ? 'on' : ''}`} onClick={onClose} />
      <aside className={`cb-drawer ${open ? 'on' : ''}`} aria-hidden={!open}>
        {inv && (
          <>
            <header className="cb-drawer-head">
              <div>
                <div className="cb-drawer-eyebrow">Invoice</div>
                <h2 className="cb-drawer-title">{inv.id}</h2>
              </div>
              <button type="button" className="cb-icon-btn" onClick={onClose} aria-label="Close">
                <IconClose size={18} />
              </button>
            </header>

            <div className="cb-drawer-body">
              <div className="cb-drawer-summary">
                <div className="cb-drawer-amount">{CB.fmtMoney(inv.amount, { cents: true })}</div>
                <span className={`cb-pill cb-pill-${inv.status}`}>
                  <i /> {inv.status === 'overdue' ? `${CB.daysAgo(inv.due)} days overdue`
                       : inv.status === 'due-soon' ? `Due in ${-CB.daysAgo(inv.due)} days`
                       : 'Open'}
                </span>
              </div>

              <dl className="cb-drawer-grid">
                <div><dt>Client</dt><dd>{inv.client}</dd></div>
                <div><dt>Job</dt><dd>{inv.job}</dd></div>
                <div><dt>Sent</dt><dd>{CB.fmtDate(inv.sent)}, 2026</dd></div>
                <div><dt>Due</dt><dd>{CB.fmtDate(inv.due)}, 2026</dd></div>
                <div><dt>Terms</dt><dd>Net 14</dd></div>
                <div><dt>Method</dt><dd>ACH or check</dd></div>
              </dl>

              <div className="cb-drawer-section">
                <div className="cb-drawer-section-h">Line items</div>
                <ul className="cb-line-items">
                  <li>
                    <span>Labor — finish carpentry (38 hrs)</span>
                    <b>{CB.fmtMoney(inv.amount * 0.55, { cents: true })}</b>
                  </li>
                  <li>
                    <span>Materials — millwork, hardware</span>
                    <b>{CB.fmtMoney(inv.amount * 0.32, { cents: true })}</b>
                  </li>
                  <li>
                    <span>Subcontractor — electrical</span>
                    <b>{CB.fmtMoney(inv.amount * 0.13, { cents: true })}</b>
                  </li>
                </ul>
              </div>

              <div className="cb-drawer-section">
                <div className="cb-drawer-section-h">Activity</div>
                <ul className="cb-activity">
                  <li>
                    <i className="cb-act-dot" />
                    <div>
                      <b>Viewed by client</b>
                      <span>2 days ago · 3 opens</span>
                    </div>
                  </li>
                  <li>
                    <i className="cb-act-dot" />
                    <div>
                      <b>Invoice sent</b>
                      <span>{CB.fmtDate(inv.sent)} via email</span>
                    </div>
                  </li>
                  <li>
                    <i className="cb-act-dot" />
                    <div>
                      <b>Invoice drafted by Dana</b>
                      <span>{CB.fmtDate(inv.sent)}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <footer className="cb-drawer-foot">
              <button type="button" className="cb-btn cb-btn-ghost">
                <IconExternal size={14} /> Open PDF
              </button>
              <button type="button" className="cb-btn cb-btn-secondary" onClick={onMarkPaid}>
                <IconCheck size={14} /> Mark paid
              </button>
              <button type="button" className="cb-btn cb-btn-primary" onClick={onReminder}>
                <IconSend size={14} /> Send reminder
              </button>
            </footer>
          </>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { InvoicesPanel, InvoiceDrawer });