/* ============================================================
   PainTrack App — patient feature modules
   Sub-screens (settings), questionnaire, report/export.
   Loaded after patient.jsx; components exported to window.
   ============================================================ */

/* ---- tracking vocab (Manage-My-Pain style rich records) ---- */
const QUALITIES = ["Aching", "Burning", "Sharp", "Stabbing", "Throbbing", "Tingling", "Stiff", "Shooting"];
const AGGRAVATORS = ["Sitting", "Standing", "Walking", "Bending", "Lifting", "Cold/damp", "Stress", "Poor sleep"];
const RELIEVERS = ["Rest", "Heat", "Ice", "Medication", "Stretching", "Movement", "Massage", "Distraction"];
const MEDS = ["None", "Acetaminophen", "Naproxen", "Gabapentin", "Ibuprofen", "Topical"];

/* ---- procedures / appointments / meds mock for a patient ---- */
const PROCEDURE_LOG = [
  { type: "Radiofrequency ablation", level: "L4–L5", date: "Dec 2, 2025", status: "Tracking relief", tone: "good" },
  { type: "Facet joint injection", level: "L4–L5", date: "Jun 14, 2025", status: "Relief ended ~Nov", tone: "muted" },
  { type: "Medial branch block", level: "L4–L5 (diagnostic)", date: "Apr 30, 2025", status: ">80% relief — RFA approved", tone: "good" },
];
const APPT_LOG = [
  { date: "Feb 4, 2026", time: "2:30 PM", who: "Dr. Perelman", reason: "RFA follow-up", state: "upcoming" },
  { date: "Jan 9, 2026", time: "10:00 AM", who: "J. Okafor, PT", reason: "Physiotherapy", state: "past" },
  { date: "Dec 2, 2025", time: "8:00 AM", who: "Dr. Perelman", reason: "RFA procedure", state: "past" },
];
const MED_LOG = [
  { name: "Acetaminophen", dose: "500 mg", freq: "As needed", note: "≤ 3g/day" },
  { name: "Naproxen", dose: "250 mg", freq: "Stopped post-RFA", note: "Was twice daily" },
];

/* =================== Sub-screen shell =================== */
function PatientSub({ sub, onClose, user, peg, setPeg }) {
  const titles = {
    reminders: "Reminders", procedures: "My procedures", appointments: "Appointments",
    privacy: "Privacy & data", medications: "Medications", questionnaire: "Questionnaire",
    report: "Export my record",
  };
  return (
    <div className="subscreen-overlay" onClick={onClose}>
      <div className="subscreen" onClick={e => e.stopPropagation()}>
        <div className="subscreen__bar">
          <button className="subscreen__back" onClick={onClose}><Icon name="arrowL" size={18} /></button>
          <b>{titles[sub]}</b>
          <button className="subscreen__back" onClick={onClose} aria-label="Close"><Icon name="plus" size={18} style={{ transform: "rotate(45deg)" }} /></button>
        </div>
        <div className="subscreen__body">
          {sub === "reminders" && <SubReminders />}
          {sub === "procedures" && <SubProcedures />}
          {sub === "appointments" && <SubAppointments />}
          {sub === "privacy" && <SubPrivacy />}
          {sub === "medications" && <SubMedications />}
          {sub === "questionnaire" && <Questionnaire peg={peg} setPeg={setPeg} onClose={onClose} />}
          {sub === "report" && <SubReport user={user} />}
        </div>
      </div>
    </div>
  );
}

function Flash({ msg }) { return msg ? <div className="flash"><Icon name="check" size={15} stroke={2.6} /> {msg}</div> : null; }

/* =================== Reminders =================== */
function SubReminders() {
  const [items, setItems] = useState([
    { id: "daily", label: "Daily check-in", time: "8:00 PM", on: true },
    { id: "meds", label: "Medication log", time: "9:00 AM", on: false },
    { id: "weekly", label: "Weekly questionnaire", time: "Sun 6:00 PM", on: true },
    { id: "appt", label: "Appointment alerts", time: "1 day before", on: true },
  ]);
  const [msg, setMsg] = useState("");
  function flip(id) {
    setItems(xs => xs.map(x => x.id === id ? { ...x, on: !x.on } : x));
    setMsg("Reminder preferences saved");
    setTimeout(() => setMsg(""), 1800);
  }
  return (
    <div>
      <p className="sub-lede">Gentle nudges so your relief curve stays accurate. Tap to turn each on or off.</p>
      <div className="toggle-list">
        {items.map(it => (
          <div className="toggle-row" key={it.id}>
            <div><b>{it.label}</b><p>{it.time}</p></div>
            <button className={"switch" + (it.on ? " on" : "")} onClick={() => flip(it.id)} role="switch" aria-checked={it.on}><i /></button>
          </div>
        ))}
      </div>
      <Flash msg={msg} />
    </div>
  );
}

