/* Área de gestão de usuários — RF-UI-01 e RF-USUARIOS-05 a 13 (ESP-0001).
   Vive dentro do shell, como `view_patients.jsx`, e não como takeover.

   Esconder a navegação não é proteger: a autorização é do backend
   (`/api/users` recusa quem não é administrador). A tela apenas evita oferecer
   o que seria recusado. */

const PERFIS = [
  ["administrador", "Administração"],
  ["editor", "Editoração"],
  ["operador", "Operação"],
];
const NOME_DO_PERFIL = Object.fromEntries(PERFIS);
const SENHA_MINIMA = 14;

const ERROS_DE_USUARIO = {
  email_ja_cadastrado: "Já existe um usuário com este e-mail.",
  ultimo_administrador_ativo: null, // a mensagem do backend indica a saída; usar a dele
  autorrebaixamento_proibido: null, // idem — a mensagem do backend já orienta a procurar outro administrador
  perfil_invalido: "Selecione um perfil válido.",
  senha_fraca: `A senha deve ter no mínimo ${SENHA_MINIMA} caracteres.`,
  usuario_nao_encontrado: "Usuário não encontrado. Atualize a listagem.",
};

function mensagemDeErro(erro) {
  if (!erro) return "";
  const especifica = ERROS_DE_USUARIO[erro.code];
  if (especifica) return especifica;
  return erro.message || "Não foi possível concluir a solicitação.";
}

function UserForm({ usuario, souEu, onSalvar, onCancelar, busy, erro }) {
  const novo = !usuario;
  const [nome, setNome] = React.useState(usuario ? usuario.nome : "");
  const [email, setEmail] = React.useState(usuario ? usuario.email : "");
  const [perfil, setPerfil] = React.useState(usuario ? usuario.perfil : "editor");
  const [ativo, setAtivo] = React.useState(usuario ? usuario.ativo : true);
  const [senha, setSenha] = React.useState("");

  const senhaCurta = novo && senha.length > 0 && senha.length < SENHA_MINIMA;
  const podeSalvar = nome.trim() && email.trim() && (!novo || senha.length >= SENHA_MINIMA);

  const submeter = () => {
    if (!podeSalvar || busy) return;
    // RF-USUARIOS-13: um administrador nunca rebaixa nem desativa a si mesmo —
    // o backend recusa com 403 de todo modo; aqui só evitamos enviar o campo
    // que já sabemos que será rejeitado.
    const dados = novo
      ? { nome: nome.trim(), email: email.trim(), perfil, ativo, senha }
      : { nome: nome.trim(), email: email.trim(), perfil, ativo };
    onSalvar(dados);
  };

  return (
    <div className="card" style={{ padding: "var(--sp-5)" }}>
      {erro && <InlineNote kind="error" title="Não foi possível salvar">{mensagemDeErro(erro)}</InlineNote>}
      {souEu && (
        <InlineNote kind="info" title="Você está editando o seu próprio usuário">
          Perfil e atividade não podem ser alterados por você mesmo — peça a outro administrador.
        </InlineNote>
      )}

      <div className="fgrid c2">
        <FInput label="Nome" required value={nome} onChange={setNome} placeholder="Nome completo" />
        <FInput label="E-mail" required value={email} onChange={setEmail} placeholder="pessoa@instituicao.br" />
      </div>

      <div className="fgrid c2" style={{ marginTop: "var(--sp-5)" }}>
        <FSelect label="Perfil" value={perfil} onChange={setPerfil} options={PERFIS} disabled={souEu} />
        <div>
          <label className="flabel">Atividade</label>
          <SegBinary value={ativo} on="Ativo" off="Inativo" onChange={setAtivo} fill disabled={souEu} />
        </div>
      </div>

      {novo && (
        <div style={{ marginTop: "var(--sp-5)" }}>
          <FInput label="Senha inicial" required type="password" value={senha} onChange={setSenha}
            placeholder={`No mínimo ${SENHA_MINIMA} caracteres`}
            error={senhaCurta ? `A senha deve ter no mínimo ${SENHA_MINIMA} caracteres.` : null} />
          {/* RF-AUTH-07: o sistema não envia e-mail. A comunicação é externa e
              deliberadamente fora do escopo do software. */}
          <InlineNote kind="info" title="Comunique a senha ao usuário">
            O sistema não envia e-mail. A senha é provisória: o usuário será obrigado
            a trocá-la no primeiro acesso.
          </InlineNote>
        </div>
      )}

      <div className="toolbar" style={{ marginTop: "var(--sp-5)", marginBottom: 0 }}>
        <div className="spacer"></div>
        <Btn kind="ghost" onClick={onCancelar} disabled={busy}>Cancelar</Btn>
        <Btn kind="primary" onClick={submeter} disabled={!podeSalvar || busy}>
          {busy ? "Salvando..." : (novo ? "Criar usuário" : "Salvar alterações")}
        </Btn>
      </div>
    </div>
  );
}

