// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: banner do embarque reativo (lazy embark) com pendências e ações.

const LazyBanner = ({ intents, lang, onResolver, onDesarmar, onVerCards, lazyView, resolvendo }) => {
  const pt = lang === 'pt';
  const [aberto, setAberto] = useState(false);
  if (!intents || !intents.length) return null;

  const ocupanteTemIntent = (it) => {
    if (!it.vaga_ocupada_por) return false;
    return intents.some(i => String(i.user_id) === String(it.vaga_ocupada_por) && i.status === 'pendente');
  };

  const motivo = (it) => {
    const aBordo = it.manifesto_status === 'a_bordo';
    const ocupada = it.vaga_ocupada_por != null && String(it.vaga_ocupada_por) !== String(it.user_id);
    const occTemIntent = ocupanteTemIntent(it);
    if (!aBordo && ocupada) return { txt: pt ? `aguardando ${it.user_nome} embarcar e ${it.ocupante_nome || 'o ocupante'} liberar a vaga` : `waiting for ${it.user_nome} to board and ${it.ocupante_nome || 'occupant'} to free the berth`, pronto: false, bloqueio: false };
    if (!aBordo) return { txt: pt ? `aguardando ${it.user_nome} embarcar` : `waiting for ${it.user_nome} to board`, pronto: false, bloqueio: false };
    if (ocupada && !occTemIntent) return { txt: pt ? `vaga ocupada por ${it.ocupante_nome || 'outra pessoa'} — mova-o manualmente ou crie uma intenção` : `berth held by ${it.ocupante_nome || 'another person'} — move them manually or create an intent`, pronto: false, bloqueio: true };
    if (ocupada) return { txt: pt ? `aguardando a vaga liberar (ocupada por ${it.ocupante_nome || '—'})` : `waiting for the berth (held by ${it.ocupante_nome || '—'})`, pronto: false, bloqueio: false };
    return { txt: pt ? 'pronta — toque em resolver' : 'ready — tap resolve', pronto: true, bloqueio: false };
  };
  const prontas = intents.filter(it => motivo(it).pronto).length;
  const bloqueadas = intents.filter(it => motivo(it).bloqueio).length;
  return (
    <div style={{marginBottom:16,background:'linear-gradient(135deg, var(--teal) 0%, #17403E 100%)',color:'var(--cream)',borderRadius:14,boxShadow:'var(--shadow-sm)',overflow:'hidden'}}>
      <div onClick={()=>setAberto(v=>!v)} style={{display:'flex',alignItems:'center',gap:10,padding:'11px 16px',cursor:'pointer',flexWrap:'wrap'}}>
        <span style={{fontSize:15}}>🔄</span>
        <span style={{fontFamily:'var(--fm)',fontSize:12.5,fontWeight:600}}>
          {pt ? 'Aplicar conforme embarcam' : 'Apply as they board'} · {intents.length} {pt ? (intents.length===1?'pendente':'pendentes') : 'pending'}
          {prontas > 0 && <span style={{marginLeft:8,background:'var(--sun)',color:'#1F1A14',borderRadius:999,padding:'2px 9px',fontSize:10.5}}>{prontas} {pt?'pronta(s)':'ready'}</span>}
          {bloqueadas > 0 && <span style={{marginLeft:8,background:'var(--accent)',color:'#fff',borderRadius:999,padding:'2px 9px',fontSize:10.5}}>{bloqueadas} {pt?'bloqueada(s)':'blocked'}</span>}
        </span>
        {intents[0] && intents[0].plano_nome && <span style={{fontFamily:'var(--fm)',fontSize:10.5,opacity:0.75}}>· {pt?'plano':'plan'} “{intents[0].plano_nome}”</span>}
        <span style={{marginLeft:'auto',fontFamily:'var(--fm)',fontSize:10.5,opacity:0.8}}>{aberto ? (pt?'▴ recolher':'▴ collapse') : (pt?'▾ detalhes':'▾ details')}</span>
      </div>
      {aberto && (
        <div style={{padding:'0 16px 13px'}}>
          <div style={{display:'grid',gap:5,marginBottom:11}}>
            {intents.map(it => { const m = motivo(it); return (
              <div key={it.id} style={{display:'flex',alignItems:'baseline',gap:8,fontFamily:'var(--fm)',fontSize:11.5,background:'rgba(251,247,240,0.09)',borderRadius:9,padding:'7px 11px', borderLeft: m.bloqueio ? '3px solid var(--accent)' : '3px solid transparent'}}>
                <span style={{width:7,height:7,borderRadius:'50%',background:m.pronto?'var(--sun)':(m.bloqueio?'var(--accent)':'rgba(251,247,240,0.45)'),flexShrink:0,alignSelf:'center'}}/>
                <span style={{fontWeight:600,whiteSpace:'nowrap'}}>{it.user_nome || `ID ${it.user_id}`} → {it.berth_id}</span>
                <span style={{opacity:0.8,minWidth:0}}>{m.txt}</span>
              </div>
            ); })}
          </div>
          <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
            <button onClick={e=>{e.stopPropagation();onResolver();}} disabled={resolvendo} style={{border:'none',borderRadius:9,padding:'7px 14px',cursor:'pointer',fontFamily:'var(--fm)',fontSize:11.5,fontWeight:600,background:'var(--sun)',color:'#1F1A14',opacity:resolvendo?0.6:1}}>{resolvendo ? '…' : (pt?'▶ resolver agora':'▶ resolve now')}</button>
            <button onClick={e=>{e.stopPropagation();onVerCards();}} style={{border:'1px solid rgba(251,247,240,0.4)',borderRadius:9,padding:'7px 14px',cursor:'pointer',fontFamily:'var(--fm)',fontSize:11.5,background:lazyView?'var(--cream)':'transparent',color:lazyView?'var(--teal)':'var(--cream)'}}>{pt?'ver nos cards':'show on cards'}</button>
            <button onClick={e=>{e.stopPropagation();onDesarmar();}} style={{border:'1px solid rgba(251,247,240,0.4)',borderRadius:9,padding:'7px 14px',cursor:'pointer',fontFamily:'var(--fm)',fontSize:11.5,background:'transparent',color:'var(--cream)',marginLeft:'auto'}}>{pt?'desarmar':'disarm'}</button>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { LazyBanner });