/* v2 Screen 5 — Monitoring / Return-to-Play
 * Refinements: dashboard now uses the same card chrome and type ladder
 * as the mobile screens. Stronger top-line summary, calmer charts.
 */
const V2Screen5 = () => {
  return (
    <div className="v2 desk">
      {/* Side rail */}
      <aside className="desk-rail">
        <div style={{ display: "flex", alignItems: "baseline" }}>
          <span className="wordmark">OrisTrack</span>
          <span className="wordmark-meta">research</span>
        </div>

        <div className="eyebrow" style={{ marginTop: 28, marginBottom: 6 }}>Player</div>
        <div className="h3" style={{ fontFamily: "var(--v2-serif)", fontSize: 17, fontWeight: 500 }}>M. Halverson</div>
        <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5, marginTop: 2 }}>Trumpet · ID OT-0142</div>
        <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5 }}>Enrolled 11 Mar 2026</div>

        <hr className="hr" style={{ margin: "20px 0" }} />

        {[
          ["Overview",       true],
          ["Sessions",       false],
          ["Trends",         false],
          ["Self-report",    false],
          ["Camera capture", false],
          ["sEMG (planned)", false, "phase 2"],
          ["Notes",          false],
          ["Export",         false],
        ].map(([k, active, badge]) => (
          <div key={k} style={{
            padding: "8px 10px",
            margin: "0 -10px 2px",
            borderRadius: 4,
            fontSize: 13,
            color: active ? "var(--v2-ink)" : "var(--v2-ink-2)",
            fontWeight: active ? 500 : 400,
            background: active ? "var(--v2-paper)" : "transparent",
            border: active ? "1px solid var(--v2-hairline-2)" : "1px solid transparent",
            display: "flex", justifyContent: "space-between", alignItems: "center",
          }}>
            <span>{k}</span>
            {badge && <span className="cap" style={{ fontSize: 9.5 }}>{badge}</span>}
          </div>
        ))}

        <div style={{ marginTop: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Study</div>
          <div className="body-sm" style={{ fontSize: 11.5, lineHeight: 1.5 }}>
            OrisTrack concept prototype<br/>Public-facing visual supplement
          </div>
        </div>
      </aside>

      {/* Main */}
      <main className="desk-main">
        {/* Header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Monitoring · return-to-play</div>
            <h1 className="h1">Longitudinal view <span style={{ color: "var(--v2-ink-3)" }}>— last 90 days</span></h1>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <span className="pill"><span className="dot" /> Recovery — phase 3 of 4</span>
            <span className="pill muted"><span className="dot" /> Next check-in · Tue 28 Apr</span>
          </div>
        </div>

        {/* KPI strip */}
        <div className="card" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
        }}>
          {[
            { k: "Sessions logged",       v: "14",   sub: "in 90 days" },
            { k: "Adherence",             v: "93%",  sub: "vs. 2× / week target" },
            { k: "Mean fatigue",          v: "2.7",  sub: "/10 · σ 0.9" },
            { k: "Days since flare",      v: "11",   sub: "last: 14 Apr" },
          ].map((c, i) => (
            <div key={c.k} style={{
              padding: "18px 22px",
              borderRight: i < 3 ? "1px solid var(--v2-hairline-2)" : "none",
            }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{c.k}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <div className="num-xl">{c.v}</div>
                <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5 }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Two-col body */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 20, marginTop: 20 }}>
          {/* Trends panel */}
          <div className="card">
            <div className="card-head" style={{ alignItems: "flex-start" }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 4 }}>Fatigue & corner stability — 14 sessions</div>
                <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5 }}>
                  Each measure plotted against this player's own baseline band.
                </div>
              </div>
              <div style={{ display: "flex", gap: 14 }}>
                <V2Legend dot="var(--v2-today)" label="Fatigue" />
                <V2Legend dot="var(--v2-ochre)" label="Corner stability" />
                <V2Legend dot="var(--v2-ink-3)" dashed label="Baseline ± σ" />
              </div>
            </div>
            <div style={{ padding: "20px 24px 0" }}>
              <V2DualChart />
            </div>
            <div style={{ padding: "12px 24px 22px" }}>
              <V2PhaseStrip />
            </div>
          </div>

          {/* Right column */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <div className="card">
              <div className="card-head">
                <div className="eyebrow">Recent status</div>
                <span className="pill ochre"><span className="dot" /> Attention</span>
              </div>
              <div className="card-body">
                <h2 className="h2">Trending toward baseline.</h2>
                <p className="body-sm" style={{ marginTop: 10 }}>
                  Corner stability dipped on session 014, alongside elevated fatigue (4/10). Pattern matches typical post-load recovery in this player's history.
                </p>
                <hr className="hr" style={{ margin: "16px 0" }} />
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                  <V2Stat k="7-day Δ"  v="−4%"  note="vs. baseline" tone="ochre" />
                  <V2Stat k="30-day Δ" v="+1%"  note="vs. baseline" />
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><div className="eyebrow">Next check-in</div></div>
              <div className="card-body">
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                  <div className="num-xl" style={{ fontSize: 24 }}>Tue · 28 Apr</div>
                  <div className="cap">in 3 days</div>
                </div>
                <div className="body-sm" style={{ marginTop: 8 }}>
                  Short battery — 4 tasks · ~6 min. Triggered by fatigue ≥ 3 in the previous session.
                </div>
                <button className="btn" style={{ marginTop: 14, height: 40, fontSize: 13 }}>Schedule reminder</button>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><div className="eyebrow">Return-to-play phases</div></div>
              <div style={{ padding: "8px 24px 18px" }}>
                {[
                  ["1", "Rest / asymptomatic", "complete"],
                  ["2", "Reintroduce buzzing",  "complete"],
                  ["3", "Graded playing load",  "current"],
                  ["4", "Full performance load","upcoming"],
                ].map(([n, label, state]) => (
                  <div key={n} style={{
                    display: "grid", gridTemplateColumns: "20px 1fr auto",
                    alignItems: "center", gap: 10,
                    padding: "10px 0",
                    borderBottom: "1px solid var(--v2-hairline-2)",
                  }}>
                    <div style={{
                      width: 16, height: 16, borderRadius: "50%",
                      border: "1.5px solid " + (state === "current" ? "var(--v2-ink)" : "var(--v2-hairline)"),
                      background: state === "complete" ? "var(--v2-ink)" : "var(--v2-paper)",
                      color: "var(--v2-paper)",
                      fontFamily: "var(--v2-mono)", fontSize: 9,
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}>{state === "complete" ? "✓" : ""}</div>
                    <div className="h3" style={{
                      fontWeight: state === "current" ? 500 : 400,
                      color: state === "upcoming" ? "var(--v2-ink-3)" : "var(--v2-ink)",
                      fontSize: 13,
                    }}>
                      Phase {n}. {label}
                    </div>
                    <div className="cap">{state}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Session timeline */}
        <div className="card" style={{ marginTop: 20 }}>
          <div className="card-head">
            <div className="eyebrow">Session timeline · 14 of 14</div>
            <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11 }}>
              solid · in baseline   ·   open · attention   ·   striped · self-report only
            </div>
          </div>
          <div style={{ padding: "26px 28px 30px" }}>
            <V2Timeline />
          </div>
        </div>

        {/* Baseline-rule signature — same as mobile */}
        <div style={{ marginTop: 20, maxWidth: 760 }}>
          <V2BaselineRule eyebrow="Interpretation">
            All comparisons are computed against this player's own baseline distribution (n = 12, 11 Mar – 7 Apr 2026). OrisTrack is a research instrument; outputs are descriptive, not diagnostic.
          </V2BaselineRule>
        </div>
      </main>
    </div>
  );
};

