/* ============================================================
   EDUCARE — Prontuário do paciente (hub com abas)
   ============================================================ */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;
  const fmtBirth = window.fmtBirth;

  const hojeISO = () => (window.todayISO ? window.todayISO() : new Date().toISOString().slice(0, 10));
  function maskPhoneBR(v) {
    const d = String(v || "").replace(/\D/g, "").slice(0, 11);
    if (!d) return "";
    if (d.length <= 2) return "(" + d;
    if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
  }

  /* ---------------- Edição do cadastro (aba Dados) ---------------- */
  function PatientEditModal({ p, onClose, onSaved }) {
    const GRADES = window.GRADES || [];
    const STATUS = window.STATUS || {};
    const initial = {
      name: p.name || "", birth: p.birth || "",
      grade: p.grade && p.grade !== "—" ? p.grade : "",
      school: p.school && p.school !== "—" ? p.school : "",
      guardian: p.guardianRel ? `${p.guardian} (${p.guardianRel})` : (p.guardian && p.guardian !== "—" ? p.guardian : ""),
      phone: p.phone && p.phone !== "—" ? p.phone : "",
      referredBy: p.referredBy && p.referredBy !== "—" ? p.referredBy : "",
      status: STATUS[p.status] ? p.status : "avaliacao",
      complaint: p.complaint && p.complaint !== "—" ? p.complaint : "",
    };
    const [f, setF] = useState(initial);
    const [errs, setErrs] = useState({});
    const [saving, setSaving] = useState(false);
    const [saveErr, setSaveErr] = useState("");
    const firstRef = useRef(null);
    const dirty = JSON.stringify(f) !== JSON.stringify(initial);
    const set = (k) => (e) => { setF((s) => ({ ...s, [k]: e.target.value })); if (errs[k]) setErrs((x) => { const n = { ...x }; delete n[k]; return n; }); if (saveErr) setSaveErr(""); };
    const setPhone = (e) => { const val = maskPhoneBR(e.target.value); setF((s) => ({ ...s, phone: val })); };

    function tryClose() { if (dirty && !window.confirm("Há alterações não salvas. Deseja descartar e fechar?")) return; onClose(); }
    useEffect(() => { const t = setTimeout(() => { firstRef.current && firstRef.current.focus(); }, 30); return () => clearTimeout(t); }, []);
    useEffect(() => {
      const h = (e) => { if (e.key === "Escape") { e.preventDefault(); tryClose(); } };
      window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
    });

    function validate() {
      const e = {};
      if (f.name.trim().length < 3) e.name = "Informe o nome completo (mínimo 3 caracteres).";
      if (!f.birth) e.birth = "Informe a data de nascimento.";
      else if (f.birth > hojeISO()) e.birth = "A data de nascimento não pode ser futura.";
      return e;
    }
    function save() {
      const e = validate(); setErrs(e); if (Object.keys(e).length) return;
      setSaving(true); setSaveErr("");
      try {
        let guardian = f.guardian.trim(), guardianRel = p.guardianRel || "Responsável";
        const m = guardian.match(/^(.*?)\s*\(([^)]+)\)\s*$/); if (m) { guardian = m[1].trim(); guardianRel = m[2].trim(); }
        const patch = {
          name: f.name.trim(), birth: f.birth,
          grade: f.grade || "—", school: f.school.trim() || "—",
          guardian: guardian || "—", guardianRel,
          phone: f.phone.trim() || "—", referredBy: f.referredBy.trim() || "—",
          status: f.status, complaint: f.complaint.trim() || "—",
        };
        if (!window.updatePatient) throw new Error("serviço de pacientes indisponível");
        window.updatePatient(p.id, patch);
        setSaving(false); onSaved();
      } catch (err) {
        setSaving(false);
        setSaveErr("Não foi possível salvar: " + ((err && err.message) || "erro inesperado") + ". Verifique a conexão e tente novamente.");
      }
    }

    const errLine = (k) => errs[k] ? <p style={{ margin: "4px 0 0", color: "#DC2626", fontWeight: 700, fontSize: 12.5 }}>{errs[k]}</p> : null;

    return (
      <div className="modal-scrim" onClick={tryClose}>
        <div className="modal" role="dialog" aria-modal="true" aria-label="Editar dados do paciente" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 560, maxHeight: "90vh", overflowY: "auto" }}>
          <div className="modal-head"><div><h3>Editar dados do paciente</h3><p>Identificação e dados clínicos</p></div><button className="x" onClick={tryClose} aria-label="Fechar"><Icon name="x" size={18} /></button></div>
          <div className="modal-body">
            <div className="fld"><label>Nome completo <span className="req">*</span></label>
              <input ref={firstRef} className="ctrl" value={f.name} onChange={set("name")} aria-invalid={!!errs.name} />{errLine("name")}
            </div>
            <div className="grid-2">
              <div className="fld"><label>Data de nascimento <span className="req">*</span></label>
                <input className="ctrl" type="date" max={hojeISO()} value={f.birth} onChange={set("birth")} aria-invalid={!!errs.birth} />{errLine("birth")}
              </div>
              <div className="fld"><label>Ano escolar</label>
                <select className="ctrl" value={f.grade} onChange={set("grade")}><option value="">Selecione…</option>{GRADES.map((g) => <option key={g} value={g}>{g}</option>)}</select>
              </div>
            </div>
            <div className="grid-2">
              <div className="fld"><label>Escola</label><input className="ctrl" value={f.school} onChange={set("school")} /></div>
              <div className="fld"><label>Responsável</label><input className="ctrl" value={f.guardian} onChange={set("guardian")} placeholder="Ex.: Mariana (Mãe)" /></div>
            </div>
            <div className="grid-2">
              <div className="fld"><label>Telefone</label><input className="ctrl" value={f.phone} onChange={setPhone} inputMode="tel" placeholder="(11) 90000-0000" /></div>
              <div className="fld"><label>Encaminhado por</label><input className="ctrl" value={f.referredBy} onChange={set("referredBy")} /></div>
            </div>
            <div className="fld"><label>Status</label>
              <select className="ctrl" value={f.status} onChange={set("status")}>{Object.keys(STATUS).map((k) => <option key={k} value={k}>{STATUS[k].label}</option>)}</select>
            </div>
            <div className="fld" style={{ marginBottom: 0 }}><label>Queixa principal</label>
              <textarea className="ctrl" style={{ minHeight: 84 }} value={f.complaint} onChange={set("complaint")}></textarea>
            </div>

            {saveErr && <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#DC2626", fontWeight: 700, fontSize: 13, margin: "12px 0 0" }}><Icon name="x" size={15} /> {saveErr}</p>}

            <div className="form-actions" style={{ marginTop: 16, display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <button className="btn btn-ghost btn-sm" onClick={tryClose} disabled={saving}>Cancelar</button>
              <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}><Icon name="clipboardCheck" size={16} /> {saving ? "Salvando…" : "Salvar"}</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const MOOD = {
    5: { e: "😄", l: "Ótimo" }, 4: { e: "🙂", l: "Bom" }, 3: { e: "😐", l: "Regular" },
    2: { e: "😕", l: "Difícil" }, 1: { e: "😣", l: "Muito difícil" },
  };

  // Seções do parecer do teste "Seguir Instruções" (ordem de exibição).
  const REPORT_SEGUIR = [
    ["sintese_geral", "Síntese geral"],
    ["pontos_fortes", "Pontos fortes"],
    ["pontos_atencao", "Pontos de atenção"],
    ["interpretacao", "Interpretação"],
    ["recomendacoes", "Recomendações"],
    ["plano_de_trabalho", "Como trabalhar para melhorar"],
    ["observacao", "Observação"],
  ];

  /* Bloco de análise de uma avaliação salva.
     Quando a ficha guardou o laudo da IA (sheet.ia), mostra o laudo completo
     seção por seção — o mesmo que aparece na tela ao final do teste. Sem laudo
     (avaliações antigas ou geradas só pelas regras locais), cai no texto
     achatado que ficou em note. */
  function BlocoAnalise({ ia, note, titulo, style }) {
    const Laudo = window.LaudoIA;
    return (
      <div className="plan-goal" style={style}>
        <div className="k" style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 8 }}>
          <Icon name="sparkles" size={14} /> {titulo || "ANÁLISE"}
        </div>
        {ia && Laudo ? <Laudo report={ia} /> : <p>{note || "Sem análise registrada."}</p>}
      </div>
    );
  }

  /* ---- tiny SVG line chart ---- */
  function LineChart({ data, min = 1, max = 5 }) {
    const W = 460, H = 150, pl = 26, pr = 10, pt = 12, pb = 22;
    const iw = W - pl - pr, ih = H - pt - pb;
    const n = data.length;
    const x = (i) => pl + (n <= 1 ? iw / 2 : (i / (n - 1)) * iw);
    const y = (v) => pt + ih - ((v - min) / (max - min)) * ih;
    const pts = data.map((v, i) => `${x(i)},${y(v)}`).join(" ");
    const area = `${pl},${pt + ih} ` + pts + ` ${x(n - 1)},${pt + ih}`;
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
        {[1, 2, 3, 4, 5].map((g) => (
          <g key={g}>
            <line x1={pl} x2={W - pr} y1={y(g)} y2={y(g)} stroke="var(--border)" strokeWidth="1" />
            <text x={pl - 8} y={y(g) + 3.5} fontSize="9" textAnchor="end" fill="var(--text-3)">{g}</text>
          </g>
        ))}
        <polygon points={area} fill="var(--primary-soft)" />
        <polyline points={pts} fill="none" stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        {data.map((v, i) => (
          <circle key={i} cx={x(i)} cy={y(v)} r="3.6" fill="var(--surface)" stroke="var(--primary)" strokeWidth="2.5" />
        ))}
      </svg>
    );
  }

  /* ---- tiny bar chart for metas ---- */
  function GoalBars({ goals }) {
    return (
      <div style={{ display: "flex", alignItems: "flex-end", gap: 18, height: 130, padding: "6px 4px 0" }}>
        {goals.map((g, i) => {
          const pct = Math.round((g.done / g.total) * 100);
          return (
            <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: "var(--text-2)" }}>{g.done}/{g.total}</div>
              <div style={{ width: "100%", maxWidth: 46, height: 92, background: "var(--surface-3)", borderRadius: 10, display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
                <div style={{ width: "100%", height: pct + "%", background: "linear-gradient(180deg, var(--primary-light), var(--primary))", borderRadius: 10 }}></div>
              </div>
              <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-3)" }}>{g.m}</div>
            </div>
          );
        })}
      </div>
    );
  }

  /* ================= PANELS ================= */
  function DadosPanel({ p, onEdit, editBtnRef }) {
    return (
      <div className="form-card">
        <div className="panel-head"><h3>Identificação e dados clínicos</h3>
          <button ref={editBtnRef} className="btn btn-ghost btn-xs" onClick={onEdit}><Icon name="fileText" size={15} /> Editar</button></div>
        <div className="kv-grid">
          {[
            ["Nome completo", p.name], ["Data de nascimento", `${fmtBirth(p.birth)} · ${p.age} anos`],
            ["Ano escolar", p.grade], ["Escola", p.school],
            ["Responsável", `${p.guardian} (${p.guardianRel})`], ["Telefone", p.phone],
            ["Encaminhado por", p.referredBy], ["Status", window.STATUS[p.status].label],
          ].map(([k, v]) => (
            <div className="kv" key={k}><div className="k">{k}</div><div className="v">{v}</div></div>
          ))}
        </div>
        <div className="kv" style={{ marginTop: 18 }}>
          <div className="k">Queixa principal</div>
          <div className="v" style={{ fontWeight: 500, lineHeight: 1.55 }}>{p.complaint}</div>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
          {p.tags.map((t) => <span className="chip" key={t}>{t}</span>)}
        </div>
      </div>
    );
  }

  function AnamnesePanel({ p, onPlan }) {
    if (p.anamnese) {
      return (
        <>
          <div className="an-status done">
            <span className="ai"><Icon name="clipboardCheck" size={24} /></span>
            <div style={{ flex: 1 }}><b>Anamnese concluída</b><span>Registrada em 05 mai 2026 · histórico de desenvolvimento, saúde, escola e família.</span></div>
            <button className="btn btn-ghost btn-xs"><Icon name="fileText" size={15} /> Exportar PDF</button>
          </div>
          <div className="form-card">
            <div className="panel-head"><h3>Resumo da anamnese</h3></div>
            <div className="mstack">
              {[
                ["Gestação e parto", "Gestação sem intercorrências; parto a termo. Desenvolvimento motor dentro do esperado."],
                ["Desenvolvimento da linguagem", "Primeiras palavras por volta dos 14 meses; fala compreensível aos 3 anos."],
                ["Histórico escolar", "Alfabetização iniciada aos 6 anos; dificuldades de leitura percebidas no 2º ano."],
                ["Saúde", "Sem comorbidades relevantes. Avaliação oftalmológica e auditiva sem alterações."],
                ["Contexto familiar", "Mora com a mãe e um irmão. Rotina de estudos com apoio em casa."],
              ].map(([t, d]) => (
                <div key={t} style={{ paddingBottom: 12, borderBottom: "1px solid var(--border)" }}>
                  <div className="k" style={{ fontSize: 11.5, fontWeight: 800, textTransform: "uppercase", letterSpacing: ".04em", color: "var(--text-3)", marginBottom: 4 }}>{t}</div>
                  <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.5 }}>{d}</div>
                </div>
              ))}
            </div>
            <button className="btn btn-coral btn-sm" style={{ marginTop: 16 }} onClick={onPlan}><Icon name="sparkles" size={16} /> Gerar planejamento a partir da anamnese</button>
          </div>
        </>
      );
    }
    return (
      <div className="an-status todo" style={{ alignItems: "center" }}>
        <span className="ai"><Icon name="folderHeart" size={24} /></span>
        <div style={{ flex: 1 }}><b>Anamnese ainda não preenchida</b><span>Registre o histórico completo da criança com o formulário clínico guiado.</span></div>
        <button className="btn btn-primary btn-sm"><Icon name="plus" size={16} /> Iniciar anamnese</button>
      </div>
    );
  }

  function AvaliacaoView({ a, onClose }) {
    const sheet = a.sheet;
    const rowsOf = (pt) => (sheet && sheet.rows ? sheet.rows.filter((r) => r.part === pt) : []);
    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 680 }}>
          <div className="modal-head">
            {/* Idade e escola só existem em alguns instrumentos (Hayling,
                TFV). Nos demais, imprimir os campos cruaria "undefined
                anos · undefined" no cabeçalho da ficha. */}
            <div><h3>{a.name}</h3><p>{[
              a.date,
              sheet && sheet.idade ? `${sheet.idade} anos` : null,
              sheet && sheet.escola ? sheet.escola : null,
            ].filter(Boolean).join(" · ")}</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            {sheet && sheet.kind === "iar" ? (
              <>
                <div className="hay-sheet-id" style={{ marginBottom: 12 }}>
                  <span><b>Escola:</b> {sheet.escolaNome || "—"}</span>
                  <span><b>Classe:</b> {sheet.classe || "—"}</span>
                  <span><b>Aplicador(a):</b> {sheet.aplicador || "—"}</span>
                </div>
                <div className="iar-sheet" style={{ marginBottom: 12 }}>
                  {(sheet.areas || []).map((a) => {
                    const COL = { azul: "#2563EB", verde: "#16A34A", vermelho: "#DC2626" };
                    return (
                      <div className="iar-row" key={a.n}>
                        <span className="iar-rn">{a.n}</span>
                        <span className="iar-rname">{a.name}{a.obs && <i className="iar-robs"> — {a.obs}</i>}</span>
                        <div className="iar-rbar" style={{ background: COL[a.color] || "var(--surface-3)" }}></div>
                      </div>
                    );
                  })}
                </div>
                {sheet.counts && (
                  <div className="iar-summary">
                    <div className="iar-sum"><i style={{ background: "#2563EB" }}></i><b>{sheet.counts.azul}</b> azul</div>
                    <div className="iar-sum"><i style={{ background: "#16A34A" }}></i><b>{sheet.counts.verde}</b> verde</div>
                    <div className="iar-sum"><i style={{ background: "#DC2626" }}></i><b>{sheet.counts.vermelho}</b> vermelho</div>
                  </div>
                )}
                {sheet.report && [["sintese_geral", "Síntese geral"], ["areas_consolidadas", "Áreas consolidadas (azul)"], ["areas_em_desenvolvimento", "Áreas em desenvolvimento (verde)"], ["areas_a_desenvolver", "Áreas a desenvolver (vermelho)"], ["implicacoes_alfabetizacao", "Implicações para a alfabetização"], ["recomendacoes", "Recomendações pedagógicas"], ["plano_de_trabalho", "Como trabalhar para melhorar"], ["observacao", "Observação"]].map(([k, title]) => {
                  const v = sheet.report[k];
                  if (v == null || (Array.isArray(v) && !v.length)) return null;
                  return (
                    <div className="kv" key={k} style={{ marginTop: 10 }}>
                      <div className="k">{title}</div>
                      {Array.isArray(v)
                        ? <ul style={{ margin: "4px 0 0", paddingLeft: 18 }}>{v.map((x, i) => <li key={i} style={{ fontSize: 13.5, lineHeight: 1.55, marginBottom: 4 }}>{x}</li>)}</ul>
                        : <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{v}</div>}
                    </div>
                  );
                })}
              </>
            ) : sheet && sheet.kind === "anamnese" ? (
              <>
                {(sheet.display || []).map((sec, si) => (
                  <div key={si} style={{ marginBottom: 12 }}>
                    <div className="sec-head" style={{ marginBottom: 8 }}>{sec.title}</div>
                    {(sec.items || []).map((it, ii) => (
                      <div className="kv" key={ii} style={{ marginBottom: 8 }}>
                        <div className="k">{it.label}</div>
                        <div style={{ whiteSpace: "pre-line", fontSize: 13.5 }}>{it.value}</div>
                      </div>
                    ))}
                  </div>
                ))}
                {(sheet.sessions || []).length > 0 && (
                  <div style={{ marginBottom: 12 }}>
                    <div className="sec-head" style={{ marginBottom: 8 }}>Registro de atendimentos</div>
                    <table className="hay-sheet"><thead><tr><th>Data</th><th>Tema</th></tr></thead>
                      <tbody>{sheet.sessions.map((s, j) => <tr key={j}><td>{s.data || "—"}</td><td>{s.tema || "—"}</td></tr>)}</tbody></table>
                  </div>
                )}
                {(sheet.destino || sheet.melhoras || sheet.outrasObs) && (
                  <div className="kv"><div className="k">Destino do caso</div><div style={{ fontSize: 13.5 }}>{sheet.destino || "—"} {sheet.destinoDet}</div>
                    {sheet.melhoras && <div style={{ fontSize: 13.5, marginTop: 6 }}><b>Melhoras:</b> {sheet.melhoras}</div>}
                    {sheet.outrasObs && <div style={{ fontSize: 13.5, marginTop: 6 }}><b>Outras observações:</b> {sheet.outrasObs}</div>}
                  </div>
                )}
              </>
            ) : sheet && sheet.kind === "asrs" ? (
              <>
                <p className="res" style={{ fontSize: 14, margin: "0 0 12px" }}><b>{sheet.shadedCount} de 6</b> na área sombreada (Parte A) — <b>{sheet.interp}</b></p>
                {["partA", "partB"].map((pk) => (
                  <div key={pk} style={{ marginBottom: 12 }}>
                    <div className="sec-head" style={{ marginBottom: 8 }}>{pk === "partA" ? "Parte A" : "Parte B (apoio)"}</div>
                    <table className="hay-sheet">
                      <thead><tr><th>#</th><th>Questão</th><th>Resposta</th></tr></thead>
                      <tbody>
                        {(sheet[pk] || []).map((x, j) => (
                          <tr key={j}><td className="c">{(pk === "partA" ? "A" : "B") + (j + 1)}</td><td>{x.q}</td><td className="c">{x.ans || "—"}</td></tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ))}
                {sheet.crit && (
                  <table className="hay-sheet" style={{ marginBottom: 12 }}>
                    <thead><tr><th></th><th>Critérios de apoio (B–E)</th></tr></thead>
                    <tbody>
                      <tr><td className="c">{sheet.crit.B ? "☑" : "☐"}</td><td>B — sintomas antes dos 12 anos</td></tr>
                      <tr><td className="c">{sheet.crit.C ? "☑" : "☐"}</td><td>C — prejuízo em 2+ contextos</td></tr>
                      <tr><td className="c">{sheet.crit.D ? "☑" : "☐"}</td><td>D — prejuízo evidente na vida diária</td></tr>
                      <tr><td className="c">{sheet.crit.E ? "☑" : "☐"}</td><td>E — não explicado por outro transtorno</td></tr>
                    </tbody>
                  </table>
                )}
                <BlocoAnalise ia={sheet.ia} note={a.note} titulo="ANÁLISE" />
              </>
            ) : sheet && sheet.kind === "tfv" ? (
              <>
                {sheet.normLabel && <div className="hay-sheet-id" style={{ marginBottom: 12 }}><span><b>Norma aplicada:</b> {sheet.normLabel}</span></div>}
                {(sheet.tasks || []).map((t, ti) => {
                  const tr = sheet.transcripts && sheet.transcripts[t.key];
                  return (
                    <div key={ti} style={{ marginBottom: 12 }}>
                      <div className="sec-head" style={{ marginBottom: 8 }}>{t.name}</div>
                      <table className="hay-sheet">
                        <thead><tr><th>Avaliação quantitativa</th><th>Escore</th><th>Percentil</th><th>Classificação</th></tr></thead>
                        <tbody>
                          {(t.rows || []).map((x, j) => (
                            <tr key={j} style={x.isTotal ? { fontWeight: 700 } : null}>
                              <td>{x.label}</td>
                              <td className="c">{x.raw}</td>
                              <td className="c">{x.p == null ? "—" : <span>{x.p}{x.anchor != null && <span className="anchor-ref">≈ {x.anchor}</span>}</span>}</td>
                              <td>{x.cls || <span className="muted-cell">— (norma não cadastrada)</span>}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                      {Array.isArray(tr) && tr.some((x) => x && x.trim()) && (
                        <div className="abc-note" style={{ marginTop: 8 }}><b>Transcrição</b><p style={{ whiteSpace: "pre-line" }}>{tr.map((x, i) => (x && x.trim() ? `Bloco ${i + 1}: ${x}` : null)).filter(Boolean).join("\n")}</p></div>
                      )}
                    </div>
                  );
                })}
                <BlocoAnalise ia={sheet.ia} note={a.note} titulo="PARECER" />
              </>
            ) : sheet && sheet.kind === "abc" ? (
              <>
                <table className="hay-sheet" style={{ marginBottom: 12 }}>
                  <thead><tr><th>#</th><th>Subteste</th><th>Nota</th></tr></thead>
                  <tbody>
                    {(sheet.rows || []).map((r, j) => (
                      <tr key={j}><td className="c">{["I", "II", "III", "IV", "V", "VI", "VII", "VIII"][j]}</td><td>{r.name}</td><td className="c">{r.pts == null ? "—" : r.pts}</td></tr>
                    ))}
                  </tbody>
                </table>
                <div className="hay-scores" style={{ marginBottom: 12 }}>
                  <div className="hsc"><span>Nível de Maturidade</span><b>{sheet.nm}/24</b></div>
                  <div className="hsc"><span>Classificação</span><b style={{ fontSize: 20 }}>{sheet.cls ? sheet.cls.label : "—"}</b></div>
                </div>
                {(sheet.rows || []).some((r) => r.obs || r.extra) && (
                  <table className="hay-sheet" style={{ marginBottom: 12 }}>
                    <thead><tr><th>Subteste</th><th>Respostas/Anotações</th><th>Observações</th></tr></thead>
                    <tbody>
                      {(sheet.rows || []).map((r, j) => (
                        <tr key={j}><td>{r.name}</td><td>{r.extra || "—"}</td><td>{r.obs || "—"}</td></tr>
                      ))}
                    </tbody>
                  </table>
                )}
                <BlocoAnalise ia={sheet.ia} note={a.note} titulo="ANÁLISE" />
              </>
            ) : sheet && sheet.kind === "seguir" ? (
              <>
                <div className="hay-sheet-id" style={{ marginBottom: 12 }}>
                  <span><b>Escola:</b> {sheet.escolaNome || "—"}</span>
                  <span><b>Classe:</b> {sheet.classe || "—"}</span>
                  <span><b>Aplicador(a):</b> {sheet.aplicador || "—"}</span>
                </div>
                <table className="hay-sheet" style={{ marginBottom: 12 }}>
                  <thead><tr><th>#</th><th>Comando</th><th>Estado</th></tr></thead>
                  <tbody>
                    {(sheet.comandos || []).map((c, j) => {
                      const COL = { completo: "#16A34A", parcial: "#F59E0B", nao: "#DC2626" };
                      const LB = { completo: "Completo", parcial: "Parcial", nao: "Não fez" };
                      return (
                        <tr key={j}>
                          <td className="c">{c.nivel && c.nivel.indexOf("Nível 1") === 0 ? "N1" : "N2"}.{c.num}</td>
                          <td>{c.texto}{c.obs && <i style={{ color: "var(--text-3)" }}> — {c.obs}</i>}</td>
                          <td className="c"><b style={{ color: COL[c.state] || "var(--text-3)" }}>{LB[c.state] || "—"}</b></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <div className="hay-scores" style={{ marginBottom: 12 }}>
                  <div className="hsc"><span>Escore</span><b>{sheet.score}/{sheet.maxScore}</b></div>
                  <div className="hsc"><span>Classificação</span><b style={{ fontSize: 18 }}>{sheet.classLabel || "—"}</b></div>
                </div>
                <table className="hay-sheet" style={{ marginBottom: 12 }}>
                  <thead><tr><th></th><th>Critérios de observação</th></tr></thead>
                  <tbody>
                    {[["escutou", "Escutou toda a instrução antes de começar"], ["ordem", "Executou as etapas na ordem correta"], ["lembrou", "Lembrou de todas as partes do comando"], ["repeticao", "Pediu repetição"], ["distraiu", "Distraiu-se durante a tarefa"], ["ajuda", "Necessitou de ajuda"], ["atencao", "Manteve a atenção até o final"]].map(([k, label]) => (
                      <tr key={k}><td className="c">{sheet.criterios && sheet.criterios[k] ? "☑" : "☐"}</td><td>{label}</td></tr>
                    ))}
                  </tbody>
                </table>
                {sheet.report && REPORT_SEGUIR.map(([k, title]) => {
                  const v = sheet.report[k];
                  if (v == null || (Array.isArray(v) && !v.length)) return null;
                  return (
                    <div className="kv" key={k} style={{ marginTop: 10 }}>
                      <div className="k">{title}</div>
                      {Array.isArray(v)
                        ? <ul style={{ margin: "4px 0 0", paddingLeft: 18 }}>{v.map((x, i) => <li key={i} style={{ fontSize: 13.5, lineHeight: 1.55, marginBottom: 4 }}>{x}</li>)}</ul>
                        : <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{v}</div>}
                    </div>
                  );
                })}
              </>
            ) : sheet && sheet.kind === "dnoi" ? (
              <>
                <div className="hay-sheet-id" style={{ marginBottom: 12 }}>
                  <span><b>Escola:</b> {sheet.escolaNome || "—"}{sheet.escolaTipo ? ` (${sheet.escolaTipo === "publica" ? "Pública" : "Particular"})` : ""}</span>
                  <span><b>Idade:</b> {sheet.idade || "—"}</span>
                </div>
                <table className="hay-sheet" style={{ marginBottom: 12 }}>
                  <thead><tr><th>#</th><th>Figura-alvo</th><th>Resposta</th></tr></thead>
                  <tbody>
                    {(sheet.itens || []).map((c, j) => {
                      const COL = { espontanea: "#16A34A", com_pista: "#F59E0B", incorreta: "#DC2626" };
                      const LB = { espontanea: "Espontânea", com_pista: "Com pista", incorreta: "Incorreta" };
                      const bn = c.blocoKey === "b1" ? "B1" : c.blocoKey === "b2" ? "B2" : "B3";
                      return (
                        <tr key={j}>
                          <td className="c">{bn}.{c.num}</td>
                          <td>{c.palavra}{c.obs && <i style={{ color: "var(--text-3)" }}> — {c.obs}</i>}</td>
                          <td className="c"><b style={{ color: COL[c.state] || "var(--text-3)" }}>{LB[c.state] || "—"}</b></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <div className="hay-scores" style={{ marginBottom: 12 }}>
                  <div className="hsc"><span>Escore</span><b>{sheet.score}/{sheet.maxScore}</b></div>
                  <div className="hsc"><span>Classificação</span><b style={{ fontSize: 18 }}>{sheet.classLabel || "—"}</b></div>
                </div>
                <table className="hay-sheet" style={{ marginBottom: 12 }}>
                  <thead><tr><th></th><th>Critérios de observação</th></tr></thead>
                  <tbody>
                    {[["rapido", "Acesso lexical rápido e fluente"], ["melhora_pista", "Nomeação melhora com pista fonêmica"], ["autocorrecao", "Autocorreção espontânea"], ["circunloquio", "Circunlóquios (descreve em vez de nomear)"], ["paraf_sem", "Parafasias semânticas (mesma categoria)"], ["paraf_fon", "Parafasias fonológicas (troca de sons)"], ["latencia", "Latência/hesitação aumentada"], ["anomia", "Anomia (não encontra a palavra)"]].map(([k, label]) => (
                      <tr key={k}><td className="c">{sheet.criterios && sheet.criterios[k] ? "☑" : "☐"}</td><td>{label}</td></tr>
                    ))}
                  </tbody>
                </table>
                {sheet.report && REPORT_SEGUIR.map(([k, title]) => {
                  const v = sheet.report[k];
                  if (v == null || (Array.isArray(v) && !v.length)) return null;
                  return (
                    <div className="kv" key={k} style={{ marginTop: 10 }}>
                      <div className="k">{title}</div>
                      {Array.isArray(v)
                        ? <ul style={{ margin: "4px 0 0", paddingLeft: 18 }}>{v.map((x, i) => <li key={i} style={{ fontSize: 13.5, lineHeight: 1.55, marginBottom: 4 }}>{x}</li>)}</ul>
                        : <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{v}</div>}
                    </div>
                  );
                })}
              </>
            ) : sheet && sheet.rows ? (
              <>
                {sheet.normLabel && <div className="hay-sheet-id" style={{ marginBottom: 12 }}><span><b>Norma aplicada:</b> {sheet.normLabel}</span></div>}
                {["A", "B"].map((pt) => (
                  rowsOf(pt).length > 0 && (
                    <div key={pt} style={{ marginBottom: 14 }}>
                      <div className="sec-head" style={{ marginBottom: 8 }}>Folha de Registro — Parte {pt}</div>
                      <table className="hay-sheet">
                        <thead><tr><th>Variável</th><th>Escore</th><th>Percentil</th><th>Classificação</th></tr></thead>
                        <tbody>
                          {rowsOf(pt).map((r, j) => (
                            <tr key={j}>
                              <td>{r.label}</td>
                              <td className="c">{r.raw}</td>
                              <td className="c">{r.p == null ? "—" : <span>{r.p}{r.anchor != null && <span className="anchor-ref">≈ {r.anchor}</span>}</span>}</td>
                              <td>{r.cls || <span className="muted-cell">— (norma não cadastrada)</span>}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )
                ))}
                {sheet.protocol && ["A", "B"].map((pt) => (
                  sheet.protocol[pt] && sheet.protocol[pt].length > 0 && (
                    <div key={"p" + pt} style={{ marginBottom: 14 }}>
                      <div className="sec-head" style={{ marginBottom: 8 }}>Respostas da criança — Parte {pt}</div>
                      <table className="hay-sheet">
                        <thead><tr><th>#</th><th>Frase</th><th>Resposta</th><th>Tempo</th><th>Tipo</th><th>Pont.</th></tr></thead>
                        <tbody>
                          {sheet.protocol[pt].map((it, j) => (
                            <tr key={j}>
                              <td className="c">{j + 1}</td>
                              <td>{it.sentence} ___</td>
                              <td>{it.resp || "—"}</td>
                              <td className="c">{it.time ? it.time + "s" : "—"}</td>
                              <td className="c">{it.tipo || "—"}</td>
                              <td className="c">{it.pont == null ? "—" : it.pont}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )
                ))}

                <BlocoAnalise ia={sheet.ia} note={a.note} titulo="ANÁLISE" style={{ marginTop: 4 }} />
              </>
            ) : (
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-2)" }}>{a.note || "Sem detalhes registrados."}</p>
            )}
          </div>
        </div>
      </div>
    );
  }

  function AvaliacoesPanel({ p }) {
    const items = window.ASSESSMENTS[p.id] || [];
    const [view, setView] = useState(null);
    return (
      <div className="mstack">
        {items.map((a, i) => (
          <div className="mcard row" key={i}>
            <span className="mi" style={a.status === "pending" ? { background: "var(--surface-3)", color: "var(--text-3)" } : {}}><Icon name="clipboardList" size={20} /></span>
            <div style={{ flex: 1 }}>
              <h4>{a.name}</h4>
              <p>{a.status === "pending" ? "Ainda não aplicada para este paciente." : `${a.date} · ${a.note}`}</p>
            </div>
            {a.status === "done"
              ? <><span className="tag ok"><i className="d"></i>{a.result}</span><button className="btn btn-ghost btn-xs" onClick={() => setView(a)}>Ver</button></>
              : <button className="btn btn-primary btn-xs"><Icon name="plus" size={14} /> Aplicar</button>}
          </div>
        ))}
        <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }}><Icon name="plus" size={16} /> Nova avaliação</button>
        {view && <AvaliacaoView a={view} onClose={() => setView(null)} />}
      </div>
    );
  }

  function HistoricoPanel({ p }) {
    const sessions = window.SESSIONS[p.id] || [];
    if (!sessions.length) return <div className="mcard" style={{ textAlign: "center", color: "var(--text-3)" }}>Nenhum atendimento registrado ainda.</div>;
    return (
      <div className="timeline">
        {sessions.map((s, i) => (
          <div className="tl-item" key={i}>
            <span className="tl-dot"><i></i></span>
            <div className="tl-card">
              <div className="tl-top">
                <span className="date">{s.date} · {s.dur} min</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 800, color: "var(--text-2)" }}>
                  <span className="mood-emoji">{MOOD[s.mood].e}</span> {MOOD[s.mood].l}
                </span>
              </div>
              <p className="tl-focus">{s.focus}</p>
              <p className="tl-row"><b>Atividades:</b> {s.activities}</p>
              <p className="tl-row"><b>Observações:</b> {s.notes}</p>
              <p className="tl-row" style={{ marginBottom: 0 }}><b>Próximos passos:</b> {s.next}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }

  function PlanosPanel({ p, onPlan }) {
    const plans = window.PLANS[p.id] || [];
    return (
      <div className="mstack">
        {plans.map((pl, i) => (
          <div className="mcard" key={i}>
            <div className="panel-head" style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="mi"><Icon name="sparkles" size={20} /></span>
                <div><h4>{pl.title}</h4><p>{pl.level} · {pl.sessions} sessões · {pl.freq} · criado {pl.created}</p></div>
              </div>
              <span className={"tag " + (pl.status === "Concluído" ? "ok" : "warn")}><i className="d"></i>{pl.status}</span>
            </div>
            <p style={{ fontSize: 13.5, color: "var(--text-2)", margin: "0 0 12px", lineHeight: 1.5 }}>{pl.goal}</p>
            <div className="pbar"><i style={{ width: Math.round(pl.progress * 100) + "%" }}></i></div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
              <span style={{ fontSize: 12, color: "var(--text-3)", fontWeight: 700 }}>{Math.round(pl.progress * 100)}% concluído</span>
              <button className="btn btn-ghost btn-xs">Abrir plano</button>
            </div>
          </div>
        ))}
        <button className="btn btn-coral btn-sm" style={{ alignSelf: "flex-start" }} onClick={onPlan}><Icon name="sparkles" size={16} /> Novo planejamento com IA</button>
      </div>
    );
  }

  function EvolucaoPanel({ p }) {
    const avg = (p.moodSeries.reduce((a, b) => a + b, 0) / p.moodSeries.length).toFixed(1);
    const totalGoals = p.goals.reduce((a, g) => a + g.total, 0);
    const doneGoals = p.goals.reduce((a, g) => a + g.done, 0);
    return (
      <>
        <div className="charts-grid" style={{ marginBottom: 16 }}>
          <div className="chart-card">
            <h4>Humor & engajamento por sessão</h4>
            <p className="csub">Escala de 1 (muito difícil) a 5 (ótimo) · {p.moodSeries.length} sessões</p>
            <LineChart data={p.moodSeries} />
          </div>
          <div className="chart-card">
            <h4>Frequência</h4>
            <p className="csub">Comparecimento às sessões</p>
            <div className="stat-big" style={{ margin: "18px 0 6px" }}>{Math.round(p.attendance * 100)}<span className="u">%</span></div>
            <div className="pbar"><i style={{ width: Math.round(p.attendance * 100) + "%" }}></i></div>
            <div className="stat-row" style={{ marginTop: 20 }}>
              <div className="stat-mini"><b>{p.sessions}</b><span>Sessões realizadas</span></div>
              <div className="stat-mini"><b>{avg}</b><span>Humor médio</span></div>
            </div>
          </div>
        </div>
        <div className="chart-card">
          <h4>Metas atingidas por mês</h4>
          <p className="csub">{doneGoals} de {totalGoals} metas concluídas no período</p>
          <GoalBars goals={p.goals} />
        </div>
      </>
    );
  }

  /* ================= PRONTUÁRIO ================= */
  const TABS = [
    { id: "dados", label: "Dados", icon: "users" },
    { id: "anamnese", label: "Anamnese", icon: "folderHeart" },
    { id: "avaliacoes", label: "Avaliações", icon: "clipboardList" },
    { id: "historico", label: "Histórico", icon: "clipboardCheck" },
    { id: "planejamentos", label: "Planejamentos", icon: "fileText" },
    { id: "evolucao", label: "Evolução", icon: "chart" },
  ];

  function Prontuario({ patientId, onBack, onPlan, onReport }) {
    const [tab, setTab] = useState("dados");
    const [editing, setEditing] = useState(false);
    const [, forceTick] = useState(0);
    const editBtnRef = useRef(null);
    const p = window.PATIENTS.find((x) => x.id === patientId) || window.PATIENTS[0];
    const st = window.STATUS[p.status];
    function closeEdit() { setEditing(false); setTimeout(() => { editBtnRef.current && editBtnRef.current.focus(); }, 30); }
    const counts = {
      avaliacoes: (window.ASSESSMENTS[p.id] || []).filter((a) => a.status === "done").length || null,
      historico: (window.SESSIONS[p.id] || []).length || null,
      planejamentos: (window.PLANS[p.id] || []).length || null,
    };

    return (
      <>
        <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Voltar para Pacientes</button>

        <div className="pt-header">
          <div className="pt-id">
            <span className={"avatar " + p.color}>{p.initials}</span>
            <div>
              <h1>{p.name}</h1>
              <div className="meta">
                <span><Icon name="calendar" size={14} /> {fmtBirth(p.birth)} · {p.age} anos</span>
                <span><Icon name="book" size={14} /> {p.grade}</span>
                <span><Icon name="users" size={14} /> {p.guardian} ({p.guardianRel})</span>
                <span className={"tag " + st.cls}><i className="d"></i>{st.label}</span>
              </div>
            </div>
          </div>
          <div className="pt-actions">
            <button className="btn btn-ghost btn-sm" onClick={() => onReport && onReport(p.id)}><Icon name="fileText" size={16} /> Relatório pais/escola</button>
            <button className="btn btn-ghost btn-sm"><Icon name="clipboardCheck" size={16} /> Nova sessão</button>
            <button className="btn btn-primary btn-sm"><Icon name="fileText" size={16} /> Exportar prontuário (PDF)</button>
          </div>
        </div>

        <div className="tabs">
          {TABS.map((t) => (
            <button key={t.id} className={"tab" + (tab === t.id ? " active" : "")} onClick={() => setTab(t.id)}>
              <Icon name={t.icon} size={16} /> {t.label}
              {counts[t.id] != null && <span className="tcount">{counts[t.id]}</span>}
            </button>
          ))}
        </div>

        <div className="form-wrap" style={{ maxWidth: 920 }}>
          {tab === "dados" && <DadosPanel p={p} onEdit={() => setEditing(true)} editBtnRef={editBtnRef} />}
          {tab === "anamnese" && <AnamnesePanel p={p} onPlan={onPlan} />}
          {tab === "avaliacoes" && <AvaliacoesPanel p={p} />}
          {tab === "historico" && <HistoricoPanel p={p} />}
          {tab === "planejamentos" && <PlanosPanel p={p} onPlan={onPlan} />}
          {tab === "evolucao" && <EvolucaoPanel p={p} />}
        </div>

        {editing && <PatientEditModal p={p} onClose={closeEdit} onSaved={() => { forceTick((n) => n + 1); closeEdit(); }} />}
      </>
    );
  }

  window.Prontuario = Prontuario;
})();