/**
 * <ModalConvidar> — convidar alguém para uma conta de cliente.
 *
 * Modal e não página: são três campos e a decisão já foi tomada antes de o
 * abrir. É a regra do `docs/padroes-interface.md`.
 *
 * Tem dois passos. O segundo (<LinkGerado>) diz para onde seguiu o email e
 * guarda o link como recurso; sem email, é quem convida que o copia daqui.
 */

const PERFIS_CONVITE = [
  { valor: 'owner', rotulo: 'Responsável', ajuda: 'Gere a conta, os utilizadores e a facturação' },
  { valor: 'editor', rotulo: 'Editor', ajuda: 'Cria, edita, aprova e apaga campanhas' },
  { valor: 'viewer', rotulo: 'Leitura', ajuda: 'Vê resultados, não altera nada' },
];

/** Os perfis da equipa NetScreen. Duas listas diferentes, duas tabelas diferentes. */
const PERFIS_EQUIPA = [
  { valor: 'operator', rotulo: 'Operador', ajuda: 'Trabalho do dia a dia — sem receita nem cancelamentos' },
  { valor: 'admin', rotulo: 'Admin', ajuda: 'Vê e altera tudo, incluindo receita e cancelamentos' },
];

function ModalConvidar({ aberto, slug, marca, pessoa, sugestao, equipa, onFechar, onConvidado }) {
  // O mesmo modal serve os dois convites. O que muda é o destino, a lista de
  // perfis e uma frase — e o que **não** muda é a parte que interessa: o link
  // só se vê uma vez, e o ecrã tem de o dizer. Duplicar o componente era
  // duplicar precisamente esse aviso, que é o que não pode faltar.
  const perfis = equipa ? PERFIS_EQUIPA : PERFIS_CONVITE;
  const destino = equipa ? '/api/admin/netscreen-users/invites' : `/api/admin/accounts/${slug}/invites`;
  const [nome, setNome] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [perfil, setPerfil] = React.useState(equipa ? 'operator' : 'owner');
  const [erro, setErro] = React.useState(null);
  const [aEnviar, setAEnviar] = React.useState(false);
  const [feito, setFeito] = React.useState(null);

  // Abrir com alguém já escolhido é um reenvio: os campos vêm preenchidos e
  // **bloqueados**, porque mudar o email aqui criaria outra pessoa sem querer.
  //
  // A `sugestao` é outra coisa: vem do assistente de criação, que já perguntou
  // quem é o responsável. Preenche e deixa corrigir — ninguém escreve a mesma
  // coisa duas vezes de propósito, mas um engano tem de ter conserto.
  React.useEffect(() => {
    if (!aberto) return;
    setNome(pessoa?.nome || sugestao?.nome || '');
    setEmail(pessoa?.email || sugestao?.email || '');
    setPerfil(pessoa?.role || (equipa ? 'operator' : 'owner'));
    setErro(null);
    setFeito(null);
    setAEnviar(false);
  }, [aberto, pessoa, sugestao, equipa]);

  const reenvio = Boolean(pessoa);
  const pronto = nome.trim() && /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());

  async function convidar() {
    setErro(null);
    setAEnviar(true);
    try {
      setFeito(
        await api.post(destino, {
          nome: nome.trim(),
          email: email.trim(),
          role: perfil,
        })
      );
    } catch (err) {
      setErro(err.message);
      setAEnviar(false);
    }
  }

  function fechar() {
    // Só recarrega a ficha se alguma coisa mudou — fechar sem convidar não é um evento.
    if (feito) onConvidado(feito.email_enviado ? `Convite enviado para ${feito.email}.` : `Convite de ${feito.email} pronto.`);
    else onFechar();
  }

  if (feito) {
    return (
      <LinkGerado
        aberto={aberto}
        feito={feito}
        tituloEnviado="Convite enviado"
        assunto="o convite"
        aviso="se o perderes, convida outra vez."
        onFechar={fechar}
      />
    );
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo={reenvio ? 'Convidar outra vez' : 'Convidar'}
      acoes={
        <>
          <button
            type="button"
            onClick={onFechar}
            className="border border-border px-4 py-2 text-sm uppercase tracking-wider text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent"
          >
            Cancelar
          </button>
          <button
            type="button"
            disabled={!pronto || aEnviar}
            onClick={convidar}
            className="bg-primary px-4 py-2 text-sm uppercase tracking-wider text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-40"
          >
            {aEnviar ? 'A enviar…' : 'Enviar convite'}
          </button>
        </>
      }
    >
      <p className="text-xs text-muted-foreground">
        {reenvio
          ? 'Gera um link novo. O anterior deixa de funcionar.'
          : equipa
            ? 'Quem vai passar a ter acesso ao back office. Vai ter de configurar a MFA ao aceitar.'
            : `Quem vai passar a trabalhar na conta ${marca}.`}
      </p>

      <div className="mt-5 space-y-4">
        <div>
          <label htmlFor="convite-nome" className="label-eyebrow block">
            Nome
          </label>
          <input
            id="convite-nome"
            type="text"
            value={nome}
            onChange={(e) => setNome(e.target.value)}
            disabled={reenvio}
            data-foco-inicial={!reenvio ? true : undefined}
            className="mt-2 w-full border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-accent disabled:opacity-50"
          />
        </div>

        <div>
          <label htmlFor="convite-email" className="label-eyebrow block">
            Email
          </label>
          <input
            id="convite-email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={reenvio}
            className="mt-2 w-full border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-accent disabled:opacity-50"
          />
        </div>

        <fieldset>
          <legend className="label-eyebrow">Perfil</legend>
          <div className="mt-2 space-y-px bg-border">
            {perfis.map((p) => (
              <label
                key={p.valor}
                className={`flex cursor-pointer items-baseline gap-3 bg-card px-3 py-2.5 ${
                  perfil === p.valor ? 'text-foreground' : 'text-muted-foreground'
                }`}
              >
                <input
                  type="radio"
                  name="convite-perfil"
                  value={p.valor}
                  checked={perfil === p.valor}
                  onChange={() => setPerfil(p.valor)}
                  className="mt-0.5 accent-primary"
                />
                <span className="min-w-0">
                  <span className="block text-sm">{p.rotulo}</span>
                  <span className="mt-0.5 block text-xs text-muted-foreground">{p.ajuda}</span>
                </span>
              </label>
            ))}
          </div>
        </fieldset>

        {erro && (
          <p role="alert" className="border-l-2 border-primary bg-muted px-3 py-2 text-sm text-foreground">
            {erro}
          </p>
        )}
      </div>
    </Modal>
  );
}