/**
 * Painéis PdV — o equipamento que está nas lojas desta conta.
 *
 * Era um placeholder desde a Fase 0, e os dados existiam todos: os painéis
 * atribuídos, a loja, o tipo e a medida registada no aparelho. Lê de
 * `/api/:slug/paineis` (api/hardware.js).
 *
 * Cada painel mostra a **forma** à escala — um retângulo com as proporções da
 * medida. Um T Pro Poster é 1:4 e um Front Desk é 12:5, e é isso que decide o
 * que um cartaz pode ter; ver a forma diz mais do que ler "256×1024".
 *
 * O agente PdV é da Fase 5. O que já se sabe dele vem do servidor e mostra-se
 * como o agente o vai cumprir: a frase de abertura obrigatória, que o cliente
 * não pode mudar, e o que uma sessão guarda — que é quase nada, de propósito.
 */

/** O que o registo de uma sessão guarda, dito a quem é da loja. */
const CAMPO_DA_SESSAO = {
  session_id: 'Um número da conversa, que não diz quem falou',
  hardware_id: 'O ecrã onde foi',
  iniciou: 'Quando começou',
  terminou: 'Quando acabou',
  n_mensagens: 'Quantas mensagens houve',
  cta_activado: 'Se a pessoa carregou no botão da oferta',
};

