/**
 * «Campanhas e vídeos» na ficha de um cliente, no back office.
 *
 * O Ricardo (4 Nov): «como admin nem consigo ver as campanhas de um cliente; tenho de entrar como
 * cliente». A ficha só tinha contagens. Aqui a equipa vê, sem entrar: de quem é a vez (a mesma fila que
 * o cliente vê), os vídeos e as campanhas com o estado e as datas. Para abrir uma campanha ou um vídeo
 * continua a passar pelo «Ver como cliente», que fica registado na auditoria, mas cai logo no sítio certo.
 */
// A fila é escrita para o cliente («a tua marca», «que confirmaste»); na ficha lê-a a equipa (operadora virgem, 4 Nov).
function paraAEquipa(t) {
  const s = String(t || '')
    .replace(/Pede-o outra vez em Criar vídeo quando quiseres\./g, 'O cliente pode pedi-lo outra vez em Criar vídeo.')
    .replace(/O post fica guardado\./g, 'O post do cliente fica guardado.')
    .replace(/que confirmaste/g, 'que o cliente confirmou')
    .replace(/à espera que (os |as )?confirmes/g, (m, a) => `à espera que o cliente ${a ? 'os ' : ''}confirme`)
    .replace(/a tua marca/g, 'a marca').replace(/da tua marca/g, 'da marca')
    // «nos teus ficheiros» → «nos ficheiros do cliente», e não «nos do cliente ficheiros» (administrador virgem, A2).
    // Só a palavra, sem a pontuação, e com «à/às» (o \b sem a flag u não vê o «à»; revisor, 4 Nov).
    .replace(/(^|[^\p{L}])(os|as|nos|nas|dos|das|aos|às) (teus|tuas) ([\p{L}\p{N}-]+)/gu, (m, antes, art, _p, nome) => `${antes}${art} ${nome} do cliente`)
    .replace(/(^|[^\p{L}])(o|a|no|na|do|da|ao|à) (teu|tua) ([\p{L}\p{N}-]+)/gu, (m, antes, art, _p, nome) => `${antes}${art} ${nome} do cliente`)
    .replace(/\bteus\b/g, 'do cliente').replace(/\btuas\b/g, 'do cliente');
  return s.charAt(0).toUpperCase() + s.slice(1);
}

// O que é trabalho da equipa abre no back office, não na conta do cliente.
function rotaDaEquipa(item, slug) {
  if (item.rota && item.rota.startsWith('/admin')) return item.rota;
  if (/factos|correc|leitura-sem-creditos/.test(item.chave || '')) return `/admin/dossie/${slug}`;
  return null;
}

