/**
 * Back office — novo cliente.
 *
 * Uma página, não um painel lateral. Um formulário com cinco secções e uma
 * lista de anunciantes que cresce não cabe num drawer: obriga a rolar dentro de
 * uma coluna estreita, esconde a lista de onde se veio, e fecha-se por engano
 * com o que já estava escrito. Os drawers ficam para ler — o resumo de um
 * cliente na lista — e não para preencher.
 *
 * Duas colunas em ecrã largo: o formulário à esquerda, e à direita um resumo
 * que acompanha o que se escreve. O botão de criar vive no resumo, ao lado do
 * que vai criar.
 *
 * Esta é a primeira etapa do onboarding — os dados básicos. As secções
 * «Presença digital» e «Materiais» saíram (demo de 12 Out): não guardavam nada
 * e diziam-no em texto de desenvolvimento. Os links e os ficheiros da marca
 * entram pelo cliente, em A minha marca, onde há leitura e confirmação.
 */

/** "Multiópticas" → "multiopticas". Só sugere o slug; quem manda é a API. */
const slugDe = (nome) =>
  nome.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '')
    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');

function BotaoOpcao({ activo, aoClicar, children }) {
  return (
    <button
      type="button"
      aria-pressed={activo}
      onClick={aoClicar}
      className="ns-chip"
    >
      {children}
    </button>
  );
}

function CartaoSeccao(props) {
  return (
    <div className="border border-border bg-card p-6">
      <Seccao {...props} />
    </div>
  );
}

