/* ============================================================
   EDUCARE — Seguir Instruções (6 anos)
   Atividade lúdica que avalia atenção, memória de trabalho,
   compreensão e capacidade de seguir instruções de 2 e 3 etapas.
   Aplicada em papel; o app registra o resultado por comando.
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  const INSTRUMENT_NAME = "Seguir Instruções — Atenção e Memória de Trabalho (6 anos)";

  // Comandos oficiais (enunciado) — não alterar os textos.
  const NIVEIS = [
    { key: "n1", label: "Nível 1 — Duas etapas", etapas: 2, cmds: [
      "Escreva seu nome e faça um círculo ao redor dele.",
      "Desenhe uma casa e pinte a porta de azul.",
      "Faça um sol e desenhe duas nuvens.",
      "Desenhe um coração e faça um X dentro dele.",
      "Desenhe uma árvore e pinte o tronco de marrom.",
    ] },
    { key: "n2", label: "Nível 2 — Três etapas", etapas: 3, cmds: [
      "Desenhe uma flor, pinte as pétalas de vermelho e faça um círculo em volta da flor.",
      "Desenhe um cachorro, faça três bolinhas ao lado dele e risque uma delas.",
      "Escreva o número 5, desenhe cinco estrelas e circule a menor.",
      "Desenhe um carro, faça duas janelas e pinte apenas uma de amarelo.",
      "Desenhe uma bola, faça uma linha embaixo dela e escreva seu nome no canto da folha.",
    ] },
  ];
  // Lista achatada com metadados de nível.
  const FLAT = NIVEIS.flatMap((nv) => nv.cmds.map((texto, i) => ({ nivel: nv.label, etapas: nv.etapas, num: i + 1, texto })));

  // Estados de execução por comando.
  const STATES = {
    completo: { l: "Completo", col: "#16A34A", pts: 1, desc: "Fez todas as etapas, na ordem." },
    parcial: { l: "Parcial", col: "#F59E0B", pts: 0.5, desc: "Esqueceu ou inverteu uma etapa." },
    nao: { l: "Não fez", col: "#DC2626", pts: 0, desc: "Não realizou ou fez incorretamente." },
  };
  const STATE_KEYS = ["completo", "parcial", "nao"];

  // Critérios de observação (enunciado). good=true → sinal positivo; good=false → sinal de alerta.
  const CRITERIOS = [
    { key: "escutou", label: "Escutou toda a instrução antes de começar", good: true },
    { key: "ordem", label: "Executou as etapas na ordem correta", good: true },
    { key: "lembrou", label: "Lembrou de todas as partes do comando", good: true },
    { key: "repeticao", label: "Pediu repetição", good: false },
    { key: "distraiu", label: "Distraiu-se durante a tarefa", good: false },
    { key: "ajuda", label: "Necessitou de ajuda", good: false },
    { key: "atencao", label: "Manteve a atenção até o final", good: true },
  ];

  // Classificação (interpretação do enunciado).
  const LEVELS = {
    adequado: { key: "adequado", l: "Adequado para a idade", col: "#16A34A",
      desc: "Realiza as instruções sem ajuda — atenção e memória de trabalho compatíveis com a faixa etária." },
    ressalvas: { key: "ressalvas", l: "Dentro do esperado, com ressalvas", col: "#F59E0B",
      desc: "Esquece uma etapa ocasionalmente — pode ser esperado dependendo da dificuldade. Acompanhar." },
    investigar: { key: "investigar", l: "Recomenda-se investigar", col: "#DC2626",
      desc: "Esquece partes com frequência, precisa de repetição ou inicia antes do fim da instrução. Investigar em conjunto com outros instrumentos e observações." },
  };

  function esc(s) { return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }

  function classify(score, crit) {
    const neg = (crit.repeticao ? 1 : 0) + (crit.distraiu ? 1 : 0) + (crit.ajuda ? 1 : 0);
    if (score >= 8 && neg <= 1 && crit.atencao) return LEVELS.adequado;
    if (score >= 5) return LEVELS.ressalvas;
    return LEVELS.investigar;
  }

  /* ---------------- Relatório (IA com fallback em regras locais) ---------------- */
  function localReport(comandos, crit, counts, score, cls) {
    const byState = (s) => comandos.filter((c) => c.state === s);
    const obsTxt = (c) => (c.obs ? ` (obs.: ${c.obs})` : "");
    const rotulo = (c) => `${c.nivel.startsWith("Nível 1") ? "N1" : "N2"}.${c.num} "${c.texto}"`;
    const critGood = CRITERIOS.filter((c) => c.good && crit[c.key]).map((c) => c.label);
    const critBad = CRITERIOS.filter((c) => !c.good && crit[c.key]).map((c) => c.label);

    const fortes = byState("completo").map((c) => `${rotulo(c)} — executado integralmente.${obsTxt(c)}`);
    critGood.forEach((l) => fortes.push(`Observação favorável: ${l.toLowerCase()}.`));

    const atencao = byState("parcial").map((c) => `${rotulo(c)} — realizado parcialmente (etapa esquecida ou fora de ordem).${obsTxt(c)}`)
      .concat(byState("nao").map((c) => `${rotulo(c)} — não realizado / incorreto.${obsTxt(c)}`));
    critBad.forEach((l) => atencao.push(`Sinal de alerta: ${l.toLowerCase()}.`));

    const interpretacao = cls.key === "adequado"
      ? "O desempenho indica atenção sustentada e memória de trabalho adequadas para a faixa etária: a criança compreende e retém instruções de duas e três etapas e as executa de forma autônoma."
      : cls.key === "ressalvas"
        ? "O desempenho está dentro do esperado, com esquecimentos ocasionais — sobretudo em comandos de três etapas, que exigem mais da memória de trabalho. Recomenda-se acompanhamento e novas observações."
        : "O padrão de esquecimentos frequentes, necessidade de repetição e/ou início antes do fim da instrução sugere fragilidade em atenção sustentada, memória de trabalho ou compreensão verbal, devendo ser investigado com outros instrumentos e observações.";

    const recs = [];
    if (byState("nao").length || byState("parcial").length) recs.push("Retomar comandos de duas etapas antes de avançar para três, aumentando a complexidade gradualmente.");
    recs.push("Pedir que a criança repita a instrução com as próprias palavras antes de executar (apoia a memória de trabalho).");
    if (crit.repeticao || crit.distraiu) recs.push("Reduzir distratores no ambiente e fracionar comandos longos em partes menores.");
    if (crit.ajuda) recs.push("Diminuir gradualmente o apoio do adulto, incentivando a autonomia na execução.");
    recs.push("Usar jogos de instruções (Simon diz, circuitos, sequências) para treinar escuta e ordem das etapas de forma lúdica.");

    return {
      sintese_geral: `Foram aplicados ${comandos.length} comandos (${counts.completo} completos, ${counts.parcial} parciais, ${counts.nao} não realizados), com escore ${score}/${comandos.length}. Classificação: ${cls.l}. ${cls.desc}`,
      pontos_fortes: fortes,
      pontos_atencao: atencao,
      interpretacao,
      recomendacoes: recs,
      observacao: "Atividade lúdica de triagem de atenção, memória de trabalho, compreensão e seguimento de instruções. Não constitui diagnóstico; os achados devem ser interpretados em conjunto com outros instrumentos e com a observação clínica/pedagógica.",
    };
  }

  const REPORT_SECTIONS = [
    ["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"],
  ];

  function ReportView({ report }) {
    return (
      <div className="form-card" style={{ paddingBottom: 10 }}>
        <div className="sec-head"><span className="si"><Icon name="sparkles" size={18} /></span> Parecer pedagógico</div>
        {REPORT_SECTIONS.map(([k, title]) => {
          const v = report[k];
          if (v == null || (Array.isArray(v) && !v.length)) return null;
          return (
            <div className="kv" key={k} style={{ marginBottom: 12 }}>
              <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>
          );
        })}
      </div>
    );
  }

  function SeguirInstrucoesTest({ onBack, onOpenPatient }) {
    const [step, setStep] = useState(1); // 1=ident, 2=aplicação, 3=resultado
    const [pid, setPid] = useState("");
    const [date, setDate] = useState(window.todayISO());
    const [escolaNome, setEscolaNome] = useState("");
    const [classe, setClasse] = useState("");
    const [aplicador, setAplicador] = useState("");
    const [marks, setMarks] = useState(() => FLAT.map(() => ({ state: null, obs: "" })));
    const [crit, setCrit] = useState(() => CRITERIOS.reduce((o, c) => { o[c.key] = false; return o; }, {}));
    const [err, setErr] = useState("");
    const [saved, setSaved] = useState(false);
    const [report, setReport] = useState(null);
    const [genBusy, setGenBusy] = useState(false);
    const [iaErro, setIaErro] = useState("");

    const patient = (window.PATIENTS || []).find((p) => p.id === pid);
    const setMark = (i, v) => setMarks(marks.map((m, idx) => (idx === i ? { ...m, ...v } : m)));
    const toggleCrit = (k) => setCrit({ ...crit, [k]: !crit[k] });
    const counts = STATE_KEYS.reduce((o, k) => { o[k] = marks.filter((m) => m.state === k).length; return o; }, {});
    const score = Math.round(marks.reduce((s, m) => s + (m.state ? STATES[m.state].pts : 0), 0) * 10) / 10;
    const done = marks.filter((m) => m.state != null).length;
    const allMarked = done === FLAT.length;
    const cls = classify(score, crit);
    const STEPS = ["Identificação", "Aplicação", "Resultado"];

    function pickPatient(id) {
      setPid(id);
      const p = (window.PATIENTS || []).find((x) => x.id === id);
      if (p && p.school && p.school !== "—" && !escolaNome) setEscolaNome(p.school);
      if (p && p.grade && p.grade !== "—" && !classe) setClasse(p.grade);
    }
    function goTop() { const el = document.querySelector(".main-scroll"); if (el) el.scrollTop = 0; }
    function next() {
      if (step === 1 && !pid) { setErr("Selecione o paciente."); return; }
      if (step === 2 && !allMarked) { setErr("Registre o estado dos 10 comandos para ver o resultado."); return; }
      setErr(""); setStep((s) => Math.min(3, s + 1)); goTop();
    }
    function prev() { if (step === 1) { onBack(); return; } setStep((s) => s - 1); goTop(); }

    async function genReport() {
      setGenBusy(true);
      setIaErro("");
      const comandos = FLAT.map((c, i) => ({ ...c, state: marks[i].state, obs: marks[i].obs }));
      let r = null;
      if (window.EducareIA.configurada()) {
        try {
          r = await window.EducareIA.gerar("seguir", {
            primeiro_nome: patient ? String(patient.name).split(" ")[0] : "",
            idade: patient ? patient.age : null,
            escola: escolaNome || null,
            classe: classe || null,
            data: date,
            escore: score,
            escore_maximo: comandos.length,
            classificacao: cls.l,
            leitura_da_classificacao: cls.desc,
            resumo_por_estado: counts,
            comandos: comandos.map((c) => ({
              nivel: c.nivel, etapas: c.etapas, numero: c.num,
              comando: c.texto, estado: c.state, observacao: c.obs || "",
            })),
            criterios_marcados: CRITERIOS.filter((c) => crit[c.key]).map((c) => c.label),
          });
        } catch (e) {
          setIaErro((e.message || "Falha na IA.") + " Parecer gerado pelas regras locais.");
        }
      }
      if (!r) r = localReport(comandos, crit, counts, score, cls);
      setReport(r);
      setGenBusy(false);
    }

    function save() {
      const sheet = {
        kind: "seguir", idade: patient ? patient.age : "", escola: escolaNome || (patient ? patient.school : "") || "—",
        escolaNome, classe, aplicador,
        comandos: FLAT.map((c, i) => ({ nivel: c.nivel, etapas: c.etapas, num: c.num, texto: c.texto, state: marks[i].state, obs: marks[i].obs })),
        criterios: CRITERIOS.reduce((o, c) => { o[c.key] = !!crit[c.key]; return o; }, {}),
        counts, score, maxScore: FLAT.length, classificacao: cls.key, classLabel: cls.l, report,
      };
      const result = `${cls.l} · ${score}/${FLAT.length}`;
      const note = `Seguir Instruções (6 anos): ${cls.l}. Escore ${score}/${FLAT.length} (${counts.completo} completos, ${counts.parcial} parciais, ${counts.nao} não).`;
      window.addAvaliacao({ pid, name: INSTRUMENT_NAME, date, result, note, sheet });
      setSaved(true);
    }

    function exportPDF() {
      const critRows = CRITERIOS.map((c) => `<tr><td class="c">${crit[c.key] ? "☑" : "☐"}</td><td>${esc(c.label)}</td></tr>`).join("");
      const cmdRows = FLAT.map((c, i) => {
        const st = marks[i].state ? STATES[marks[i].state] : null;
        return `<tr><td class="c">${c.nivel.startsWith("Nível 1") ? "N1" : "N2"}.${c.num}</td><td>${esc(c.texto)}</td><td><b style="color:${st ? st.col : "#999"}">${st ? st.l : "—"}</b></td><td>${esc(marks[i].obs)}</td></tr>`;
      }).join("");
      const html = `<!DOCTYPE html><html lang="pt-BR"><head><meta charset="UTF-8"><title>Seguir Instruções — ${esc(patient ? patient.name : "")}</title>
        <style>body{font-family:Arial,Helvetica,sans-serif;color:#000;padding:24px;font-size:12px}
        h1{font-size:15px;text-align:center;margin:0 0 2px}h2{font-size:12px;text-align:center;margin:0 0 12px;font-weight:normal}
        .meta{margin:10px 0;line-height:1.7}
        table{width:100%;border-collapse:collapse;margin-bottom:10px}th,td{border:1px solid #000;padding:6px 8px;text-align:left;vertical-align:middle}th{background:#eee;font-size:11px}td.c{text-align:center;font-weight:bold;width:46px}
        .sum{margin:8px 0;font-weight:bold}</style></head><body>
        <h1>SEGUIR INSTRUÇÕES — FOLHA DE REGISTRO</h1>
        <h2>Atenção, memória de trabalho, compreensão e seguimento de instruções (6 anos)</h2>
        <div class="meta"><b>Aluno(a):</b> ${esc(patient ? patient.name : "—")} &nbsp;&nbsp; <b>Escola:</b> ${esc(escolaNome) || "—"} &nbsp;&nbsp; <b>Classe:</b> ${esc(classe) || "—"}<br/><b>Data:</b> ${esc(date)} &nbsp;&nbsp; <b>Aplicador(a):</b> ${esc(aplicador) || "—"}</div>
        <table><tr><th>#</th><th>Comando</th><th>Estado</th><th>Observações</th></tr>${cmdRows}</table>
        <p class="sum">Escore: ${score}/${FLAT.length} &nbsp;·&nbsp; ${counts.completo} completos · ${counts.parcial} parciais · ${counts.nao} não realizados &nbsp;·&nbsp; Classificação: ${esc(cls.l)}</p>
        <h3 style="font-size:12px;margin:12px 0 4px">Critérios de observação</h3>
        <table>${critRows}</table>
        ${report ? REPORT_SECTIONS.map(([k, title]) => {
          const v = report[k];
          if (v == null || (Array.isArray(v) && !v.length)) return "";
          const body = Array.isArray(v) ? "<ul>" + v.map((x) => `<li>${esc(x)}</li>`).join("") + "</ul>" : `<p>${esc(v)}</p>`;
          return `<h3 style="font-size:12px;margin:14px 0 4px">${esc(title)}</h3>${body}`;
        }).join("") : ""}
        </body></html>`;
      const w = window.open("", "_blank"); if (!w) { alert("Permita pop-ups para exportar o PDF."); return; }
      w.document.write(html); w.document.close(); w.focus(); setTimeout(() => { try { w.print(); } catch (e) { /* */ } }, 300);
    }

    let idx = -1; // índice global contínuo entre os níveis

    return (
      <div className="form-wrap">
        <div className="hay-top">
          <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Voltar para avaliações</button>
        </div>
        <div className="page-head" style={{ marginBottom: 14 }}>
          <div><h1><Icon name="clipboardList" size={25} /> Seguir Instruções <span style={{ fontSize: 15, fontWeight: 700, color: "var(--text-3)" }}>(6 anos)</span></h1><p className="sub">Atividade lúdica de atenção, memória de trabalho, compreensão e seguimento de instruções. Aplicada em papel — registre aqui o desempenho.</p></div>
        </div>

        <div className="hay-stepper">
          {STEPS.map((s, i) => (
            <button type="button" key={i} className={"hs" + (i + 1 === step ? " on" : "") + (i + 1 < step ? " done" : "")} onClick={() => { setStep(i + 1); goTop(); }}>
              <span className="hs-n">{i + 1 < step ? <Icon name="clipboardCheck" size={14} stroke={3} /> : i + 1}</span>{s}
            </button>
          ))}
        </div>

        {step === 1 && (
          <>
            <div className="form-card">
              <div className="sec-head"><span className="si"><Icon name="users" size={18} /></span> Identificação</div>
              <div className="fld"><label>Paciente <span className="req">*</span></label><window.PatientPicker value={pid} onChange={pickPatient} /></div>
              <div className="grid-2">
                <div className="fld"><label>Escola</label><input className="ctrl" value={escolaNome} onChange={(e) => setEscolaNome(e.target.value)} placeholder="Nome da escola" /></div>
                <div className="fld"><label>Classe</label><input className="ctrl" value={classe} onChange={(e) => setClasse(e.target.value)} placeholder="Ex: 1º ano" /></div>
              </div>
              <div className="grid-2">
                <div className="fld" style={{ marginBottom: 0 }}><label>Data</label><input className="ctrl" type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
                <div className="fld" style={{ marginBottom: 0 }}><label>Aplicador(a)</label><input className="ctrl" value={aplicador} onChange={(e) => setAplicador(e.target.value)} placeholder="Nome do profissional" /></div>
              </div>
            </div>
            <div className="form-card">
              <div className="sec-head"><span className="si"><Icon name="clipboardList" size={18} /></span> Material e orientação</div>
              <p className="help-text" style={{ marginTop: 0 }}><b>Material:</b> folha em branco, lápis de escrever e lápis de cor (vermelho, azul, verde, amarelo e marrom).</p>
              <p className="help-text" style={{ marginBottom: 0 }}><b>Orientação ao avaliador:</b> leia cada comando <b>apenas uma vez</b>. Observe se a criança pede para repetir, esquece partes da instrução, faz na ordem correta e se precisa de ajuda.</p>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            {NIVEIS.map((nv) => (
              <div className="form-card" key={nv.key}>
                <div className="sec-head"><span className="si"><Icon name="clipboardList" size={18} /></span> {nv.label}</div>
                {nv.cmds.map((texto, ci) => {
                  idx += 1; const gi = idx;
                  return (
                    <div className="iar-area" key={gi}>
                      <div className="iar-name"><span className="hi-n">{nv.key === "n1" ? "N1" : "N2"}.{ci + 1}</span> {texto}</div>
                      <div className="iar-colors">
                        {STATE_KEYS.map((k) => (
                          <button type="button" key={k} className={"iar-cbtn" + (marks[gi].state === k ? " on" : "")}
                            style={{ "--ic": STATES[k].col }} onClick={() => setMark(gi, { state: k })}>{STATES[k].l}</button>
                        ))}
                      </div>
                      <input className="ctrl iar-obs" placeholder="Observação (opcional)" value={marks[gi].obs} onChange={(e) => setMark(gi, { obs: e.target.value })} />
                    </div>
                  );
                })}
              </div>
            ))}

            <div className="form-card">
              <div className="sec-head"><span className="si"><Icon name="clipboardCheck" size={18} /></span> Critérios de observação</div>
              {CRITERIOS.map((c) => (
                <button type="button" key={c.key} className="seg-crit" onClick={() => toggleCrit(c.key)} style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left", background: "none", border: "none", padding: "8px 2px", cursor: "pointer", fontSize: 14, color: "var(--text-1)" }}>
                  <span style={{ width: 20, height: 20, borderRadius: 6, border: "2px solid " + (crit[c.key] ? (c.good ? "#16A34A" : "#DC2626") : "var(--surface-3)"), background: crit[c.key] ? (c.good ? "#16A34A" : "#DC2626") : "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    {crit[c.key] && <Icon name="clipboardCheck" size={12} stroke={3} color="#fff" />}
                  </span>
                  {c.label}
                  {!c.good && <span className="badge-soon" style={{ marginLeft: "auto" }}>alerta</span>}
                </button>
              ))}
              <p className="help-text" style={{ marginBottom: 0, marginTop: 8 }}>{done}/{FLAT.length} comandos registrados.</p>
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <div className="hay-sheet-id">
              <span><b>Aluno(a):</b> {patient ? patient.name : "—"}</span>
              <span><b>Escola:</b> {escolaNome || "—"}</span>
              <span><b>Classe:</b> {classe || "—"}</span>
              <span><b>Data:</b> {date}</span>
              <span><b>Aplicador(a):</b> {aplicador || "—"}</span>
            </div>

            <div className="form-card" style={{ paddingBottom: 10 }}>
              <div className="sec-head">Folha de registro</div>
              <div className="iar-sheet">
                {FLAT.map((c, i) => {
                  const st = marks[i].state ? STATES[marks[i].state] : null;
                  return (
                    <div className="iar-row" key={i}>
                      <span className="iar-rn">{c.nivel.startsWith("Nível 1") ? "N1" : "N2"}.{c.num}</span>
                      <span className="iar-rname">{c.texto}{marks[i].obs && <i className="iar-robs"> — {marks[i].obs}</i>}</span>
                      <div className="iar-rbar" style={st ? { background: st.col, minWidth: 92, flex: "none", padding: "0 10px", color: "#fff", fontWeight: 800, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" } : { background: "var(--surface-3)" }}>{st ? st.l : <span>—</span>}</div>
                    </div>
                  );
                })}
              </div>
              <div className="iar-summary">
                {STATE_KEYS.map((k) => (
                  <div className="iar-sum" key={k}><i style={{ background: STATES[k].col }}></i><b>{counts[k]}</b> {STATES[k].l.toLowerCase()}</div>
                ))}
              </div>
            </div>

            <div className="hay-scores" style={{ marginBottom: 14 }}>
              <div className="hsc"><span>Escore</span><b>{score}/{FLAT.length}</b></div>
              <div className="hsc"><span>Classificação</span><b style={{ fontSize: 18, color: cls.col }}>{cls.l}</b></div>
            </div>
            <p className="help-text" style={{ marginTop: -6 }}>{cls.desc}</p>

            {report
              ? <ReportView report={report} />
              : (
                <div className="form-card" style={{ textAlign: "center" }}>
                  <p className="help-text" style={{ marginTop: 0 }}>Gere um parecer pedagógico individualizado a partir do desempenho registrado{window.EducareIA.configurada() ? " (com a Educare IA)" : " (por regras locais — a IA não está disponível neste dispositivo)"}.</p>
                  <button className="btn btn-coral" onClick={genReport} disabled={genBusy}><Icon name="sparkles" size={17} /> {genBusy ? "Gerando…" : "Gerar parecer pedagógico"}</button>
                </div>
              )}

            {/* Fora do ternário: o aviso precisa continuar visível depois que o
                parecer aparece, senão o profissional não sabe que caiu no fallback. */}
            {iaErro && (
              <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#EF4444", fontWeight: 700, fontSize: 13, margin: "10px 0 0" }}>
                <Icon name="x" size={14} /> {iaErro}
              </p>
            )}

            {saved && <div className="save-ok"><span className="so-ic"><Icon name="clipboardCheck" size={18} stroke={2.6} /></span><div><b>Avaliação salva!</b><span>Vinculada ao prontuário{patient ? " de " + patient.name : ""}.</span></div></div>}

            <div className="asrs-actions">
              {!saved
                ? <button className="btn btn-primary" onClick={save}><Icon name="clipboardCheck" size={18} /> Salvar no prontuário</button>
                : <button className="btn btn-primary" onClick={() => onOpenPatient && pid && onOpenPatient(pid)}><Icon name="users" size={18} /> Ver no prontuário</button>}
              <button className="btn btn-ghost" onClick={exportPDF}><Icon name="download" size={18} /> Exportar PDF{report ? " (com parecer)" : ""}</button>
            </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>}

        {step < 3 && (
          <div className="hay-nav">
            <button className="btn btn-ghost btn-sm" onClick={prev}><Icon name="chevL" size={16} /> {step === 1 ? "Cancelar" : "Voltar"}</button>
            <button className="btn btn-primary btn-sm" onClick={next}>{step === 2 ? "Ver resultado" : "Continuar"} <Icon name="arrowRight" size={16} /></button>
          </div>
        )}
      </div>
    );
  }

  window.SeguirInstrucoesTest = SeguirInstrucoesTest;
})();