/* ============================================================
   EDUCARE — Avaliações (grid de instrumentos clínicos)
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function AvaliacaoModal({ ins, onClose, onSaved }) {
    const [pid, setPid] = useState("");
    const [date, setDate] = useState((window.todayISO ? window.todayISO() : "2026-06-04"));
    const [result, setResult] = useState("");
    const [note, setNote] = useState("");
    const [err, setErr] = useState("");

    function save() {
      if (!pid) { setErr("Selecione o paciente."); return; }
      window.addAvaliacao({ pid, name: ins.name, date, result, note });
      onSaved();
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head">
            <div><h3>Nova avaliação</h3><p>{ins.name}</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <div className="fld">
              <label>Paciente <span className="req">*</span></label>
              <window.PatientPicker value={pid} onChange={setPid} />
            </div>
            <div className="fld">
              <label>Data da aplicação</label>
              <input className="ctrl" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
            </div>
            <div className="fld">
              <label>Resultado / classificação</label>
              <input className="ctrl" placeholder="Ex: Risco moderado — leitura" value={result} onChange={(e) => setResult(e.target.value)} />
            </div>
            <div className="fld">
              <label>Observações</label>
              <textarea className="ctrl" placeholder="Anotações da aplicação..." value={note} onChange={(e) => setNote(e.target.value)}></textarea>
            </div>
            {err && (
              <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "0 0 2px" }}>
                <Icon name="x" size={15} /> {err}
              </p>
            )}
            <div className="form-actions" style={{ marginTop: 16 }}>
              <button className="btn btn-ghost btn-sm" onClick={onClose}>Cancelar</button>
              <button className="btn btn-primary btn-sm" onClick={save}><Icon name="clipboardCheck" size={16} /> Salvar avaliação</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function HistoricoModal({ ins, onClose }) {
    const rows = [];
    (window.PATIENTS || []).forEach((p) => {
      (window.ASSESSMENTS[p.id] || []).forEach((a) => {
        if (a.name === ins.name) rows.push({ ...a, patient: p.name, color: p.color, initials: p.initials });
      });
    });
    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head">
            <div><h3>Histórico de aplicações</h3><p>{ins.name}</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            {rows.length === 0 && <div className="notif-empty">Nenhuma aplicação registrada ainda.</div>}
            {rows.map((r, i) => (
              <div className="team-row" key={i}>
                <span className={"avatar sm " + r.color}>{r.initials}</span>
                <div className="tr-info"><b>{r.patient}</b><span>{r.date}{r.result ? " · " + r.result : ""}</span></div>
                <span className={"tag " + (r.status === "done" ? "ok" : "warn")}><i className="d"></i>{r.status === "done" ? "Concluída" : "Pendente"}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  /* Página dedicada de um instrumento (detalhes/aplicação — em construção) */
  function TestPage({ ins, onBack }) {
    return (
      <div className="form-wrap">
        <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Voltar para avaliações</button>
        <div className="page-head">
          <div>
            <h1><Icon name={ins.icon} size={25} /> {ins.name}</h1>
            <p className="sub">{ins.desc}</p>
          </div>
        </div>
        <div className="ph">
          <div className="pbox">
            <span className="picon"><Icon name="clipboardList" size={28} /></span>
            <h2>Detalhes do teste em construção</h2>
            <p>Em breve esta página terá as instruções, os itens e a aplicação guiada do {ins.name}, com pontuação e insights da Educare IA.</p>
          </div>
        </div>
      </div>
    );
  }

  function Avaliacoes({ onOpenPatient, onRail, onNavigate }) {
    /* Avaliação e anamnese são ILIMITADAS em todos os planos. A única
       coisa que barra aplicar um instrumento é o modo leitura, e quem
       explica isso é a faixa do topo. Não existe mais cota mensal. */
    const assinatura = window.usarAssinatura();
    const [modal, setModal] = useState(null); // { type: "new"|"hist", ins }
    const [page, setPage] = useState(null); // instrumento aberto em página dedicada
    const [, setTick] = useState(0);

    if (page) {
      if (page.test === "hayling" && window.HaylingTest) {
        return <window.HaylingTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} onRail={onRail} />;
      }
      if (page.test === "abc" && window.AbcTest) {
        return <window.AbcTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "tfv" && window.TfvTest) {
        return <window.TfvTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "asrs" && window.AsrsTest) {
        return <window.AsrsTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "anamnese" && window.AnamneseForm) {
        return <window.AnamneseForm onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "anamnese-infantil" && window.AnamneseInfantilTest) {
        return <window.AnamneseInfantilTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "iar" && window.IarTest) {
        return <window.IarTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "seguir" && window.SeguirInstrucoesTest) {
        return <window.SeguirInstrucoesTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "dnoi" && window.DnoiTest) {
        return <window.DnoiTest onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "fluencia" && window.Fluencia) {
        return <window.Fluencia onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      if (page.test === "gan" && window.Gan) {
        return <window.Gan onBack={() => setPage(null)} onOpenPatient={onOpenPatient} />;
      }
      return <TestPage ins={page} onBack={() => setPage(null)} />;
    }

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Avaliações</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="clipboardList" size={26} /> Avaliações</h1>
            <p className="sub">Instrumentos de rastreio e anamnese para apoiar sua prática clínica.</p>
          </div>
        </div>

        <p className="section-label">INSTRUMENTOS DISPONÍVEIS</p>
        <div className="instr-grid">
          {window.INSTRUMENTS.map((ins) => {
            const bloqueado = !ins.soon && !assinatura.podeEscrever;
            return (
            <div className={"instr-card" + (ins.soon ? " soon" : "")} key={ins.name}>
              <div className="ic-head">
                <span className="ic-icon"><Icon name={ins.icon} size={22} /></span>
                <div>
                  <h4>{ins.name}
                    {ins.badge && <span className="badge-new">{ins.badge}</span>}
                    {ins.soon && <span className="badge-soon">Em breve</span>}
                  </h4>
                </div>
              </div>
              <p className="desc">{ins.desc}</p>
              <div className="instr-actions">
                {ins.soon ? (
                  <button className="btn btn-ghost btn-xs" disabled style={{ opacity: .6 }}>Disponível em breve</button>
                ) : bloqueado ? (
                  <>
                    {/* O histórico continua acessível: modo leitura para
                        de registrar, nunca de consultar. */}
                    <button className="btn btn-primary btn-xs" onClick={() => onNavigate && onNavigate("planos")}>
                      <Icon name="sparkles" size={14} /> Assinar para aplicar
                    </button>
                    <button className="btn btn-ghost btn-xs" onClick={() => setModal({ type: "hist", ins })}><Icon name="clipboardCheck" size={14} /> Histórico</button>
                  </>
                ) : (
                  <>
                    <button className="btn btn-primary btn-xs" onClick={() => setPage(ins)}><Icon name="plus" size={14} /> Nova avaliação</button>
                    <button className="btn btn-ghost btn-xs" onClick={() => setModal({ type: "hist", ins })}><Icon name="clipboardCheck" size={14} /> Histórico</button>
                    {ins.uses > 0 && <span className="uses-pill">{ins.uses} aplicada{ins.uses > 1 ? "s" : ""}</span>}
                  </>
                )}
              </div>
            </div>
            );
          })}
        </div>

        {modal && modal.type === "new" && (
          <AvaliacaoModal
            ins={modal.ins}
            onClose={() => setModal(null)}
            onSaved={() => { setModal({ type: "hist", ins: modal.ins }); setTick((t) => t + 1); }}
          />
        )}
        {modal && modal.type === "hist" && (
          <HistoricoModal ins={modal.ins} onClose={() => setModal(null)} />
        )}
      </>
    );
  }

  window.Avaliacoes = Avaliacoes;
})();