function dadosNovoCliente() {
  return {
    nome: '', tipo: 'retalho', plano: '',
    nomeResponsavel: '', emailResponsavel: '',
    anunciantes: [''],
    foraDaPlataforma: false,
    motivoFora: '',
  };
}
function planosParaNovoCliente(resposta) {
  if (!Array.isArray(resposta?.planos)) throw Error('Não foi possível ler os planos disponíveis.');
  return resposta.planos.filter(p => typeof p.codigo === 'string' && p.codigo && typeof p.nome === 'string' && p.nome).map(p => ({ codigo: p.codigo, rotulo: p.nome }));
}
function podeCriarNovoCliente(f, planos, aGuardar) {
  return f.nome.trim().length > 0 && slugDe(f.nome.trim()).length >= 3 && !aGuardar
    && planos.some(p => p.codigo === f.plano)
    && (!f.foraDaPlataforma || f.motivoFora.trim().length > 0);
}
function planoInicialNovoCliente(planos, actual) {
  return planos.some(p => p.codigo === actual) ? actual : planos.find(p => p.codigo === 'retail_pro')?.codigo || planos[0]?.codigo || '';
}
function ScreenAdminClienteNovo({ onNavegar }) {
  const [f, setF] = React.useState(dadosNovoCliente);
  const [planos, setPlanos] = React.useState([]);
  const [aLerPlanos, setALerPlanos] = React.useState(true);
  const [erroPlanos, setErroPlanos] = React.useState(null);
  const [aGuardar, setAGuardar] = React.useState(false);
  const [erro, setErro] = React.useState(null);
  // Criar clientes é do Admin (a rota recusa o Operator): diz-se à entrada, e não depois de o
  // formulário estar preenchido, como acontecia (agentes, 20 Out). Se não der para ler, decide a rota.
  const [ehAdmin, setEhAdmin] = React.useState(null);
  React.useEffect(() => {
    let activo = true;
    api.get('/api/me').then((m) => { if (activo) setEhAdmin(m?.user?.role === 'admin'); })
      .catch(() => { if (activo) setEhAdmin(true); });
    return () => { activo = false; };
  }, []);
  React.useEffect(() => {
    let activo = true;
    api.get('/api/admin/plans').then(r => {
      const disponiveis = planosParaNovoCliente(r);
      if (!activo) return;
      setPlanos(disponiveis);
      setF(s => ({ ...s, plano: planoInicialNovoCliente(disponiveis, s.plano) }));
    }).catch(e => { if (activo) setErroPlanos(e.message || 'Não foi possível ler os planos disponíveis.'); })
      .finally(() => { if (activo) setALerPlanos(false); });
    return () => { activo = false; };
  }, []);

  const alterar = (campo) => (v) => setF((s) => ({ ...s, [campo]: v }));
  const alterarLista = (campo, i) => (v) =>
    setF((s) => ({ ...s, [campo]: s[campo].map((x, j) => (j === i ? v : x)) }));
  const juntar = (campo) => setF((s) => ({ ...s, [campo]: [...s[campo], ''] }));
  const tirar = (campo, i) => setF((s) => ({ ...s, [campo]: s[campo].filter((_, j) => j !== i) }));

  const nome = f.nome.trim();
  const slug = slugDe(nome);
  const anunciantes = f.tipo === 'agencia' ? f.anunciantes.map((x) => x.trim()).filter(Boolean) : [];
  const plano = planos.find((p) => p.codigo === f.plano);
  const podeCriar = !aLerPlanos && !erroPlanos && podeCriarNovoCliente(f, planos, aGuardar);

  async function criar() {
    if (!podeCriar) return;
    setAGuardar(true);
    setErro(null);
    try {
      const criada = await api.post('/api/admin/accounts', {
        slug, nome, tipo: f.tipo, plano: f.plano, anunciantes,
        tratados_fora: f.foraDaPlataforma ? f.motivoFora.trim() : '',
      });
      // Com responsável, o assistente acaba no convite: acabou de se perguntar
      // quem é, e o passo seguinte é convidá-lo. Vai pela `sessionStorage` e
      // não pelo URL, porque um email num endereço fica no histórico, nos
      // registos do servidor e em qualquer sítio por onde o link passe.
      const responsavel = {
        nome: f.nomeResponsavel.trim(),
        email: f.emailResponsavel.trim(),
      };
      if (responsavel.nome && responsavel.email) {
        try {
          sessionStorage.setItem(
            'conviteRascunho',
            JSON.stringify({ slug: criada.slug, ...responsavel })
          );
          onNavegar(`/admin/clientes/${criada.slug}`);
          return;
        } catch {
          // Sem storage o convite faz-se à mão na ficha. Melhor do que perder a conta.
        }
      }

      // A lista mostra este aviso e abre o resumo do cliente acabado de criar.
      try {
        sessionStorage.setItem(
          'flashClientes',
          JSON.stringify({
            mensagem: `${nome}${anunciantes.length ? ` e ${anunciantes.length} ${anunciantes.length === 1 ? 'anunciante' : 'anunciantes'}` : ''} criado${anunciantes.length ? 's' : ''}. Fica por activar até haver convite.`,
            abrir: criada.slug,
          })
        );
      } catch { /* sem storage: perde-se o aviso, o cliente ficou criado na mesma */ }
      onNavegar('/admin/clientes');
    } catch (e) {
      setErro(e.status === 403 ? 'Só um Admin da NetScreen pode criar clientes.' : e.message || 'Não foi possível criar o cliente.');
      setAGuardar(false);
    }
  }

  const listaCampos = (campo, etiqueta, placeholder, removivel) => (
    <div className="space-y-2">
      {f[campo].map((v, i) => (
        <div key={i} className="flex items-end gap-2">
          <div className="min-w-0 flex-1">
            <CampoTexto
              etiqueta={i === 0 ? etiqueta : ''}
              valor={v}
              placeholder={placeholder}
              aoMudar={alterarLista(campo, i)}
            />
          </div>
          {removivel && f[campo].length > 1 && (
            <button
              type="button"
              onClick={() => tirar(campo, i)}
              aria-label="Tirar"
              className="mb-px border border-border px-3 py-2 text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent"
            >
              ×
            </button>
          )}
        </div>
      ))}
      <button
        type="button"
        onClick={() => juntar(campo)}
        className="text-xs uppercase tracking-wider text-muted-foreground outline-none hover:text-primary focus-visible:ring-1 focus-visible:ring-accent"
      >
        + acrescentar
      </button>
    </div>
  );

  const linhaResumo = (guardado, rotulo, valor) => (
    <li className="flex items-start gap-3 border-t border-border py-2.5 first:border-t-0">
      <span
        className="mt-1.5 h-2 w-2 shrink-0"
        style={{ background: `hsl(var(${guardado ? '--online' : '--muted-foreground'}))`, opacity: guardado ? 1 : 0.5 }}
        aria-hidden="true"
      />
      <div className="min-w-0 flex-1">
        <p className="text-xs text-foreground">
          {rotulo}
          <span className="sr-only">{guardado ? ' — preenchido' : ' — por preencher'}</span>
        </p>
        <p className="mt-0.5 truncate text-xs text-muted-foreground">{valor}</p>
      </div>
    </li>
  );

  return (
    <div className="space-y-6">
      <header>
        <nav aria-label="Localização" className="flex items-center gap-2 text-xs text-muted-foreground">
          <a
            href="/admin/clientes"
            onClick={(e) => {
              e.preventDefault();
              onNavegar('/admin/clientes');
            }}
            className="uppercase tracking-wider outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent"
          >
            Clientes
          </a>
          <span aria-hidden="true">/</span>
          <span className="uppercase tracking-wider text-foreground" aria-current="page">Novo cliente</span>
        </nav>
        <h1 className="mt-3 font-display text-4xl uppercase leading-none tracking-wide">Novo cliente</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          A conta nasce por activar. Os ficheiros e os links da marca carrega-os o cliente, em A minha marca.
        </p>
      </header>

      {ehAdmin === false ? (
        <div className="border border-border bg-card px-6 py-12 text-center">
          <p className="font-display text-xl tracking-wide">Criar clientes é do Admin</p>
          <p className="mt-2 text-sm text-muted-foreground">
            Pede a um Admin da NetScreen para criar a conta. Depois de criada, a ficha do cliente fica aberta para ti.
          </p>
          <button type="button" onClick={() => onNavegar('/admin/clientes')} className="ns-btn ns-btn-sm ns-btn-secundario mt-4">
            Voltar aos clientes
          </button>
        </div>
      ) : (

      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
        <div className="space-y-4">
          <CartaoSeccao numero="01" titulo="Identificação">
            <CampoTexto etiqueta="Nome do cliente" valor={f.nome} aoMudar={alterar('nome')} obrigatorio />

            <div>
              <span className="block text-xs uppercase tracking-wider text-muted-foreground">Tipo</span>
              <div className="mt-1.5 flex gap-2">
                <BotaoOpcao activo={f.tipo === 'retalho'} aoClicar={() => alterar('tipo')('retalho')}>Retalho</BotaoOpcao>
                <BotaoOpcao activo={f.tipo === 'agencia'} aoClicar={() => alterar('tipo')('agencia')}>Agência</BotaoOpcao>
              </div>
              <p className="mt-1.5 text-xs text-muted-foreground">
                Retalho: uma marca, várias lojas. Agência: várias marcas, cada uma com a sua.
              </p>
            </div>

            <div>
              <span className="block text-xs uppercase tracking-wider text-muted-foreground">Plano</span>
              <div className="mt-1.5 flex flex-wrap gap-2">
                {planos.map((p) => (
                  <BotaoOpcao key={p.codigo} activo={f.plano === p.codigo} aoClicar={() => alterar('plano')(p.codigo)}>
                    {p.rotulo}
                  </BotaoOpcao>
                ))}
              </div>
              {aLerPlanos && <p className="mt-1.5 text-sm text-muted-foreground">A ler planos disponíveis…</p>}
              {erroPlanos && <p role="alert" className="mt-1.5 text-sm text-destructive">{erroPlanos} Recarrega esta página para tentar novamente.</p>}
              {!aLerPlanos && !erroPlanos && !planos.length && <p role="alert" className="mt-1.5 text-sm text-destructive">Não há planos disponíveis. Confirma a preparação da base antes de criar o cliente.</p>}
            </div>
          </CartaoSeccao>

          {f.tipo === 'agencia' && (
            <CartaoSeccao
              numero="01b"
              titulo="Anunciantes"
              descricao="Cada anunciante tem a sua marca, o seu tom e os seus produtos."
            >
              {listaCampos('anunciantes', 'Nome do anunciante', 'Ex.: Multiópticas', true)}
              <p className="text-xs text-muted-foreground">
                Cada anunciante fica como conta própria, ligada a esta agência, com o seu brand kit e a sua
                base de conhecimento. São criados todos de uma vez, ou nenhum.
              </p>
            </CartaoSeccao>
          )}

          <CartaoSeccao
            numero="02"
            titulo="Responsável"
            descricao="Quem vai receber o convite. No fim, geras o link para lhe enviar."
          >
            <CampoTexto etiqueta="Nome" valor={f.nomeResponsavel} aoMudar={alterar('nomeResponsavel')} />
            <CampoTexto etiqueta="Email" tipo="email" valor={f.emailResponsavel} aoMudar={alterar('emailResponsavel')} />
          </CartaoSeccao>

          <CartaoSeccao
            numero="03"
            titulo="Contrato e facturação"
            descricao="Com os dois tratados, a conta activa-se quando o responsável aceitar o convite."
          >
            <label htmlFor="fora-da-plataforma" className="flex cursor-pointer items-start gap-2 text-sm text-foreground">
              <input
                id="fora-da-plataforma"
                type="checkbox"
                checked={f.foraDaPlataforma}
                onChange={(e) => setF((s) => ({ ...s, foraDaPlataforma: e.target.checked }))}
                className="mt-0.5 accent-primary"
              />
              <span>Tratados fora da plataforma (contrato assinado e facturação feita à parte)</span>
            </label>
            {f.foraDaPlataforma ? (
              <CampoTexto etiqueta="Como foram tratados (fica no registo)" valor={f.motivoFora} aoMudar={alterar('motivoFora')} />
            ) : (
              <p className="text-xs text-muted-foreground">Marcam-se depois, na ficha do cliente. Até lá, a conta fica por activar.</p>
            )}
          </CartaoSeccao>

        </div>

        {/* Resumo — acompanha o que se escreve. Fica à vista ao rolar. */}
        <aside className="lg:sticky lg:top-6">
          <div className="border border-border bg-card p-5">
            <p className="label-eyebrow">Resumo</p>
            <p className="mt-2 font-display text-2xl leading-none tracking-wide">
              {nome || <span className="text-muted-foreground">Sem nome</span>}
            </p>
            <p className="mt-1.5 truncate text-xs text-muted-foreground">
              netscreen.ai/{slug || '…'}
            </p>

            <ul className="mt-4">
              {/* Verde só com o nome escrito: dizia «Nome e tipo — preenchido» com o nome vazio (agentes, 20 Out). */}
              {linhaResumo(Boolean(nome), 'Nome e tipo', nome ? ROTULO_TIPO[f.tipo] : 'falta o nome')}
              {linhaResumo(Boolean(plano), 'Plano', plano ? plano.rotulo : 'por escolher')}
              {f.tipo === 'agencia' &&
                linhaResumo(
                  true,
                  'Anunciantes',
                  anunciantes.length ? `${anunciantes.length}: ${anunciantes.join(', ')}` : 'nenhum ainda'
                )}
              {linhaResumo(
                Boolean(f.nomeResponsavel.trim() && f.emailResponsavel.trim()),
                'Responsável',
                f.emailResponsavel.trim() || 'por preencher'
              )}
              {linhaResumo(
                f.foraDaPlataforma && Boolean(f.motivoFora.trim()),
                'Contrato e facturação',
                f.foraDaPlataforma ? 'tratados fora' : 'marcam-se depois na ficha'
              )}
            </ul>

            {erro && (
              <div
                className="mt-4 border border-[hsl(var(--offline))] border-l-2 bg-[hsl(var(--offline)/0.08)] p-3"
                role="alert"
              >
                <p className="text-xs text-foreground">{erro}</p>
              </div>
            )}

            <button
              type="button"
              disabled={!podeCriar}
              onClick={criar}
              className="mt-5 w-full bg-primary px-4 py-2.5 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 criar…' : 'Criar cliente'}
            </button>
            <button
              type="button"
              onClick={() => onNavegar('/admin/clientes')}
              className="ns-btn ns-btn-fantasma mt-2 w-full"
            >
              Cancelar
            </button>
            {!podeCriar && !aGuardar && (
              <p className="mt-2 text-center text-xs text-muted-foreground">
                {!nome ? 'Falta o nome do cliente.' : slug.length < 3 ? 'O nome tem de dar um identificador com 3 ou mais caracteres.' : aLerPlanos ? 'A ler os planos disponíveis.' : erroPlanos || !plano ? 'Escolhe um plano disponível antes de criar.' : 'Indica como foram tratados o contrato e a facturação.'}
              </p>
            )}
          </div>
        </aside>
      </div>
      )}
    </div>
  );
}