// Dashboard module
function Dashboard({ go }) {
  const rev = D.revenue, exp = D.expenses;
  const revMTD = rev[11], revPrev = rev[10];
  const expMTD = exp[11], expPrev = exp[10];
  const outstanding = D.invoices.filter((i) => i.status === "Sent" || i.status === "Overdue")
    .reduce((s, i) => s + i.amount, 0);
  const overdue = D.invoices.filter((i) => i.status === "Overdue");
  const lowStock = D.items.filter((i) => i.stock > 0 && i.stock < i.reorder);
  const outStock = D.items.filter((i) => i.stock === 0);
  const pendingLeave = D.leaves.filter((l) => l.status === "Pending");
  const expiring = D.units.filter((u) => u.ends === "Jun 2026" || u.ends === "Jul 2026" || u.ends === "Aug 2026");
  const pct = (a, b) => (((a - b) / b) * 100).toFixed(1) + "%";

  const attention = [
    { icon: "ledger", text: T("dash.overdueInvoicesN", { n: overdue.length }), sub: T("dash.pastDueAmount", { amount: money(overdue.reduce((s, i) => s + i.amount, 0)) }), route: "accounting", tone: "red" },
    { icon: "box", text: T("dash.itemsBelowReorderN", { n: lowStock.length + outStock.length }), sub: T("dash.fullyOutOfStockN", { n: outStock.length }), route: "inventory", tone: "amber" },
    { icon: "users", text: T("dash.leaveRequestsWaitingN", { n: pendingLeave.length }), sub: T("dash.oldestFrom", { date: "Jun 10" }), route: "hr", tone: "amber" },
    { icon: "building", text: T("dash.leasesEndingN", { n: expiring.length }), sub: T("dash.tenantsOnNoticeN", { n: 2 }), route: "rent", tone: "blue" }
  ];

  return (
    <div className="page" data-screen-label="Dashboard">
      <div className="greeting">
        <h1 className="display">{T("dash.goodMorning", { name: D.user.name.split(" ")[0] })}</h1>
        <p className="greeting-sub">{D.today} · {T("dash.whereCompanyStands", { company: D.company })}</p>
      </div>

      <KpiBar>
        <Stat label={T("dash.revenueMonth", { month: TV("June") })} value={money(revMTD * 1000)} delta={pct(revMTD, revPrev)} up={revMTD < revPrev ? false : true} spark={rev.slice(4)} sub={T("dash.vsMonth", { month: TV("May") })} />
        <Stat label={T("dash.expensesMonth", { month: TV("June") })} value={money(expMTD * 1000)} delta={pct(expMTD, expPrev)} up={false} spark={exp.slice(4)} sub={T("dash.vsMonth", { month: TV("May") })} />
        <Stat label={T("dash.cashOnHand")} value={money(D.cash)} sub={T("dash.acrossAccountsN", { n: 3 })} spark={[368, 374, 391, 380, 402, 398, 405, 412]} />
        <Stat label={T("dash.receivablesOutstanding")} value={money(outstanding)} sub={T("dash.overdueN", { n: overdue.length })} spark={[71, 66, 74, 62, 68, 64, 59, 59.6]} />
      </KpiBar>

      <div className="grid-23">
        <section className="card pad">
          <SectionHead title={T("dash.cashFlowTrailing12")}>
            <span className="legend"><i style={{ background: "var(--accent)" }}></i>{T("dash.revenue")}</span>
            <span className="legend"><i style={{ background: "var(--ink)", opacity: 0.18 }}></i>{T("dash.expenses")}</span>
          </SectionHead>
          <Bars a={D.revenue} b={D.expenses} labels={D.months.map((m) => TV(m))} aLabel={T("dash.revenueLower")} bLabel={T("dash.expensesLower")} />
        </section>
        <section className="card pad">
          <SectionHead title={T("dash.receivablesAging")} />
          <div className="donut-wrap">
            <Donut centerValue={money(outstanding)} centerLabel={T("dash.outstandingLower")} segs={[
              { label: T("dash.agingCurrent"), value: 30700, color: "var(--accent)" },
              { label: T("dash.aging1to30"), value: 11800, color: "var(--amber)" },
              { label: T("dash.aging31to60"), value: 9650, color: "var(--red)" },
              { label: T("dash.aging60plus"), value: 7480, color: "var(--ink3)" }
            ]} />
            <ul className="legend-list">
              <li><i style={{ background: "var(--accent)" }}></i>{T("dash.agingCurrent")}<b className="mono">{money(30700)}</b></li>
              <li><i style={{ background: "var(--amber)" }}></i>{T("dash.aging1to30")}<b className="mono">{money(11800)}</b></li>
              <li><i style={{ background: "var(--red)" }}></i>{T("dash.aging31to60")}<b className="mono">{money(9650)}</b></li>
              <li><i style={{ background: "var(--ink3)" }}></i>{T("dash.aging60plus")}<b className="mono">{money(7480)}</b></li>
            </ul>
          </div>
        </section>
      </div>

      <div className="grid-23">
        <section className="card pad">
          <SectionHead title={T("dash.needsAttention")} />
          <ul className="attn">
            {attention.map((a) => (
              <li key={a.route} className="attn-row" onClick={() => go(a.route)}>
                <span className={"attn-ico " + a.tone}><Icon name={a.icon} size={17} /></span>
                <span className="attn-main">
                  <span className="attn-text">{a.text}</span>
                  <span className="attn-sub">{a.sub}</span>
                </span>
                <span className="attn-go"><Icon name="chevR" size={16} /></span>
              </li>
            ))}
          </ul>
        </section>
        <section className="card pad">
          <SectionHead title={T("dash.activity")} />
          <ul className="feed">
            {D.activity.map((a, i) => (
              <li key={i} className="feed-row">
                <Avatar name={a.who} size={26} />
                <span className="feed-main">
                  <span><b>{a.who}</b> {a.what}</span>
                  <span className="feed-meta">{TV(a.time)} · {TV(a.mod)}</span>
                </span>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;