/* ============================================================
   PainTrack App — Patient experience (phone-framed)
   ============================================================ */

function PhoneFrame({ children, statusLabel }) {
  return (
    <div className="phone-stage">
      <div className="phone-lg">
        <div className="phone-lg__notch" />
        <div className="phone-lg__screen">
          <div className="phone-lg__status">
            <span>9:41</span>
            <span className="phone-lg__status-r">
              <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1"/><rect x="4.5" y="4" width="3" height="7" rx="1"/><rect x="9" y="2" width="3" height="9" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
              <svg width="22" height="11" viewBox="0 0 22 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5"/><rect x="2" y="2" width="13" height="7" rx="1" fill="currentColor" stroke="none"/><rect x="20" y="3.5" width="1.5" height="4" rx="0.75" fill="currentColor" stroke="none"/></svg>
            </span>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}

function PatientApp({ user, onLogout }) {
  const [tab, setTab] = useState("home");
  const initCi = { open: false, step: 0, region: "lowback", pain: 4, quality: [], aggravating: [], relieving: [], meds: [], notes: "", toggles: { sleep: false, mobile: false } };
  const [ci, setCi] = useState(initCi);
  const [todayDone, setTodayDone] = useState(false);
  const [todayEntry, setTodayEntry] = useState(null);
  const [streak, setStreak] = useState(23);
  const [article, setArticle] = useState(null);
  const [sub, setSub] = useState(null);
  const [peg, setPeg] = useState(null);

  function openCheckin() { setCi({ ...initCi, open: true }); }
  function finishCheckin() {
    const region = BODY_REGIONS.find(r => r.id === ci.region);
    setTodayEntry({ region: region.label, pain: ci.pain, toggles: ci.toggles });
    setTodayDone(true);
    setStreak(s => s + 1);
    setCi(c => ({ ...c, open: false }));
    setTab("timeline");
  }

  const screens = {
    home: <PatientHome user={user} todayDone={todayDone} todayEntry={todayEntry} streak={streak} onCheckin={openCheckin} go={setTab} onSub={setSub} peg={peg} />,
    timeline: <PatientTimeline user={user} todayEntry={todayEntry} onCheckin={openCheckin} />,
    learn: article != null
      ? <ArticleView art={EDUCATION[article]} onBack={() => setArticle(null)} />
      : <Learn onOpen={setArticle} />,
    profile: <PatientProfile user={user} streak={streak} onLogout={onLogout} onSub={setSub} peg={peg} />,
  };

  const TABS = [["home", "Today", "home"], ["timeline", "Timeline", "timeline"], ["learn", "Learn", "book"], ["profile", "You", "user"]];
  function goTab(id) { setTab(id); if (id !== "learn") setArticle(null); }

  return (
    <div className="ptweb">
      {/* Desktop / website top bar */}
      <header className="pt-topbar">
        <div className="pt-topbar__in">
          <div className="brand brand--ink"><Brand h={32} /></div>
          <nav className="pt-topbar__nav">
            {TABS.map(([id, label, icon]) => (
              <button key={id} className={"pt-topbar__link" + (tab === id ? " on" : "")} onClick={() => goTab(id)}>
                <Icon name={icon} size={18} /><span>{label}</span>
              </button>
            ))}
          </nav>
          <div className="pt-topbar__right">
            <button className="pt-iconbtn" aria-label="Notifications"><Icon name="bell" size={19} /><i /></button>
            <button className="pt-avatar" onClick={() => goTab("profile")}>{user.initials}</button>
          </div>
        </div>
      </header>

      {/* App viewport — full-screen on phones, centered column on web */}
      <div className="pt-viewport">
        <div className="pt-statusbar">
          <span>9:41</span>
          <span className="pt-statusbar__r">
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1"/><rect x="4.5" y="4" width="3" height="7" rx="1"/><rect x="9" y="2" width="3" height="9" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
            <svg width="22" height="11" viewBox="0 0 22 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5"/><rect x="2" y="2" width="13" height="7" rx="1" fill="currentColor" stroke="none"/><rect x="20" y="3.5" width="1.5" height="4" rx="0.75" fill="currentColor" stroke="none"/></svg>
          </span>
        </div>
        <div className="pt-scroll" key={tab + (article || "")}>
          {screens[tab]}
        </div>
        <nav className="pt-tabs">
          {TABS.map(([id, label, icon]) => (
            <button key={id} className={"pt-tab" + (tab === id ? " on" : "")} onClick={() => goTab(id)}>
              <Icon name={icon} size={22} stroke={tab === id ? 2.2 : 1.8} />
              <span>{label}</span>
            </button>
          ))}
        </nav>
        {!ci.open && !todayDone && tab === "home" && (
          <button className="pt-fab" onClick={openCheckin} aria-label="New check-in"><Icon name="plus" size={22} stroke={2.4} /></button>
        )}
      </div>

      {ci.open && <CheckInSheet ci={ci} setCi={setCi} onFinish={finishCheckin} />}
      {sub && <PatientSub sub={sub} onClose={() => setSub(null)} user={user} peg={peg} setPeg={setPeg} />}
    </div>
  );
}

/* ---------------- Home ---------------- */
function PatientHome({ user, todayDone, todayEntry, streak, onCheckin, go, onSub, peg }) {
  const recent = user.series.slice(-10).map(s => s.pain);
  return (
    <div className="scr">
      <header className="scr__head">
        <div>
          <p className="scr__hello">Good evening, {user.first}</p>
          <p className="scr__date">Tuesday, January 27</p>
        </div>
        <button className="scr__bell"><Icon name="bell" size={20} /><i /></button>
      </header>

      <div className="home-grid">
      <div className="home-main">
      {!peg ? (
        <div className="quest-card" onClick={() => onSub("questionnaire")}>
          <div className="quest-card__ic"><Icon name="book" size={20} /></div>
          <div className="quest-card__b">
            <span className="quest-card__tag">Assigned by Dr. Perelman</span>
            <b>Weekly PEG questionnaire</b>
            <p>3 quick questions · about a minute</p>
          </div>
          <span className="quest-card__go">Start <Icon name="arrowR" size={15} /></span>
        </div>
      ) : (
        <div className="quest-card quest-card--done" onClick={() => onSub("questionnaire")}>
          <div className="quest-card__ic quest-card__ic--ok"><Icon name="check" size={20} stroke={2.6} /></div>
          <div className="quest-card__b">
            <span className="quest-card__tag">PEG questionnaire</span>
            <b>Score {peg.score}/10 · submitted</b>
            <p>Sent to your care team · tap to view</p>
          </div>
        </div>
      )}
      {!todayDone ? (
        <div className="today-card today-card--cta" onClick={onCheckin}>
          <div className="today-card__pulse"><Icon name="heart" size={22} /></div>
          <div className="today-card__body">
            <b>Time for today's check-in</b>
            <p>30 seconds keeps your relief curve accurate.</p>
          </div>
          <Icon name="chevR" size={20} />
        </div>
      ) : (
        <div className="today-card today-card--done">
          <div className="today-card__pulse today-card__pulse--ok"><Icon name="check" size={22} stroke={2.6} /></div>
          <div className="today-card__body">
            <b>Logged for today</b>
            <p>{todayEntry.region} · {todayEntry.pain}/10 · added to your curve</p>
          </div>
        </div>
      )}

      <div className="stat-row">
        <div className="stat-mini">
          <span className="stat-mini__v">{streak}</span>
          <span className="stat-mini__k">day streak</span>
        </div>
        <div className="stat-mini">
          <span className="stat-mini__v" style={{ color: "#11705C" }}>1.8<small>↓</small></span>
          <span className="stat-mini__k">14-day avg</span>
        </div>
        <div className="stat-mini">
          <span className="stat-mini__v">{user.adherence}<small>%</small></span>
          <span className="stat-mini__k">adherence</span>
        </div>
      </div>

      <div className="snap-card" onClick={() => go("timeline")}>
        <div className="snap-card__head">
          <span className="eyebrow">Your relief since RFA</span>
          <Icon name="chevR" size={16} />
        </div>
        <div className="snap-spark"><Spark data={recent} w={260} h={56} /></div>
        <p className="snap-card__note"><span className="dot dot--teal" /> Holding at 1–2/10 — durable relief</p>
      </div>
      </div>{/* home-main */}

      <aside className="home-aside">
      <div className="appt-card">
        <div className="appt-card__date"><span>FEB</span><b>04</b></div>
        <div className="appt-card__body">
          <b>Follow-up · Dr. Perelman</b>
          <p>Northway Pain · 2:30 PM · in-person</p>
        </div>
      </div>

      <p className="section-label">Your care team</p>
      <div className="team-row">
        {[["needle", "Dr. Perelman", "Interventional"], ["dumbbell", "J. Okafor", "Physiotherapy"], ["brain", "Dr. Lin", "Psychology"]].map(([ic, n, r]) => (
          <div className="team-chip" key={n}>
            <div className="team-chip__ic"><Icon name={ic} size={18} /></div>
            <div><b>{n}</b><p>{r}</p></div>
          </div>
        ))}
      </div>
      </aside>
      </div>{/* home-grid */}
      <div style={{ height: 80 }} className="tab-spacer" />
    </div>
  );
}

/* ---------------- Check-in sheet ---------------- */
function CheckInSheet({ ci, setCi, onFinish }) {
  const steps = ["Where", "Severity", "Details", "Function", "Confirm"];
  const last = steps.length - 1;
  const region = BODY_REGIONS.find(r => r.id === ci.region);
  function setStep(s) { setCi(c => ({ ...c, step: s })); }
  function toggleArr(field, val) {
    setCi(c => {
      const arr = c[field] || [];
      return { ...c, [field]: arr.includes(val) ? arr.filter(x => x !== val) : [...arr, val] };
    });
  }
  function toggleFn(k) { setCi(c => ({ ...c, toggles: { ...c.toggles, [k]: !c.toggles[k] } })); }

  function ChipRow({ label, options, field }) {
    return (
      <div className="chip-group">
        <span className="chip-group__label">{label}</span>
        <div className="chip-wrap">
          {options.map(o => (
            <button key={o} className={"sel-chip" + ((ci[field] || []).includes(o) ? " on" : "")} onClick={() => toggleArr(field, o)}>{o}</button>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="sheet-overlay" onClick={() => setCi(c => ({ ...c, open: false }))}>
      <div className="sheet sheet--tall" onClick={e => e.stopPropagation()}>
        <div className="sheet__grab" />
        <div className="sheet__steps">
          {steps.map((s, i) => <i key={i} className={i <= ci.step ? "on" : ""} />)}
        </div>

        {ci.step === 0 && (
          <div className="sheet__pane">
            <h3>Where does it hurt?</h3>
            <p className="sheet__hint">Tap a region on the body map.</p>
            <div className="bm-wrap">
              <svg className="bm bm--lg" viewBox="0 0 120 210">
                {BODY_REGIONS.map(r => r.r
                  ? <circle key={r.id} className={"region" + (ci.region === r.id ? " active" : "")} cx={r.cx} cy={r.cy} r={r.r} onClick={() => setCi(c => ({ ...c, region: r.id }))} />
                  : <rect key={r.id} className={"region" + (ci.region === r.id ? " active" : "")} x={r.x} y={r.y} width={r.w} height={r.h} rx="3" onClick={() => setCi(c => ({ ...c, region: r.id }))} />
                )}
              </svg>
            </div>
            <p className="bm-selected">{region.label}</p>
          </div>
        )}

        {ci.step === 1 && (
          <div className="sheet__pane">
            <h3>How intense is it?</h3>
            <p className="sheet__hint">{region.label} · right now</p>
            <div className="big-score" style={{ color: painColor(ci.pain) }}>{ci.pain}<small>/10</small></div>
            <input className="pain-range" type="range" min="0" max="10" value={ci.pain}
                   onChange={e => setCi(c => ({ ...c, pain: +e.target.value }))} />
            <div className="scale-ticks"><span>0 · none</span><span>10 · worst</span></div>
          </div>
        )}

        {ci.step === 2 && (
          <div className="sheet__pane sheet__pane--scroll">
            <h3>Describe it</h3>
            <p className="sheet__hint">Optional — more detail means sharper insights.</p>
            <ChipRow label="What does it feel like?" options={QUALITIES} field="quality" />
            <ChipRow label="What makes it worse?" options={AGGRAVATORS} field="aggravating" />
            <ChipRow label="What helps?" options={RELIEVERS} field="relieving" />
          </div>
        )}

        {ci.step === 3 && (
          <div className="sheet__pane sheet__pane--scroll">
            <h3>Meds & function</h3>
            <ChipRow label="Medication taken today" options={MEDS} field="meds" />
            <span className="chip-group__label" style={{ marginTop: 14, display: "block" }}>How was your day?</span>
            <div className="func-grid" style={{ marginTop: 8 }}>
              {[["sleep", "moon", "Slept well"], ["mobile", "walk", "Moved freely"]].map(([k, ic, label]) => (
                <button key={k} className={"func-tile" + (ci.toggles[k] ? " on" : "")} onClick={() => toggleFn(k)}>
                  <Icon name={ic} size={24} /><span>{label}</span>
                </button>
              ))}
            </div>
            <span className="chip-group__label" style={{ marginTop: 16, display: "block" }}>Notes</span>
            <textarea className="ta" placeholder="Anything else about today…" value={ci.notes}
                      onChange={e => setCi(c => ({ ...c, notes: e.target.value }))} />
          </div>
        )}

        {ci.step === 4 && (
          <div className="sheet__pane">
            <h3>Look right?</h3>
            <div className="confirm-list">
              <div className="confirm-row"><Icon name="heart" size={18} /><span>Location</span><b>{region.label}</b></div>
              <div className="confirm-row"><Icon name="pulse" size={18} /><span>Intensity</span><b style={{ color: painColor(ci.pain) }}>{ci.pain}/10</b></div>
              <div className="confirm-row"><Icon name="dots" size={18} /><span>Quality</span><b>{(ci.quality || []).length ? ci.quality.join(", ") : "—"}</b></div>
              <div className="confirm-row"><Icon name="pill" size={18} /><span>Meds</span><b>{(ci.meds || []).length ? ci.meds.join(", ") : "—"}</b></div>
            </div>
            <p className="sheet__hint" style={{ marginTop: 14, textAlign: "center" }}>This becomes one point on your relief curve.</p>
          </div>
        )}

        <div className="sheet__actions">
          {ci.step > 0 && <button className="btn btn--ghost" onClick={() => setStep(ci.step - 1)}><Icon name="arrowL" size={16} /> Back</button>}
          {ci.step < last
            ? <button className="btn btn--primary btn--grow" onClick={() => setStep(ci.step + 1)}>Continue <Icon name="arrowR" size={16} /></button>
            : <button className="btn btn--primary btn--grow" onClick={onFinish}>Log check-in <Icon name="check" size={16} stroke={2.6} /></button>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Timeline ---------------- */
function PatientTimeline({ user, todayEntry, onCheckin }) {
  const phases = [
    ["01", "#D75A3E", "Procedure", user.proc.date, user.proc.type + " · " + user.proc.level],
    ["02", "#2BA17E", "Onset", "Day 11", "Relief began — pain dropped from 8 to 3"],
    ["03", "#11705C", "Peak benefit", "Week 3", "Reached 1/10, your lowest reading"],
    ["04", "#C58A2E", "Re-treatment window", "Forecast ~Q1", "We'll prompt you when it's time to book"],
  ];
  return (
    <div className="scr">
      <header className="scr__head">
        <div><p className="scr__hello">Your timeline</p><p className="scr__date">{user.condition}</p></div>
        <button className="btn btn--primary btn--sm tl-add" onClick={onCheckin}><Icon name="plus" size={15} stroke={2.4} /> Log a reading</button>
      </header>
      <div className="tl-explain">
        <div className="tl-explain__ic"><Icon name="timeline" size={18} /></div>
        <p><b>What this shows.</b> Your relief curve. Each <b>daily check-in</b> adds a point; each <b>procedure</b> (the dashed marker) anchors a new curve. Together they reveal when relief started, peaked, and begins to fade — so re-treatment is timed by data, not memory.</p>
      </div>
      <div className="tl-grid">
      <div className="tl-col">
      <div className="tl-chart">
        <ReliefChart series={user.series} procedureDay={user.proc.day} retreatDay={user.retreatDay} w={330} h={190} />
      </div>
      <div className="tl-legend">
        <span><span className="dot dot--coral" />Pain 0–10</span>
        <span><span className="dot dot--teal" />Relief window</span>
        {user.retreatDay && <span><span className="dot dot--amber" />Re-treat soon</span>}
      </div>
      </div>{/* tl-col */}

      <div className="tl-col">
      <p className="section-label">What your curve shows</p>
      <div className="phase-list">
        {phases.map(([n, c, t, when, desc]) => (
          <div className="phase-item" key={n}>
            <div className="phase-item__rail"><span className="phase-item__dot" style={{ background: c }} /></div>
            <div className="phase-item__body">
              <div className="phase-item__top"><b>{t}</b><span>{when}</span></div>
              <p>{desc}</p>
            </div>
          </div>
        ))}
      </div>

      <p className="section-label">Recent check-ins</p>
      <div className="ci-list">
        {todayEntry && (
          <div className="ci-item">
            <span className="ci-item__score" style={{ background: painColor(todayEntry.pain) }}>{todayEntry.pain}</span>
            <div><b>{todayEntry.region}</b><p>Today · just now</p></div>
            <Icon name="check" size={16} style={{ color: "#11705C", marginLeft: "auto" }} stroke={2.4} />
          </div>
        )}
        {[["Lower back", 2, "Yesterday"], ["Lower back", 1, "Sun"], ["Left hip", 2, "Sat"], ["Lower back", 1, "Fri"]].map(([r, p, d], i) => (
          <div className="ci-item" key={i}>
            <span className="ci-item__score" style={{ background: painColor(p) }}>{p}</span>
            <div><b>{r}</b><p>{d}</p></div>
          </div>
        ))}
      </div>
      </div>{/* tl-col */}
      </div>{/* tl-grid */}
      <div style={{ height: 30 }} />
    </div>
  );
}

/* ---------------- Learn ---------------- */
function Learn({ onOpen }) {
  return (
    <div className="scr">
      <header className="scr__head"><div><p className="scr__hello">Learn</p><p className="scr__date">Understand what's happening</p></div></header>
      <div className="podcast-mini">
        <div className="podcast-mini__cover"><Icon name="play" size={20} /></div>
        <div><span className="eyebrow">Podcast · ep 14</span><b>Measuring what relief actually means</b><p>38 min</p></div>
      </div>
      <div className="learn-list">
        {EDUCATION.map((a, i) => (
          <button className="learn-card" key={i} onClick={() => onOpen(i)}>
            <div className="learn-card__thumb" style={{ background: a.grad }}><span className="tag">{a.tag}</span></div>
            <div className="learn-card__b">
              <b>{a.title}</b>
              <p>{a.desc}</p>
              <span className="learn-card__meta"><span className="dot" style={{ background: a.dot }} />{a.meta}</span>
            </div>
          </button>
        ))}
      </div>
      <div style={{ height: 30 }} />
    </div>
  );
}
function ArticleView({ art, onBack }) {
  return (
    <div className="scr scr--narrow">
      <button className="scr__back" onClick={onBack}><Icon name="arrowL" size={18} /> Learn</button>
      <div className="article-hero" style={{ background: art.grad }}><span className="tag">{art.tag}</span></div>
      <h2 className="article-title">{art.title}</h2>
      <p className="article-meta">{art.meta} · explainer</p>
      <p className="article-body">{art.body}</p>
      <div className="article-cta"><Icon name="sparkle" size={16} /><span>Questions about your own results? Ask at your Feb 4 follow-up — your curve will be ready.</span></div>
      <div style={{ height: 30 }} />
    </div>
  );
}

/* ---------------- Profile ---------------- */
function PatientProfile({ user, streak, onLogout, onSub, peg }) {
  return (
    <div className="scr scr--narrow">
      <header className="scr__head"><div><p className="scr__hello">You</p><p className="scr__date">Account & privacy</p></div></header>
      <div className="profile-card">
        <div className="profile-card__avatar">{user.initials}</div>
        <div><b>{user.name}</b><p>{user.age} · {user.condition}</p></div>
      </div>
      <div className="profile-stats">
        <div><b>{streak}</b><span>day streak</span></div>
        <div><b>{user.adherence}%</b><span>adherence</span></div>
        <div><b>6.4mo</b><span>relief so far</span></div>
      </div>
      <p className="section-label">Settings</p>
      <div className="menu-list">
        {[
          ["book", "Questionnaires", "questionnaire", peg ? ("PEG " + peg.score + "/10 · done") : "1 assigned"],
          ["bell", "Reminders", "reminders", "Evenings, 8:00 PM"],
          ["needle", "My procedures", "procedures", "3 logged"],
          ["pill", "Medications", "medications", "2 tracked"],
          ["calendar", "Appointments", "appointments", "1 upcoming"],
          ["shield", "Privacy & data", "privacy", "PHIPA / PIPEDA"],
          ["download", "Export my record", "report", "PDF or share with clinic"],
        ].map(([ic, t, key, s]) => (
          <button className="menu-item" key={t} onClick={() => onSub(key)}>
            <div className="menu-item__ic"><Icon name={ic} size={18} /></div>
            <div className="menu-item__txt"><b>{t}</b><p>{s}</p></div>
            <Icon name="chevR" size={16} style={{ color: "var(--muted)" }} />
          </button>
        ))}
      </div>
      <button className="btn btn--ghost btn--block logout-btn" onClick={onLogout}><Icon name="logout" size={17} /> Sign out</button>
      <p className="profile-disc">PainTrack supports your care and is not a substitute for professional medical advice.</p>
      <div style={{ height: 30 }} />
    </div>
  );
}

Object.assign(window, { PatientApp });