// ─── DASHBOARD ────────────────────────────────────────────
const DashboardScreen = ({ goto }) => {
  const kpis = [
    { label: "Open Tasks", value: 23, trend: "+4 this week", up: false, data: [12,14,16,15,18,20,19,21,23] },
    { label: "In Review",  value: 5,  trend: "−2 vs last wk", up: true,  data: [9,8,8,7,7,6,6,5,5] },
    { label: "Wiki Entries", value: 31, trend: "+2 synced",  up: true,  data: [22,24,25,26,28,29,30,31,31] },
    { label: "Vertical Slice", value: "72%", trend: "+6% this wk", up: true, data: [50,54,57,60,62,66,68,70,72] },
  ];

  const upcoming = window.TASKS
    .filter(t => t.col !== "done")
    .slice(0, 5);

  return (
    <div className="content-pad" data-screen-label="01 Dashboard">
      <div className="page-head">
        <div>
          <div className="page-title display">Mission Control</div>
          <div className="page-sub">
            <span className="mono" style={{ marginRight: 8 }}>HUSK</span>
            Working title · Chapter 1 vertical slice · 47 days to publisher demo
          </div>
        </div>
        <div className="right">
          <button className="btn ghost"><Icon name="filter" size={13}/> This week</button>
          <button className="btn primary"><Icon name="plus" size={13}/> New task</button>
        </div>
      </div>

      <div className="dash-grid">
        {/* KPI ROW */}
        {kpis.map((k, i) => (
          <div className="card span-3 kpi" key={i}>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value">{k.value}</div>
            <div className={`kpi-trend ${k.up ? "up" : "down"}`}>
              <Icon name={k.up ? "check" : "zap"} size={11}/>{k.trend}
            </div>
            <Sparkline data={k.data} color="var(--accent)"/>
          </div>
        ))}

        {/* MILESTONES */}
        <div className="card span-7">
          <div className="card-head">
            <div className="card-title">Milestones</div>
            <div className="card-sub">Roadmap to alpha</div>
            <div className="spacer"/>
            <button className="btn ghost small">View all</button>
          </div>
          <div className="card-body" style={{ paddingTop: 4 }}>
            {window.MILESTONES.map((m, i) => (
              <div className="ms-row" key={i}>
                <div>
                  <div className="ms-name">{m.name}</div>
                  <div className="ms-date">{m.date}</div>
                </div>
                <div className="ms-prog">
                  <div className="bar-track">
                    <div className="bar-fill" style={{ width: `${m.progress * 100}%` }}/>
                  </div>
                </div>
                <div className="tnum mono small muted" style={{ minWidth: 36, textAlign: "right" }}>
                  {Math.round(m.progress * 100)}%
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ACTIVITY */}
        <div className="card span-5">
          <div className="card-head">
            <div className="card-title">Recent activity</div>
            <div className="spacer"/>
            <span className="chip"><span className="dot" style={{ background: "var(--done)" }}/>vault synced</span>
          </div>
          <div className="card-body" style={{ paddingTop: 4 }}>
            {window.ACTIVITY.slice(0, 6).map((a, i) => (
              <div className="activity-item" key={i}>
                <div className="a-icon"><Icon name={a.icon} size={13}/></div>
                <div>
                  <span className="who">{a.who}</span>{" "}
                  <span className="muted">{a.what}</span>{" "}
                  <span>{a.target}</span>
                </div>
                <div className="when">{a.when}</div>
              </div>
            ))}
          </div>
        </div>

        {/* UPCOMING */}
        <div className="card span-7">
          <div className="card-head">
            <div className="card-title">Your week</div>
            <div className="card-sub">Tasks due in the next 7 days</div>
            <div className="spacer"/>
            <button className="btn ghost small" onClick={() => goto("tasks")}>Open tasks</button>
          </div>
          <table className="task-table" style={{ border: 0, borderRadius: 0, background: "transparent" }}>
            <tbody>
              {upcoming.map(t => (
                <tr key={t.id} onClick={() => goto("tasks")}>
                  <td style={{ width: 18 }}><StatusDot status={t.col}/></td>
                  <td className="t-id">{t.id}</td>
                  <td className="t-title">{t.title}</td>
                  <td><TagChip tag={t.tag}/></td>
                  <td><PrioDot p={t.prio}/></td>
                  <td className="muted tnum">{t.due}</td>
                  <td>
                    <div style={{ display: "flex" }}>
                      {t.assignees.map(a => <Avatar key={a} id={a} size={20}/>)}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* QUICK NAV — WIKI HIGHLIGHTS */}
        <div className="card span-5">
          <div className="card-head">
            <div className="card-title">Wiki — recently updated</div>
            <div className="spacer"/>
            <button className="btn ghost small" onClick={() => goto("wiki")}>Open codex</button>
          </div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {window.WIKI.slice(0, 5).map(w => (
              <div key={w.id} className="row" style={{
                padding: "9px 0",
                borderBottom: "1px solid var(--line)",
                cursor: "pointer",
                gap: 10,
              }} onClick={() => goto("wiki", { entryId: w.id })}>
                <span className="mono small muted" style={{ minWidth: 64 }}>{w.id}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {w.title}
                  </div>
                  <div className="muted small" style={{ marginTop: 2 }}>{w.updated}</div>
                </div>
                <Icon name="chevron-r" size={14} className="muted"/>
              </div>
            ))}
          </div>
        </div>

        {/* STUDIO PULSE / NOTES */}
        <div className="card span-12">
          <div className="card-head">
            <div className="card-title">Studio pulse</div>
            <div className="card-sub">Director's note · pinned</div>
            <div className="spacer"/>
            <span className="chip"><Avatar id="ka" size={16}/> Kade</span>
          </div>
          <div className="card-body" style={{ fontSize: 13, color: "var(--text-mid)", lineHeight: 1.7 }}>
            We're 47 days from the publisher demo. The Sanity loop is feeling close — the Tracking→Hunting curve is the biggest gameplay risk left. Mira: silo and barn are priority; everything else can slide. Toby: Aunt Wren lines drive Ch.1 — let's lock those by Friday so we can do the cinematic capture next week. <span style={{ color: "var(--accent)" }}>One thousand no's for every yes.</span>
          </div>
        </div>
      </div>
    </div>
  );
};

window.DashboardScreen = DashboardScreen;