/* ============================================================
   EDUCARE — Anamnese Infantil (Entrevista com os Pais)
   Anamnese Psicopedagógica. Instância por ID único, salvamento
   explícito com aviso de alterações não salvas, retomada de
   entrevistas em andamento, 13 seções em accordion e PDF.
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;
  const INSTRUMENT_NAME = "Anamnese Infantil";

  // ---------- Persistência por INSTÂNCIA ----------
  const KEY = "educare-anamnese-infantil";
  function loadAvals() { try { const o = JSON.parse(localStorage.getItem(KEY) || "null"); if (o && typeof o === "object") return o; } catch (e) { /* */ } return {}; }
  function saveAvals(o) { localStorage.setItem(KEY, JSON.stringify(o)); }
  function loadAval(id) { return loadAvals()[id] || null; }
  function putAval(a) { const all = loadAvals(); all[a.id] = a; saveAvals(all); }
  function newAvalId() { return "anaf_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 8); }
  function avalsDoPaciente(pid) { const all = loadAvals(); return Object.keys(all).map((k) => all[k]).filter((a) => a && a.pid === pid).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); }

  const todayISO = () => (window.todayISO ? window.todayISO() : "2026-07-23");
  const esc = (s) => String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  const nonEmpty = (v) => v != null && String(v).trim() !== "";
  function ageFromISO(iso) { if (!iso) return ""; const b = new Date(iso + "T00:00:00"); if (isNaN(b.getTime())) return ""; const n = new Date(); let a = n.getFullYear() - b.getFullYear(); const m = n.getMonth() - b.getMonth(); if (m < 0 || (m === 0 && n.getDate() < b.getDate())) a--; return a >= 0 ? String(a) : ""; }
  const SI = { width: 32, height: 32, borderRadius: 10, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center", flex: "none" };

  // t: text | area | sn (Sim/Não/Não sabe) | marco (idade + não lembra) | parto | select
  const F = (k, l, t, opts) => ({ k, l, t: t || "text", opts });
  const SECTIONS = [
    { id: "ident", title: "1. Identificação da criança", fields: [
      F("nome", "Nome"), F("nascimento", "Data de nascimento", "date"), F("idade", "Idade"),
      F("anoEscolar", "Ano escolar"), F("escola", "Escola"), F("responsaveis", "Nome dos responsáveis"),
      F("telefones", "Telefones"), F("email", "E-mail"),
    ] },
    { id: "queixa", title: "2. Queixa principal", fields: [
      F("motivo", "Qual o motivo da procura pela avaliação?", "area"),
      F("tempo", "Há quanto tempo a dificuldade é percebida?"),
      F("quemObservou", "Quem observou primeiro?"),
    ] },
    { id: "gestacao", title: "3. Gestação e nascimento", fields: [
      F("planejada", "A gravidez foi planejada?", "sn"),
      F("complicacoes", "Houve complicações durante a gestação?", "area"),
      F("parto", "Parto normal ou cesárea?", "parto"),
      F("prematuro", "Prematuro?", "sn"),
      F("pesoAltura", "Peso e altura ao nascer"),
      F("uti", "Precisou de UTI?", "sn"),
    ] },
    { id: "npm", title: "4. Desenvolvimento neuropsicomotor", fields: [
      F("sustentou", "Quando sustentou a cabeça?", "marco"),
      F("sentou", "Sentou?", "marco"),
      F("engatinhou", "Engatinhou?", "marco"),
      F("andou", "Andou?", "marco"),
      F("falou", "Falou as primeiras palavras?", "marco"),
      F("desfralde", "Como ocorreu o desfralde?", "area"),
    ] },
    { id: "saude", title: "5. Saúde", fields: [
      F("doenca", "Possui alguma doença?", "area"),
      F("medicamentos", "Faz uso de medicamentos?", "sn"),
      F("hospitalizada", "Já foi hospitalizada?", "area"),
      F("alergias", "Possui alergias?", "sn"),
      F("acompanhamento", "Já realizou acompanhamento com neurologista, psicólogo, fonoaudiólogo, terapeuta ocupacional ou outro profissional?", "sn"),
    ] },
    { id: "rotina", title: "6. Rotina", fields: [
      F("rotinaDiaria", "Como é a rotina diária?", "area"),
      F("sono", "Horário de sono"),
      F("alimentacao", "Alimentação", "area"),
      F("tela", "Tempo de tela"),
      F("brinca", "Brinca? Do que gosta?", "area"),
    ] },
    { id: "linguagem", title: "7. Desenvolvimento da linguagem", fields: [
      F("falaClaro", "Fala claramente?", "area"),
      F("compreende", "Compreende ordens?", "area"),
      F("trocaSons", "Apresenta troca de sons?", "area"),
    ] },
    { id: "escola", title: "8. Escolarização", fields: [
      F("idadeEntrada", "Com que idade entrou na escola?"),
      F("repetiu", "Já repetiu algum ano?", "sn"),
      F("desempenho", "Como é seu desempenho em leitura, escrita e matemática?", "area"),
      F("gostaEstudar", "Gosta de estudar?"),
      F("relacionamento", "Como é o relacionamento com professores e colegas?", "area"),
    ] },
    { id: "comportamento", title: "9. Comportamento", fields: [
      F("frustracoes", "Como reage às frustrações?", "area"),
      F("agitado", "É agitado ou tranquilo?"),
      F("atencao", "Consegue manter atenção?", "area"),
      F("organizado", "É organizado?"),
      F("ansiedade", "Demonstra ansiedade?", "area"),
    ] },
    { id: "familia", title: "10. Aspectos familiares", fields: [
      F("mora", "Com quem mora?"),
      F("relacaoFamiliar", "Como é a relação familiar?", "area"),
      F("mudancas", "Existem mudanças recentes (separação, luto, mudança de cidade etc.)?", "area"),
    ] },
    { id: "autonomia", title: "11. Autonomia", fields: [
      F("higiene", "Realiza higiene sozinho?"),
      F("materiais", "Organiza seus materiais?"),
      F("tarefas", "Faz tarefas sem ajuda?"),
    ] },
    { id: "expectativas", title: "12. Expectativas da família", fields: [
      F("esperam", "O que esperam da avaliação?", "area"),
      F("mudancasDesejadas", "Quais mudanças desejam observar?", "area"),
    ] },
    { id: "obs", title: "13. Observações do entrevistador", fields: [
      F("observador", "Observações", "area"),
    ] },
  ];
  const ALL_FIELDS = SECTIONS.reduce((a, s) => a.concat(s.fields.map((f) => ({ ...f, sec: s.id }))), []);
  const INFORMANTES = ["Mãe", "Pai", "Avó", "Avô", "Tio(a)", "Outro"];

  const SN_LABEL = { sim: "Sim", nao: "Não", ns: "Não sabe informar" };
  // Considera "preenchido": texto/área não vazio; sn definido; marco com idade ou "não lembra".
  function fieldFilled(f, v) {
    if (f.t === "sn") return nonEmpty(v[f.k]);
    if (f.t === "marco") return nonEmpty(v[f.k]) || v[f.k + "__nl"] === "1";
    return nonEmpty(v[f.k]);
  }
  function fieldToText(f, v) {
    if (f.t === "sn") { const s = v[f.k]; if (!s) return ""; const base = SN_LABEL[s] || s; const det = v[f.k + "__d"]; return s === "sim" && nonEmpty(det) ? `${base} — ${det}` : base; }
    if (f.t === "marco") { if (v[f.k + "__nl"] === "1") return "Não lembra"; return v[f.k] || ""; }
    return v[f.k] || "";
  }

  function AnamneseInfantilTest({ onBack, onOpenPatient }) {
    const [view, setView] = useState("ident"); // ident | form
    const [pid, setPid] = useState(""); const [avalId, setAvalId] = useState(null); const [readonly, setReadonly] = useState(false);
    const [date, setDate] = useState(todayISO());
    const [entrevistador, setEntrevistador] = useState((window.__USER && window.__USER.name) || "");
    const [informante, setInformante] = useState("Mãe"); const [parentesco, setParentesco] = useState("");
    const [values, setValues] = useState({});
    const [openSec, setOpenSec] = useState({ ident: true });
    const [savedJson, setSavedJson] = useState(""); const [savedAt, setSavedAt] = useState(null);
    const [dirty, setDirty] = useState(false); const [saving, setSaving] = useState(false);
    const [toast, setToast] = useState(null); const [leaveGuard, setLeaveGuard] = useState(null); const [showClear, setShowClear] = useState(false);
    const [err, setErr] = useState("");

    const patient = (window.PATIENTS || []).find((p) => p.id === pid);
    const listaAvals = pid ? avalsDoPaciente(pid) : [];

    useEffect(() => { if (!dirty) return; const h = (e) => { e.preventDefault(); e.returnValue = ""; return ""; }; window.addEventListener("beforeunload", h); return () => window.removeEventListener("beforeunload", h); }, [dirty]);
    useEffect(() => { if (!toast) return; const id = setTimeout(() => setToast(null), toast.kind === "err" ? 5000 : 2600); return () => clearTimeout(id); }, [toast]);

    function goTop() { const el = document.querySelector(".main-scroll"); if (el) el.scrollTop = 0; }
    function snapshot() { return JSON.stringify({ date, entrevistador, informante, parentesco, values }); }
    function limparInstancia() { setAvalId(null); setReadonly(false); setValues({}); setDate(todayISO()); setEntrevistador((window.__USER && window.__USER.name) || ""); setInformante("Mãe"); setParentesco(""); setOpenSec({ ident: true }); setSavedJson(""); setSavedAt(null); setDirty(false); }
    function resetTudo() { limparInstancia(); setPid(""); setErr(""); setView("ident"); }

    function prefillFromPatient(p) {
      if (!p) return {};
      const v = {};
      v.nome = p.name || "";
      if (p.birth) { v.nascimento = p.birth; v.idade = ageFromISO(p.birth) || (p.age != null ? String(p.age) : ""); }
      else if (p.age != null) v.idade = String(p.age);
      v.anoEscolar = p.grade && p.grade !== "—" ? p.grade : "";
      v.escola = p.school && p.school !== "—" ? p.school : "";
      v.responsaveis = p.guardian && p.guardian !== "—" ? (p.guardianRel ? `${p.guardian} (${p.guardianRel})` : p.guardian) : "";
      v.telefones = p.phone && p.phone !== "—" ? p.phone : "";
      return v;
    }

    function pickPatient(id) { setPid(id); limparInstancia(); }

    function novaAvaliacao() {
      if (!pid) { setErr("Selecione o paciente."); return; }
      const id = newAvalId();
      const base = prefillFromPatient(patient);
      setAvalId(id); setReadonly(false); setValues(base); setDate(todayISO());
      setEntrevistador((window.__USER && window.__USER.name) || ""); setInformante("Mãe"); setParentesco("");
      setOpenSec({ ident: true });
      const snap = JSON.stringify({ date: todayISO(), entrevistador: (window.__USER && window.__USER.name) || "", informante: "Mãe", parentesco: "", values: base });
      setSavedJson(snap); setSavedAt(null); setDirty(false);
      try { putAval({ id, pid, patientName: patient ? patient.name : "", date: todayISO(), entrevistador: (window.__USER && window.__USER.name) || "", informante: "Mãe", parentesco: "", values: base, finalizada: false, savedAt: null, createdAt: Date.now(), finishedAt: null }); } catch (e) { /* */ }
      setErr(""); setView("form"); goTop();
    }
    function abrirAval(a, ro) {
      setAvalId(a.id); setReadonly(!!ro); setPid(a.pid);
      setDate(a.date || todayISO()); setEntrevistador(a.entrevistador || ""); setInformante(a.informante || "Mãe"); setParentesco(a.parentesco || "");
      const v = a.values || {}; setValues(v);
      setOpenSec({ ident: true });
      setSavedJson(JSON.stringify({ date: a.date || todayISO(), entrevistador: a.entrevistador || "", informante: a.informante || "Mãe", parentesco: a.parentesco || "", values: v }));
      setSavedAt(a.savedAt); setDirty(false); setErr(""); setView("form"); goTop();
    }

    function setVal(k, v) { if (readonly) return; setValues((s) => ({ ...s, [k]: v })); setDirty(true); }
    function mark(setter) { return (v) => { if (readonly) return; setter(v); setDirty(true); }; }
    function toggleSec(id) { setOpenSec((s) => ({ ...s, [id]: !s[id] })); }

    function persist(finalizar) {
      const when = new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
      const prev = loadAval(avalId);
      const a = { id: avalId, pid, patientName: patient ? patient.name : "", date, entrevistador, informante, parentesco, values, finalizada: !!finalizar, savedAt: when, createdAt: (prev && prev.createdAt) || Date.now(), finishedAt: finalizar ? Date.now() : (prev && prev.finishedAt) || null };
      putAval(a); return { when, a };
    }
    function salvar() {
      if (readonly) return false; if (!avalId) { setErr("Inicie uma entrevista primeiro."); return false; }
      setSaving(true); setToast(null);
      try { const { when } = persist(false); setSavedJson(snapshot()); setSavedAt(when); setDirty(false); setToast({ kind: "ok", text: "Entrevista salva (parcial)" }); return true; }
      catch (e) { setToast({ kind: "err", text: window.classifyStorageError ? window.classifyStorageError(e) : "Não foi possível salvar — tente novamente." }); return false; }
      finally { setSaving(false); }
    }
    function gravarNoProntuario(a) {
      if (!window.addAvaliacao) return;
      const total = ALL_FIELDS.length; const filled = ALL_FIELDS.filter((f) => fieldFilled(f, a.values)).length;
      const note = `Anamnese Infantil — informante: ${a.informante}${a.parentesco ? " (" + a.parentesco + ")" : ""}. Queixa: ${a.values.motivo || "—"}.`;
      window.addAvaliacao({ pid: a.pid, name: INSTRUMENT_NAME, date: a.date, result: `Entrevista registrada (${filled}/${total} campos)`, note, sheet: { kind: "anamnese-infantil", avalId: a.id, date: a.date, entrevistador: a.entrevistador, informante: a.informante, parentesco: a.parentesco, values: a.values } });
    }
    function finalizar() {
      if (readonly || !avalId) return; setSaving(true); setToast(null);
      try { const { a } = persist(true); gravarNoProntuario(a); setDirty(false); setToast({ kind: "ok", text: "Anamnese finalizada e salva no prontuário" }); resetTudo(); goTop(); }
      catch (e) { setToast({ kind: "err", text: "Não foi possível finalizar — tente novamente." }); }
      finally { setSaving(false); }
    }

    function guardedLeave(proceed) { if (dirty) setLeaveGuard({ proceed }); else proceed(); }
    function discardAndLeave() { try { const s = JSON.parse(savedJson); setDate(s.date); setEntrevistador(s.entrevistador); setInformante(s.informante); setParentesco(s.parentesco); setValues(s.values); } catch (e) { /* */ } setDirty(false); const p = leaveGuard && leaveGuard.proceed; setLeaveGuard(null); if (p) p(); }
    function saveAndLeave() { if (!salvar()) return; const p = leaveGuard && leaveGuard.proceed; setLeaveGuard(null); if (p) p(); }
    function apagarDoPaciente() { if (!pid) return; try { const all = loadAvals(); Object.keys(all).forEach((id) => { if (all[id] && all[id].pid === pid) delete all[id]; }); saveAvals(all); } catch (e) { /* */ } setShowClear(false); limparInstancia(); setToast({ kind: "ok", text: "Anamneses desta criança apagadas." }); }

    // idade calculada da data de nascimento
    function onNascimento(v) { setValues((s) => ({ ...s, nascimento: v, idade: ageFromISO(v) || s.idade || "" })); setDirty(true); }

    const totalFields = ALL_FIELDS.length;
    const filledCount = ALL_FIELDS.filter((f) => fieldFilled(f, values)).length;
    const pct = Math.round((filledCount / totalFields) * 100);
    const secFilled = (sec) => sec.fields.filter((f) => fieldFilled(f, values)).length;

    // ---------------- PDF ----------------
    function exportPDF() {
      const prof = window.getProfile ? window.getProfile() : { name: "", profession: "", regLine: "" };
      const secHtml = SECTIONS.map((sec) => {
        const items = sec.fields.filter((f) => fieldFilled(f, values)).map((f) => `<p class="ln"><b>${esc(f.l)}</b><br/>${esc(fieldToText(f, values)).replace(/\n/g, "<br/>")}</p>`);
        return items.length ? `<h2>${esc(sec.title)}</h2>${items.join("")}` : "";
      }).filter(Boolean).join("");
      const childName = values.nome || (patient ? patient.name : "");
      const html = `<!DOCTYPE html><html lang="pt-BR"><head><meta charset="UTF-8"><title>Anamnese Infantil — ${esc(childName)}</title>
        <style>body{font-family:Arial,Helvetica,sans-serif;color:#142826;padding:24px;font-size:12px;line-height:1.55}
        h1{font-size:16px;text-align:center;margin:0 0 2px}.subt{text-align:center;font-size:11px;color:#666;margin:0 0 12px}
        h2{font-size:12.5px;background:#E9F0EE;padding:5px 8px;border-radius:5px;margin:16px 0 6px}
        .meta{margin:8px 0;line-height:1.6}.ln{margin:6px 0}.sig{margin-top:44px;text-align:center}.sig div{margin-top:36px}
        .foot{margin-top:16px;font-size:10px;color:#666}</style></head><body>
        <h1>ANAMNESE INFANTIL</h1>
        <p class="subt">Anamnese Psicopedagógica — Entrevista com os Pais</p>
        <div class="meta"><b>Criança:</b> ${esc(childName) || "—"}${values.nascimento ? ` &nbsp; <b>Nascimento:</b> ${esc(values.nascimento)}` : ""}${values.idade ? ` &nbsp; <b>Idade:</b> ${esc(values.idade)}` : ""}<br/>
        <b>Data da entrevista:</b> ${esc(date)} &nbsp; <b>Entrevistador(a):</b> ${esc(entrevistador) || "—"}<br/>
        <b>Informações prestadas por:</b> ${esc(informante)}${parentesco ? ` (${esc(parentesco)})` : ""}</div>
        ${secHtml || "<p>(nenhuma seção preenchida)</p>"}
        <div class="foot"><b>${esc(prof.name || "—")}</b> — ${esc([prof.profession, prof.regLine].filter(Boolean).join(" · ")) || "profissional responsável"}</div>
        <div class="sig"><div>______________________________<br>${esc(prof.name || "Profissional responsável")}</div><div>______________________________<br>Responsável pela criança</div></div>
        </body></html>`;
      const w = window.open("", "_blank"); if (!w) { setToast({ kind: "err", text: "Permita pop-ups para exportar o PDF." }); return; }
      w.document.write(html); w.document.close(); w.focus(); setTimeout(() => { try { w.print(); } catch (e) { /* */ } }, 300);
    }

    // ---------------- Render de um campo ----------------
    function renderField(f) {
      const v = values;
      if (f.k === "nascimento") return <div className="fld" key={f.k}><label>{f.l}</label><input className="ctrl" type="date" value={v.nascimento || ""} onChange={(e) => onNascimento(e.target.value)} disabled={readonly} /></div>;
      if (f.t === "area") return <div className="fld" key={f.k}><label>{f.l}</label><textarea className="ctrl" style={{ minHeight: 72 }} value={v[f.k] || ""} onChange={(e) => setVal(f.k, e.target.value)} disabled={readonly}></textarea></div>;
      if (f.t === "parto") return <div className="fld" key={f.k}><label>{f.l}</label><select className="ctrl" value={v[f.k] || ""} onChange={(e) => setVal(f.k, e.target.value)} disabled={readonly}><option value="">Selecione…</option><option value="Normal">Normal</option><option value="Cesárea">Cesárea</option></select></div>;
      if (f.t === "sn") {
        const cur = v[f.k] || "";
        return (
          <div className="fld" key={f.k}>
            <label>{f.l}</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["sim", "nao", "ns"].map((op) => (
                <button type="button" key={op} disabled={readonly} onClick={() => setVal(f.k, op)}
                  style={{ fontSize: 12.5, fontWeight: 700, padding: "6px 12px", borderRadius: 9, cursor: readonly ? "default" : "pointer", border: "1.5px solid " + (cur === op ? "var(--primary)" : "var(--border-2)"), background: cur === op ? "var(--primary)" : "transparent", color: cur === op ? "#fff" : "var(--text-2)" }}>{SN_LABEL[op]}</button>
              ))}
            </div>
            {cur === "sim" && <textarea className="ctrl" style={{ marginTop: 8, minHeight: 56 }} placeholder="Detalhar…" value={v[f.k + "__d"] || ""} onChange={(e) => setVal(f.k + "__d", e.target.value)} disabled={readonly}></textarea>}
          </div>
        );
      }
      if (f.t === "marco") {
        const nl = v[f.k + "__nl"] === "1";
        return (
          <div className="fld" key={f.k}>
            <label>{f.l}</label>
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <input className="ctrl" style={{ maxWidth: 200 }} placeholder="Ex.: 6 meses / 1 ano" value={nl ? "" : (v[f.k] || "")} onChange={(e) => setVal(f.k, e.target.value)} disabled={readonly || nl} />
              <label style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: "var(--text-2)", cursor: "pointer" }}>
                <input type="checkbox" checked={nl} onChange={(e) => setVal(f.k + "__nl", e.target.checked ? "1" : "")} disabled={readonly} /> não lembra
              </label>
            </div>
          </div>
        );
      }
      if (f.k === "idade") return <div className="fld" key={f.k}><label>{f.l}</label><input className="ctrl" value={v.idade || ""} onChange={(e) => setVal("idade", e.target.value)} disabled={readonly} placeholder="anos" /></div>;
      return <div className="fld" key={f.k}><label>{f.l}</label><input className="ctrl" value={v[f.k] || ""} onChange={(e) => setVal(f.k, e.target.value)} disabled={readonly} /></div>;
    }

    return (
      <div className="form-wrap">
        <div className="hay-top">
          <button className="pt-back" onClick={() => guardedLeave(onBack)}><Icon name="chevL" size={16} /> Voltar para avaliações</button>
        </div>
        <div className="page-head" style={{ marginBottom: 14 }}>
          <div><h1><Icon name="folderHeart" size={25} /> Anamnese Infantil</h1><p className="sub">Anamnese Psicopedagógica — Entrevista com os Pais</p></div>
        </div>

        {view === "form" && (
          <div className="hay-sheet-id" style={{ marginBottom: 12 }}>
            <span><b>Criança:</b> {values.nome || (patient ? patient.name : "—")}</span>
            <span><b>Data:</b> {date}</span>
            {readonly && <span style={{ color: "var(--text-3)" }}><b>Modo consulta</b></span>}
          </div>
        )}

        {/* ---------- Identificação / instância ---------- */}
        {view === "ident" && (
          <>
            <div className="form-card">
              <div className="sec-head"><span className="si"><Icon name="users" size={18} /></span> Paciente</div>
              <div className="fld" style={{ marginBottom: 0 }}><label>Criança <span className="req">*</span></label><window.PatientPicker value={pid} onChange={pickPatient} /></div>
            </div>

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

            <div className="hay-nav">
              <button className="btn btn-ghost btn-sm" onClick={onBack}><Icon name="chevL" size={16} /> Cancelar</button>
              <button className="btn btn-primary btn-sm" onClick={novaAvaliacao} disabled={!pid}><Icon name="plus" size={16} /> Nova avaliação</button>
            </div>

            {pid && listaAvals.length > 0 && (
              <>
                <p className="section-label">ENTREVISTAS DESTA CRIANÇA</p>
                {listaAvals.map((a) => {
                  const filled = ALL_FIELDS.filter((f) => fieldFilled(f, a.values || {})).length;
                  return (
                    <div className="team-row" key={a.id}>
                      <span className="ic-icon" style={{ width: 38, height: 38, flex: "none" }}><Icon name="folderHeart" size={18} /></span>
                      <div className="tr-info" style={{ flex: 1 }}>
                        <b>{a.patientName || "—"} {a.finalizada && <span className="tag ok" style={{ marginLeft: 4, fontSize: 10.5, padding: "1px 7px" }}><i className="d"></i>Finalizada</span>}</b>
                        <span>{a.date} · {filled}/{totalFields} campos{a.finalizada ? "" : " · em andamento"}</span>
                      </div>
                      {a.finalizada
                        ? <button className="btn btn-ghost btn-sm" onClick={() => abrirAval(a, true)}><Icon name="eye" size={15} /> Ver</button>
                        : <button className="btn btn-primary btn-sm" onClick={() => abrirAval(a, false)}><Icon name="arrowRight" size={15} /> Retomar</button>}
                    </div>
                  );
                })}
                <div style={{ marginTop: 14, textAlign: "center" }}>
                  <button type="button" onClick={() => setShowClear(true)} style={{ background: "none", border: "none", cursor: "pointer", color: "#DC2626", fontSize: 12.5, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="x" size={14} /> Apagar as anamneses de {patient ? patient.name : "esta criança"}</button>
                </div>
              </>
            )}
          </>
        )}

        {/* ---------- Formulário ---------- */}
        {view === "form" && (
          <>
            {/* Progresso */}
            <div className="form-card">
              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                <b style={{ fontSize: 13.5 }}>Progresso da entrevista</b>
                <span style={{ marginLeft: "auto", fontSize: 12.5, fontWeight: 800, color: "var(--primary)" }}>{filledCount}/{totalFields} · {pct}%</span>
              </div>
              <div style={{ height: 8, borderRadius: 6, background: "var(--surface-3)", overflow: "hidden", marginTop: 8 }}><div style={{ width: pct + "%", height: "100%", background: "var(--primary)", transition: "width .2s" }} /></div>
              <p className="help-text" style={{ marginBottom: 0, marginTop: 8 }}>A entrevista pode ser feita em mais de um encontro — salve parcialmente e retome depois. Nenhum campo é obrigatório além da identificação.</p>
            </div>

            {/* Cabeçalho da entrevista */}
            <div className="form-card">
              <div className="sec-head"><span className="si"><Icon name="chat" size={18} /></span> Cabeçalho da entrevista</div>
              <div className="grid-2">
                <div className="fld"><label>Data da aplicação</label><input className="ctrl" type="date" value={date} onChange={(e) => mark(setDate)(e.target.value)} disabled={readonly} /></div>
                <div className="fld"><label>Entrevistador(a)</label><input className="ctrl" value={entrevistador} onChange={(e) => mark(setEntrevistador)(e.target.value)} disabled={readonly} /></div>
              </div>
              <div className="grid-2">
                <div className="fld"><label>Informações prestadas por</label><select className="ctrl" value={informante} onChange={(e) => mark(setInformante)(e.target.value)} disabled={readonly}>{INFORMANTES.map((x) => <option key={x} value={x}>{x}</option>)}</select></div>
                <div className="fld"><label>Parentesco / detalhe</label><input className="ctrl" value={parentesco} onChange={(e) => mark(setParentesco)(e.target.value)} disabled={readonly} placeholder="Ex.: avó materna" /></div>
              </div>
            </div>

            {/* Seções em accordion */}
            {SECTIONS.map((sec) => {
              const open = !!openSec[sec.id]; const fc = secFilled(sec);
              return (
                <div className="form-card" key={sec.id} style={{ padding: 0, overflow: "hidden" }}>
                  <button type="button" onClick={() => toggleSec(sec.id)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, background: "none", border: "none", padding: "14px 16px", cursor: "pointer", textAlign: "left", color: "var(--text)" }}>
                    <b style={{ flex: 1, fontSize: 14.5 }}>{sec.title}</b>
                    <span style={{ fontSize: 11, fontWeight: 800, color: fc ? "var(--primary)" : "var(--text-3)", background: fc ? "var(--primary-soft)" : "var(--surface-2)", borderRadius: 20, padding: "2px 9px" }}>{fc}/{sec.fields.length}</span>
                    <Icon name="chevDown" size={18} style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .2s" }} />
                  </button>
                  {open && <div style={{ padding: "0 16px 16px" }}>{sec.fields.map(renderField)}</div>}
                </div>
              );
            })}

            {/* Ações */}
            {readonly ? (
              <div className="hay-nav" style={{ flexWrap: "wrap", gap: 10 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => { setView("ident"); goTop(); }}><Icon name="chevL" size={16} /> Voltar</button>
                <button className="btn btn-ghost btn-sm" onClick={exportPDF}><Icon name="download" size={16} /> Exportar PDF</button>
                <span style={{ marginLeft: "auto", fontSize: 12.5, fontWeight: 700, color: "var(--text-3)" }}><Icon name="eye" size={14} /> Modo consulta</span>
              </div>
            ) : (
              <div className="hay-nav" style={{ flexWrap: "wrap", gap: 10 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => guardedLeave(() => { setView("ident"); goTop(); })}><Icon name="chevL" size={16} /> Voltar</button>
                <button className="btn btn-ghost btn-sm" onClick={exportPDF}><Icon name="download" size={16} /> Exportar PDF</button>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginLeft: "auto", flexWrap: "wrap" }}>
                  {dirty ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: "var(--accent-strong)" }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)" }} /> Alterações não salvas</span> : (savedAt && <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--primary)" }}>Salvo ✓ {savedAt}</span>)}
                  <button className="btn btn-primary btn-sm" onClick={salvar} disabled={saving || !dirty}><Icon name="clipboardCheck" size={16} /> {saving ? "Salvando…" : "Salvar parcial"}</button>
                  <button className="btn btn-primary btn-sm" onClick={finalizar} disabled={saving}><Icon name="clipboardCheck" size={16} /> {saving ? "Salvando…" : "Finalizar e salvar no prontuário"}</button>
                </div>
              </div>
            )}
          </>
        )}

        {leaveGuard && (
          <div className="modal-scrim" onClick={() => setLeaveGuard(null)}>
            <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 440 }}>
              <div className="modal-head"><div><h3>Alterações não salvas</h3><p>Há alterações não salvas nesta entrevista.</p></div><button className="x" onClick={() => setLeaveGuard(null)} aria-label="Fechar"><Icon name="x" size={18} /></button></div>
              <div className="modal-body">
                <p className="help-text" style={{ marginTop: 0 }}>Deseja salvar antes de sair?</p>
                <div className="form-actions" style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
                  <button className="btn btn-ghost btn-sm" onClick={() => setLeaveGuard(null)}>Cancelar</button>
                  <button className="btn btn-ghost btn-sm" onClick={discardAndLeave}>Sair sem salvar</button>
                  <button className="btn btn-primary btn-sm" onClick={saveAndLeave} disabled={saving}><Icon name="clipboardCheck" size={15} /> {saving ? "Salvando…" : "Salvar e sair"}</button>
                </div>
              </div>
            </div>
          </div>
        )}
        {showClear && (
          <div className="modal-scrim" onClick={() => setShowClear(false)}>
            <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 440 }}>
              <div className="modal-head"><div><h3>Apagar as anamneses desta criança?</h3><p>Esta ação não pode ser desfeita.</p></div><button className="x" onClick={() => setShowClear(false)} aria-label="Fechar"><Icon name="x" size={18} /></button></div>
              <div className="modal-body">
                <p className="help-text" style={{ marginTop: 0 }}>Todas as anamneses infantis de <b>{patient ? patient.name : "esta criança"}</b> serão apagadas permanentemente.</p>
                <div className="form-actions" style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
                  <button className="btn btn-ghost btn-sm" onClick={() => setShowClear(false)}>Cancelar</button>
                  <button className="btn btn-sm" style={{ background: "#DC2626", color: "#fff" }} onClick={apagarDoPaciente}><Icon name="x" size={15} /> Apagar</button>
                </div>
              </div>
            </div>
          </div>
        )}
        {toast && (
          <div style={{ position: "fixed", left: "50%", bottom: 22, transform: "translateX(-50%)", zIndex: 90, display: "flex", alignItems: "center", gap: 9, padding: "11px 16px", borderRadius: 12, boxShadow: "var(--shadow-lg)", fontSize: 13.5, fontWeight: 700, color: "#fff", background: toast.kind === "err" ? "#DC2626" : "var(--primary)" }}>
            <Icon name={toast.kind === "err" ? "x" : "clipboardCheck"} size={16} /> {toast.text}
          </div>
        )}
      </div>
    );
  }

  window.AnamneseInfantilTest = AnamneseInfantilTest;
})();
