function PatientsView({ onOpenPatient, onNewPatient, podeEditar = true }) {
  const [cases, setCases] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filter, setFilter] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [lifecycle, setLifecycle] = React.useState(null);
  const [acting, setActing] = React.useState(false);
  const [actionError, setActionError] = React.useState(null);
  const requestId = React.useRef(0);

  const loadCases = () => {
    const currentRequest = ++requestId.current;
    setLoading(true);
    window.API.listCases({
      limit: 100,
      ...(filter !== "all" ? { status: filter } : {}),
      ...(q.trim() ? { q: q.trim() } : {}),
    }).then(data => {
      if (currentRequest !== requestId.current) return;
      const items = data.items || [];
      setCases(filter === "all" ? items.filter(item => item.status !== "archived") : items);
      setLoading(false);
    }).catch(() => {
      if (currentRequest !== requestId.current) return;
      setCases([]);
      setLoading(false);
    });
  };

  React.useEffect(loadCases, [filter, q]);

  const openLifecycle = async (patient, action) => {
    setActionError(null);
    let warnings = [];
    if (action === "publish") {
      setActing(true);
      try {
        const check = await window.API.validateCasePublication(patient.id);
        warnings = check.warnings;
      } catch (error) {
        setActing(false);
        if (error.issues && error.issues.length) {
          onOpenPatient(patient.id, { publicationIssues: error.issues });
          return;
        }
        alert(userErrorMessage(error));
        return;
      }
      setActing(false);
    }
    setLifecycle({ patient, action, warnings });
  };

  const closeLifecycle = () => {
    if (acting) return;
    setLifecycle(null);
    setActionError(null);
  };

  const confirmLifecycle = () => {
    if (!lifecycle) return;
    const method = lifecycle.action + "Case";
    setActing(true);
    setActionError(null);
    window.API[method](lifecycle.patient.id).then(() => {
      setActing(false);
      setLifecycle(null);
      loadCases();
    }).catch(error => {
      setActing(false);
      setActionError(error);
    });
  };

  const lifecycleCopy = lifecycle && {
    publish: ["Publicar caso clínico", "Publicar", "checkCircle", "Após a publicação, o conteúdo ficará somente leitura até ser despublicado."],
    unpublish: ["Despublicar caso clínico", "Despublicar", "edit", "O caso voltará a ser um rascunho editável e sairá do acervo disponível para simulação."],
    archive: ["Arquivar caso clínico", "Arquivar", "archive", "O caso sairá do acervo ativo e poderá ser restaurado depois."],
    restore: ["Restaurar caso clínico", "Restaurar", "restore", "O caso voltará ao acervo como rascunho."],
  }[lifecycle.action];

  return (
    <div className="scroll">
      <div className="page fade-in">
        <div className="page-head">
          <div style={{ flex: 1 }}>
            <div className="page-eyebrow">Acervo clínico</div>
            <h1 className="page-title">Casos</h1>
            <p className="page-desc">Casos clínicos configuráveis usados diretamente nas simulações para o Meta Quest.</p>
          </div>
          {/* RF-USUARIOS-02: criar caso é de `administrador` e `editor`. Esconder
              o botão é cortesia com o operador, não a garantia — a recusa vale no
              backend (routers/cases.py), que é onde ela não pode ser contornada. */}
          {podeEditar && <Btn kind="primary lg" icon="plus" onClick={onNewPatient}>Novo caso</Btn>}
        </div>

        <div className="toolbar">
          <div className="seg" aria-label="Filtrar casos por status">
            {[["all", "Todos"], ["draft", "Rascunhos"], ["published", "Publicados"], ["archived", "Arquivados"]].map(([value, label]) => (
              <button key={value} className={filter === value ? "on" : ""} onClick={() => setFilter(value)}>{label}</button>
            ))}
          </div>
          <div className="spacer"></div>
          <div className="searchbox search-fluid">
            <Icon name="search" size={15} />
            <input aria-label="Buscar casos" placeholder="Buscar por nome ou referência..." value={q} onChange={event => setQ(event.target.value)} />
          </div>
        </div>

        <div className="card" style={{ overflow: "hidden" }}>
          {loading ? (
            <div style={{ textAlign: "center", padding: "var(--sp-6)", color: "var(--text-faint)" }}>Carregando...</div>
          ) : (
            <table className="tbl">
              <thead><tr><th>Caso</th><th>Perfil</th><th>Queixa principal</th><th>Atualizado</th><th>Status</th><th className="case-actions-heading"><span className="sr-only">Ações</span></th></tr></thead>
              <tbody>
                {cases.map(patient => {
                  const pessoais = (patient.data || {}).pessoais || {};
                  const diagnostico = (patient.data || {}).diagnostico || {};
                  const tags = diagnostico.queixaClassificada && diagnostico.queixaClassificada !== "naoSeAplica" ? [diagnostico.queixaClassificada.toUpperCase()] : [];
                  const updated = patient.updated_at ? new Date(patient.updated_at) : null;
                  const updatedLabel = updated ? (updated.toLocaleDateString("pt-BR") === new Date().toLocaleDateString("pt-BR") ? "hoje" : updated.toLocaleDateString("pt-BR", { day: "numeric", month: "short" })) : "—";
                  return (
                    <tr key={patient.id} onClick={() => onOpenPatient(patient.id)}>
                      <td style={{ width: "26%" }}><div className="row-name"><div className="row-avatar">{(patient.nome || "?").split(" ").map(word => word[0]).slice(0, 2).join("")}</div><div><div className="row-title">{patient.nome}</div><div className="row-sub">{patient.ref}</div></div></div></td>
                      <td className="cell-muted">{pessoais.idade ? pessoais.idade + " anos" : "—"} · {pessoais.profissao || "—"}</td>
                      <td>{tags.map(tag => <Tag key={tag} kind="accent">{tag}</Tag>)}{tags.length === 0 && <span className="faint">—</span>}</td>
                      <td className="cell-muted">{updatedLabel}</td>
                      <td><Badge status={patient.status} /></td>
                      <td onClick={event => event.stopPropagation()}>
                        <div className="case-row-actions">
                          {patient.status === "draft" && <><ActionIcon icon="checkCircle" label="Publicar caso" onClick={() => openLifecycle(patient, "publish")} /><ActionIcon icon="edit" label="Editar caso" onClick={() => onOpenPatient(patient.id)} /><ActionIcon icon="archive" label="Arquivar caso" onClick={() => openLifecycle(patient, "archive")} /></>}
                          {patient.status === "published" && <><ActionIcon icon="eye" label="Visualizar caso" onClick={() => onOpenPatient(patient.id)} /><ActionIcon icon="edit" label="Despublicar caso" onClick={() => openLifecycle(patient, "unpublish")} /><ActionIcon icon="archive" label="Arquivar caso" onClick={() => openLifecycle(patient, "archive")} /></>}
                          {patient.status === "archived" && <><ActionIcon icon="eye" label="Visualizar caso" onClick={() => onOpenPatient(patient.id)} /><ActionIcon icon="restore" label="Restaurar caso" onClick={() => openLifecycle(patient, "restore")} /></>}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
        {cases.length === 0 && !loading && <div style={{ textAlign: "center", padding: "var(--sp-7)", color: "var(--text-faint)" }}>Nenhum caso encontrado.</div>}
      </div>

      <ConfirmModal open={!!lifecycle} title={lifecycleCopy && lifecycleCopy[0]} confirmLabel={lifecycleCopy && lifecycleCopy[1]} confirmIcon={lifecycleCopy && lifecycleCopy[2]}
        busy={acting} error={actionError} onConfirm={confirmLifecycle} onClose={closeLifecycle}>
        {lifecycle && lifecycleCopy && <p><b>{lifecycle.patient.nome}</b><br />{lifecycleCopy[3]}</p>}
        {lifecycle && <PublicationWarningList warnings={lifecycle.warnings} />}
      </ConfirmModal>
    </div>
  );
}

// ActionIcon foi para `ui-portal.jsx` em 2026-07-30: a tela de usuários usa os
// mesmos botões de ação de linha.

window.PatientsView = PatientsView;