const V2Legend = ({ dot, label, dashed }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
    {dashed
      ? <span style={{ width: 14, height: 0, borderTop: "1px dashed " + dot, display: "inline-block" }} />
      : <span style={{ width: 8, height: 8, background: dot, borderRadius: "50%", display: "inline-block" }} />}
    <span className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11 }}>{label}</span>
  </div>
);

const V2Stat = ({ k, v, note, tone }) => (
  <div>
    <div className="cap">{k}</div>
    <div className="num-xl" style={{ fontSize: 22, color: tone === "ochre" ? "var(--v2-ochre)" : "var(--v2-ink)" }}>{v}</div>
    <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11 }}>{note}</div>
  </div>
);

const V2DualChart = () => {
  const fat = [2, 2, 3, 2, 1, 2, 3, 2, 2, 3, 2, 3, 4, 4];
  const cor = [0.88,0.86,0.87,0.85,0.89,0.86,0.88,0.87,0.85,0.86,0.84,0.83,0.81,0.78];
  const w = 760, h = 240, padL = 40, padR = 44, padT = 18, padB = 28;
  const n = fat.length;
  const xs = Array.from({length: n}, (_, i) => padL + (i*(w - padL - padR))/(n-1));
  const fatY = (v) => padT + (1 - v/8) * (h - padT - padB);
  const corMin = 0.74, corMax = 0.94;
  const corY = (v) => padT + (1 - (v - corMin)/(corMax - corMin)) * (h - padT - padB);
  const fatPath = xs.map((x, i) => `${i===0?"M":"L"} ${x} ${fatY(fat[i])}`).join(" ");
  const corPath = xs.map((x, i) => `${i===0?"M":"L"} ${x} ${corY(cor[i])}`).join(" ");
  const fatBase = 2.4, fatSig = 0.9;
  const corBase = 0.86, corSig = 0.03;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} style={{ display: "block" }}>
      <rect x={padL} y={fatY(fatBase + fatSig)} width={w-padL-padR} height={fatY(fatBase - fatSig) - fatY(fatBase + fatSig)} fill="var(--v2-bone-2)" opacity="0.7" />
      <line x1={padL} x2={w-padR} y1={fatY(fatBase)} y2={fatY(fatBase)} stroke="var(--v2-ink-3)" strokeDasharray="3 3" strokeWidth="1"/>
      <rect x={padL} y={corY(corBase + corSig)} width={w-padL-padR} height={corY(corBase - corSig) - corY(corBase + corSig)} fill="var(--v2-ochre-soft)" opacity="0.5" />
      {[0,2,4,6,8].map(t => (
        <text key={"l"+t} x={padL - 8} y={fatY(t) + 3} textAnchor="end" fontFamily="var(--v2-mono)" fontSize="10" fill="var(--v2-ink-3)">{t}</text>
      ))}
      {[0.78, 0.84, 0.90].map(t => (
        <text key={"r"+t} x={w - padR + 6} y={corY(t) + 3} textAnchor="start" fontFamily="var(--v2-mono)" fontSize="10" fill="var(--v2-ink-3)">{t.toFixed(2)}</text>
      ))}
      {xs.map((x, i) => (
        <text key={i} x={x} y={h - 8} textAnchor="middle" fontFamily="var(--v2-mono)" fontSize="9.5" fill="var(--v2-ink-3)">
          {String(i+1).padStart(2,"0")}
        </text>
      ))}
      <path d={corPath} fill="none" stroke="var(--v2-ochre)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d={fatPath} fill="none" stroke="var(--v2-today)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      {xs.map((x, i) => (
        <g key={"d"+i}>
          <circle cx={x} cy={corY(cor[i])} r={2} fill="var(--v2-paper)" stroke="var(--v2-ochre)" strokeWidth="1.2" />
          <circle cx={x} cy={fatY(fat[i])} r={2} fill="var(--v2-paper)" stroke="var(--v2-today)" strokeWidth="1.2" />
        </g>
      ))}
      <circle cx={xs[n-1]} cy={corY(cor[n-1])} r={4} fill="var(--v2-ochre)" stroke="var(--v2-paper)" strokeWidth="2" />
      <circle cx={xs[n-1]} cy={fatY(fat[n-1])} r={4} fill="var(--v2-today)" stroke="var(--v2-paper)" strokeWidth="2" />
      <text x={padL - 8} y={padT + 4} textAnchor="end" fontFamily="var(--v2-mono)" fontSize="9.5" fill="var(--v2-ink-3)">FATIGUE /10</text>
      <text x={w - padR + 6} y={padT + 4} textAnchor="start" fontFamily="var(--v2-mono)" fontSize="9.5" fill="var(--v2-ink-3)">CORNER IDX</text>
    </svg>
  );
};

