(() => {
/* global React, Icons, Avatar, MOCK, useCountUp, toast, Spark, Bars, Ring, fmtNum */
const { useState, useEffect, useMemo } = React;

/* =========================================================
   OVERVIEW (home)
   ========================================================= */

function StatTile({ label, value, accent, delta, sparkData, sparkColor }) {
  const n = useCountUp(value, 800);
  return (
    <div className="card stat hover" style={{ position: "relative", padding: 18 }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8, marginBottom: 8 }}>
        <div className="stat-label" style={{ marginTop: 0, fontWeight: 600, fontSize: 11.5, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</div>
        {delta && (
          <div className="stat-delta" style={{ color: delta.startsWith("+") ? "var(--mint)" : "var(--coral)", marginTop: 0, fontSize: 11, whiteSpace: "nowrap" }}>
            <Icons.ArrowUp size={10} sw="2.2" style={{ transform: delta.startsWith("+") ? "" : "rotate(180deg)" }} />
            {delta}
          </div>
        )}
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 8 }}>
        <div className="stat-value" style={{ fontSize: 38 }}>{fmtNum(n)}</div>
        {sparkData && <Spark data={sparkData} color={sparkColor || accent} w={70} h={32} />}
      </div>
      <div style={{
        position: "absolute", left: 18, right: 18, bottom: 0, height: 2,
        background: accent || "var(--mint)", borderRadius: 99,
        transform: "scaleX(0.2)", transformOrigin: "0 50%",
        opacity: 0.55,
      }} />
    </div>
  );
}

function ActivityItem({ a }) {
  const IconC = Icons[a.icon] || Icons.Sparkle;
  const toneBg = {
    mint:  "var(--mint-soft)",
    coral: "var(--coral-soft)",
    gold:  "var(--gold-soft)",
    lilac: "#ece8f7",
    rose:  "#f7e3ec",
  }[a.tone];
  const toneFg = {
    mint:  "var(--mint)",
    coral: "var(--coral)",
    gold:  "var(--gold)",
    lilac: "var(--lilac)",
    rose:  "var(--rose)",
  }[a.tone];
  return (
    <div style={{
      display: "flex", alignItems: "flex-start", gap: 12,
      padding: "14px 4px", borderBottom: "1px solid var(--line)",
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: toneBg, color: toneFg,
        display: "grid", placeItems: "center", flex: "0 0 32px",
      }}><IconC size={15} /></div>
      <div style={{ flex: 1, fontSize: 13, lineHeight: 1.5 }}>
        <span style={{ fontWeight: 600 }}>{a.who}</span>{" "}
        <span style={{ color: "var(--muted)" }}>{a.action}</span>{" "}
        <span style={{ fontWeight: 600 }}>{a.target}</span>
      </div>
      <div style={{ fontSize: 11, color: "var(--muted-2)", whiteSpace: "nowrap" }}>{a.time}</div>
    </div>
  );
}

function ScreenHome({ go }) {
  return (
    <div className="screen" style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 24, alignItems: "start" }}>
      {/* LEFT — primary */}
      <div className="col" style={{ gap: 24 }}>
        {/* Editorial hero */}
        <section style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24, alignItems: "stretch" }}>
          <div className="card" style={{ padding: 28, position: "relative", overflow: "hidden" }}>
            <div className="eyebrow">{MOCK.org.cycle}</div>
            <h1 className="h-display" style={{ marginTop: 10 }}>
              Good morning,<br/><em>Greenwood.</em>
            </h1>
            <p className="lede" style={{ marginTop: 14 }}>
              312 students screened this week — your pace is up 18% versus last cycle. Three sections are flagged for follow-up.
            </p>
            <div className="row" style={{ marginTop: 20, gap: 10 }}>
              <button className="btn btn-primary" onClick={() => go("capture")}>
                Continue capture <Icons.ArrowR size={14} />
              </button>
              <button className="btn btn-ghost" onClick={() => go("records")}>
                View records
              </button>
            </div>

            {/* decorative arc */}
            <svg width="200" height="200" viewBox="0 0 200 200" style={{ position: "absolute", right: -30, bottom: -30, opacity: 0.7 }}>
              <defs>
                <linearGradient id="arc-g" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="var(--mint)" stopOpacity="0.25" />
                  <stop offset="1" stopColor="var(--mint)" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d="M20 130 q80 -60 160 0" fill="none" stroke="url(#arc-g)" strokeWidth="80" strokeLinecap="round" />
            </svg>
          </div>

          {/* Ring + program progress */}
          <div className="card-ink card" style={{ padding: 24, color: "var(--paper)", display: "flex", flexDirection: "column", gap: 16, position: "relative", overflow: "hidden" }}>
            <div className="eyebrow" style={{ color: "rgba(246,241,231,0.5)" }}>Coverage</div>
            <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
              <Ring value={0.71} size={108} stroke={10} color="var(--mint-glow)" label="71%" sublabel="SCREENED" />
              <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                <Legend dot="var(--mint-glow)" label="Captured"   value="912" />
                <Legend dot="rgba(246,241,231,0.25)" label="Remaining" value="372" />
                <Legend dot="var(--coral)" label="Flagged"      value="18" />
              </div>
            </div>
            <div style={{ borderTop: "1px solid rgba(246,241,231,0.08)", paddingTop: 14, marginTop: "auto", display: "flex", justifyContent: "space-between", fontSize: 12 }}>
              <span style={{ color: "rgba(246,241,231,0.55)" }}>Cycle closes</span>
              <span style={{ fontFamily: "var(--font-mono)" }}>Jun 14, 2026</span>
            </div>
          </div>
        </section>

        {/* Stat tiles */}
        <section style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="stagger">
          <StatTile label="Students enrolled"   value={1284} delta="+128 cycle"  accent="var(--mint)"  sparkData={[200,400,650,820,940,1100,1284]} sparkColor="var(--mint)" />
          <StatTile label="Screened this week"  value={312}  delta="+18%"        accent="var(--gold)"  sparkData={[42,58,71,65,88,102,96]}         sparkColor="var(--gold)" />
          <StatTile label="Pending reports"     value={47}   delta="-12"          accent="var(--coral)" sparkData={[70,68,64,59,55,52,47]}          sparkColor="var(--coral)" />
          <StatTile label="Flagged cases"       value={18}   delta="+3"           accent="var(--rose)"  sparkData={[12,13,15,15,16,18,18]}          sparkColor="var(--rose)" />
        </section>

        {/* Weekly chart + activity feed */}
        <section style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16 }}>
          <div className="card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <h2 className="h-section">This week</h2>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Daily captures · May 12 — May 18</div>
              </div>
              <div className="row" style={{ gap: 6 }}>
                <span className="pill mint"><span className="dot" /> Captures</span>
                <button className="btn btn-soft" style={{ padding: "6px 10px", fontSize: 12 }}>Week ▾</button>
              </div>
            </div>
            <div style={{ marginTop: 18 }}>
              <Bars data={MOCK.weekBars} labels={MOCK.weekLabels} h={160} color="var(--mint)" />
            </div>
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line)", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
              <Mini label="Avg / day" value="74" tone="mint" />
              <Mini label="Peak day"  value="Sat · 102" tone="gold" />
              <Mini label="Operators" value="6 active" tone="lilac" />
            </div>
          </div>

          <div className="card" style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <h2 className="h-section">Activity</h2>
              <button className="maglink" style={{ fontSize: 12, color: "var(--muted)" }}>View all</button>
            </div>
            <div style={{ marginTop: 8, marginLeft: -4, marginRight: -4 }}>
              {MOCK.activity.map((a, i) => <ActivityItem key={i} a={a} />)}
            </div>
          </div>
        </section>
      </div>

      {/* RIGHT rail */}
      <aside className="col" style={{ gap: 16 }}>
        {/* Quick actions */}
        <div className="card-paper card" style={{ padding: 18 }}>
          <div className="eyebrow">Quick actions</div>
          <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <QuickBtn icon="Camera"  label="Capture"   onClick={() => go("capture")} />
            <QuickBtn icon="Patient" label="Add patient" onClick={() => go("patients")} />
            <QuickBtn icon="Upload"  label="Bulk import" onClick={() => go("patients")} />
            <QuickBtn icon="Download" label="Export"     onClick={() => { toast("Exporting records as CSV…"); }} />
          </div>
        </div>

        {/* Upcoming */}
        <div className="card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <h2 className="h-section" style={{ fontSize: 22 }}>Upcoming</h2>
            <Icons.Calendar size={16} stroke="var(--muted)" />
          </div>
          <div style={{ marginTop: 8 }}>
            {MOCK.upcoming.map((u, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "12px 0", borderBottom: i < MOCK.upcoming.length - 1 ? "1px solid var(--line)" : "0"
              }}>
                <div style={{
                  width: 44, textAlign: "center", padding: "6px 0",
                  background: "var(--paper-2)", border: "1px solid var(--line)", borderRadius: 8,
                }}>
                  <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".08em" }}>{u.weekday}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 16, lineHeight: 1 }}>{u.date.split(" ")[1]}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{u.title}</div>
                  <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2 }}>{u.where} · {u.count.toLocaleString()}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* AI insight */}
        <div className="card-ink card" style={{ padding: 18, color: "var(--paper)", position: "relative", overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Icons.Sparkle size={15} stroke="var(--mint-glow)" />
            <span className="eyebrow" style={{ color: "rgba(246,241,231,0.55)" }}>Oralens AI</span>
          </div>
          <p style={{ fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.25, margin: "10px 0 0", letterSpacing: "-0.01em" }}>
            “Three students in <em style={{ color: "var(--mint-glow)" }}>C-301</em> show early enamel demineralization. Consider topical fluoride at next visit.”
          </p>
          <button className="maglink" style={{ marginTop: 12, fontSize: 12, color: "var(--mint-glow)" }}>Review cases →</button>
          <div style={{ position: "absolute", right: -20, top: -20, width: 120, height: 120, borderRadius: "50%",
                       background: "radial-gradient(circle, rgba(78,214,176,0.18), transparent 70%)" }} />
        </div>
      </aside>
    </div>
  );
}

function Legend({ dot, label, value }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: 8, height: 8, borderRadius: 99, background: dot }} />
      <span style={{ fontSize: 12, color: "rgba(246,241,231,0.7)", flex: 1 }}>{label}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{value}</span>
    </div>
  );
}

function Mini({ label, value, tone }) {
  return (
    <div>
      <div style={{ fontSize: 10.5, color: "var(--muted-2)", letterSpacing: ".06em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1, marginTop: 4, color: `var(--${tone}, var(--ink))` }}>{value}</div>
    </div>
  );
}

function QuickBtn({ icon, label, onClick }) {
  const IconC = Icons[icon];
  return (
    <button onClick={onClick} className="card hover" style={{
      padding: "14px 12px", textAlign: "left", display: "flex", flexDirection: "column", gap: 10,
      background: "var(--surface)",
    }}>
      <IconC size={18} stroke="var(--mint)" />
      <span style={{ fontSize: 12.5, fontWeight: 600 }}>{label}</span>
    </button>
  );
}

window.ScreenHome = ScreenHome;

})();