/* =================== Procedures =================== */
function SubProcedures() {
  const [adding, setAdding] = useState(false);
  return (
    <div>
      <p className="sub-lede">Every procedure anchors a relief curve. Logging one tells PainTrack to start tracking onset, peak benefit and when relief fades.</p>
      <div className="rec-list">
        {PROCEDURE_LOG.map((p, i) => (
          <div className="rec-card" key={i}>
            <div className="rec-card__ic" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="needle" size={18} /></div>
            <div className="rec-card__b">
              <b>{p.type}</b>
              <p>{p.level} · {p.date}</p>
              <span className={"rec-tag rec-tag--" + p.tone}>{p.status}</span>
            </div>
          </div>
        ))}
      </div>
      {!adding
        ? <button className="btn btn--ghost btn--block" onClick={() => setAdding(true)}><Icon name="plus" size={16} /> Log a procedure</button>
        : <div className="addbox">
            <p className="sub-lede" style={{ marginTop: 0 }}>Your clinic usually adds procedures automatically. You can also record one yourself:</p>
            <input className="ti" placeholder="Procedure type (e.g. RFA)" />
            <input className="ti" placeholder="Spinal level (e.g. L4–L5)" />
            <input className="ti" type="date" />
            <div className="addbox__row">
              <button className="btn btn--ghost btn--grow" onClick={() => setAdding(false)}>Cancel</button>
              <button className="btn btn--primary btn--grow" onClick={() => setAdding(false)}>Save procedure</button>
            </div>
          </div>}
    </div>
  );
}

/* =================== Appointments =================== */
function SubAppointments() {
  return (
    <div>
      <p className="sub-lede">Upcoming and past visits across your care team.</p>
      <div className="rec-list">
        {APPT_LOG.map((a, i) => (
          <div className="rec-card" key={i}>
            <div className="rec-card__date"><span>{a.date.split(" ")[0].toUpperCase().slice(0,3)}</span><b>{a.date.match(/\d+/)[0]}</b></div>
            <div className="rec-card__b">
              <b>{a.reason}</b>
              <p>{a.who} · {a.time}</p>
              <span className={"rec-tag rec-tag--" + (a.state === "upcoming" ? "good" : "muted")}>{a.state === "upcoming" ? "Upcoming" : "Completed"}</span>
            </div>
          </div>
        ))}
      </div>
      <button className="btn btn--ghost btn--block"><Icon name="plus" size={16} /> Request an appointment</button>
    </div>
  );
}

/* =================== Medications =================== */
function SubMedications() {
  const [adding, setAdding] = useState(false);
  return (
    <div>
      <p className="sub-lede">Track what you take and when. PainTrack overlays medication use on your pain curve to show what's actually helping.</p>
      <div className="rec-list">
        {MED_LOG.map((m, i) => (
          <div className="rec-card" key={i}>
            <div className="rec-card__ic" style={{ background: "var(--amber-soft)", color: "#8a5e16" }}><Icon name="pill" size={18} /></div>
            <div className="rec-card__b">
              <b>{m.name} · {m.dose}</b>
              <p>{m.freq}</p>
              <span className="rec-tag rec-tag--muted">{m.note}</span>
            </div>
          </div>
        ))}
      </div>
      {!adding
        ? <button className="btn btn--ghost btn--block" onClick={() => setAdding(true)}><Icon name="plus" size={16} /> Add medication</button>
        : <div className="addbox">
            <input className="ti" placeholder="Medication name" />
            <input className="ti" placeholder="Dose (e.g. 500 mg)" />
            <input className="ti" placeholder="Frequency" />
            <div className="addbox__row">
              <button className="btn btn--ghost btn--grow" onClick={() => setAdding(false)}>Cancel</button>
              <button className="btn btn--primary btn--grow" onClick={() => setAdding(false)}>Save</button>
            </div>
          </div>}
    </div>
  );
}

/* =================== Privacy =================== */
function SubPrivacy() {
  const [msg, setMsg] = useState("");
  function act(m) { setMsg(m); setTimeout(() => setMsg(""), 2200); }
  return (
    <div>
      <p className="sub-lede">Your health data is yours. PainTrack is built for Canadian privacy law from the data model up.</p>
      <div className="priv-list">
        {[["shield", "PHIPA aligned", "Handled to Ontario health-information standards."],
          ["lock", "PIPEDA compliant", "Consent-first collection — you decide what's shared."],
          ["chart", "Canadian data residency", "Stored and processed within Canada."],
          ["user", "Clinic access", "Only Dr. Perelman's team at Northway Pain can view your records."]].map(([ic, t, d]) => (
          <div className="priv-item" key={t}>
            <div className="priv-item__ic"><Icon name={ic} size={18} /></div>
            <div><b>{t}</b><p>{d}</p></div>
          </div>
        ))}
      </div>
      <p className="section-label">Data controls</p>
      <button className="btn btn--ghost btn--block" onClick={() => act("Preparing your data export…")}><Icon name="download" size={16} /> Download all my data</button>
      <button className="btn btn--ghost btn--block danger" onClick={() => act("A deletion request was started")}><Icon name="alert" size={16} /> Delete my account & records</button>
      <Flash msg={msg} />
    </div>
  );
}