const V2PhaseStrip = () => {
  const phases = [
    { name: "Phase 1 · rest",        w: 2 },
    { name: "Phase 2 · reintroduce", w: 4 },
    { name: "Phase 3 · graded load", w: 6, current: true },
    { name: "Phase 4 · full load",   w: 2, future: true },
  ];
  return (
    <div>
      <div className="cap" style={{ marginBottom: 8, fontSize: 10.5 }}>Return-to-play phases — overlay</div>
      <div style={{ display: "flex", height: 28, border: "1px solid var(--v2-hairline-2)", borderRadius: 4, overflow: "hidden" }}>
        {phases.map((p, i) => (
          <div key={p.name} style={{
            flex: p.w,
            background: p.future
              ? "repeating-linear-gradient(-45deg, var(--v2-bone-2) 0 6px, var(--v2-paper) 6px 12px)"
              : (p.current ? "var(--v2-bone-2)" : "var(--v2-paper)"),
            borderRight: i < phases.length - 1 ? "1px solid var(--v2-hairline-2)" : "none",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--v2-mono)", fontSize: 10.5,
            color: p.current ? "var(--v2-ink)" : "var(--v2-ink-2)",
            fontWeight: p.current ? 500 : 400,
            letterSpacing: "0.04em",
          }}>{p.name}</div>
        ))}
      </div>
    </div>
  );
};

