// DashboardScreen.jsx

function DashboardScreen() {
  const [summary, setSummary] = React.useState(null);
  const [dueItems, setDueItems] = React.useState(null);

  React.useEffect(() => {
    window.API?.getDashboard().then(d => {
      setSummary(d?.summary || null);
      setDueItems(d?.due_items || null);
    }).catch(() => {});
  }, []);

  return (
    <section className="dash">
      <header className="dash-head">
        <div className="eyebrow">This week</div>
        <h1 className="serif-head">
          {summary
            ? `${summary.total_items} items tracked, ${summary.total_sessions} sessions logged.`
            : "Loading your graph…"}
        </h1>
      </header>

      <div className="stat-row">
        <div className="stat-card">
          <div className="stat-num">{summary?.total_items ?? "—"}</div>
          <div className="stat-sub">items in graph</div>
        </div>
        <div className="stat-card">
          <div className="stat-num">{summary?.total_sessions ?? "—"}</div>
          <div className="stat-sub">sessions</div>
        </div>
        <div className="stat-card">
          <div className="stat-num">{summary?.total_signals ?? "—"}</div>
          <div className="stat-sub">signals recorded</div>
        </div>
        <div className="stat-card">
          <div className="stat-num">{summary?.total_hours ?? "—"}</div>
          <div className="stat-sub">hours invested</div>
        </div>
      </div>

      <div className="section-label">Due today</div>
      <div className="list">
        {[
          ["Enthalpy dH", "Thermodynamics", "frontier"],
          ["Work–Energy theorem", "Mechanics", "blurry"],
          ["Gauss's law (integral form)", "E&M", "decay"],
          ["Divergence theorem", "Vector calc", "blurry"],
        ].map(([title, topic, state]) => (
          <div className="list-row" key={title}>
            <div>
              <div className="row-title">{title}</div>
              <div className="row-sub">{topic}</div>
            </div>
            <span className={"chip chip-" + state}>{state}</span>
          </div>
        ))}
      </div>

      <div className="section-label">Trend · last 14 days</div>
      <div className="trend-card">
        <svg viewBox="0 0 600 100" className="spark">
          <polyline points="0,80 40,75 80,60 120,65 160,50 200,55 240,40 280,42 320,30 360,33 400,25 440,28 480,18 520,22 560,12 600,15"
            fill="none" stroke="rgb(0,0,0)" strokeWidth="1.5"/>
        </svg>
      </div>
    </section>
  );
}

Object.assign(window, { DashboardScreen });