// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: planta esquemática do navio (corte longitudinal) com decks e cabines.

const ShipPlan = ({plan, usersById, filterDeck, setFilterDeck, onOpenFilter, filtroAtivo, lang}) => {
  const [hoveredCabin, setHoveredCabin] = useState(null);
  const isMobile = useMobile();

  return (
    <div style={{
      background:'linear-gradient(180deg, #1F2A2E 0%, #2A363A 100%)',
      borderRadius:24, padding:'22px 26px 18px', marginBottom:24,
      color:'#F5EFE3', position:'relative', overflow:'hidden',
    }}>
      {/* eyebrow */}
      <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom: isMobile ? 12 : 16,flexWrap:'wrap',gap: isMobile ? 10 : 8}}>
        <div>
          <div style={{fontFamily:'var(--fm)',fontSize: isMobile ? 9 : 10,letterSpacing:2,textTransform:'uppercase',color:'rgba(245,239,227,0.5)'}}>
            {lang==='pt'?'plantinha · Genesis I':'ship plan · Genesis I'}
          </div>
          <div style={{fontFamily:'var(--fs)',fontSize: isMobile ? 20 : 24,letterSpacing:'-0.4px',marginTop:2}}>
            {lang==='pt'?'corte longitudinal':'longitudinal section'} <em style={{fontStyle:'italic',color:'#E8B453'}}>•</em>
            {!isMobile && (
              <span style={{fontFamily:'var(--fm)',fontSize:11,letterSpacing:1.5,textTransform:'uppercase',color:'rgba(245,239,227,0.5)',marginLeft:10}}>
                {lang==='pt'?'clique num deck para filtrar':'click a deck to filter'}
              </span>
            )}
          </div>
        </div>
        {/* legend */}
        <div style={{display:'flex',gap: isMobile ? 10 : 14,fontFamily:'var(--fm)',fontSize: isMobile ? 9.5 : 10.5,letterSpacing:0.5,alignItems:'center',flexWrap:'wrap'}}>
          <LegendDot c="#7BB67E" l={isMobile ? '' : (lang==='pt'?'ocupada':'occupied')}/>
          <LegendDot c="#E8B453" l={isMobile ? '' : (lang==='pt'?'parcial':'partial')}/>
          <LegendDot c="rgba(245,239,227,0.18)" l={isMobile ? '' : (lang==='pt'?'livre':'free')} ring/>
          <LegendDot c="#C36474" l={isMobile ? '♀' : '♀'}/>
        </div>
      </div>

      {onOpenFilter && (
        <div style={{marginBottom:14}}>
          <button onClick={onOpenFilter} style={{position:'relative',display:'inline-flex',alignItems:'center',gap:7,padding:'8px 15px',borderRadius:10,cursor:'pointer',fontFamily:'var(--fm)',fontSize:12,fontWeight:600,color:'var(--cream)',background:'rgba(251,247,240,0.1)',border:'1px solid rgba(251,247,240,0.25)'}}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--cream)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>
            {lang==='pt'?'Filtrar cabines':'Filter cabins'}
            {filtroAtivo && <span style={{position:'absolute',top:-3,right:-3,width:10,height:10,borderRadius:'50%',background:'var(--sun)',border:'2px solid #17403E'}}/>}
          </button>
        </div>
      )}

      {/* Hull SVG outline + decks */}
      <div style={{position:'relative'}}>
        {/* Vessel silhouette behind the deck stack */}
        <svg viewBox="0 0 1200 320" style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none',opacity:0.18}} preserveAspectRatio="none">
          <defs>
            <linearGradient id="hullG" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#F5EFE3" stopOpacity="0.4"/>
              <stop offset="1" stopColor="#F5EFE3" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {/* Bridge tower (top right-ish) */}
          <path d="M 950 30 L 1050 30 L 1060 60 L 940 60 Z" fill="#F5EFE3" opacity="0.3"/>
          <line x1="1000" y1="0" x2="1000" y2="30" stroke="#F5EFE3" strokeWidth="2" opacity="0.4"/>
          {/* Hull */}
          <path d="M 30 270 Q 80 285 200 290 L 1100 290 Q 1160 285 1170 250 L 1175 240 L 30 240 Z" fill="url(#hullG)" stroke="#F5EFE3" strokeWidth="1.5" strokeOpacity="0.5"/>
          {/* Waterline */}
          <line x1="0" y1="290" x2="1200" y2="290" stroke="#5C8AB8" strokeWidth="1" strokeDasharray="3,4" opacity="0.6"/>
        </svg>

        {/* Deck stack */}
        <div style={{display:'flex',flexDirection:'column',gap: isMobile ? 8 : 6,position:'relative',zIndex:1}}>
          {plan.map(d => {
            const isAccom = !!d.cabins;
            const occ = isAccom ? d.cabins.reduce((s,c)=>s+c.berths.filter(b=>b.user).length,0) : 0;
            const tot = isAccom ? d.cabins.reduce((s,c)=>s+c.berths.length,0) : 0;
            const isFilter = filterDeck === String(d.deck);
            const isAll = filterDeck === 'all';
            const dim = !isAll && !isFilter;

            return (
              <div key={d.deck}
                onClick={() => isAccom && setFilterDeck(isFilter ? 'all' : String(d.deck))}
                style={{
                  display:'grid', gridTemplateColumns: isMobile ? '46px 1fr auto' : '52px 1fr 110px', gap: isMobile ? 10 : 14, alignItems:'center',
                  padding: isMobile ? '12px 10px' : '8px 12px',
                  background: isFilter ? 'rgba(232,180,83,0.12)' : 'rgba(245,239,227,0.04)',
                  border:`1px solid ${isFilter?'rgba(232,180,83,0.45)':'rgba(245,239,227,0.08)'}`,
                  borderRadius:10,
                  cursor: isAccom ? 'pointer' : 'default',
                  opacity: dim ? 0.45 : 1,
                  transition:'all .2s',
                  minHeight: isMobile ? 50 : 'auto',
                }}>
                {/* Deck label */}
                <div style={{textAlign:'right'}}>
                  <div style={{fontFamily:'var(--fs)',fontSize: isMobile ? 18 : 22,fontWeight:500,lineHeight:1,color:'#F5EFE3'}}>D{d.deck}</div>
                  <div style={{fontFamily:'var(--fm)',fontSize: isMobile ? 7.5 : 8.5,letterSpacing:1.2,textTransform:'uppercase',color:'rgba(245,239,227,0.5)',marginTop:2}}>
                      {lang==='pt'?d.label:d.label_en}
                  </div>
                </div>
                {/* Cabins row OR zones row */}
                <div style={{display:'flex',gap: isMobile ? 5 : 4,alignItems:'center',flexWrap:'wrap',minHeight: isMobile ? 36 : 32}}>
                  {isAccom ? d.cabins.map(c => (
                    <CabinCell key={c.num} cabin={c} usersById={usersById}
                      hovered={hoveredCabin===c.num}
                      onHover={()=>setHoveredCabin(c.num)}
                      onLeave={()=>setHoveredCabin(null)}/>
                  )) : d.zones.map((z,i) => (
                    <div key={i} style={{
                      padding: isMobile ? '7px 12px' : '5px 11px', borderRadius:6,
                      background:'rgba(245,239,227,0.06)',
                      border:'1px dashed rgba(245,239,227,0.18)',
                      fontFamily:'var(--fm)', fontSize: isMobile ? 11 : 10.5, letterSpacing:0.4,
                      color:'rgba(245,239,227,0.7)',
                      display:'inline-flex',alignItems:'center',gap:6,
                    }}>
                      <Icon n={z.icon} size={isMobile ? 13 : 11}/>{z.label}
                    </div>
                  ))}
                </div>
                {/* Occupancy + clear filter */}
                <div style={{textAlign:'right',fontFamily:'var(--fm)',fontSize:10.5,color:'rgba(245,239,227,0.6)',display:'flex',flexDirection:'column',alignItems:'flex-end',gap:4}}>
                  {isAccom ? (
                    <>
                      <div style={{fontFamily:'var(--fs)',fontSize: isMobile ? 16 : 18,fontWeight:500,color:'#F5EFE3',lineHeight:1}}>{occ}<span style={{fontSize:11,color:'rgba(245,239,227,0.4)'}}>/{tot}</span></div>
                      <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',marginTop:2}}>{lang==='pt'?'ocupadas':'occupied'}</div>
                    </>
                  ) : (
                    <span style={{fontStyle:'italic',fontFamily:'var(--fs)',color:'rgba(245,239,227,0.4)'}}>{lang==='pt'?'comum':'common'}</span>
                  )}
                  {isFilter && (
                    <button
                      onClick={e => { e.stopPropagation(); setFilterDeck('all'); }}
                      title={lang==='pt'?'limpar filtro de deck':'clear deck filter'}
                      style={{
                        marginTop:2, padding:'2px 7px', borderRadius:20, border:'1px solid rgba(245,239,227,0.3)',
                        background:'rgba(245,239,227,0.1)', color:'#F5EFE3', fontFamily:'var(--fm)', fontSize:9,
                        cursor:'pointer', lineHeight:1
                      }}>
                      ✕
                    </button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Hovered cabin tooltip */}
        {hoveredCabin && (() => {
          const cabin = plan.flatMap(d=>d.cabins||[]).find(c=>c.num===hoveredCabin);
          if (!cabin) return null;
          const occs = cabin.berths.map(b => b.user ? usersById[b.user] : null);
          return (
            <div style={{
              position:'absolute', top:8, right:120,
              background:'#F5EFE3', color:'#1F2A2E',
              padding:'10px 14px', borderRadius:12, boxShadow:'0 10px 30px rgba(0,0,0,0.4)',
              minWidth:200, pointerEvents:'none', zIndex:10,
              border:'1px solid rgba(31,42,46,0.1)',
            }}>
              <div style={{fontFamily:'var(--fs)',fontSize:18,fontWeight:500,letterSpacing:'-0.2px'}}>
                Cab {cabin.num} <em style={{fontStyle:'italic',color:'var(--muted)',fontSize:13,fontWeight:400}}>{cabin.tipo}</em>
              </div>
              <div style={{marginTop:6,display:'flex',flexDirection:'column',gap:3}}>
                {cabin.berths.map(b => {
                  const u = b.user ? usersById[b.user] : null;
                  const t = u?.turno && TURNOS[u.turno];
                  return (
                    <div key={b.id} style={{display:'flex',alignItems:'center',gap:6,fontSize:11.5,fontFamily:'var(--fm)'}}>
                      <span style={{color:'var(--muted)',fontSize:10}}>{b.id}</span>
                      <span style={{flex:1,color: u?'inherit':'var(--muted-2)',fontStyle: u?'normal':'italic'}}>
                        {u ? u.nome : (lang==='pt'?'livre':'free')}
                      </span>
                      {u?.genero==='F' && <span style={{color:'#C36474'}}>♀</span>}
                      {t && <span style={{width:6,height:6,borderRadius:'50%',background:t.color}}/>}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })()}
      </div>
    </div>
  );
};

Object.assign(window, { ShipPlan });