const V2Timeline = () => {
  const items = [
    {d:"11 Mar", k:"full"}, {d:"14 Mar", k:"full"}, {d:"18 Mar", k:"full"},
    {d:"21 Mar", k:"sr"},   {d:"25 Mar", k:"full"}, {d:"28 Mar", k:"full"},
    {d:"01 Apr", k:"full"}, {d:"04 Apr", k:"sr"},   {d:"08 Apr", k:"full"},
    {d:"11 Apr", k:"full"}, {d:"14 Apr", k:"flag"}, {d:"18 Apr", k:"full"},
    {d:"22 Apr", k:"sr"},   {d:"25 Apr", k:"flag", today: true},
  ];
  return (
    <div style={{ position: "relative", height: 50 }}>
      <div style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1, background: "var(--v2-hairline-2)" }} />
      {items.map((it, i) => {
        const left = (i / (items.length - 1)) * 100;
        const fill =
          it.k === "full" ? "var(--v2-ink)" :
          it.k === "flag" ? "var(--v2-ochre)" :
          "var(--v2-paper)";
        const stroke =
          it.k === "sr"   ? "var(--v2-ink-3)" :
          it.k === "flag" ? "var(--v2-ochre)" : "var(--v2-ink)";
        const pattern = it.k === "sr"
          ? "repeating-linear-gradient(-45deg, var(--v2-paper) 0 3px, var(--v2-bone-2) 3px 6px)"
          : null;
        return (
          <div key={i} style={{ position: "absolute", left: `calc(${left}% - 7px)`, top: "50%", transform: "translateY(-50%)" }}>
            <div style={{
              width: 14, height: 14, borderRadius: "50%",
              background: pattern || fill,
              border: "1.5px solid " + stroke,
              boxShadow: it.today ? "0 0 0 4px var(--v2-bone-2)" : "none",
            }} />
            <div className="cap" style={{
              position: "absolute",
              top: i % 2 === 0 ? -22 : 22,
              left: "50%", transform: "translateX(-50%)",
              whiteSpace: "nowrap", fontSize: 9.5,
              color: it.today ? "var(--v2-ink)" : "var(--v2-ink-3)",
              fontWeight: it.today ? 600 : 400,
            }}>{it.d}{it.today ? " · today" : ""}</div>
          </div>
        );
      })}
    </div>
  );
};

window.V2Screen5 = V2Screen5;