/* Dashboard screen */
const { money, fmtDate, fmtDateLong } = window.AC;

function Dashboard({ db, year, setYear, onNav }) {
  const [ledgerFilter, setLedgerFilter] = React.useState('all');
  const cf = MODEL.cashflow(db);
  const pnl = MODEL.monthlyPnL(db, year);
  const rec = MODEL.receivables(db);
  const led = MODEL.ledger(db, year);
  const curMonth = new Intl.DateTimeFormat('en', { month: 'long' }).format(new Date(MODEL.TODAY + 'T00:00:00'));

  const ytd = pnl.filter((p) => !p.future).reduce((a, p) => ({ income: a.income + p.income, expense: a.expense + p.expense, billed: a.billed + p.billed }), { income: 0, expense: 0, billed: 0 });
  const chartMax = Math.max(1, ...pnl.map((p) => Math.max(p.income, p.expense)));

  const moves = led.moves.filter((m) => ledgerFilter === 'all' ? true : ledgerFilter === 'in' ? m.type === 'in' : m.type === 'out');
  const movesDesc = [...moves].reverse();
  const inTotal = led.moves.filter((m) => m.type === 'in').reduce((s, m) => s + m.amount, 0);
  const outTotal = led.moves.filter((m) => m.type === 'out').reduce((s, m) => s + m.amount, 0);

  const agingSegs = [rec.buckets.current, rec.buckets.b30, rec.buckets.b60, rec.buckets.b90]
    .map((b) => ({ value: b.amount, color: b.color, label: b.label, short: money(b.amount) }));
  const recList = [...rec.buckets.b90.items, ...rec.buckets.b60.items, ...rec.buckets.b30.items, ...rec.buckets.current.items];

  return (
    <div>
      {/* KPI strip */}
      <div className="kpis">
        <KPI label="Cash on hand" icon="wallet" tone="" value={money(cf.cashBalance)} delta={<span><Icon name="bank" size={12} /> Hanseatic Bank</span>} />
        <KPI label="Outstanding" icon="invoices" value={money(cf.outstanding)} delta={`${rec.buckets.current.items.length + rec.buckets.b30.items.length + rec.buckets.b60.items.length + rec.buckets.b90.items.length} open invoices`} />
        <KPI label="Overdue" icon="alert" tone={cf.overdue > 0 ? 'warn' : ''} value={money(cf.overdue)} delta={<span style={{ color: 'var(--warn)' }}>{rec.buckets.b30.items.length + rec.buckets.b60.items.length + rec.buckets.b90.items.length} past due</span>} />
        <KPI label={`Income · ${curMonth}`} icon="arrowDown" tone="pos" value={money(cf.incomeThisMonth)} delta={<span className="pos"><Icon name="trendUp" size={12} /> received MTD</span>} />
        <KPI label={`Net · ${curMonth}`} icon="trendUp" tone={cf.netThisMonth >= 0 ? 'pos' : 'neg'} value={money(cf.netThisMonth)} delta={`Spend ${money(cf.expenseThisMonth)}`} />
      </div>

      {/* P&L + Receivables */}
      <div className="dash-cols">
        <Panel title="Profit & Loss" sub={`Billed vs. received vs. operating spend · ${year}`} actions={<YearStepper year={year} onChange={setYear} />} flush>
          <div style={{ padding: '14px 14px 6px' }}>
            <div className="pnl-chart">
              {pnl.map((p) => (
                <div key={p.month} className={`pnl-col ${p.future ? 'future' : ''}`} title={`${p.name}: +${money(p.income)} / -${money(p.expense)}`}>
                  <div className="pnl-bars">
                    <div className="pnl-bar inc" style={{ height: `${(p.income / chartMax) * 100}%` }} />
                    <div className="pnl-bar exp" style={{ height: `${(p.expense / chartMax) * 100}%` }} />
                  </div>
                  <span className="mlabel">{p.name[0]}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 8, fontSize: 11, color: 'var(--muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: 'var(--pos)' }} /> Income received</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: 'var(--neg)', opacity: .82 }} /> Expenses</span>
            </div>
          </div>
          <DataTable
            rows={pnl}
            rowKey={(p) => p.month}
            getRowClassName={(p) => p.future ? 'subtle' : ''}
            columns={[
              { header: 'Month', className: 't-strong', render: (p) => <React.Fragment>{p.name} {p.future && <span className="faint" style={{ fontWeight: 400, fontSize: 10 }}>· forecast</span>}</React.Fragment> },
              { header: 'Billed', className: 'num muted', render: (p) => p.billed ? money(p.billed) : '—' },
              { header: 'Income', className: 'num pos', render: (p) => p.income ? money(p.income) : '—' },
              { header: 'Expenses', className: 'num neg', render: (p) => p.expense ? '–' + money(p.expense).replace('-', '') : '—' },
              { header: 'Net', className: (p) => `num ${p.net >= 0 ? 'pos' : 'neg'}`, cellStyle: { fontWeight: 600 }, render: (p) => money(p.net) },
            ]}
            footer={<tr><td>YTD total</td><td className="num">{money(ytd.billed)}</td><td className="num pos">{money(ytd.income)}</td><td className="num neg">–{money(ytd.expense).replace('-', '')}</td><td className={`num ${ytd.income - ytd.expense >= 0 ? 'pos' : 'neg'}`}>{money(ytd.income - ytd.expense)}</td></tr>}
          />
        </Panel>

        <Panel title="Receivables" sub={`${money(rec.total)} outstanding`} actions={<button className="btn sm ghost" onClick={() => onNav('invoices')}>All invoices</button>} flush>
          <div style={{ padding: '14px 14px 6px' }}>
            <StackBar segments={agingSegs} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '7px 14px', marginTop: 12 }}>
              {[rec.buckets.current, rec.buckets.b30, rec.buckets.b60, rec.buckets.b90].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11.5, whiteSpace: 'nowrap' }}>
                  <span style={{ width: 9, height: 9, borderRadius: 2, background: b.color, flex: 'none' }} />
                  <span className="muted">{b.label}</span>
                  <span className="mono" style={{ marginLeft: 'auto', fontWeight: 500 }}>{money(b.amount)}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="divider" style={{ margin: '8px 0 0' }} />
          <DataTable
            rows={recList}
            rowKey={(e) => e.invoice.id}
            maxHeight={280}
            onRowClick={() => onNav('invoices')}
            columns={[
              { header: 'Customer', render: (e) => <div className="cellstack"><span className="t-strong">{e.customer ? e.customer.name : '—'}</span><span className="t-sub mono">{e.invoice.number}</span></div> },
              { header: 'Aged', className: 'num', render: (e) => e.overdueDays > 0 ? <span className="neg">{e.overdueDays}d</span> : <span className="muted">due {Math.abs(e.overdueDays)}d</span> },
              { header: 'Outstanding', className: 'num t-strong', render: (e) => money(e.totals.outstanding) },
            ]}
          />
        </Panel>
      </div>

      {/* Ledger feed */}
      <Panel
        title="Cash ledger"
        sub={`Payments in & operating spend · ${year}`}
        actions={<React.Fragment>
          <span className="mono" style={{ fontSize: 11.5, color: 'var(--muted)', marginRight: 4 }}>
            <span className="pos">+{money(inTotal)}</span> · <span className="neg">{money(outTotal)}</span>
          </span>
          <Segmented value={ledgerFilter} onChange={setLedgerFilter} options={[{ value: 'all', label: 'All' }, { value: 'in', label: 'Money in' }, { value: 'out', label: 'Money out' }]} />
        </React.Fragment>}
        flush
      >
        <DataTable
          rows={movesDesc}
          rowKey={(m, i) => i}
          maxHeight={420}
          columns={[
            { header: 'Date', style: { width: 78 }, className: 'mono muted', cellStyle: { fontSize: 11.5 }, render: (m) => fmtDate(m.date) },
            { header: 'Type', style: { width: 92 }, render: (m) => m.type === 'in' ? <span className="pill paid sm"><span className="dot" />In</span> : <span className={`pill ${m.wage ? 'partial' : 'overdue'} sm`}><span className="dot" />{m.wage ? 'Wage' : 'Out'}</span> },
            { header: 'Description', render: (m) => <div className="cellstack"><span className="t-strong">{m.note}</span><span className="t-sub">{m.category}</span></div> },
            { header: 'Counterparty', className: 'muted', render: (m) => m.party },
            { header: 'Money in', className: 'num pos', render: (m) => m.type === 'in' ? money(m.amount) : '' },
            { header: 'Money out', className: 'num neg', render: (m) => m.type === 'out' ? money(Math.abs(m.amount)) : '' },
            { header: 'Balance', className: 'num mono', cellStyle: { color: 'var(--ink-2)' }, render: (m) => money(m.balance) },
          ]}
        />
      </Panel>
    </div>
  );
}

window.Dashboard = Dashboard;