/**
 * O que é um destino que o cliente não reconhece. A Rede Brand Digital são
 * painéis da NetScreen fora das lojas do cliente (docs/INTEGRATIONS.md,
 * Broadsign): vem com o plano, e não precisa de painéis na loja.
 */
function explicarDestino(nome) {
  return nome === 'Rede Brand Digital'
    ? 'Painéis da rede Brand Digital, fora das tuas lojas (por exemplo, em gasolineiras). Vem com o teu plano.'
    : null;
}

/**
 * A entrega por destino, como se mostra ao cliente e à NetScreen.
 * Ver lib/entregas.js e db/migrations/028-entregas.sql.
 *
 * Offline não é um estado da entrega: é o que a VNNOX diz do player agora, e
 * aparece ao lado, com a última ligação.
 */
const ROTULO_ENTREGA = {
  por_enviar: 'Por enviar',
  enviado: 'Enviado',
  confirmado: 'Confirmado',
  falhou: 'Falhou',
};
const VARIANTE_ENTREGA = { por_enviar: 'contorno', enviado: 'primario', confirmado: 'sucesso', falhou: 'erro' };

/** "2026-09-22 18:42:00", na hora do player, sem mexer em fusos. */
function momentoDoPlayer(texto) {
  const m = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/.exec(texto || '');
  if (!m) return texto || '';
  return `${Number(m[3])} ${MESES_CURTOS[Number(m[2]) - 1]}, ${m[4]}:${m[5]}`;
}

function EstadoEntrega({ entrega }) {
  // Confirmado com evidência (uma captura, um play log) não é a mesma certeza
  // que confirmado por nota (reavaliação do Codex, 23 Set).
  const rotulo = entrega.estado === 'confirmado'
    ? (entrega.confirmacao === 'evidencia' ? 'Confirmado com evidência' : 'Confirmado por nota')
    : ROTULO_ENTREGA[entrega.estado];
  return (
    <span className="flex flex-wrap items-center gap-1.5">
      <Badge variante={VARIANTE_ENTREGA[entrega.estado]}>{rotulo}</Badge>
      {entrega.online === false && (
        <Badge variante="erro">
          Offline{entrega.ultima_ligacao ? ` desde ${momentoDoPlayer(entrega.ultima_ligacao)}` : ''}
        </Badge>
      )}
    </span>
  );
}

/** A lista de uma campanha, só leitura: o que o cliente vê. */
function EntregasCampanha({ slug, campanhaId }) {
  const [lista, setLista] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const [consultado, setConsultado] = React.useState(null);

  const pendentes = React.useRef(true);

  React.useEffect(() => {
    let vivo = true;
    setLista(null);
    setErro(null);
    pendentes.current = true;
    const ler = () => api.get(`/api/${slug}/campanhas/${campanhaId}/entregas`)
      .then((r) => {
        if (!vivo) return;
        setLista(r.entregas);
        setConsultado(new Date());
        setErro(null);
        pendentes.current = r.entregas.some((e) => e.estado !== 'confirmado');
      })
      .catch((e) => { if (vivo) setErro(e.message || 'sem resposta'); });
    ler();
    // Enquanto houver destinos por confirmar, volta a perguntar: a NetScreen
    // marca-os noutro ecrã, e este ficava parado no que viu ao abrir.
    const t = setInterval(() => { if (pendentes.current) ler(); }, 30000);
    return () => { vivo = false; clearInterval(t); };
  }, [slug, campanhaId]);

  if (erro) return <p className="text-xs text-accent" role="status">Não deu para ler as entregas: {erro}</p>;
  if (!lista) return <AProcessar texto="A ler as entregas" />;
  if (!lista.length) {
    return <p className="text-xs text-muted-foreground">Esta campanha foi activada antes de haver registo de entregas.</p>;
  }

  const feitas = lista.filter((e) => e.estado === 'confirmado').length;
  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">
        {feitas} de {lista.length} {lista.length === 1 ? 'destino confirmado' : 'destinos confirmados'}. A NetScreen
        envia e confirma cada um, e marca aqui.
        {consultado && ` Actualizado às ${consultado.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' })}.`}
      </p>
      <ul className="space-y-2">
        {lista.map((e) => (
          <li key={e.id} className="border border-border p-3">
            <p className="text-sm text-foreground">{e.destino}</p>
            {explicarDestino(e.destino) && <p className="text-xs text-muted-foreground">{explicarDestino(e.destino)}</p>}
            <div className="mt-1.5"><EstadoEntrega entrega={e} /></div>
            {e.estado !== 'por_enviar' && (
              <p className="mt-1.5 text-xs text-muted-foreground">
                {formatMomento(e.actualizado_em)}{e.nota ? ` · ${e.nota}` : ''}
              </p>
            )}
            {e.evidencia_url && (
              <a href={e.evidencia_url} target="_blank" rel="noopener noreferrer" className="mt-1 inline-block text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground">
                Ver a evidência
              </a>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}