function AdminTrabalhoCliente({ slug, conta, onEntrarComo, onNavegar }) {
  const [dados, setDados] = React.useState(null);
  const [erro, setErro] = React.useState(null);

  React.useEffect(() => {
    let vivo = true;
    setDados(null); setErro(null);
    Promise.all([
      api.get(`/api/${slug}/fila`).catch(() => null),
      api.get(`/api/${slug}/campanhas`).then((r) => r.campanhas || []).catch(() => []),
      api.get(`/api/${slug}/criar/videos`).catch(() => []),
    ])
      .then(([fila, campanhas, videos]) => { if (vivo) setDados({ fila, campanhas, videos: Array.isArray(videos) ? videos : [] }); })
      .catch((e) => { if (vivo) setErro(e.message || 'Não foi possível ler o trabalho deste cliente.'); });
    return () => { vivo = false; };
  }, [slug]);

  const abrir = (destino) => onEntrarComo({ slug: conta.slug, nome: conta.nome, destino });
  const [aVer, setAVer] = React.useState(null);

  if (erro) return <p className="text-sm text-accent" role="status">{erro}</p>;
  if (!dados) return <div className="loading-skeleton h-56" />;

  const { fila, campanhas, videos } = dados;
  const doCliente = (fila && fila.cliente) || [];
  const daNetscreen = (fila && fila.netscreen) || [];
  const daApp = (fila && fila.sistema) || [];
  const emCurso = videos.filter((v) => v.estado === 'fila' || v.estado === 'a_criar');
  const ordem = { por_aprovar: 0, no_ar: 1, terminada: 2 };
  const lista = [...campanhas].sort((a, b) => (ordem[estadoVisivel(a).grupo] ?? 3) - (ordem[estadoVisivel(b).grupo] ?? 3));

  const Linha = ({ item, quem }) => {
    const daEquipa = quem === 'NetScreen' ? rotaDaEquipa(item, slug) : null;
    return (
      <li className="flex flex-wrap items-center justify-between gap-3 py-3">
        <div className="min-w-0">
          <p className="text-sm text-foreground">{quem === 'NetScreen' ? paraAEquipa('A NetScreen está ' + item.texto) : paraAEquipa(item.texto)}</p>
          {item.motivo && <p className="mt-0.5 text-xs text-muted-foreground">{paraAEquipa(item.motivo)}</p>}
        </div>
        <div className="flex items-center gap-3">
          <span className="text-xs text-muted-foreground">{quem === 'Cliente' ? 'À espera do cliente' : quem === 'NetScreen' ? 'Contigo' : 'A app está a tratar'}</span>
          {daEquipa ? (
            <button type="button" onClick={() => onNavegar(daEquipa)} className="ns-btn ns-btn-sm ns-btn-suave text-xs">Tratar</button>
          ) : item.rota && quem !== 'NetScreen' ? (
            <button type="button" onClick={() => abrir(item.rota)} className="ns-btn ns-btn-sm ns-btn-secundario text-xs">Ver como cliente</button>
          ) : null}
        </div>
      </li>
    );
  };

  return (
    <div className="space-y-8">
      {/* De quem é a vez: a primeira coisa que a equipa precisa de saber sobre um cliente. */}
      <section aria-labelledby="trabalho-vez">
        <h2 id="trabalho-vez" className="mb-3 text-lg text-foreground">De quem é a vez</h2>
        <Painel>
          {!doCliente.length && !daNetscreen.length && !daApp.length && !emCurso.length ? (
            <PainelConteudo><p className="text-sm text-foreground">Nada à espera de ninguém neste momento.</p></PainelConteudo>
          ) : (
            <ul className="divide-y divide-border px-4 lg:px-5">
              {daNetscreen.map((i) => <Linha key={'n' + i.chave} item={i} quem="NetScreen" />)}
              {doCliente.map((i) => <Linha key={'c' + i.chave} item={i} quem="Cliente" />)}
              {emCurso.length > 0 && (
                <li className="flex flex-wrap items-center gap-2 py-3 text-sm text-foreground">
                  {/* Com o processamento parado não há roda a girar (administradora virgem A6, Flor de Lis). */}
                  {daApp.some((i) => i.parado)
                    ? (emCurso.length === 1 ? 'Um vídeo à espera: o processamento está parado.' : `${emCurso.length} vídeos à espera: o processamento está parado.`)
                    : <><ATrabalhar className="text-primary" />{emCurso.length === 1 ? 'Um vídeo a ser criado.' : `${emCurso.length} vídeos a ser criados.`}</>}
                </li>
              )}
              {daApp.map((i) => <Linha key={'s' + i.chave} item={i} quem="A app" />)}
            </ul>
          )}
        </Painel>
      </section>

      {videosComCapa(videos).length > 0 && (
        <section aria-labelledby="trabalho-videos" className="space-y-4">
          <h2 id="trabalho-videos" className="text-lg text-foreground">Vídeos</h2>
          {/* Vê-se aqui, sem entrar como cliente (director virgem A4: mostrar a um parceiro). */}
          <MontraVideos slug={slug} videos={videos} max={5} onAbrir={(v) => setAVer(v)} />
          <Modal aberto={Boolean(aVer)} onFechar={() => setAVer(null)} titulo={aVer ? (aVer.tema || 'Vídeo') : 'Vídeo'} largo
            acoes={<>
              <button type="button" onClick={() => setAVer(null)} className="ns-btn ns-btn-sm ns-btn-secundario">Fechar</button>
              {aVer && <button type="button" onClick={() => abrir(`/${slug}/criar?video=${encodeURIComponent(aVer.id)}`)} className="ns-btn ns-btn-sm ns-btn-secundario">Abrir como o cliente o vê</button>}
            </>}>
            {aVer && <VideosLadoALado slug={slug} videoId={aVer.id} altura="h-[60vh]" />}
          </Modal>
        </section>
      )}

      <section aria-labelledby="trabalho-campanhas">
        <div className="mb-3 flex items-baseline justify-between gap-3">
          <h2 id="trabalho-campanhas" className="text-lg text-foreground">Campanhas</h2>
          <button type="button" onClick={() => abrir(`/${slug}/campanhas`)} className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground">
            Ver as campanhas como cliente
          </button>
        </div>
        {!lista.length ? (
          <p className="text-sm text-muted-foreground">Ainda não há campanhas.</p>
        ) : (
          <Painel>
            <ul className="divide-y divide-border px-4 lg:px-5">
              {lista.map((c) => {
                const e = estadoVisivel(c);
                return (
                  <li key={c.id} className="flex flex-wrap items-center justify-between gap-3 py-3">
                    <div className="min-w-0">
                      <p className="truncate text-sm text-foreground">{c.titulo}</p>
                      <p className="mt-0.5 text-xs text-muted-foreground">
                        {c.data_inicio && c.data_fim ? `${formatDataCurta(c.data_inicio)} a ${formatDataCurta(c.data_fim)}` : 'sem datas'}
                        {' · '}{(c.lojas || []).length} {(c.lojas || []).length === 1 ? 'loja' : 'lojas'}
                        {e.detalhe ? ` · ${e.detalhe}` : ''}
                      </p>
                    </div>
                    <div className="flex items-center gap-3">
                      <Badge variante={e.variante || 'neutro'}>{e.rotulo}</Badge>
                      <button type="button" onClick={() => abrir(`/${slug}/campanhas/${c.id}`)} className="ns-btn ns-btn-sm ns-btn-secundario text-xs">
                        Ver como cliente
                      </button>
                    </div>
                  </li>
                );
              })}
            </ul>
          </Painel>
        )}
      </section>

      <p className="text-xs text-muted-foreground">
        Ver esta lista não entra na conta. «Ver como cliente» entra, fica registado na auditoria e abre logo o que escolheste.
      </p>
    </div>
  );
}