/* ============================================================
   PainTrack App — Clinician dashboard (desktop)
   ============================================================ */

function ClinicianApp({ onLogout }) {
  const [view, setView] = useState("caseload");
  const [selId, setSelId] = useState("okonkwo");
  const [filter, setFilter] = useState("all");
  const sel = PATIENTS.find(p => p.id === selId);

  const nav = [
    ["caseload", "Caseload", "home"],
    ["insights", "Insights", "chart"],
    ["schedule", "Schedule", "calendar"],
    ["education", "Education", "book"],
  ];

  return (
    <div className="clin">
      <aside className="clin__side">
        <div className="clin__brand"><Brand h={34} className="pt-logo--on-dark" /></div>
        <nav className="clin__nav">
          {nav.map(([id, label, ic]) => (
            <button key={id} className={"clin__nav-btn" + (view === id ? " on" : "")} onClick={() => setView(id)}>
              <Icon name={ic} size={19} /> <span>{label}</span>
            </button>
          ))}
        </nav>
        <div className="clin__side-foot">
          <div className="clin__me">
            <div className="clin__me-av">AP</div>
            <div><b>Dr. A. Perelman</b><p>Northway Pain</p></div>
          </div>
          <button className="clin__logout" onClick={onLogout}><Icon name="logout" size={17} /></button>
        </div>
      </aside>

      <main className="clin__main">
        {view === "caseload" && <Caseload sel={sel} selId={selId} setSelId={setSelId} filter={filter} setFilter={setFilter} />}
        {view === "insights" && <Insights />}
        {view === "schedule" && <Schedule setSelId={setSelId} setView={setView} />}
        {view === "education" && <ClinEducation />}
      </main>
    </div>
  );
}

