/**
 * Os três diálogos da gestão de utilizadores de uma conta de cliente.
 *
 * São irmãos dos do back office e não os mesmos, de propósito: os perfis são
 * outros (responsável/editor/leitura contra Admin/Operador), o vocabulário é o
 * do cliente ("a tua conta", e não "a conta") e o destino das chamadas é outro.
 * Partilhá-los obrigava a um componente com dois de tudo lá dentro.
 *
 * O que **é** igual, e tem de ser: o link do convite só se vê uma vez, e o ecrã
 * diz isso.
 */

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

function ModalConvidarCliente({ aberto, slug, onFechar, onConcluido }) {
  const [nome, setNome] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [perfil, setPerfil] = React.useState('editor');
  const [erro, setErro] = React.useState(null);
  const [aEnviar, setAEnviar] = React.useState(false);
  const [feito, setFeito] = React.useState(null);
  const [copiado, setCopiado] = React.useState(false);

  React.useEffect(() => {
    if (!aberto) return;
    setNome('');
    setEmail('');
    setPerfil('editor');
    setErro(null);
    setFeito(null);
    setCopiado(false);
    setAEnviar(false);
  }, [aberto]);

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

  async function convidar() {
    setErro(null);
    setAEnviar(true);
    try {
      setFeito(
        await api.post(`/api/${slug}/config/users/invite`, {
          nome: nome.trim(),
          email: email.trim(),
          role: perfil,
        })
      );
    } catch (err) {
      setErro(err.message);
      setAEnviar(false);
    }
  }

  async function copiar() {
    try {
      await navigator.clipboard.writeText(feito.url);
      setCopiado(true);
      setTimeout(() => setCopiado(false), 2500);
    } catch {
      // Sem área de transferência: o link está à vista e selecciona-se à mão.
    }
  }

  function fechar() {
    if (feito) onConcluido(`Convite de ${feito.email} pronto.`);
    else onFechar();
  }

  if (feito) {
    return (
      <Modal
        aberto={aberto}
        onFechar={fechar}
        titulo="Copia o link"
        acoes={
          <button
            type="button"
            onClick={fechar}
            data-foco-inicial
            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"
          >
            Já copiei
          </button>
        }
      >
        <p className="text-sm text-foreground">
          Envia este link a <span className="text-muted-foreground">{feito.email}</span>. Caduca em{' '}
          {feito.dias_validade} dias e serve uma vez.
        </p>
        <p className="mt-2 text-xs text-primary">
          Não volta a aparecer — guardamos só a impressão dele. Se o perderes, convida outra vez.
        </p>

        <div className="mt-4 flex items-start gap-2 border border-border bg-muted px-3 py-2">
          <code className="grow break-all font-mono text-xs text-foreground">{feito.url}</code>
          <button
            type="button"
            onClick={copiar}
            className="shrink-0 border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
          >
            {copiado ? 'Copiado' : 'Copiar'}
          </button>
        </div>
      </Modal>
    );
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo="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 gerar…' : 'Gerar link'}
          </button>
        </>
      }
    >
      <p className="text-xs text-muted-foreground">
        Quem vai passar a trabalhar nesta conta convosco.
      </p>

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

        <div>
          <label htmlFor="cliente-convite-email" className="label-eyebrow block">Email</label>
          <input
            id="cliente-convite-email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="mt-2 w-full border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-accent"
          />
          {/* O que falta para gerar o link, em vez de um botão desligado sem razão (cliente simulado, 5 Out). */}
          {email.trim() && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim()) && (
            <p className="mt-1 text-xs text-perigo-texto">Este email não parece completo (nome@empresa.pt).</p>
          )}
        </div>
        {!pronto && !(email.trim() && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim())) && (
          <p className="text-xs text-muted-foreground">Para gerar o link: o nome e o email de quem convidas.</p>
        )}

        <fieldset>
          <legend className="label-eyebrow">Perfil</legend>
          <div className="mt-2 space-y-px bg-border">
            {PERFIS_CONVITE_CLIENTE.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="cliente-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>
  );
}

