// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: gerenciador de cabines (CRUD simples de número, deck e leitos).

const CabinManager = ({state, setState, lang, toast, onClose, usersById, cabins: realCabins, fetchData}) => {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 820;
  const [editing, setEditing] = useState(null);
  const [draft, setDraft] = useState({num:'', deck:9, tipo:'Single', berthCount:1});

  const startNew = () => {
    setEditing(null);
    setDraft({num:'', deck:9, tipo:'Single', berthCount:1});
  };

  const startEdit = (c) => {
    setEditing(c);
    setDraft({num:c.num, deck:c.deck, tipo:c.tipo, berthCount:c.berths.length});
  };

  const inferTipo = (n) => n===1?'Single' : n===2?'Double' : n===4?'Quad' : `${n}-bed`;

  const token = () => localStorage.getItem('genesis_token');

  const save = async () => {
    if (!draft.num.trim()) { toast.push({icon:'lock', title: lang==='pt'?'Número obrigatório':'Number required'}); return; }
    // CabinManager still uses local state for now — backend doesn't have create/edit cabin routes yet
    setState(s => {
      let cabins = [...s.cabins];
      if (editing) {
        const idx = cabins.findIndex(c => c.num === editing.num);
        if (idx === -1) return s;
        const old = cabins[idx];
        const newCount = Math.max(1, draft.berthCount);
        let berths;
        if (newCount >= old.berths.length) {
          berths = [...old.berths];
          for (let i=old.berths.length; i<newCount; i++) berths.push({id: `${draft.num}-${i+1}`, user:null});
        } else {
          berths = old.berths.slice(0, newCount);
        }
        if (draft.num !== old.num) berths = berths.map((b,i) => ({...b, id: newCount===1 ? draft.num : `${draft.num}-${i+1}`}));
        cabins[idx] = {...old, num:draft.num, deck:draft.deck, tipo:inferTipo(newCount), berths};
        return {...s, cabins};
      } else {
        if (cabins.find(c => c.num === draft.num)) {
          toast.push({icon:'lock', title: lang==='pt'?'Já existe cabine com este número':'Cabin number already exists'});
          return s;
        }
        const n = Math.max(1, draft.berthCount);
        const berths = Array.from({length:n}, (_,i) => ({id: n===1 ? draft.num : `${draft.num}-${i+1}`, user:null}));
        cabins.push({num:draft.num, deck:draft.deck, tipo:inferTipo(n), berths});
        return {...s, cabins};
      }
    });
    toast.push({icon:'check', title: editing ? (lang==='pt'?'Cabine atualizada':'Cabin updated') : (lang==='pt'?'Cabine criada':'Cabin created')});
    startNew();
  };

  const remove = async (c) => {
    const occ = c.berths.filter(b => b.user).length;
    if (occ > 0) {
      if (!confirm(lang==='pt'
        ? `Cabine ${c.num} tem ${occ} ocupante(s). Remover assim mesmo?`
        : `Cabin ${c.num} has ${occ} occupant(s). Remove anyway?`)) return;
    } else if (!confirm(lang==='pt'?`Remover cabine ${c.num}?`:`Remove cabin ${c.num}?`)) return;
    setState(s => {
      const occupants = c.berths.filter(b => b.user).map(b => b.user);
      const cabins = s.cabins.filter(x => x.num !== c.num);
      const users = s.users.map(u => occupants.includes(u.id) ? {...u, status:'embarque_pendente', cab:null} : u);
      return {...s, cabins, users};
    });
    toast.push({icon:'check', title: lang==='pt'?'Cabine removida':'Cabin removed'});
    if (editing && editing.num === c.num) startNew();
  };

  // Usa dados reais da API se disponíveis, senão fallback para state
  const cabinsToShow = useMemo(() => {
    const source = realCabins && realCabins.length > 0
      ? realCabins.map(c => ({
          num: c.number,
          deck: parseInt(c.deck),
          tipo: c.type,
          berths: c.berths_detail.map(b => ({id: b.berth_id, user: b.user_id ? parseInt(b.user_id) : null}))
        }))
      : state.cabins;
    return source;
  }, [realCabins, state.cabins]);

  const grouped = useMemo(() => {
    const g = {};
    cabinsToShow.forEach(c => (g[c.deck] = g[c.deck] || []).push(c));
    return Object.entries(g).sort((a,b)=>+b[0]-+a[0]);
  }, [cabinsToShow]);

  return (
    <div onClick={onClose} style={{
      position:'fixed',inset:0,background:'rgba(31,42,46,0.5)',backdropFilter:'blur(4px)',
      display:'flex',alignItems:'center',justifyContent:'center',zIndex:1000,padding:20
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        width:'100%',maxWidth:920,maxHeight:'90vh',background:'var(--cream)',borderRadius:24,
        display:'grid',gridTemplateColumns: isMobile ? '1fr' : '1fr 320px',overflow: isMobile ? 'auto' : 'hidden',
        animation:'slideIn .3s both'
      }}>
        {/* Left: cabin list — scrollável */}
        <div style={{padding:'26px 28px',overflowY:'auto',borderRight:'1px solid var(--line-soft)',maxHeight:'90vh'}}>
          <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:18}}>
            <div style={{fontFamily:'var(--fs)',fontSize:30,letterSpacing:'-0.6px'}}>
              {lang==='pt'?'Cabines':'Cabins'} <em style={{fontStyle:'italic',color:'var(--accent)'}}>{cabinsToShow.length}</em>
            </div>
            <button className="btn ghost" onClick={onClose}><Icon n="x" size={14}/></button>
          </div>
          {grouped.map(([deck, cabs]) => (
            <div key={deck} style={{marginBottom:18}}>
              <div style={{fontFamily:'var(--fm)',fontSize:10,letterSpacing:1.5,textTransform:'uppercase',color:'var(--muted)',marginBottom:8}}>
                Deck {deck} · {cabs.length} {lang==='pt'?'cabines':'cabins'}
              </div>
              <div style={{display:'grid',gap:6}}>
                {cabs.map(c => {
                  const occ = c.berths.filter(b=>b.user).length;
                  const isEditing = editing && editing.num === c.num;
                  return (
                    <div key={c.num} style={{
                      display:'flex',alignItems:'center',gap:10,padding:'8px 12px',
                      background: isEditing ? 'var(--accent-soft)' : 'rgba(255,255,255,0.4)',
                      border: `1px solid ${isEditing?'var(--accent)':'var(--line-soft)'}`,
                      borderRadius:10, transition:'all .15s'
                    }}>
                      <div style={{fontFamily:'var(--fm)',fontSize:13,fontWeight:500,minWidth:50}}>{c.num}</div>
                      <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',minWidth:60}}>{c.tipo}</div>
                      <div style={{flex:1,fontSize:11,color:'var(--muted)'}}>
                        <div style={{display:'flex',alignItems:'center',gap:6}}>
                          {c.berths.map(b => (
                            <span key={b.id} style={{
                              width:8,height:8,borderRadius:2,
                              background: b.user ? (usersById[b.user]?.genero==='F' ? '#C36474' : 'var(--teal)') : 'var(--cream-2)',
                              border: b.user ? 'none' : '1px solid var(--line)'
                            }}/>
                          ))}
                          <span style={{marginLeft:6}}>{occ}/{c.berths.length}</span>
                        </div>
                      </div>
                      <button className="btn ghost" style={{padding:'4px 8px',fontSize:11}} onClick={()=>startEdit(c)}>
                        <Icon n="edit" size={12}/>
                      </button>
                      <button className="btn ghost" style={{padding:'4px 8px',fontSize:11,color:'var(--accent-2)'}} onClick={()=>remove(c)}>
                        <Icon n="trash" size={12}/>
                      </button>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        {/* Right: form */}
        <div style={{padding:'26px 28px',background:'var(--cream-2)',display:'flex',flexDirection:'column',overflowY:'auto'}}>
          <div style={{marginBottom:22}}>
            <div style={{fontFamily:'var(--fs)',fontSize:32,fontWeight:400,letterSpacing:'-0.6px',lineHeight:1.05}}>
              {editing
                ? <>{lang==='pt'?'Editar ':'Edit '}<em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'cabine.':'cabin.'}</em></>
                : <>{lang==='pt'?'Nova ':'New '}<em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'cabine.':'cabin.'}</em></>
              }
            </div>
            {editing && <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:6}}>{editing.num} · deck {editing.deck}</div>}
          </div>

          <label style={{display:'block',marginBottom:12}}>
            <div style={{fontFamily:'var(--fm)',fontSize:10,letterSpacing:1,textTransform:'uppercase',color:'var(--muted)',marginBottom:4}}>
              {lang==='pt'?'Número':'Number'}
            </div>
            <input className="input" value={draft.num} onChange={e=>setDraft(d=>({...d,num:e.target.value}))} placeholder="901, 814, 619B…" style={{width:'100%'}}/>
          </label>

          <label style={{display:'block',marginBottom:12}}>
            <div style={{fontFamily:'var(--fm)',fontSize:10,letterSpacing:1,textTransform:'uppercase',color:'var(--muted)',marginBottom:4}}>
              Deck
            </div>
            <select className="input" value={draft.deck} onChange={e=>setDraft(d=>({...d,deck:+e.target.value}))} style={{width:'100%'}}>
              {[9,8,7,6].map(d => <option key={d} value={d}>Deck {d}</option>)}
            </select>
          </label>

          <label style={{display:'block',marginBottom:12}}>
            <div style={{fontFamily:'var(--fm)',fontSize:10,letterSpacing:1,textTransform:'uppercase',color:'var(--muted)',marginBottom:4}}>
              {lang==='pt'?'Quantos leitos?':'Bed count'}
            </div>
            <div style={{display:'flex',gap:6,marginBottom:6}}>
              {[1,2,3,4,6].map(n => (
                <button key={n} type="button" onClick={()=>setDraft(d=>({...d,berthCount:n}))}
                  className={draft.berthCount===n?'btn btn-primary':'btn'}
                  style={{flex:1, padding:'8px 0'}}>
                  {n}
                </button>
              ))}
            </div>
            <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)'}}>
              {lang==='pt'?'tipo:':'type:'} <em>{inferTipo(draft.berthCount)}</em>
              {editing && draft.berthCount < editing.berths.length && editing.berths.slice(draft.berthCount).some(b=>b.user) && (
                <div style={{marginTop:6,color:'var(--accent-2)'}}>
                  ⚠ {lang==='pt'?'leitos com pessoas serão liberados':'beds with people will be freed'}
                </div>
              )}
            </div>
          </label>

          <div style={{display:'flex',gap:8,marginTop:8}}>
            {editing && <button className="btn" onClick={startNew}>{lang==='pt'?'Limpar':'Clear'}</button>}
            <button className="btn btn-primary" style={{flex:1}} onClick={save}>
              <Icon n="check" size={14}/>
              {editing ? (lang==='pt'?'Salvar':'Save') : (lang==='pt'?'Criar cabine':'Create cabin')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CabinManager });