/* ---------------- Caseload ---------------- */
function Caseload({ sel, selId, setSelId, filter, setFilter }) {
  const counts = {
    all: PATIENTS.length,
    responding: PATIENTS.filter(p => p.status === "responding").length,
    nonresponder: PATIENTS.filter(p => p.status === "nonresponder").length,
    retreat: PATIENTS.filter(p => p.status === "retreat").length,
  };
  const rows = PATIENTS.filter(p => filter === "all" || p.status === filter);

  return (
    <>
      <header className="clin__head">
        <div>
          <h1>Today's caseload</h1>
          <p>Tuesday, January 27 · {counts.all} active patients · {counts.nonresponder + counts.retreat} need attention</p>
        </div>
        <div className="clin__search">
          <Icon name="search" size={17} /><input placeholder="Search patients…" />
        </div>
      </header>

      <div className="kpi-row">
        <Kpi v={counts.all} k="Active patients" tone="ink" ic="user" />
        <Kpi v={counts.responding} k="Responding" tone="good" ic="check" />
        <Kpi v={counts.retreat} k="Re-treatment due" tone="watch" ic="clock" />
        <Kpi v={counts.nonresponder} k="Non-responders" tone="flag" ic="flag" />
      </div>

      <div className="case-split">
        <section className="case-list-wrap">
          <div className="case-filters">
            {[["all", "All"], ["responding", "Responding"], ["retreat", "Re-treat due"], ["nonresponder", "Non-responders"]].map(([id, label]) => (
              <button key={id} className={"case-filter" + (filter === id ? " on" : "")} onClick={() => setFilter(id)}>
                {label} <i>{counts[id]}</i>
              </button>
            ))}
          </div>
          <table className="case-table">
            <thead><tr><th>Patient</th><th>30-day trend</th><th>Adherence</th><th>Last</th><th>Status</th></tr></thead>
            <tbody>
              {rows.map(p => {
                const m = STATUS_META[p.status];
                return (
                  <tr key={p.id} className={selId === p.id ? "sel" : ""} onClick={() => setSelId(p.id)}>
                    <td><div className="ct-name">{p.name}</div><div className="ct-cond">{p.condition}</div></td>
                    <td><Spark data={p.series.map(s => s.pain)} color={m.dot} /></td>
                    <td><div className="adh"><div className="adh__bar"><i style={{ width: p.adherence + "%", background: m.dot }} /></div><span>{p.adherence}%</span></div></td>
                    <td className="ct-cond">{p.last}</td>
                    <td><span className={"status status--" + m.cls}><span className="dot" style={{ background: m.dot }} />{m.label}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </section>

        <PatientDetail key={sel.id} p={sel} />
      </div>
    </>
  );
}

function Kpi({ v, k, tone, ic }) {
  return (
    <div className={"kpi kpi--" + tone}>
      <div className="kpi__ic"><Icon name={ic} size={18} /></div>
      <div className="kpi__v">{v}</div>
      <div className="kpi__k">{k}</div>
    </div>
  );
}

/* ---------------- Patient detail ---------------- */
function PatientDetail({ p }) {
  const m = STATUS_META[p.status];
  const flags = {
    okonkwo: [["check", "good", "Durable response — no action needed this cycle"]],
    bauer: [["clock", "watch", "Re-treatment window opening — offer repeat RFA booking"], ["chart", "watch", "Pain trending up 4 weeks running"]],
    delgado: [["flag", "flag", "No onset detected at 21 days — review before repeating"], ["dumbbell", "flag", "Physio adherence 74% — pattern under review"]],
    nilsson: [["check", "good", "Early responder — re-assess durability at week 8"]],
    haddad: [["flag", "flag", "Diagnostic block <50% relief — not RFA candidate"], ["moon", "flag", "Poor sleep correlating with pain spikes"]],
  }[p.id] || [];

  return (
    <aside className="detail">
      <div className="detail__top">
        <div className="detail__id">
          <div className="detail__av" style={{ background: m.dot }}>{p.initials}</div>
          <div>
            <h3>{p.name}</h3>
            <p>{p.age} · {p.condition}</p>
          </div>
        </div>
        <span className={"status status--" + m.cls}><span className="dot" style={{ background: m.dot }} />{m.label}</span>
      </div>

      <div className="detail__meta">
        <div><span className="eyebrow">Procedure</span><b>{p.proc.type}</b><p>{p.proc.level} · {p.proc.date}</p></div>
        <div><span className="eyebrow">Medication</span><b>{p.meds}</b><p>No escalation</p></div>
      </div>

      <div className="detail__chart">
        <ReliefChart series={p.series} procedureDay={p.proc.day} retreatDay={p.retreatDay} w={420} h={185} />
      </div>

      <div className="previsit">
        <div className="previsit__head"><span className="eyebrow">Pre-visit summary</span><span className="ai-chip"><Icon name="sparkle" size={12} /> auto-drafted</span></div>
        <p>{p.summary}</p>
        <div className="previsit__actions">
          <button className="btn btn--ghost btn--sm"><Icon name="check" size={14} stroke={2.4} /> Approve</button>
          <button className="btn btn--ghost btn--sm">Edit</button>
        </div>
      </div>

      <div className="detail__flags">
        <span className="eyebrow">Care-team flags</span>
        {flags.map(([ic, cls, txt], i) => (
          <div className={"flag-row flag-row--" + cls} key={i}>
            <Icon name={ic} size={16} /><span>{txt}</span>
          </div>
        ))}
      </div>
    </aside>
  );
}

/* ---------------- Insights ---------------- */
function Insights() {
  return (
    <>
      <header className="clin__head"><div><h1>Insights</h1><p>Patterns across your caseload, surfaced automatically</p></div></header>
      <div className="insight-cards">
        <div className="ins-card ins-card--feature">
          <span className="ins-flag"><span className="dot dot--amber" />Pattern detected</span>
          <h3>Pain spikes correlate with skipped physio sessions</h3>
          <p>Across 3 patients this week, reported pain rose an average of 2.1 points in the 48h after a missed physiotherapy appointment.</p>
          <div className="corr-mini">
            <div><span className="eyebrow">Reported pain</span><div className="corr-bars">{[3, 4, 7, 6, 3, 2, 6, 7].map((v, i) => <i key={i} style={{ height: v * 9 + "%", background: v >= 6 ? "#D75A3E" : "rgba(255,255,255,.3)" }} />)}</div></div>
            <div><span className="eyebrow">Physio attendance</span><div className="corr-bars">{[1, 1, 0, 0, 1, 1, 0, 0].map((v, i) => <i key={i} style={{ height: v ? "100%" : "22%", background: v ? "#5FC2A6" : "rgba(215,90,62,.5)" }} />)}</div></div>
          </div>
        </div>
        <div className="ins-stack">
          <div className="ins-stat"><span className="eyebrow">RFA cohort · median relief</span><b>7.2 <small>months</small></b><p>n = 38 · within published 6–12mo range</p></div>
          <div className="ins-stat"><span className="eyebrow">Non-responder rate</span><b>18<small>%</small></b><p>Flagged a median of 16 days post-procedure</p></div>
          <div className="ins-stat"><span className="eyebrow">Pre-visit summaries</span><b>92<small>%</small></b><p>Approved without edits this month</p></div>
        </div>
      </div>
      <div className="ins-note"><Icon name="sparkle" size={16} /><span>Insights are decision support drawn from check-in data, not diagnoses. Clinical judgment governs every decision.</span></div>
    </>
  );
}

/* ---------------- Schedule ---------------- */
function Schedule({ setSelId, setView }) {
  const appts = [
    ["09:00", "okonkwo", "Maya Okonkwo", "Follow-up · RFA review", "ready"],
    ["09:30", "bauer", "Lena Bauer", "Re-treatment discussion", "ready"],
    ["10:15", "delgado", "Rafael Delgado", "Case review · non-responder", "review"],
    ["11:00", "nilsson", "Anders Nilsson", "Week-8 durability check", "ready"],
    ["14:00", "haddad", "Sara Haddad", "Diagnostic block result", "review"],
  ];
  return (
    <>
      <header className="clin__head"><div><h1>Schedule</h1><p>Tuesday, January 27 · 5 appointments · summaries ready</p></div></header>
      <div className="sched-list">
        {appts.map(([t, id, name, reason, st], i) => (
          <button className="sched-row" key={i} onClick={() => { setSelId(id); setView("caseload"); }}>
            <span className="sched-time">{t}</span>
            <div className="sched-line" />
            <div className="sched-body"><b>{name}</b><p>{reason}</p></div>
            <span className={"sched-tag sched-tag--" + st}>{st === "ready" ? <><Icon name="check" size={13} stroke={2.4} /> Summary ready</> : <><Icon name="alert" size={13} /> Needs review</>}</span>
            <Icon name="chevR" size={16} style={{ color: "var(--muted)" }} />
          </button>
        ))}
      </div>
    </>
  );
}

/* ---------------- Education (clinician) ---------------- */
function ClinEducation() {
  return (
    <>
      <header className="clin__head"><div><h1>Education library</h1><p>Assign explainers to patients to cut anxiety and no-shows</p></div></header>
      <div className="clin-edu-grid">
        {EDUCATION.map((a, i) => (
          <div className="clin-edu-card" key={i}>
            <div className="clin-edu-card__thumb" style={{ background: a.grad }}><span className="tag">{a.tag}</span></div>
            <div className="clin-edu-card__b">
              <b>{a.title}</b>
              <p>{a.desc}</p>
              <div className="clin-edu-card__foot"><span>{a.meta}</span><button className="btn btn--ghost btn--sm"><Icon name="arrowR" size={14} /> Assign</button></div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { ClinicianApp });