/**
 * Enviar o vídeo aprovado para um painel NovaStar (3 Nov, demo). Só para o Admin da NetScreen: o
 * servidor recusa os outros, e aqui o bloco nem aparece. Só lista painéis autorizados neste ambiente
 * e da mesma medida que um formato do vídeo; publicar substitui o que está a passar no painel.
 */
const ESTADO_ENVIO_PAINEL={a_enviar:'A enviar',enviado:'Enviado',falhou:'Falhou',por_confirmar:'Pode ter sido enviado, por confirmar'};
function EnviarParaPainelCriar({video}){
 const [dados,setDados]=React.useState(null),[escolha,setEscolha]=React.useState(''),[confirmado,setConfirmado]=React.useState(false),[ocupado,setOcupado]=React.useState(false),[erro,setErro]=React.useState(''),[ultimo,setUltimo]=React.useState(null);
 const carregar=()=>fetch('/api/admin/vnnox/publicar/paineis?videoId='+encodeURIComponent(video.id)).then(async r=>{const j=await r.json();if(!r.ok)throw Error(j.error||'Não foi possível ler os painéis.');setDados(j)}).catch(e=>setErro(e.message));
 React.useEffect(()=>{carregar()},[video.id]);
 const button='border border-border px-4 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50';
 const input='w-full border border-border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50';
 if(!dados)return <section className="space-y-2 border-t border-border pt-6"><h3 className="text-xl">Enviar para um painel</h3>{erro?<p role="alert" className="text-sm">{erro}</p>:<div className="h-10 animate-pulse bg-muted" aria-label="A ler os painéis"/>}</section>;
 if(!dados.ligado)return <section className="space-y-2 border-t border-border pt-6"><h3 className="text-xl">Enviar para um painel</h3><p className="text-sm text-muted-foreground">O envio para painéis não está ligado neste ambiente.</p></section>;
 // Só os formatos aprovados para painel (o servidor diz quais): um formato só de redes nunca vai para um ecrã.
 const formatos=dados.formatos||[],compativeis=dados.paineis.filter(p=>formatos.includes(p.resolucao)),painel=compativeis.find(p=>p.hardware_id===escolha);
 const enviar=async()=>{if(ocupado||!painel)return;setOcupado(true);setErro('');setUltimo({estado:'a_enviar'});let respondeu=false;try{const r=await fetch('/api/admin/vnnox/publicar',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({videoId:video.id,formato:painel.resolucao,hardwareId:painel.hardware_id})});const j=await r.json().catch(()=>({}));const conhecido=['enviado','falhou','por_confirmar','a_enviar'].includes(j.estado);respondeu=r.status<500&&!(r.ok&&!conhecido);if(!r.ok||!conhecido)throw Error(j.error||'O envio falhou.');setUltimo(j);setConfirmado(false);carregar()}catch(e){/* Sem resposta do servidor o envio pode ter saído: «por confirmar», confirmação desmarcada e histórico relido (Codex X-21, 3 Nov). Com resposta de erro, nada saiu. */if(respondeu){setUltimo(null);setErro(e.message)}else{setUltimo({estado:'por_confirmar',aviso:'a ligação caiu antes da resposta; vê o histórico e confirma no painel antes de repetir'});setConfirmado(false);carregar()}}finally{setOcupado(false)}};
 return <section className="space-y-3 border-t border-border pt-6">
  <h3 className="text-xl">Enviar para um painel</h3>
  {compativeis.length===0?<p className="text-sm text-muted-foreground">{formatos.length?`Nenhum painel autorizado tem a medida deste vídeo (${formatos.join(', ')}).`:'Este vídeo não foi aprovado para painel: os formatos são só para redes sociais.'}</p>:<>
   <label className="block text-sm" htmlFor={'painel-vnnox-'+video.id}>Painel</label>
   <select id={'painel-vnnox-'+video.id} className={input} value={escolha} disabled={ocupado} onChange={e=>{setEscolha(e.target.value);setConfirmado(false)}}><option value="">Escolhe um painel</option>{compativeis.map(p=><option key={p.hardware_id} value={p.hardware_id}>{(p.nome||p.serial)+' · '+p.resolucao+(p.conta_nome?' · '+p.conta_nome:'')}</option>)}</select>
   {painel&&<label className="flex items-start gap-3 text-sm"><input type="checkbox" checked={confirmado} disabled={ocupado} onChange={e=>setConfirmado(e.target.checked)}/>Isto substitui o que está a passar nesse painel.</label>}
   <button className={button+' bg-primary text-primary-foreground hover:bg-primary/90'} disabled={!painel||!confirmado||ocupado} onClick={enviar}>{ocupado?'A enviar…':'Enviar para o painel'}</button>
  </>}
  {ocupado&&<div className="h-1 animate-pulse bg-primary" role="progressbar" aria-label="A enviar para a VNNOX"/>}
  {ultimo&&!ocupado&&<p role="status" className="text-sm">{ESTADO_ENVIO_PAINEL[ultimo.estado]||ultimo.estado}{ultimo.simulado?' (simulado, sem VNNOX)':''}{ultimo.aviso?': '+ultimo.aviso:'.'}</p>}
  {erro&&<p role="alert" className="text-sm">{erro}</p>}
  {dados.envios.length>0&&<details className="text-sm"><summary className="cursor-pointer underline underline-offset-4">Envios anteriores</summary><ul className="mt-2 space-y-1 text-muted-foreground">{dados.envios.map(e=><li key={e.id}>{new Date(e.criado_em).toLocaleString('pt-PT')} · {e.formato} · {ESTADO_ENVIO_PAINEL[e.estado]||e.estado}{e.simulado?' (simulado)':''}{e.aviso?' · '+e.aviso:''}</li>)}</ul></details>}
 </section>;
}