// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: card de uma única vaga (berth) com drag, drop, compatibilidade e flip do embarque reativo.
// Modo compacto: quando usado dentro de CabinCard, omite ID da vaga, metadados do camarote e lista de colegas.

const BerthCard = ({vaga, usersById, dragging, dropTarget, setDropTarget, onDrop, onDropOcupada, onTap, onHist, onRemove, onDragUser, compatCheck, intent, lazyView, lang, compact}) => {
  const flipped = !!(lazyView && intent && !dragging);
  const u = vaga.user ? (usersById[vaga.user] || usersById[String(vaga.user)]) : null;
  const isHover = dropTarget === vaga.id && dragging;
  const turno = u?.turno && TURNOS[u.turno];
  const isDraggingThis = dragging === vaga.user;
  const dragUser = dragging ? (usersById[dragging] || usersById[String(dragging)]) : null;

  // Compat check while hovering with a drag (sobre vaga livre)
  const dragCompat = (dragging && !u) ? compatCheck(dragging, vaga.id) : null;

  const blocked = dragCompat && !dragCompat.ok;
  const warn    = dragCompat && dragCompat.ok && dragCompat.signals.some(s => s.type==='warn');
  const good    = dragCompat && dragCompat.ok && dragCompat.signals.every(s => s.type!=='warn');

  // ─── Cores de estado claras ───
  const turnoColor = turno ? turno.color : 'var(--leaf)';
  const bg = u
    ? (isDraggingThis ? 'var(--cream-2)' : 'var(--surface)')
    : blocked ? 'rgba(217,105,75,0.10)'
    : isHover && warn ? 'rgba(232,180,83,0.20)'
    : isHover && good ? 'rgba(123,182,126,0.22)'
    : 'var(--cream-3)';

  const borderColor = isHover
    ? (u ? 'var(--teal)' : blocked ? 'var(--accent)' : warn ? 'var(--sun-2)' : 'var(--leaf-2)')
    : (u ? 'var(--line-soft)' : 'var(--line)');

  // Layout COMPACTO (usado dentro de CabinCard)
  const compacto = (
    <div
      draggable={!!u}
      onDragStart={u ? (e=>{ onDragUser(vaga.user); e.dataTransfer.effectAllowed='move'; }) : undefined}
      onDragEnd={u ? (()=>{ onDragUser(null); setDropTarget(null); }) : undefined}
      onDragEnter={e => { if (dragging && dragging!==vaga.user) e.preventDefault(); }}
      onDragOver={e => { if (dragging && dragging!==vaga.user) { e.preventDefault(); if (dropTarget!==vaga.id) setDropTarget(vaga.id); } }}
      onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDropTarget(null); }}
      onDrop={e => { e.preventDefault(); if (dragging && dragging!==vaga.user) { if (u) { onDropOcupada && onDropOcupada(vaga); } else { onDrop(vaga.id); } } setDropTarget(null); }}
      onClick={() => { onTap && onTap(vaga); }}
      style={{
        background: bg,
        border: u ? `1px solid ${borderColor}` : `2px dashed ${borderColor}`,
        borderLeft: u ? `3px solid ${turnoColor}` : `2px dashed ${borderColor}`,
        borderRadius: 10,
        padding: '8px 10px',
        transition: 'box-shadow .15s ease, background .2s ease, border-color .2s ease',
        boxShadow: isHover ? '0 8px 22px -12px rgba(31,87,85,0.45)' : 'none',
        position:'relative',
        cursor: u ? 'grab' : 'default',
        opacity: isDraggingThis ? 0.4 : 1,
        minHeight: u ? 'auto' : 42,
      }}>

      {/* Badge de embarque reativo (compacto) */}
      {intent && !flipped && (
        <span title={lang==='pt'?`reservada pelo embarque reativo: ${intent.user_nome} assume quando as condições baterem`:`reserved by reactive embark: ${intent.user_nome} takes it when conditions are met`}
          style={{position:'absolute',top:6,right:6,display:'inline-flex',alignItems:'center',justifyContent:'center',width:18,height:18,background:'var(--teal)',color:'var(--cream)',borderRadius:'50%',fontFamily:'var(--fm)',fontSize:10}}>
          🔄
        </span>
      )}

      {/* Indicador de compatibilidade no hover */}
      {isHover && !u && (
        <div style={{
          position:'absolute', top:6, right:6, width:18, height:18, borderRadius:'50%',
          display:'grid', placeItems:'center', fontSize:10,
          background: blocked ? 'rgba(217,105,75,0.2)' : warn ? 'rgba(232,180,83,0.25)' : 'rgba(123,182,126,0.25)',
          color: blocked ? 'var(--accent-2)' : warn ? '#8B6313' : '#2F5C3D'
        }}>
          {blocked ? '✕' : warn ? '!' : '✓'}
        </div>
      )}

      {u ? (
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <Avatar user={u} size="sm"/>
          <div style={{flex:1,minWidth:0, paddingRight: onRemove ? 16 : 0}}>
            <div style={{fontSize:13,fontWeight:500,lineHeight:1.2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',display:'flex',alignItems:'center',gap:5}}>
              {u.nome}
              {u.genero==='F' && <span style={{fontSize:11,color:'#C36474'}} title="feminino">♀</span>}
            </div>
            <div style={{fontSize:10.5,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:1,display:'flex',alignItems:'center',gap:6,flexWrap:'wrap'}}>
              {turno && (
                <span style={{display:'inline-flex',alignItems:'center',gap:3}}>
                  <span style={{width:5,height:5,borderRadius:'50%',background:turno.color}}/>
                  {turno.short}
                </span>
              )}
              <span style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{u.empresa}</span>
            </div>
          </div>
          {onRemove && (
            <button onClick={e=>{e.stopPropagation();onRemove(vaga.user)}}
              title={lang==='pt'?'Remover da cabine':'Remove from cabin'}
              style={{background:'none',border:'none',cursor:'pointer',color:'var(--muted-2)',padding:'0 2px',lineHeight:1,fontSize:12,flexShrink:0,marginLeft:'auto'}}>
              ✕
            </button>
          )}
        </div>
      ) : (
        <div style={{display:'flex',alignItems:'center',gap:8,minHeight:26}}>
          {isHover && dragUser ? (
            <>
              <div style={{
                width:28,height:28,borderRadius:'50%',flexShrink:0,
                background: blocked ? 'rgba(217,105,75,0.2)' : warn ? 'rgba(232,180,83,0.25)' : 'rgba(123,182,126,0.25)',
                display:'grid',placeItems:'center',fontSize:14
              }}>
                {blocked ? '✕' : warn ? '⚠' : '✓'}
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:12.5,fontWeight:500,lineHeight:1.2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
                  {dragUser.nome}
                </div>
                <div style={{fontSize:10,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:1}}>
                  {blocked ? (lang==='pt'?'incompatível':'incompatible') : warn ? (lang==='pt'?'atenção':'attention') : (lang==='pt'?'compatível':'compatible')}
                </div>
              </div>
            </>
          ) : (
            <span style={{fontFamily:'var(--fs)',fontSize:13,fontStyle:'italic',color:'var(--muted-2)'}}>
              {lang==='pt'?'vaga livre':'free berth'}
            </span>
          )}
        </div>
      )}

      {/* Sinais de compatibilidade em hover */}
      {dragCompat && dragCompat.signals.length > 0 && isHover && (
        <div style={{display:'flex',gap:4,flexWrap:'wrap',marginTop:6}}>
          {dragCompat.signals.map((s,i) => (
            <span key={i} style={{
              fontSize:9.5, padding:'2px 6px', borderRadius:6,
              background: s.type==='block' ? 'rgba(217,105,75,0.15)' : s.type==='warn' ? 'rgba(232,180,83,0.2)' : 'rgba(123,182,126,0.2)',
              color: s.type==='block' ? 'var(--accent-2)' : s.type==='warn' ? '#8B6313' : '#2F5C3D',
              fontFamily:'var(--fm)', letterSpacing:0.2,
            }}>{s.label}</span>
          ))}
        </div>
      )}
    </div>
  );

  if (compact) return compacto;

  // Layout COMPLETO (legado / standalone)
  const frente = (
    <div
      draggable={!!u}
      onDragStart={u ? (e=>{ onDragUser(vaga.user); e.dataTransfer.effectAllowed='move'; }) : undefined}
      onDragEnd={u ? (()=>{ onDragUser(null); setDropTarget(null); }) : undefined}
      onDragEnter={e => { if (dragging && dragging!==vaga.user) e.preventDefault(); }}
      onDragOver={e => { if (dragging && dragging!==vaga.user) { e.preventDefault(); if (dropTarget!==vaga.id) setDropTarget(vaga.id); } }}
      onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDropTarget(null); }}
      onDrop={e => { e.preventDefault(); if (dragging && dragging!==vaga.user) { if (u) { onDropOcupada && onDropOcupada(vaga); } else { onDrop(vaga.id); } } setDropTarget(null); }}
      onClick={() => { onTap && onTap(vaga); }}
      style={{
        background: bg,
        border: u ? `1px solid ${borderColor}` : `2.5px dashed ${borderColor}`,
        borderLeft: u ? `4px solid ${turnoColor}` : `2.5px dashed ${borderColor}`,
        borderRadius: 12, padding: '10px 12px',
        transition: 'box-shadow .15s ease, background .2s ease, border-color .2s ease, transform .15s ease',
        transform: isHover ? 'scale(1.015)' : 'none',
        boxShadow: isHover ? '0 14px 34px -16px rgba(31,87,85,0.55)' : (u ? 'var(--shadow-sm)' : 'none'),
        position:'relative', minHeight: 76,
        cursor: u ? 'grab' : 'default',
        opacity: isDraggingThis ? 0.4 : 1,
      }}>
      {/* Indicador de estado / compatibilidade no canto */}
      {isHover && !u ? (
        <div style={{
          position:'absolute', top:11, right:11, width:20, height:20, borderRadius:'50%',
          display:'grid', placeItems:'center', fontSize:12,
          background: blocked ? 'rgba(217,105,75,0.2)' : warn ? 'rgba(232,180,83,0.25)' : 'rgba(123,182,126,0.25)',
          color: blocked ? 'var(--accent-2)' : warn ? '#8B6313' : '#2F5C3D'
        }}>
          {blocked ? '✕' : warn ? '!' : '✓'}
        </div>
      ) : (!u && (
        <div style={{
          position:'absolute', top:11, right:11, width:7, height:7, borderRadius:'50%',
          background: 'var(--line)'
        }}/>
      ))}

      {/* Header: berth id + cabin */}
      <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:7,paddingRight:16}}>
        <div onClick={onHist ? (e)=>{ e.stopPropagation(); onHist(vaga.id); } : undefined} title={onHist ? (lang==='pt'?'histórico da vaga':'berth history') : undefined} style={{fontFamily:'var(--fm)',fontSize:13,fontWeight:500,letterSpacing:0.4,cursor:onHist?'pointer':'inherit',textDecoration:onHist?'underline dotted var(--line)':'none',textUnderlineOffset:3}}>
          {vaga.id}
        </div>
        {intent && !flipped && (
          <span title={lang==='pt'?`reservada pelo embarque reativo: ${intent.user_nome} assume quando as condições baterem`:`reserved by reactive embark: ${intent.user_nome} takes it when conditions are met`}
            style={{position:'absolute',bottom:8,right:9,display:'inline-flex',alignItems:'center',gap:4,background:'var(--teal)',color:'var(--cream)',borderRadius:999,padding:'2px 8px',fontFamily:'var(--fm)',fontSize:9,letterSpacing:0.3,maxWidth:'62%',overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis'}}>
            🔄 → {intent.user_nome || intent.user_id}
          </span>
        )}
        <div style={{display:'flex',alignItems:'center',gap:6}}>
          <div style={{fontFamily:'var(--fm)',fontSize:9.5,letterSpacing:1.3,textTransform:'uppercase',color:'var(--muted)'}}>
            cab {vaga.cabinNum} · {vaga.cabinType}
          </div>
          {u && onRemove && (
            <button onClick={e=>{e.stopPropagation();onRemove(vaga.user)}}
              title={lang==='pt'?'Remover da cabine':'Remove from cabin'}
              style={{background:'none',border:'none',cursor:'pointer',color:'var(--muted-2)',padding:'0 2px',lineHeight:1,fontSize:12}}>
              ✕
            </button>
          )}
        </div>
      </div>

      {/* Body */}
      {u ? (
        <div style={{display:'flex',alignItems:'center',gap:9}}>
          <Avatar user={u} size="sm"/>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:13.5,fontWeight:500,lineHeight:1.2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',display:'flex',alignItems:'center',gap:6}}>
              {u.nome}
              {u.genero==='F' && <span style={{fontSize:12,color:'#C36474'}} title="feminino">♀</span>}
            </div>
            <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2,display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
              {turno && (
                <span style={{display:'inline-flex',alignItems:'center',gap:4}}>
                  <span style={{width:6,height:6,borderRadius:'50%',background:turno.color}}/>
                  {turno.label}
                </span>
              )}
              <span style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{u.empresa}</span>
            </div>
          </div>
        </div>
      ) : (
        <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'flex-start',gap:6,minHeight:42}}>
          {isHover && dragUser ? (
            <div style={{display:'flex',alignItems:'center',gap:10,width:'100%'}}>
              <div style={{
                width:36,height:36,borderRadius:'50%',flexShrink:0,
                background: blocked ? 'rgba(217,105,75,0.2)' : warn ? 'rgba(232,180,83,0.25)' : 'rgba(123,182,126,0.25)',
                display:'grid',placeItems:'center',fontSize:18
              }}>
                {blocked ? '✕' : warn ? '⚠' : '✓'}
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13.5,fontWeight:500,lineHeight:1.2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',display:'flex',alignItems:'center',gap:6}}>
                  {dragUser.nome}
                  {dragUser.genero==='F' && <span style={{fontSize:12,color:'#C36474'}}>♀</span>}
                </div>
                <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:2,display:'flex',alignItems:'center',gap:6,flexWrap:'wrap'}}>
                  <span style={{
                    fontSize:10, padding:'2px 8px', borderRadius:8,
                    background: blocked ? 'rgba(217,105,75,0.15)' : warn ? 'rgba(232,180,83,0.2)' : 'rgba(123,182,126,0.2)',
                    color: blocked ? 'var(--accent-2)' : warn ? '#8B6313' : '#2F5C3D',
                    fontFamily:'var(--fm)', letterSpacing:0.2,
                  }}>
                    {blocked ? (lang==='pt'?'incompatível':'incompatible') : warn ? (lang==='pt'?'atenção':'attention') : (lang==='pt'?'compatível':'compatible')}
                  </span>
                  {dragUser.empresa && <span>{dragUser.empresa}</span>}
                </div>
              </div>
            </div>
          ) : (
            <div style={{fontFamily:'var(--fs)',fontSize:15,fontStyle:'italic',color:'var(--muted)'}}>
              {lang==='pt'?'vaga livre':'free berth'}
            </div>
          )}
          {dragCompat && dragCompat.signals.length > 0 && isHover && (
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {dragCompat.signals.map((s,i) => (
                <span key={i} style={{
                  fontSize:10, padding:'2px 8px', borderRadius:8,
                  background: s.type==='block' ? 'rgba(217,105,75,0.15)' : s.type==='warn' ? 'rgba(232,180,83,0.2)' : 'rgba(123,182,126,0.2)',
                  color: s.type==='block' ? 'var(--accent-2)' : s.type==='warn' ? '#8B6313' : '#2F5C3D',
                  fontFamily:'var(--fm)', letterSpacing:0.2,
                }}>{s.label}</span>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Cabin-mates strip */}
      {(() => {
        const others = vaga.cabinBerths.filter(b => b.id !== vaga.id && b.user).map(b => usersById[b.user]).filter(Boolean);
        const otherFem = others.filter(o => o.genero === 'F').length;
        return others.length > 0 ? (
          <div style={{display:'flex',alignItems:'center',gap:6,marginTop:7,paddingTop:7,borderTop:'1px dashed var(--line-soft)'}}>
            <span style={{fontFamily:'var(--fm)',fontSize:9.5,letterSpacing:1,textTransform:'uppercase',color:'var(--muted-2)'}}>
              {lang==='pt'?'colegas:':'mates:'}
            </span>
            <div style={{display:'flex',gap:-4,marginLeft:2}}>
              {others.slice(0,4).map((o,i) => (
                <div key={o.id} style={{marginLeft:i?-6:0,outline:'2px solid var(--cream)',borderRadius:'50%',display:'inline-block'}} title={`${o.nome} · ${o.turno||''}`}>
                  <Avatar user={o} size="xs"/>
                </div>
              ))}
              {others.length > 4 && <span style={{fontFamily:'var(--fm)',fontSize:10,color:'var(--muted)',marginLeft:6}}>+{others.length-4}</span>}
            </div>
            {otherFem > 0 && <span style={{fontSize:11,color:'#C36474',marginLeft:'auto'}}>♀ {otherFem}</span>}
          </div>
        ) : null;
      })()}
    </div>
  );

  if (!intent) return frente;

  // Verso: quem vai assumir a vaga pelo lazy embark + o que falta pra condição bater
  const aBordo = intent.manifesto_status === 'a_bordo';
  const ocupada = intent.vaga_ocupada_por != null && String(intent.vaga_ocupada_por) !== String(intent.user_id);
  const falta = !aBordo
    ? (lang==='pt' ? `aguardando ${intent.user_nome} embarcar` : `waiting for ${intent.user_nome} to board`)
    : ocupada
      ? (lang==='pt' ? `aguardando ${intent.ocupante_nome||'o ocupante'} desembarcar` : `waiting for ${intent.ocupante_nome||'occupant'} to leave`)
      : (lang==='pt' ? 'pronto — assume no próximo movimento' : 'ready — assumes on next move');
  const verso = (
    <div style={{
      background:'linear-gradient(135deg, var(--teal) 0%, #17403E 100%)', color:'var(--cream)',
      border:'1px solid var(--teal)', borderRadius:12, padding:'10px 12px', minHeight:76,
      display:'flex', flexDirection:'column', boxShadow:'var(--shadow-sm)', height:'100%', boxSizing:'border-box'
    }}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:7}}>
        <div style={{fontFamily:'var(--fm)',fontSize:13,fontWeight:500,letterSpacing:0.4}}>{vaga.id}</div>
        <div style={{fontFamily:'var(--fm)',fontSize:8.5,letterSpacing:1.2,textTransform:'uppercase',opacity:0.85,display:'flex',alignItems:'center',gap:4}}>🔄 {lang==='pt'?'reativo':'reactive'}</div>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:9,flex:1}}>
        <div style={{width:34,height:34,borderRadius:'50%',flexShrink:0,background:'rgba(251,247,240,0.18)',display:'grid',placeItems:'center',fontFamily:'var(--fs)',fontSize:15}}>→</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:13.5,fontWeight:500,lineHeight:1.2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{intent.user_nome}</div>
          <div style={{fontSize:10.5,opacity:0.8,fontFamily:'var(--fm)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{intent.empresa||''}</div>
        </div>
      </div>
      <div style={{fontFamily:'var(--fm)',fontSize:9,opacity:0.85,marginTop:6,fontStyle:'italic',lineHeight:1.3}}>{falta}</div>
    </div>
  );

  return (
    <div style={{perspective:1200}}>
      <div style={{position:'relative', transformStyle:'preserve-3d', transition:'transform .7s ease', transform: flipped?'rotateY(180deg)':'rotateY(0deg)'}}>
        <div style={{backfaceVisibility:'hidden', WebkitBackfaceVisibility:'hidden'}}>{frente}</div>
        <div style={{position:'absolute', inset:0, backfaceVisibility:'hidden', WebkitBackfaceVisibility:'hidden', transform:'rotateY(180deg)'}}>{verso}</div>
      </div>
    </div>
  );
};

Object.assign(window, { BerthCard });