function ResetPasswordModal({ usuario, onConfirmar, onFechar, busy, erro }) {
  const [senha, setSenha] = React.useState("");
  const curta = senha.length > 0 && senha.length < SENHA_MINIMA;

  return (
    <ConfirmModal
      open
      title={"Redefinir senha de " + usuario.nome}
      confirmLabel="Redefinir senha"
      busy={busy}
      error={erro ? { code: erro.code, message: mensagemDeErro(erro) } : null}
      onConfirm={() => senha.length >= SENHA_MINIMA && onConfirmar(senha)}
      onClose={onFechar}
    >
      <FInput label="Nova senha" required type="password" value={senha} onChange={setSenha}
        placeholder={`No mínimo ${SENHA_MINIMA} caracteres`}
        error={curta ? `A senha deve ter no mínimo ${SENHA_MINIMA} caracteres.` : null} />
      <InlineNote kind="warning" title="O usuário perderá as sessões abertas">
        A senha nasce provisória e todos os acessos já feitos por esta pessoa deixam
        de valer. Comunique a nova senha por canal externo.
      </InlineNote>
    </ConfirmModal>
  );
}

function UsersView({ usuarioCorrente, onToast }) {
  const [itens, setItens] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [skip, setSkip] = React.useState(0);
  const [limit, setLimit] = React.useState(25);
  const [busca, setBusca] = React.useState("");
  const [filtroPerfil, setFiltroPerfil] = React.useState("");
  const [filtroAtivo, setFiltroAtivo] = React.useState("");
  const [carregando, setCarregando] = React.useState(true);
  const [erroLista, setErroLista] = React.useState(null);

  const [editando, setEditando] = React.useState(null); // null | "novo" | usuário
  const [redefinindo, setRedefinindo] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [erroForm, setErroForm] = React.useState(null);

  const carregar = React.useCallback(() => {
    setCarregando(true);
    setErroLista(null);
    window.API.listUsers({
      q: busca || undefined,
      perfil: filtroPerfil || undefined,
      ativo: filtroAtivo === "" ? undefined : filtroAtivo === "sim",
      skip,
      limit,
    }).then(dados => {
      setItens(dados.items || []);
      setTotal(dados.total || 0);
      setCarregando(false);
    }).catch(erro => {
      setErroLista(erro);
      setItens([]);
      setCarregando(false);
    });
  }, [busca, filtroPerfil, filtroAtivo, skip, limit]);

  React.useEffect(() => { carregar(); }, [carregar]);

  const salvar = (dados) => {
    setBusy(true);
    setErroForm(null);
    const promessa = editando === "novo"
      ? window.API.createUser(dados)
      : window.API.updateUser(editando.id, dados);
    promessa.then(() => {
      setBusy(false);
      setEditando(null);
      onToast(editando === "novo" ? "Usuário criado." : "Usuário atualizado.");
      carregar();
    }).catch(erro => {
      setBusy(false);
      setErroForm(erro);
    });
  };

  const redefinir = (senha) => {
    setBusy(true);
    setErroForm(null);
    window.API.resetPassword(redefinindo.id, senha).then(() => {
      setBusy(false);
      setRedefinindo(null);
      onToast("Senha redefinida. Comunique-a ao usuário.");
      carregar();
    }).catch(erro => {
      setBusy(false);
      setErroForm(erro);
    });
  };

  const alternarAtividade = (usuario) => {
    setErroLista(null);
    window.API.updateUser(usuario.id, { ativo: !usuario.ativo })
      .then(() => {
        onToast(usuario.ativo ? "Usuário desativado." : "Usuário ativado.");
        carregar();
      })
      .catch(erro => setErroLista(erro));
  };

  // RF-USUARIOS-16: exclusivo de administrador; a rota já exige o perfil, o
  // botão só existe para quem está bloqueado.
  const desbloquear = (usuario) => {
    setErroLista(null);
    window.API.unlockUser(usuario.id)
      .then(() => {
        onToast("Usuário desbloqueado.");
        carregar();
      })
      .catch(erro => setErroLista(erro));
  };

  if (editando) {
    return (
      <div className="scroll">
        <div className="page fade-in">
          <div className="page-head">
            <div style={{ flex: 1 }}>
              <div className="page-eyebrow">Administração</div>
              <h1 className="page-title">{editando === "novo" ? "Novo usuário" : editando.nome}</h1>
              <p className="page-desc">Perfil e atividade determinam o que esta pessoa alcança no portal.</p>
            </div>
          </div>
          <UserForm
            usuario={editando === "novo" ? null : editando}
            souEu={editando !== "novo" && editando.id === usuarioCorrente.id}
            busy={busy}
            erro={erroForm}
            onSalvar={salvar}
            onCancelar={() => { setEditando(null); setErroForm(null); }}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="scroll">
      <div className="page fade-in">
        <div className="page-head">
          <div style={{ flex: 1 }}>
            <div className="page-eyebrow">Administração</div>
            <h1 className="page-title">Usuários</h1>
            <p className="page-desc">Quem acessa o portal e o que cada um pode fazer.</p>
          </div>
          <Btn kind="primary lg" icon="plus" onClick={() => setEditando("novo")}>Novo usuário</Btn>
        </div>

        {erroLista && (
          <InlineNote kind="error" title="Não foi possível concluir" onClose={() => setErroLista(null)}>
            {mensagemDeErro(erroLista)}
          </InlineNote>
        )}

        <div className="toolbar">
          <div className="seg" aria-label="Filtrar por perfil">
            {[["", "Todos"], ...PERFIS].map(([valor, rotulo]) => (
              <button key={valor || "todos"} className={filtroPerfil === valor ? "on" : ""}
                onClick={() => { setFiltroPerfil(valor); setSkip(0); }}>{rotulo}</button>
            ))}
          </div>
          <div className="seg" aria-label="Filtrar por atividade">
            {[["", "Ativos e inativos"], ["sim", "Ativos"], ["nao", "Inativos"]].map(([valor, rotulo]) => (
              <button key={valor || "ambos"} className={filtroAtivo === valor ? "on" : ""}
                onClick={() => { setFiltroAtivo(valor); setSkip(0); }}>{rotulo}</button>
            ))}
          </div>
          <div className="spacer"></div>
          <div className="searchbox search-fluid">
            <Icon name="search" size={15} />
            <input aria-label="Buscar usuários" placeholder="Buscar por nome ou e-mail..."
              value={busca} onChange={e => { setBusca(e.target.value); setSkip(0); }} />
          </div>
        </div>

        <div className="card" style={{ overflow: "hidden" }}>
          {carregando ? (
            <div style={{ textAlign: "center", padding: "var(--sp-6)", color: "var(--text-faint)" }}>Carregando...</div>
          ) : (
            <table className="tbl">
              <thead>
                <tr><th>Usuário</th><th>Perfil</th><th>Atividade</th><th><span className="sr-only">Ações</span></th></tr>
              </thead>
              <tbody>
                {itens.map(usuario => (
                  <tr key={usuario.id}>
                    <td style={{ width: "38%" }}>
                      <div className="row-name">
                        <div className="row-avatar">{(usuario.nome || "?").split(" ").map(p => p[0]).slice(0, 2).join("")}</div>
                        <div>
                          <div className="row-title">
                            {usuario.nome}
                            {usuario.id === usuarioCorrente.id && <span className="faint"> · você</span>}
                          </div>
                          <div className="row-sub">{usuario.email}</div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <Tag kind="accent">{NOME_DO_PERFIL[usuario.perfil] || usuario.perfil}</Tag>
                      {usuario.senha_provisoria && <Tag>senha provisória</Tag>}
                      {usuario.bloqueado && <Tag kind="danger">bloqueado</Tag>}
                    </td>
                    <td className="cell-muted">{usuario.ativo ? "Ativo" : "Inativo"}</td>
                    <td>
                      <div className="case-row-actions">
                        <ActionIcon icon="edit" label="Editar usuário" onClick={() => setEditando(usuario)} />
                        <ActionIcon icon="shield" label="Redefinir senha" onClick={() => setRedefinindo(usuario)} />
                        {usuario.bloqueado && (
                          <ActionIcon icon="unlock" label="Desbloquear usuário" onClick={() => desbloquear(usuario)} />
                        )}
                        {usuario.id !== usuarioCorrente.id && (
                          <ActionIcon icon={usuario.ativo ? "x" : "check"}
                            label={usuario.ativo ? "Desativar usuário" : "Ativar usuário"}
                            onClick={() => alternarAtividade(usuario)} />
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
          {!carregando && !itens.length && (
            <div style={{ textAlign: "center", padding: "var(--sp-7)", color: "var(--text-faint)" }}>Nenhum usuário encontrado.</div>
          )}
          <Pagination total={total} skip={skip} limit={limit} onSkip={setSkip} onLimit={setLimit} />
        </div>
      </div>

      {redefinindo && (
        <ResetPasswordModal
          usuario={redefinindo}
          busy={busy}
          erro={erroForm}
          onConfirmar={redefinir}
          onFechar={() => { setRedefinindo(null); setErroForm(null); }}
        />
      )}
    </div>
  );
}

Object.assign(window, { UsersView, NOME_DO_PERFIL, PERFIS, SENHA_MINIMA });