function PdvForma({ largura, altura }) {
  // Numa caixa de 64 px: o lado maior ocupa-a, o outro segue a proporção.
  const lado = 64;
  const w = largura >= altura ? lado : Math.max(4, Math.round((lado * largura) / altura));
  const h = altura > largura ? lado : Math.max(4, Math.round((lado * altura) / largura));
  return (
    <div className="flex h-16 w-16 shrink-0 items-center justify-center" aria-hidden="true">
      <div className="border border-primary bg-[hsl(var(--primary)/0.12)]" style={{ width: w, height: h }} />
    </div>
  );
}

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

  const [aReler, setAReler] = React.useState(false);
  // Os vídeos do Criar, para mostrar em cada painel o último aprovado na medida dele (crítica visual, 3 Nov).
  const [videos, setVideos] = React.useState([]);
  React.useEffect(() => { api.get(`/api/${slug}/criar/videos`).then((v) => setVideos(Array.isArray(v) ? v : [])).catch(() => setVideos([])); }, [slug]);
  const ler = React.useCallback(() => {
    setErro(null);
    setAReler(true);
    return api
      .get(`/api/${slug}/paineis`)
      .then(setDados)
      .catch((e) => setErro(e.message || 'Não foi possível ler os painéis.'))
      .finally(() => setAReler(false));
  }, [slug]);
  React.useEffect(() => { setDados(null); ler(); }, [ler]);
  // As lojas, para dizer em que loja está cada painel (ronda 7: com duas lojas, os dois ficavam na primeira).
  const [lojas, setLojas] = React.useState([]);
  const [aMudar, setAMudar] = React.useState(null);
  const [erroLoja, setErroLoja] = React.useState(null);
  // Um «Guardado» curto depois de mudar: o ecrã não mostrava que tinha ficado (A3).
  const [guardado, setGuardado] = React.useState(null);
  React.useEffect(() => { api.get(`/api/${slug}/lojas`).then((l) => setLojas(l && l.podes_gerir && Array.isArray(l.lojas) ? l.lojas : [])).catch(() => setLojas([])); }, [slug]);
  const porNaLoja = (painel, lojaId, extra = {}) => {
    setAMudar(painel.id); setErroLoja(null);
    api.put(`/api/${slug}/lojas/${lojaId}/paineis`, { hardwareId: painel.id, ...extra })
      .then(() => { setGuardado(painel.id); setTimeout(() => setGuardado((g) => (g === painel.id ? null : g)), 2500); return ler(); })
      .catch((e) => setErroLoja(e.message || 'Não foi possível mudar a loja do painel.'))
      .finally(() => setAMudar(null));
  };

  const cabecalho = (
    <header className="space-y-4">
      <h1 className="font-display text-4xl uppercase leading-none tracking-wide">Lojas e painéis</h1>
      <SeparadoresRede slug={slug} activo="paineis-pdv" onNavegar={onNavegar} />
      {dados && (
        <p className="text-sm text-muted-foreground">
          {dados.paineis.length === 0 ? 'Ainda não há painéis nas tuas lojas.'
            : `${dados.paineis.length} ${dados.paineis.length === 1 ? 'painel' : 'painéis'} nas tuas lojas.`}{' '}
          A NetScreen instala-os e regista a medida; o que passa neles vem das tuas campanhas.
        </p>
      )}
      {/* A ligação à NovaStar não respondeu: diz-se que o estado está por saber, em vez de calar (Codex X-29). */}
      {dados && dados.estado_vnnox === false && (
        <p role="status" className="border-l-2 border-accent pl-3 text-sm text-foreground">
          Agora não deu para saber se os painéis estão ligados: a NovaStar não respondeu.{' '}
          <button type="button" onClick={ler} disabled={aReler} className="underline underline-offset-2 disabled:opacity-50">
            {aReler ? 'A tentar…' : 'Tentar outra vez'}
          </button>
        </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 n={3} />
      </div>
    );
  }

  const { paineis, agente } = dados;

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

      {paineis.length === 0 ? (
        <Painel>
          <PainelConteudo className="py-10 text-center">
            <p className="font-display text-xl tracking-wide">Ainda não há painéis</p>
            <p className="mt-2 text-sm text-muted-foreground">
              Quando a NetScreen instalar um painel numa das tuas lojas, aparece aqui.
            </p>
          </PainelConteudo>
        </Painel>
      ) : (
        // Sem o fundo cor-de-borda do dashboard: com um número de painéis que não
        // enche a linha, as células vazias ficavam pintadas. Cada cartão desenha
        // a sua borda direita e inferior, e o que sobra fica vazio.
        // Só as colunas que os painéis enchem: com um painel numa grelha de três, as células
        // vazias mostravam o fundo do cartão como uma caixa cinzenta (cliente simulado, 30 Out).
        <>{erroLoja && <p role="alert" className="text-sm text-perigo-texto">{erroLoja}</p>}
        <Painel className={`grid grid-cols-1 gap-px ${paineis.length >= 2 ? 'md:grid-cols-2' : ''} ${paineis.length >= 3 ? 'lg:grid-cols-3' : ''}`}>
          {paineis.map((p) => {
            const formato = p.largura_px && p.altura_px ? `${p.largura_px}x${p.altura_px}` : null;
            const naMedida = formato && videoNaMedida(videos, formato);
            return (
            <div
              key={p.id}
              className="flex gap-4 bg-background p-5 shadow-[1px_0_0_0_var(--border),0_1px_0_0_var(--border)]"
            >
              {naMedida ? (
                <figure className="shrink-0">
                  <CapaDeVideo slug={slug} video={naMedida} formato={formato}
                    className={`${p.altura_px > p.largura_px ? 'h-48' : 'w-48'} rounded-sm border border-border`} />
                  <figcaption className="mt-1.5 w-28 text-[11px] leading-snug text-muted-foreground">Pré-visualização: o último vídeo aprovado nesta medida</figcaption>
                </figure>
              ) : p.largura_px && p.altura_px ? (
                <PdvForma largura={p.largura_px} altura={p.altura_px} />
              ) : (
                <div className="flex h-16 w-16 shrink-0 items-center justify-center border border-dashed border-border text-xs text-muted-foreground">
                  ?
                </div>
              )}
              <div className="min-w-0">
                {/* O nome do painel (ou o tipo) em destaque; o número de série é para a equipa (parceira virgem, 4 Nov). */}
                <p className="truncate text-sm text-foreground">{p.nome || p.tipo_nome}</p>
                {!p.nome && p.serial && <p className="mt-0.5 text-[11px] text-muted-foreground">N.º de série {p.serial}</p>}
                <p className="mt-2 text-xs tabular-nums text-foreground">
                  {p.medida || <span className="font-sans text-muted-foreground">medida por registar</span>}
                  {p.pitch_mm && <span className="text-muted-foreground"> · pitch {p.pitch_mm} mm</span>}
                </p>
                {lojas.length > 1 || (lojas.length === 1 && !p.loja_id) ? (
                  <label className="mt-1 flex min-w-0 max-w-full flex-wrap items-center gap-2 text-xs text-muted-foreground">
                    Está na loja
                    <select value={p.loja_id || ''} disabled={aMudar === p.id} aria-label={`Em que loja está ${p.nome || p.tipo_nome}`}
                      onChange={(e) => e.target.value && porNaLoja(p, e.target.value)}
                      className="min-w-0 max-w-full flex-1 truncate border border-border bg-background px-2 py-1 text-xs text-foreground disabled:opacity-50">
                      {!p.loja_id && <option value="">Escolhe a loja</option>}
                      {lojas.map((l) => <option key={l.id} value={l.id}>{l.name}{l.city ? `, ${l.city}` : ''}</option>)}
                    </select>
                    {aMudar === p.id && <span>A guardar…</span>}
                  </label>
                ) : (
                  <p className="mt-1 text-xs text-muted-foreground">
                  {p.loja_nome ? `${p.loja_nome}${p.loja_cidade ? `, ${p.loja_cidade}` : ''}` : 'Ainda sem loja: a NetScreen indica em que loja fica'}
                  {p.desde && ` · desde ${formatData(p.desde)}`}
                </p>
                )}
                {/* Para onde está virado: o Criar escreve a chamada para quem passa na rua ou para quem já entrou
                    (rondas 7 a 10: um painel na rua e outro dentro levavam o mesmo texto). */}
                {lojas.length > 0 && p.loja_id ? (
                  <label className="mt-1 flex min-w-0 max-w-full flex-wrap items-center gap-2 text-xs text-muted-foreground">
                    Virado para
                    <select value={p.virado_para_rua === true ? 'rua' : p.virado_para_rua === false ? 'dentro' : ''} disabled={aMudar === p.id}
                      aria-label={`Para onde está virado ${p.nome || p.tipo_nome}`}
                      onChange={(e) => e.target.value && porNaLoja(p, p.loja_id, { viradoParaRua: e.target.value === 'rua' })}
                      className="min-w-0 max-w-full flex-1 border border-border bg-background px-2 py-1 text-xs text-foreground disabled:opacity-50">
                      {p.virado_para_rua == null && <option value="">Escolhe</option>}
                      <option value="dentro">dentro da loja</option>
                      <option value="rua">a rua (montra ou exterior)</option>
                    </select>
                    {aMudar === p.id ? <span>A guardar…</span> : guardado === p.id ? <span role="status" className="text-foreground">Guardado</span> : null}
                  </label>
                ) : null}
                {p.estado === 'maintenance' ? (
                  <p className="mt-1 text-xs text-accent">Em manutenção</p>
                ) : p.online !== null && p.online !== undefined ? (
                  <p className="mt-1 flex items-center gap-1.5 text-xs">
                    <span
                      className="h-2 w-2"
                      style={{ background: `hsl(var(${p.online ? '--online' : '--offline'}))` }}
                      aria-hidden="true"
                    />
                    <span className={p.online ? 'text-foreground' : 'text-perigo-texto'}>
                      {p.online ? 'Ligado' : 'Desligado'}
                    </span>
                  </p>
                ) : null}
              </div>
            </div>
            );
          })}
        </Painel></>
      )}

      {/* Só com o agente no plano: fora dele, dois blocos sobre uma coisa que o cliente não tem tiravam o
          foco dos painéis (Codex, 3 Nov). */}
      {agente.no_plano && <div className="grid grid-cols-1 gap-9 lg:grid-cols-3">
        {/* O agente PdV — a frase que ele diz sempre, e que não se muda. */}
        <Painel className="lg:col-span-2">
          <PainelMeta className="pb-0">
            <h2><PainelTitulo Icone={IconAgente}>Agente do ponto de venda</PainelTitulo></h2>
            <span className="text-xs text-muted-foreground">
              {agente.no_plano ? 'Incluído no plano · em preparação' : 'Não incluído no plano'}
            </span>
          </PainelMeta>
          <PainelConteudo>
            <p className="text-xs text-muted-foreground">Começa sempre assim:</p>
            <p className="mt-2 text-pretty text-lg leading-snug text-foreground xl:text-2xl">
              "{agente.saudacao}"
            </p>
            <p className="mt-3 text-xs leading-relaxed text-muted-foreground">
              Obrigatória pelo regulamento europeu de IA e não se altera: quem fala com o agente sabe que é uma IA.
            </p>
          </PainelConteudo>
        </Painel>

        {/* O que se guarda de cada conversa — quase nada, de propósito. */}
        <Painel>
          <PainelMeta className="pb-0">
            <h2><PainelTitulo Icone={IconCheck}>O que fica de cada conversa</PainelTitulo></h2>
          </PainelMeta>
          <PainelConteudo>
            <ul className="space-y-1">
              {/* Os nomes das colunas eram o que se lia (ensaio de ponta a ponta, 24 Set);
                  a lista continua a vir do servidor (lib/pdv.js), só se diz cada campo. */}
              {agente.campos_da_sessao.map((c) => (
                <li key={c} className="text-xs text-foreground">{CAMPO_DA_SESSAO[c] || c}</li>
              ))}
            </ul>
            <p className="mt-3 text-xs leading-relaxed text-muted-foreground">
              Nunca a conversa, a voz, imagens ou dados de quem falou. O registo apaga-se ao fim de{' '}
              {agente.dias_ate_purgar} dias.
            </p>
          </PainelConteudo>
        </Painel>
      </div>}

    </div>
  );
}