// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: card de camarote que agrupa as vagas (berths) relacionadas.
// Visual inspirado no layout por cabine: cabeçalho colorido por tipo e vagas dentro.

const CABIN_TYPE_COLORS = {
  'Single': '#A0301E',
  'Double': '#1A2B4A',
  'Quad':   '#4A6B2F',
};

const CabinCard = ({ cabin, usersById, dragging, dropTarget, setDropTarget, onDrop, onDropOcupada, onTap, onHist, onRemove, onDragUser, compatCheck, intentByBerth, lazyView, lang, isMobile }) => {
  const occ = cabin.berths.filter(v => v.user).length;
  const tot = cabin.berths.length;
  const fem = cabin.berths.filter(v => v.user && usersById[v.user]?.genero === 'F').length;
  const headerBg = CABIN_TYPE_COLORS[cabin.tipo] || 'var(--ink)';

  return (
    <div style={{
      background: 'var(--surface)',
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: 'var(--shadow-sm)',
      border: '1px solid var(--line-soft)',
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}>
      {/* Header colorido por tipo de cabine */}
      <div style={{
        background: headerBg,
        color: '#fff',
        padding: isMobile ? '9px 12px' : '10px 14px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 10
      }}>
        <div style={{ fontFamily: 'var(--fs)', fontSize: isMobile ? 22 : 26, fontWeight: 600, letterSpacing: '-0.6px', lineHeight: 1 }}>
          {cabin.num}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          <span style={{
            fontFamily: 'var(--fm)',
            fontSize: 9,
            letterSpacing: 1,
            textTransform: 'uppercase',
            background: 'rgba(255,255,255,0.2)',
            padding: '3px 8px',
            borderRadius: 6,
            fontWeight: 500
          }}>
            {cabin.tipo}
          </span>
          {fem > 0 && <span style={{ fontSize: 11, color: '#F8DDD0', fontFamily: 'var(--fm)', fontWeight: 500 }}>♀ {fem}</span>}
          <span style={{ fontFamily: 'var(--fm)', fontSize: 10, opacity: 0.85, fontWeight: 500 }}>
            {occ}/{tot}
          </span>
        </div>
      </div>

      {/* Vagas dentro do card */}
      <div style={{
        padding: isMobile ? 10 : 12,
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        flex: 1
      }}>
        {cabin.berths.sort((a,b) => String(a.id).localeCompare(String(b.id), undefined, {numeric: true})).map(v => (
          <BerthCard
            key={v.id}
            vaga={v}
            usersById={usersById}
            dragging={dragging}
            dropTarget={dropTarget}
            setDropTarget={setDropTarget}
            onDrop={onDrop}
            onDropOcupada={onDropOcupada}
            onTap={onTap}
            onHist={onHist}
            onRemove={onRemove}
            onDragUser={onDragUser}
            compatCheck={compatCheck}
            intent={intentByBerth ? intentByBerth[v.id] : null}
            lazyView={lazyView}
            lang={lang}
            compact={true}
          />
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { CabinCard });