/**
 * Resultados — o que cada campanha produziu.
 *
 * Era um placeholder a prometer "métricas por canal". O alcance, as passagens
 * e as conversas ainda não se medem, e aparecem na lista tracejada pelo que
 * vão ser — nunca a zero, e sem o nome das integrações por ligar (ensaio de
 * 7 Out, E12: o cliente lia "falta a ligação à Meta").
 *
 * O que se mostra é verdade hoje: o que o Agente PM escreveu por campanha, e o
 * que foi aprovado e recusado. O custo de IA é da NetScreen e está no back
 * office; deixou de vir para aqui (E12). Ver api/resultados.js.
 */

const RES_CANAL = { social: 'Redes sociais', dooh: 'Painéis', pdv: 'Assistente na loja' };

// O estado à vista vem de estadoVisivel (utils/estados.js, 28 Set).

const RES_NUMEROS = [
  { chave: 'versoes', rotulo: 'Criativos escritos', Icone: IconAgente },
  { chave: 'aprovados', rotulo: 'Aprovados por uma pessoa', Icone: IconCheck },
  { chave: 'recusados', rotulo: 'Recusados', Icone: IconAlerta },
];

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

  React.useEffect(() => {
    setDados(null);
    setErro(null);
    api
      .get(`/api/${slug}/resultados`)
      .then(setDados)
      .catch((e) => setErro(e.message || 'Não foi possível ler os resultados.'));
  }, [slug]);

  const cabecalho = (
    <header>
      <h1 className="mt-1 font-display text-4xl uppercase leading-none tracking-wide">Resultados</h1>
      <p className="mt-2 text-sm text-muted-foreground">
        O que cada campanha produziu até agora.
      </p>
    </header>
  );

  if (erro) {
    return (
      <div className="space-y-6">
        {cabecalho}
        <div className="border border-border bg-card px-6 py-12 text-center">
          <p className="font-display text-xl tracking-wide">Não deu para ler</p>
          <p className="mt-2 text-sm text-muted-foreground">{erro}</p>
        </div>
      </div>
    );
  }

  if (!dados) {
    return (
      <div className="space-y-6">
        {cabecalho}
        <SkeletonKpis />
      </div>
    );
  }

  const { campanhas, total, recusas, por_medir: porMedir } = dados;

  return (
    <div className="space-y-9">
      {cabecalho}

      <Painel className="grid grid-cols-1 gap-px bg-[var(--border)] sm:grid-cols-3">
        {RES_NUMEROS.map((k) => (
          <div key={k.chave} className="flex flex-col bg-background p-5">
            <k.Icone size={18} className="text-primary" />
            <span className="mt-3 text-xs text-muted-foreground">{k.rotulo}</span>
            <span className="mt-1 font-display text-5xl leading-none tracking-wide tabular-nums">
              {formatNumero(total[k.chave])}
            </span>
          </div>
        ))}
      </Painel>

      <Painel>
        <PainelMeta className="pb-0">
          <h2><PainelTitulo Icone={IconCampanhas}>Por campanha</PainelTitulo></h2>
          <span className="font-mono text-xs tabular-nums text-muted-foreground">{campanhas.length}</span>
        </PainelMeta>
        {campanhas.length === 0 ? (
          <PainelConteudo>
            <p className="text-sm text-muted-foreground">Ainda não há campanhas.</p>
          </PainelConteudo>
        ) : (
          <div className="relative z-[1] mt-3 overflow-x-auto">
            <table className="w-full min-w-[40rem] text-left text-sm">
              <thead>
                <tr className="border-t border-border text-xs text-muted-foreground">
                  <th className="px-4 py-2 font-normal lg:px-5">Campanha</th>
                  <th className="px-4 py-2 font-normal">Estado</th>
                  <th className="px-4 py-2 text-right font-normal">Escritos</th>
                  <th className="px-4 py-2 text-right font-normal">Aprovados</th>
                  <th className="px-4 py-2 text-right font-normal lg:pr-5">Recusados</th>
                </tr>
              </thead>
              <tbody>
                {campanhas.map((c) => (
                  <tr key={c.id} className="border-t border-border">
                    <td className="px-4 py-3 lg:px-5">
                      <p className="text-foreground">{c.titulo}</p>
                      <p className="mt-0.5 text-xs text-muted-foreground">
                        {c.canais.length ? c.canais.map((k) => RES_CANAL[k] || k).join(' · ') : 'sem canais'}
                        {c.data_inicio && ` · ${formatData(c.data_inicio)}`}
                        {c.data_fim && ` a ${formatData(c.data_fim)}`}
                      </p>
                    </td>
                    <td className="px-4 py-3 text-xs">
                      {/* A cor vem do estado à vista: uma "Agendada" não fica a laranja como as que estão no ar (P5, 7 Out). */}
                      <span className={estadoVisivel(c).variante === 'contorno' ? 'text-muted-foreground' : 'text-primary'}>
                        {estadoVisivel(c).rotulo}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-right font-mono tabular-nums">{c.versoes}</td>
                    <td className="px-4 py-3 text-right font-mono tabular-nums">{c.aprovados}</td>
                    <td className={`px-4 py-3 text-right font-mono tabular-nums lg:pr-5 ${c.recusados ? 'text-accent' : ''}`}>
                      {c.recusados}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Painel>

      {recusas.length > 0 && (
        <Painel>
          <PainelMeta className="pb-0">
            <h2><PainelTitulo Icone={IconAlerta}>Porque foram recusados</PainelTitulo></h2>
          </PainelMeta>
          <PainelConteudo>
            <p className="mb-3 text-xs text-muted-foreground">
              Um recusado não se aprova e fica guardado com a razão — é isto que diz se o problema foi o
              modelo, uma frase proibida, ou nosso.
            </p>
            <ul className="space-y-2">
              {recusas.map((r) => (
                <li key={r.recusa} className="flex gap-3 text-xs">
                  <span className="w-6 shrink-0 text-right font-mono tabular-nums text-foreground">{r.n}×</span>
                  <span className="text-muted-foreground">{r.recusa}</span>
                </li>
              ))}
            </ul>
          </PainelConteudo>
        </Painel>
      )}

      {/* O que vai aparecer aqui, e quando (E12, 7 Out). Um estado vazio do
          produto, e não a lista do que nos falta ligar. */}
      <Painel className="border border-dashed border-border" comBordas={false}>
        <PainelMeta className="pb-0">
          <h2><PainelTitulo Icone={IconRelogio}>O alcance de cada campanha</PainelTitulo></h2>
        </PainelMeta>
        <PainelConteudo>
          <p className="text-sm text-foreground">Ainda não há medições de alcance nem de passagens para estas campanhas. Quando houver, aparecem aqui:</p>
          <ul className="mt-3 grid grid-cols-1 gap-3 text-xs text-muted-foreground md:grid-cols-3">
            {porMedir.map((x) => <li key={x}>{x}</li>)}
          </ul>
        </PainelConteudo>
      </Painel>
    </div>
  );
}