/**
 * Back office — o que a equipa tem por fazer, em todas as contas (lib/fila.js).
 *
 * 24 Set, parecer do Codex (secção 4): uma fila mínima com as tarefas reais —
 * as entregas, as correcções dos clientes, as alegações que pedem prova —,
 * primeiro o que prende o cliente, depois o mais antigo, cada uma com o motivo
 * e o botão que leva onde se resolve. Nada disto se guarda: sai da lista
 * quando se resolve lá.
 */
/**
 * Os pedidos de excepção (migração 055, 2 Out): decide-se aqui, com o texto, o
 * motivo e a evidência à vista. Uma recusa diz ao cliente porquê.
 */
// `podeDecidir`: só um Admin decide (api/fila.js, requireNetscreenAdmin). O Operator via os botões
// e levava um 403 (9 Out): vê o pedido, sem os botões, e sabe a quem cabe.
const SO_ADMIN = 'Decidir é com um Admin da NetScreen.';
function ExcecoesPorDecidir({ excecoes, tipos, onDecidido, podeDecidir = false }) {
  const [notas, setNotas] = React.useState({});
  const [aDecidir, setADecidir] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  if (!excecoes || !excecoes.length) return null;
  const textoDe = (x) => {
    const c = x.conteudo || {};
    if (x.canal === 'social') return c.legenda || '';
    if (x.canal === 'dooh') return (c.blocos || []).map((b) => b.texto).join(' · ');
    return (c.cenas || []).map((s) => (s.blocos || []).map((b) => b.texto).join(' ')).join(' / ');
  };
  const decidir = async (x, decisao) => {
    setADecidir(x.id); setErro(null);
    try {
      await api.post(`/api/admin/excecoes/${x.id}/decidir`, { decisao, nota: notas[x.id] || null });
      onDecidido();
    } catch (e) { setErro(e.status === 403 ? SO_ADMIN : e.message); } finally { setADecidir(null); }
  };
  return (
    <section id="excecoes" className="space-y-3">
      <h2 className="text-sm font-medium text-foreground">Pedidos de excepção</h2>
      {erro && <p className="text-xs text-perigo-texto" role="alert">{erro}</p>}
      <ul className="border border-border bg-card">
        {excecoes.map((x) => (
          <li key={x.id} className="space-y-2 border-t border-border px-5 py-4 first:border-t-0">
            <p className="text-xs text-muted-foreground">
              {x.conta} · "{x.titulo}" · {x.canal} · versão {x.versao} · {(tipos[x.tipo] || {}).nome || x.tipo} · pedido por {x.pedida_por_nome || x.pedida_por}
            </p>
            {x.aviso && <p className="text-sm text-foreground">{x.aviso}</p>}
            <p className="whitespace-pre-line border-l-2 border-border pl-3 text-sm text-muted-foreground">{textoDe(x)}</p>
            {x.recusa_anterior && (
              <p className="text-xs text-muted-foreground">
                Já recusado por {x.recusa_anterior.por}: «{x.recusa_anterior.nota}». O motivo de então: «{x.recusa_anterior.motivo}».
              </p>
            )}
            <p className="text-sm"><span className="font-medium">Motivo:</span> {x.motivo}</p>
            {x.evidencia && <p className="text-sm"><span className="font-medium">Evidência:</span> {x.evidencia}</p>}
            {x.material_id && x.ficheiro && (
              <p className="text-sm"><span className="font-medium">Ficheiro:</span>{' '}
                <a className="underline" href={`/api/${x.slug}/materiais/${x.material_id}/ficheiro`} target="_blank" rel="noopener">{x.ficheiro}</a>
              </p>
            )}
            {!podeDecidir && <p className="text-xs text-muted-foreground">{SO_ADMIN}</p>}
            {podeDecidir && <>
            <textarea value={notas[x.id] || ''} onChange={(e) => setNotas((n) => ({ ...n, [x.id]: e.target.value }))} rows={2}
              placeholder="Nota para o cliente (obrigatória ao recusar)"
              className="w-full border border-border bg-background px-3 py-2 text-sm" />
            <div className="flex gap-2">
              <button type="button" disabled={aDecidir === x.id} onClick={() => decidir(x, 'aceite')}
                className="bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-50">Aceitar</button>
              <button type="button" disabled={aDecidir === x.id || !(notas[x.id] || '').trim()} onClick={() => decidir(x, 'recusada')}
                className="border border-border px-3 py-1.5 text-xs hover:border-primary disabled:opacity-50">Recusar</button>
            </div>
            </>}
          </li>
        ))}
      </ul>
    </section>
  );
}

