/* ============================================================
   EDUCARE — Pacientes: lista + cadastro
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function fmtBirth(iso) {
    if (!iso) return "—";
    const [y, m, d] = iso.split("-");
    if (!y || !m || !d) return "—";
    return `${d}/${m}/${y}`;
  }

  /* Confirmação de arquivar e de reativar.

     Existe porque arquivar tira o paciente da lista do dia a dia, e uma
     profissional que arquivou sem querer precisa saber, na hora, que
     nada foi apagado e que dá para voltar atrás. */
  function ModalArquivar({ paciente, onFechar, onConfirmar }) {
    const arquivando = !paciente.arquivado;
    return (
      <div className="modal-scrim" onClick={onFechar}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 470 }}>
          <div className="modal-head">
            <div>
              <h3>{arquivando ? "Arquivar paciente" : "Reativar paciente"}</h3>
              <p>{paciente.name}</p>
            </div>
            <button className="x" onClick={onFechar} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-2)", margin: 0 }}>
              {arquivando
                ? "O prontuário continua inteiro: avaliações, anamneses, planejamentos, atendimentos e PDFs seguem acessíveis e exportáveis. Nada é apagado. A vaga volta a ficar livre no seu plano, e você pode reativar quando quiser."
                : "O paciente volta para a lista do dia a dia e ocupa uma vaga do seu plano de novo."}
            </p>
          </div>
          <div className="modal-foot">
            <button className="btn btn-ghost btn-sm" onClick={onFechar}>Cancelar</button>
            <button className="btn btn-primary btn-sm" onClick={onConfirmar}>
              {arquivando ? "Arquivar" : "Reativar"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- LISTA ---------------- */
  function PacientesList({ onOpen, onNew, onNavigate, activeProf, onManageTeam }) {
    const [q, setQ] = useState("");
    const [filter, setFilter] = useState("todos");
    const [confirmar, setConfirmar] = useState(null);
    const [, force] = useState(0);
    const assinatura = window.usarAssinatura();

    const isClinic = !activeProf || activeProf === "all";
    const prof = (window.PROFESSIONALS || []).find((p) => p.id === activeProf);
    const scoped = window.PATIENTS.filter((p) => isClinic || window.PROF_OF[p.id] === activeProf);

    /* "Arquivados" é uma lente sobre a lista, não mais um status
       clínico: o paciente arquivado mantém o status dele (ativo, em
       avaliação, pausado). Por isso essa aba mostra os arquivados e as
       outras escondem, em vez de misturar as duas coisas num filtro só. */
    const verArquivados = filter === "arquivados";
    const list = scoped.filter((p) => {
      if (!!p.arquivado !== verArquivados) return false;
      const termo = q.toLowerCase();
      const okQ = p.name.toLowerCase().includes(termo) || p.guardian.toLowerCase().includes(termo);
      const okF = verArquivados || filter === "todos" || p.status === filter;
      return okQ && okF;
    });

    const ativos = scoped.filter((p) => !p.arquivado).length;
    const arquivados = scoped.length - ativos;

    /* Teto só existe em plano com limite. Do Clínico para cima é
       ilimitado, e mostrar contador para quem não tem teto só cria
       ansiedade sobre um limite que não existe. */
    const temTeto = assinatura.limitePacientes != null;
    const lotou = temTeto && assinatura.podeEscrever && !assinatura.podeCriarPaciente;

    function alternarArquivo(p) {
      window.definirArquivamentoPaciente(p.id, !p.arquivado);
      setConfirmar(null);
      force((n) => n + 1);
    }

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Pacientes</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="users" size={26} /> Pacientes</h1>
            <p className="sub">
              {ativos} {ativos === 1 ? "paciente ativo" : "pacientes ativos"} {isClinic ? "na clínica" : `de ${prof ? prof.name.split(" ")[0] : ""}`}
              {arquivados > 0 && ` · ${arquivados} ${arquivados === 1 ? "arquivado" : "arquivados"}`}
            </p>
          </div>
          {assinatura.podeEscrever && !lotou && (
            <button className="btn btn-primary btn-sm" onClick={onNew}><Icon name="plus" size={17} /> Novo paciente</button>
          )}
        </div>

        {/* As duas saídas, lado a lado. Arquivar não é castigo, e mudar
            de plano não é a única resposta: quem encerrou um
            acompanhamento resolve de graça. */}
        {lotou && (
          <div className="teto">
            <span className="teto-ic"><Icon name="users" size={20} /></span>
            <div className="teto-txt">
              <b>Você atingiu {assinatura.pacientesAtivos} de {assinatura.limitePacientes} pacientes ativos</b>
              <span>
                Para cadastrar mais alguém, arquive um paciente que você não acompanha mais,
                ou mude para um plano sem teto. Arquivar não apaga nada e pode ser desfeito.
              </span>
            </div>
            <div className="teto-acoes">
              <button className="btn btn-ghost btn-sm" onClick={() => setFilter("todos")}>Ver meus pacientes</button>
              <button className="btn btn-primary btn-sm" onClick={() => onNavigate && onNavigate("planos")}>
                <Icon name="sparkles" size={16} /> Mudar de plano
              </button>
            </div>
          </div>
        )}

        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14, flexWrap: "wrap" }}>
          <span className="scope-chip">
            {isClinic ? <><span className="clinic-dot"></span> Toda a clínica</> : <><span className={"avatar sm " + prof.color} style={{ width: 20, height: 20, borderRadius: 6, fontSize: 9 }}>{prof.initials}</span> {prof.name}</>}
          </span>
          {temTeto && !lotou && (
            <span className="scope-chip">{assinatura.pacientesAtivos} de {assinatura.limitePacientes} pacientes ativos</span>
          )}
          <button className="mini-link" onClick={onManageTeam}><Icon name="headset" size={14} /> Gerenciar equipe</button>
        </div>

        <div className="toolbar">
          <div className="filter-search">
            <Icon name="search" size={18} />
            <input placeholder="Buscar por nome ou responsável..." value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="seg">
            {[["todos", "Todos"], ["ativo", "Ativos"], ["avaliacao", "Em avaliação"], ["pausado", "Pausados"], ["arquivados", "Arquivados"]].map(([k, l]) => (
              <button key={k} className={filter === k ? "on" : ""} onClick={() => setFilter(k)}>
                {l}{k === "arquivados" && arquivados > 0 ? ` (${arquivados})` : ""}
              </button>
            ))}
          </div>
        </div>

        <div className="list-head">
          <span>Paciente</span><span>Nascimento / Ano</span><span className="hide-sm">Responsável</span><span className="hide-sm">Status</span><span></span>
        </div>
        <div className="plist" style={{ marginTop: 8 }}>
          {list.map((p) => {
            const st = window.STATUS[p.status];
            return (
              <div className="prow-wrap" key={p.id}>
                <button className={"prow" + (p.arquivado ? " arquivado" : "")} onClick={() => onOpen(p.id)}>
                  <div className="who">
                    <span className={"avatar " + p.color}>{p.initials}</span>
                    <div>
                      <b>{p.name}</b>
                      <span>{p.age} anos · {p.grade}</span>
                    </div>
                  </div>
                  <div>
                    <div className="col-val">{fmtBirth(p.birth)}</div>
                    <div className="col-val" style={{ color: "var(--text-3)", fontWeight: 600, fontSize: 12.5 }}>{p.grade}</div>
                  </div>
                  <div className="hide-sm">
                    <div className="col-val">{p.guardian}</div>
                    <div className="col-val" style={{ color: "var(--text-3)", fontWeight: 600, fontSize: 12.5 }}>{p.guardianRel} · {p.phone}</div>
                  </div>
                  <div className="hide-sm"><span className={"tag " + st.cls}><i className="d"></i>{st.label}</span></div>
                  <Icon name="chevR" size={18} className="chev" />
                </button>
                {/* Fora do botão da linha de propósito: botão dentro de
                    botão é HTML inválido e o clique vira loteria. */}
                {assinatura.podeEscrever && (
                  <button
                    className="prow-arq"
                    onClick={() => setConfirmar(p)}
                    title={p.arquivado ? "Reativar paciente" : "Arquivar paciente (não apaga nada)"}
                  >
                    {p.arquivado ? "Reativar" : "Arquivar"}
                  </button>
                )}
              </div>
            );
          })}
          {list.length === 0 && (
            <div className="mcard" style={{ textAlign: "center", color: "var(--text-3)", padding: 30 }}>
              {verArquivados ? "Nenhum paciente arquivado." : "Nenhum paciente encontrado."}
            </div>
          )}
        </div>

        {confirmar && (
          <ModalArquivar
            paciente={confirmar}
            onFechar={() => setConfirmar(null)}
            onConfirmar={() => alternarArquivo(confirmar)}
          />
        )}
      </>
    );
  }

  /* ---------------- CADASTRO ---------------- */
  function PacienteForm({ onCancel, onSave }) {
    const [consent, setConsent] = useState(false);
    const [err, setErr] = useState("");
    const [f, setF] = useState({
      name: "", birth: "", grade: "", guardian: "", phone: "",
      complaint: "", referredBy: "", school: "", escolaTipo: "", diagnoses: "", meds: "",
      fee: "", billMode: "mensal",
      /* Quem cadastra normalmente já vai atender: "ativo" é o começo
         mais provável, e o campo do formulário permite mudar. */
      status: "ativo",
    });
    const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));

    function submit() {
      if (!f.name.trim()) { setErr("Informe o nome do paciente para salvar."); return; }
      if (!consent) { setErr("É necessário confirmar o consentimento do responsável (LGPD)."); return; }
      setErr("");
      onSave(f);
    }

    const canSave = consent && f.name.trim();

    return (
      <div className="form-wrap">
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> Pacientes <Icon name="chevR" size={13} /> <span className="cur">Novo</span></div>
        <div className="page-head">
          <div>
            <h1>Novo paciente</h1>
            <p className="sub">Cadastre o paciente para vincular anamneses, avaliações e planejamentos.</p>
          </div>
        </div>

        {/* importar ficha */}
        <div className="import-card">
          <span className="ii"><Icon name="sparkles" size={26} /></span>
          <div style={{ flex: 1 }}>
            <h3>Tem a ficha do paciente em mãos?</h3>
            <p>Tire uma foto ou faça upload — a IA preenche os campos pra você.</p>
            <button className="btn btn-coral btn-sm"><Icon name="sparkles" size={16} /> Importar ficha</button>
            <p className="note" style={{ marginTop: 10 }}>🔒 Sua imagem é processada pela IA e descartada — o arquivo não é salvo.</p>
          </div>
        </div>

        {/* identificação */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="users" size={18} /></span> Identificação e Contato</div>
          <div className="id-row">
            <div className="avatar-up">
              <Icon name="users" size={30} />
              <span className="cam"><Icon name="plus" size={16} /></span>
            </div>
            <div>
              <div className="fld">
                <label>Nome completo <span className="req">*</span></label>
                <input className="ctrl" placeholder="Nome do paciente" value={f.name} onChange={set("name")} />
              </div>
              <div className="grid-2">
                <div className="fld">
                  <label>Data de nascimento</label>
                  <input className="ctrl" type="date" value={f.birth} onChange={set("birth")} />
                </div>
                <div className="fld">
                  <label>Ano escolar</label>
                  <select className="ctrl" value={f.grade} onChange={set("grade")}><option value="" disabled>Selecione...</option>{window.GRADES.map((g) => <option key={g}>{g}</option>)}</select>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-2" style={{ marginTop: 4 }}>
            <div className="fld">
              <label>Nome do responsável</label>
              <input className="ctrl" placeholder="Ex: Mariana (Mãe)" value={f.guardian} onChange={set("guardian")} />
            </div>
            <div className="fld">
              <label>Telefone de contato</label>
              <div className="phone-row">
                <select className="ctrl" defaultValue="+55"><option>+55</option><option>+1</option><option>+351</option></select>
                <input className="ctrl" placeholder="(11) 99999-1234" value={f.phone} onChange={set("phone")} />
              </div>
              <p className="help-text">Também usado para mensagens automáticas pelo WhatsApp.</p>
            </div>
          </div>
        </div>

        {/* dados clínicos */}
        <div className="form-card">
          <div className="sec-head"><span className="si"><Icon name="clipboardHeart" size={18} /></span> Dados clínicos</div>
          <div className="fld">
            <label>Queixa principal</label>
            <textarea className="ctrl" placeholder="Descreva o motivo do encaminhamento e as principais dificuldades observadas..." value={f.complaint} onChange={set("complaint")}></textarea>
          </div>
          <div className="grid-2">
            <div className="fld">
              <label>Encaminhado por</label>
              <input className="ctrl" placeholder="Escola, neuropediatra, procura espontânea..." value={f.referredBy} onChange={set("referredBy")} />
            </div>
            <div className="fld">
              <label>Escola</label>
              <input className="ctrl" placeholder="Nome da escola" value={f.school} onChange={set("school")} />
            </div>
          </div>
          <div className="grid-2">
            <div className="fld">
              <label>Tipo de escola</label>
              <select className="ctrl" value={f.escolaTipo} onChange={set("escolaTipo")}>
                <option value="">Selecione...</option>
                <option value="publica">Pública</option>
                <option value="privada">Particular</option>
              </select>
            </div>
            <div className="fld">
              <label>Situação do acompanhamento</label>
              <select className="ctrl" value={f.status} onChange={set("status")}>
                {Object.keys(window.STATUS).map((k) => (
                  <option key={k} value={k}>{window.STATUS[k].label}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="grid-2">
            <div className="fld">
              <label>Valor da sessão / mensalidade (R$)</label>
              <input className="ctrl" type="number" min="0" placeholder="Ex: 400" value={f.fee} onChange={set("fee")} />
            </div>
            <div className="fld">
              <label>Forma de cobrança</label>
              <select className="ctrl" value={f.billMode} onChange={set("billMode")}>
                <option value="mensal">Mensal</option>
                <option value="sessao">Por sessão</option>
              </select>
            </div>
          </div>
          <div className="grid-2">
            <div className="fld">
              <label>Diagnósticos / hipóteses</label>
              <input className="ctrl" placeholder="Ex: Dislexia, TDAH (em investigação)..." value={f.diagnoses} onChange={set("diagnoses")} />
            </div>
            <div className="fld">
              <label>Medicações em uso</label>
              <input className="ctrl" placeholder="Se houver" value={f.meds} onChange={set("meds")} />
            </div>
          </div>
        </div>

        {/* LGPD */}
        <div className="form-card" style={{ padding: 0, border: "none", background: "none", boxShadow: "none" }}>
          <div className="lgpd">
            <button className={"check" + (consent ? " on" : "")} onClick={() => setConsent(!consent)} aria-label="Consentimento">
              {consent && <Icon name="clipboardCheck" size={14} stroke={2.6} />}
            </button>
            <div className="ltext">
              <b>Consentimento do responsável (LGPD)</b>
              <p>Declaro que obtive o consentimento do responsável legal para coletar e tratar dados sensíveis de saúde deste paciente, conforme a Lei Geral de Proteção de Dados (LGPD).</p>
            </div>
          </div>
        </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 12px" }}>
            <Icon name="x" size={15} /> {err}
          </p>
        )}

        <div className="form-actions">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancelar</button>
          <button className="btn btn-primary btn-sm" disabled={!canSave} style={{ opacity: canSave ? 1 : 0.5 }} onClick={submit}>
            <Icon name="clipboardCheck" size={17} /> Salvar paciente
          </button>
        </div>
      </div>
    );
  }

  Object.assign(window, { PacientesList, PacienteForm, fmtBirth });
})();