/* =================== Questionnaire (PEG scale) =================== */
function Questionnaire({ peg, setPeg, onClose }) {
  const Q = [
    { k: "pain", q: "What was your average pain over the past week?", lo: "No pain", hi: "Pain as bad as you can imagine" },
    { k: "enjoy", q: "How has pain interfered with your enjoyment of life?", lo: "Does not interfere", hi: "Completely interferes" },
    { k: "activity", q: "How has pain interfered with your general activity?", lo: "Does not interfere", hi: "Completely interferes" },
  ];
  const [vals, setVals] = useState({ pain: 4, enjoy: 3, activity: 3 });
  const [step, setStep] = useState(peg ? Q.length : 0);
  const score = ((vals.pain + vals.enjoy + vals.activity) / 3).toFixed(1);

  if (step >= Q.length) {
    const s = peg ? peg.score : score;
    const band = s >= 7 ? ["High impact", "#D75A3E"] : s >= 4 ? ["Moderate impact", "#C58A2E"] : ["Low impact", "#11705C"];
    return (
      <div className="qz-done">
        <div className="qz-score" style={{ color: band[1] }}>{s}<small>/10</small></div>
        <p className="qz-band" style={{ color: band[1] }}>{band[0]}</p>
        <p className="sub-lede" style={{ textAlign: "center" }}>Your PEG score combines pain, enjoyment and activity into one trackable number. It's been sent to Dr. Perelman's team and added to your record.</p>
        <div className="qz-breakdown">
          <div><span>Pain</span><b>{(peg || vals).pain}</b></div>
          <div><span>Enjoyment</span><b>{(peg || vals).enjoy}</b></div>
          <div><span>Activity</span><b>{(peg || vals).activity}</b></div>
        </div>
        <button className="btn btn--primary btn--block" onClick={onClose}>Done</button>
      </div>
    );
  }

  const cur = Q[step];
  return (
    <div>
      <div className="qz-meta"><span>PEG · Pain, Enjoyment, General activity</span><span>{step + 1} / {Q.length}</span></div>
      <div className="qz-progress"><i style={{ width: ((step + 1) / Q.length * 100) + "%" }} /></div>
      <h3 className="qz-q">{cur.q}</h3>
      <div className="big-score" style={{ color: painColor(vals[cur.k]) }}>{vals[cur.k]}<small>/10</small></div>
      <input className="pain-range" type="range" min="0" max="10" value={vals[cur.k]}
             onChange={e => setVals(v => ({ ...v, [cur.k]: +e.target.value }))} />
      <div className="scale-ticks"><span>0 · {cur.lo}</span><span>10 · {cur.hi}</span></div>
      <div className="sheet__actions" style={{ marginTop: 26 }}>
        {step > 0 && <button className="btn btn--ghost" onClick={() => setStep(step - 1)}><Icon name="arrowL" size={16} /> Back</button>}
        {step < Q.length - 1
          ? <button className="btn btn--primary btn--grow" onClick={() => setStep(step + 1)}>Next <Icon name="arrowR" size={16} /></button>
          : <button className="btn btn--primary btn--grow" onClick={() => { setPeg({ ...vals, score }); setStep(Q.length); }}>Submit <Icon name="check" size={16} stroke={2.6} /></button>}
      </div>
    </div>
  );
}

/* =================== Report / Export =================== */
function SubReport({ user }) {
  const [msg, setMsg] = useState("");
  function act(m) { setMsg(m); setTimeout(() => setMsg(""), 2200); }
  return (
    <div>
      <p className="sub-lede">A clinic-ready summary of your pain, procedures and relief — the same view your care team sees. Bring it to any appointment.</p>
      <div className="report">
        <div className="report__hd">
          <div><b>{user.name}</b><p>{user.condition} · generated Jan 27, 2026</p></div>
          <Brand h={30} />
        </div>
        <div className="report__chart"><ReliefChart series={user.series} procedureDay={user.proc.day} retreatDay={user.retreatDay} w={440} h={170} /></div>
        <div className="report__stats">
          <div><span>Relief duration</span><b>6.4 mo</b></div>
          <div><span>Lowest pain</span><b>1/10</b></div>
          <div><span>Adherence</span><b>{user.adherence}%</b></div>
          <div><span>Check-ins</span><b>164</b></div>
        </div>
        <p className="report__summary"><b>Summary.</b> Pain fell from 8 to 1 within 11 days of L4–L5 RFA and has held at 1–2/10 for ~6 months. No medication escalation. Relief consistent with durable benefit; re-treatment window forecast ~Q1.</p>
      </div>
      <button className="btn btn--primary btn--block" onClick={() => { act("Opening print dialog…"); setTimeout(() => { try { window.print(); } catch (e) {} }, 300); }}><Icon name="download" size={16} /> Download / print PDF</button>
      <button className="btn btn--ghost btn--block" onClick={() => act("Shared securely with Northway Pain")}><Icon name="user" size={16} /> Share with my clinic</button>
      <Flash msg={msg} />
    </div>
  );
}

Object.assign(window, { PatientSub, Questionnaire, QUALITIES, AGGRAVATORS, RELIEVERS, MEDS });