function ScreenAdminFila({ me, onNavegar }) {
  const [itens, setItens] = React.useState(null);
  const [equipa, setEquipa] = React.useState([]);
  const [aAtribuir, setAAtribuir] = React.useState(null);
  const [guardado, setGuardado] = React.useState(null);
  const [excecoes, setExcecoes] = React.useState({ excecoes: [], tipos: {} });
  const [erro, setErro] = React.useState(null);

  const ler = React.useCallback(
    () => Promise.all([api.get('/api/admin/fila'), api.get('/api/admin/excecoes')])
      .then(([r, x]) => { setItens(r.itens); setEquipa(r.equipa || []); setExcecoes(x); setErro(null); }),
    []
  );
  React.useEffect(() => { ler().catch((e) => setErro(e.message || 'Não deu para ler a fila.')); }, [ler]);
  // O cliente confirma, pede a publicação, corrige: chega sem recarregar.
  const actualizacaoFalhou = useActualizar(ler, { activo: itens !== null });

  const quando = (d) => (d ? formatDataCurta(d) : '');
  // Quem trata cada linha (administrador virgem A4: «ninguém é dono de nada»).
  const atribuir = (item, pessoa) => {
    setAAtribuir(item.chave);
    api.post('/api/admin/fila/responsavel', { chave: item.chave, pessoa: pessoa || null })
      .then(() => {
        setItens((l) => l.map((i) => (i.chave === item.chave ? { ...i, responsavel: pessoa || null } : i)));
        // Sinal de que ficou (administradora virgem A6: só se confirmava ao recarregar).
        setGuardado(item.chave); setTimeout(() => setGuardado((g) => (g === item.chave ? null : g)), 2500);
      })
      .catch((e) => setErro(e.message || 'Não deu para atribuir.'))
      .finally(() => setAAtribuir(null));
  };

  return (
    <div className="space-y-6">
      <header>
        <h1 className="mt-1 font-display text-4xl uppercase leading-none tracking-wide">A tratar</h1>
        <p className="mt-3 max-w-prose text-sm leading-relaxed text-muted-foreground">
          O que está à espera da NetScreen, em todas as contas. Primeiro o que prende um cliente; depois o mais antigo.
        </p>
      </header>

      {erro && <p className="text-sm text-accent" role="status">{erro}</p>}
      <ExcecoesPorDecidir excecoes={excecoes.excecoes} tipos={excecoes.tipos} podeDecidir={me?.user?.role === 'admin'} onDecidido={() => ler().catch((e) => setErro(e.message))} />
      {actualizacaoFalhou && (
        <p className="text-xs text-accent" role="status">Não deu para actualizar agora: o que vês pode não ser o mais recente.</p>
      )}

      {itens === null && !erro && <div className="loading-skeleton h-40" />}
      {itens && itens.length === 0 && (
        <div className="border border-dashed border-border bg-card px-6 py-10 text-center">
          <p className="text-sm text-foreground">Nada à espera da NetScreen.</p>
          <p className="mx-auto mt-2 max-w-prose text-xs text-muted-foreground">
            Quando um cliente pedir uma publicação, corrigir um dado ou confirmar uma alegação que pede prova, aparece aqui.
          </p>
        </div>
      )}
      {itens && itens.length > 0 && (
        <ul className="border border-border bg-card">
          {itens.map((item) => (
            <li key={item.chave} className="flex flex-wrap items-start justify-between gap-3 border-t border-border px-5 py-4 first:border-t-0">
              <div className="min-w-0 max-w-prose">
                <p className="text-xs text-muted-foreground">
                  {item.conta || 'Todas as contas'}
                  {item.desde ? ` · desde ${quando(item.desde)}` : ''}
                  {item.bloqueia ? ' · prende o cliente' : ''}
                </p>
                <p className="mt-1 text-sm text-foreground">{item.texto}</p>
                {item.motivo && <p className="mt-0.5 text-xs text-muted-foreground">{item.motivo}</p>}
                {equipa.length > 0 && (
                  <label className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                    Quem trata
                    <select value={item.responsavel || ''} disabled={aAtribuir === item.chave} aria-label={`Quem trata: ${item.texto}`}
                      onChange={(e) => atribuir(item, e.target.value)}
                      className="max-w-full border border-border bg-background px-2 py-1 text-xs text-foreground disabled:opacity-50">
                      <option value="">Ninguém ainda</option>
                      {equipa.map((p) => <option key={p.email} value={p.email}>{p.nome}</option>)}
                    </select>
                    {aAtribuir === item.chave && <span role="status">A guardar…</span>}
                    {guardado === item.chave && aAtribuir !== item.chave && <span role="status" className="text-foreground">Guardado</span>}
                  </label>
                )}
              </div>
              {item.rota && (
                <button
                  type="button"
                  onClick={() => onNavegar(item.rota)}
                  className="shrink-0 border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
                >
                  {item.accao || 'Abrir'}
                </button>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}