/** Mudar o perfil de alguém da conta. */
function ModalPerfilCliente({ aberto, slug, pessoa, onFechar, onConcluido }) {
  const [perfil, setPerfil] = React.useState('editor');
  const [erro, setErro] = React.useState(null);
  const [aGuardar, setAGuardar] = React.useState(false);

  React.useEffect(() => {
    if (!aberto || !pessoa) return;
    setPerfil(pessoa.perfil);
    setErro(null);
    setAGuardar(false);
  }, [aberto, pessoa]);

  if (!pessoa) return null;

  async function guardar() {
    setErro(null);
    setAGuardar(true);
    try {
      await api.patch(`/api/${slug}/config/users/${pessoa.id}`, { role: perfil });
      const rotulo = PERFIS_CONVITE_CLIENTE.find((p) => p.valor === perfil);
      onConcluido(`${pessoa.nome} passou a ${(rotulo || {}).rotulo || perfil}.`);
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo="Mudar o perfil"
      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"
          >
            Voltar atrás
          </button>
          <button
            type="button"
            disabled={perfil === pessoa.perfil || aGuardar}
            onClick={guardar}
            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"
          >
            {aGuardar ? 'A guardar…' : 'Guardar'}
          </button>
        </>
      }
    >
      <p className="text-sm text-foreground">
        {pessoa.nome} <span className="text-muted-foreground">({pessoa.email})</span>
      </p>
      <p className="mt-2 text-xs text-muted-foreground">
        A sessão desta pessoa é fechada: o perfil novo vale a partir do próximo acesso.
      </p>

      <fieldset className="mt-4">
        <legend className="label-eyebrow">Perfil</legend>
        <div className="mt-2 space-y-px bg-border">
          {PERFIS_CONVITE_CLIENTE.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="cliente-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="mt-4 border-l-2 border-primary bg-muted px-3 py-2 text-sm text-foreground">
          {erro}
        </p>
      )}
    </Modal>
  );
}

/**
 * Retirar o acesso a alguém da conta.
 *
 * `alertdialog` com o foco no botão seguro: não é irreversível — volta-se a
 * convidar —, mas corta o trabalho de alguém a meio, e é a acção mais perto do
 * "apagar" que este ecrã tem.
 */
function ModalRetirarCliente({ aberto, slug, pessoa, onFechar, onConcluido }) {
  const [erro, setErro] = React.useState(null);
  const [aGuardar, setAGuardar] = React.useState(false);

  React.useEffect(() => {
    if (!aberto) return;
    setErro(null);
    setAGuardar(false);
  }, [aberto, pessoa]);

  if (!pessoa) return null;

  async function confirmar() {
    setErro(null);
    setAGuardar(true);
    try {
      await api.del(`/api/${slug}/config/users/${pessoa.id}`);
      onConcluido(`${pessoa.nome} deixou de ter acesso.`);
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo="Retirar o acesso"
      papel="alertdialog"
      acoes={
        <>
          <button
            type="button"
            onClick={onFechar}
            data-foco-inicial
            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"
          >
            Voltar atrás
          </button>
          <button
            type="button"
            disabled={aGuardar}
            onClick={confirmar}
            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"
          >
            {aGuardar ? 'A retirar…' : 'Retirar acesso'}
          </button>
        </>
      }
    >
      <p className="text-sm text-foreground">
        {pessoa.nome} <span className="text-muted-foreground">({pessoa.email})</span>
      </p>

      <ul className="mt-4 space-y-2">
        {[
          'Sai imediatamente — a sessão aberta é fechada.',
          'Deixa de conseguir entrar, mesmo com a password certa.',
          'O lugar volta a ficar livre no vosso plano.',
          'O que esta pessoa já fez continua registado. Podes convidá-la outra vez mais tarde.',
        ].map((c) => (
          <li key={c} className="flex gap-2 text-xs text-muted-foreground">
            <span aria-hidden="true" className="mt-1.5 h-1 w-1 shrink-0 bg-primary" />
            <span>{c}</span>
          </li>
        ))}
      </ul>

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