// Dashboard — overview with metrics, recent requests, deadlines
function Dashboard({ go }) {
  const reqs = window.REQUESTS;
  const overdue = reqs.filter(r => r.status === "overdue").length;
  const inProgress = reqs.filter(r => ["in-progress","sent","acknowledged"].includes(r.status)).length;
  const fulfilled = reqs.filter(r => r.status === "fulfilled").length;
  const drafts = reqs.filter(r => r.status === "draft").length;

  const Metric = ({ label, value, sub, tone = "neutral" }) => {
    const c = { neutral: "var(--text)", info: "var(--accent)", danger: "var(--danger-fg)", ok: "var(--ok-fg)" }[tone];
    return (
      <Card style={{ padding: 18, position: "relative" }}>
        <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--muted)", fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 36, fontWeight: 700, color: c, marginTop: 6, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{value}</div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{sub}</div>
      </Card>
    );
  };

  return (
    <div>
      <SectionTitle sub="National Education Union · research workbench" action={
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" onClick={() => go("templates")} icon={<Ico.Doc/>}>Templates</Button>
          <Button onClick={() => go("compose")} icon={<Ico.Plus/>}>New request</Button>
        </div>
      }>Dashboard</SectionTitle>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 24 }}>
        <Metric label="Overdue" value={overdue} sub="past 20 working days" tone="danger" />
        <Metric label="In flight" value={inProgress} sub="awaiting response" tone="info" />
        <Metric label="Fulfilled (30d)" value={fulfilled} sub="responses received" tone="ok" />
        <Metric label="Drafts" value={drafts} sub="not yet sent" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16 }}>
        <Card pad={0}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Active requests</div>
            <button onClick={() => go("tracker")} style={{ background: "none", border: "none", fontSize: 12, color: "var(--accent)", cursor: "pointer", fontWeight: 500, fontFamily: "inherit" }}>View all →</button>
          </div>
          <div>
            {reqs.filter(r => r.status !== "fulfilled" && r.status !== "refused").slice(0, 5).map((r) => {
              const elapsed = r.workingDaysElapsed;
              const pct = (elapsed / 20) * 100;
              const tone = r.status === "overdue" ? "danger" : pct > 70 ? "warn" : "info";
              return (
                <div key={r.id} style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", width: 100 }}>{r.id}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
                      <span style={{ fontSize: 12, color: "var(--muted)" }}>{r.recipientName}</span>
                      <span style={{ width: 3, height: 3, background: "var(--muted)", borderRadius: "50%" }} />
                      <span style={{ fontSize: 12, color: "var(--muted)", fontVariantNumeric: "tabular-nums" }}>Day {elapsed} / 20</span>
                      <div style={{ flex: 1, maxWidth: 120 }}>
                        <Bar pct={pct} tone={tone} />
                      </div>
                    </div>
                  </div>
                  <StatusPill status={r.status} />
                </div>
              );
            })}
          </div>
        </Card>

        <Card pad={0}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Inbox · LLM-extracted</div>
            <button onClick={() => go("inbox")} style={{ background: "none", border: "none", fontSize: 12, color: "var(--accent)", cursor: "pointer", fontWeight: 500, fontFamily: "inherit" }}>Open →</button>
          </div>
          <div>
            {window.INBOX.slice(0, 4).map((m) => (
              <div key={m.id} style={{ padding: "12px 18px", borderBottom: "1px solid var(--rule)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.fromName}</div>
                  <div style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)", whiteSpace: "nowrap" }}>{m.receivedAt.slice(5,10)}</div>
                </div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.extracted.responseClassification}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div style={{ marginTop: 16 }}>
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>This week</div>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>Working-day countdown · England &amp; Wales</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
            {["Mon 25","Tue 26","Wed 27","Thu 28","Fri 29"].map((d, i) => (
              <div key={d} style={{
                padding: "10px 12px", border: "1px solid var(--rule)", borderRadius: 2,
                background: i === 3 ? "var(--nav-active-bg)" : "var(--surface-2)"
              }}>
                <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>{d}</div>
                <div style={{ fontSize: 13, color: "var(--text)", marginTop: 6, fontWeight: i === 3 ? 600 : 500 }}>
                  {["2 due","—","1 due","3 due","1 overdue"][i]}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });