// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: modal de filtros para decks, turnos, empresas, gênero e ocupação.

const CabinFiltroModal = ({ filterDeck, setFilterDeck, filterTurno, setFilterTurno, filterEmpresa, setFilterEmpresa, filterGenero, setFilterGenero, filterStatus, setFilterStatus, allDecks, empresas, onLimpar, onClose, lang }) => {
  const pt = lang === 'pt';
  const row = {display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,padding:'12px 0',borderBottom:'1px solid var(--cream-2)'};
  const lbl = {fontFamily:'var(--fm)',fontSize:13,color:'var(--ink)'};
  const seg = (on) => ({fontFamily:'var(--fm)',fontSize:11,padding:'5px 11px',borderRadius:6,border:'none',cursor:'pointer',background:on?'var(--surface)':'transparent',color:on?'var(--ink)':'var(--muted)',fontWeight:on?600:400});
  const segWrap = {display:'flex',gap:4,background:'var(--cream-2)',borderRadius:9,padding:3};
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,zIndex:260,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'8vh 16px',overflowY:'auto'}}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:420,background:'var(--cream)',borderRadius:24,padding:'22px 24px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
          <div style={{fontFamily:'var(--fs)',fontSize:20}}>{pt?<>Filtrar <em style={{fontStyle:'italic',color:'var(--accent)'}}>cabines</em></>:<>Filter <em style={{fontStyle:'italic',color:'var(--accent)'}}>cabins</em></>}</div>
          <button className="btn btn-sm" onClick={onClose}>{pt?'fechar':'close'}</button>
        </div>
        <div style={row}>
          <span style={lbl}>Deck</span>
          <select className="select" value={filterDeck} onChange={e=>setFilterDeck(e.target.value)} style={{width:'auto',fontSize:12}}>
            <option value="all">{pt?'Todos':'All'}</option>
            {allDecks.map(d => <option key={d} value={d}>Deck {d}</option>)}
          </select>
        </div>
        <div style={row}>
          <span style={lbl}>{pt?'Turno':'Shift'}</span>
          <select className="select" value={filterTurno} onChange={e=>setFilterTurno(e.target.value)} style={{width:'auto',fontSize:12,maxWidth:180}}>
            <option value="all">{pt?'Todos':'All'}</option>
            {Object.entries(TURNOS).map(([k,v]) => <option key={k} value={k}>{pt?v.label:v.label_en}</option>)}
          </select>
        </div>
        <div style={row}>
          <span style={lbl}>{pt?'Empresa':'Company'}</span>
          <select className="select" value={filterEmpresa} onChange={e=>setFilterEmpresa(e.target.value)} style={{width:'auto',fontSize:12,maxWidth:180}}>
            <option value="all">{pt?'Todas':'All'}</option>
            {empresas.map(x => <option key={x} value={x}>{x}</option>)}
          </select>
        </div>
        <div style={row}>
          <span style={lbl}>{pt?'Gênero':'Gender'}</span>
          <div style={segWrap}>
            <button onClick={()=>setFilterGenero('all')} style={seg(filterGenero==='all')}>{pt?'Todos':'All'}</button>
            <button onClick={()=>setFilterGenero('M')} style={seg(filterGenero==='M')}>M</button>
            <button onClick={()=>setFilterGenero('F')} style={seg(filterGenero==='F')}>♀ F</button>
          </div>
        </div>
        <div style={{...row, borderBottom:'none'}}>
          <span style={lbl}>{pt?'Ocupação':'Occupancy'}</span>
          <div style={segWrap}>
            <button onClick={()=>setFilterStatus('all')} style={seg(filterStatus==='all')}>{pt?'Todas':'All'}</button>
            <button onClick={()=>setFilterStatus('ocupada')} style={seg(filterStatus==='ocupada')}>{pt?'Ocupadas':'Occupied'}</button>
            <button onClick={()=>setFilterStatus('livre')} style={seg(filterStatus==='livre')}>{pt?'Livres':'Free'}</button>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',marginTop:16}}>
          <button className="btn" onClick={onLimpar}>{pt?'Limpar':'Clear'}</button>
          <button className="btn btn-primary" onClick={onClose}>{pt?'Aplicar':'Apply'}</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CabinFiltroModal });