// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: modais auxiliares (troca, histórico e importação de pessoas).

// ─── Troca em 1 passo: soltou alguém numa vaga ocupada ───
const SwapModal = ({ nomeEntra, nomeSai, vaga, vagaAntiga, modoPlan, onTrocar, onSair, onClose, lang }) => {
  const pt = lang === 'pt';
  const opc = (icone, titulo, desc, cor, onClick) => (
    <div onClick={onClick} style={{cursor:'pointer',background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:`3px solid ${cor}`,borderRadius:14,padding:'14px 16px'}}
      onMouseEnter={e=>e.currentTarget.style.boxShadow='var(--shadow-md)'} onMouseLeave={e=>e.currentTarget.style.boxShadow='none'}>
      <div style={{display:'flex',alignItems:'center',gap:9,marginBottom:5}}>
        <span style={{fontSize:18}}>{icone}</span>
        <span style={{fontFamily:'var(--fs)',fontSize:16.5}}>{titulo}</span>
      </div>
      <div style={{fontFamily:'var(--f)',fontSize:12.5,color:'var(--muted)',lineHeight:1.45}}>{desc}</div>
    </div>
  );
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(31,42,46,0.5)',backdropFilter:'blur(5px)',zIndex:8200,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:420,background:'var(--cream)',borderRadius:20,padding:'20px 22px',boxShadow:'var(--shadow-lg)'}}>
        <div style={{fontFamily:'var(--fs)',fontSize:19,marginBottom:4}}>{pt?<>Vaga <em style={{fontStyle:'italic',color:'var(--accent)'}}>{vaga}</em> ocupada</>:<>Berth <em style={{fontStyle:'italic',color:'var(--accent)'}}>{vaga}</em> is taken</>}</div>
        <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)',marginBottom:14}}>{nomeSai} {pt?'está nessa vaga. O que fazemos?':'is in this berth. What do we do?'}</div>
        <div style={{display:'grid',gap:9}}>
          {opc('🔀', pt?`Trocar ${nomeEntra} ↔ ${nomeSai}`:`Swap ${nomeEntra} ↔ ${nomeSai}`,
            vagaAntiga
              ? (pt?`${nomeEntra} assume a ${vaga}; ${nomeSai} vai pra ${vagaAntiga}.`:`${nomeEntra} takes ${vaga}; ${nomeSai} goes to ${vagaAntiga}.`)
              : (pt?`${nomeEntra} assume a ${vaga}; ${nomeSai} fica sem vaga (${modoPlan?'volta pro grupo do plano':'sem cabine'}).`:`${nomeEntra} takes ${vaga}; ${nomeSai} ends up unassigned.`),
            'var(--teal)', onTrocar)}
          {opc('📤', pt?`${nomeSai} sai da vaga`:`${nomeSai} leaves the berth`,
            pt?`${nomeEntra} assume a ${vaga}; ${nomeSai} fica sem vaga ${modoPlan?'(volta pro grupo do plano)':'(sem cabine, aparece na lateral)'}.`:`${nomeEntra} takes ${vaga}; ${nomeSai} becomes unassigned.`,
            'var(--sun)', onSair)}
        </div>
        <div style={{display:'flex',justifyContent:'flex-end',marginTop:12}}>
          <button className="btn btn-sm" onClick={onClose}>{pt?'cancelar':'cancel'}</button>
        </div>
      </div>
    </div>
  );
};

// ─── Histórico da vaga: quem passou por ela (rastreabilidade) ───
const BerthHistModal = ({ berthId, token, onClose, lang }) => {
  const pt = lang === 'pt';
  const [rows, setRows] = useState(null);
  useEffect(() => {
    fetch(`/api/cabins/berth-history/${encodeURIComponent(berthId)}`, { headers: { 'Authorization': `Bearer ${token()}` } })
      .then(r => r.ok ? r.json() : []).then(setRows).catch(() => setRows([]));
  }, [berthId]);
  const fmt = (iso) => { const d = new Date(iso); return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; };
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(31,42,46,0.5)',backdropFilter:'blur(5px)',zIndex:8200,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:360,background:'var(--cream)',borderRadius:20,padding:'20px 22px',boxShadow:'var(--shadow-lg)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
          <div style={{fontFamily:'var(--fs)',fontSize:19}}>{pt?'Histórico da':'History of'} <em style={{fontStyle:'italic',color:'var(--accent)'}}>{berthId}</em></div>
          <button className="btn btn-sm" onClick={onClose}>{pt?'fechar':'close'}</button>
        </div>
        {rows === null ? <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)'}}>carregando…</div> :
         rows.length === 0 ? <div className="empty" style={{padding:16}}>{pt?'sem movimentações registradas':'no recorded moves'}</div> : (
          <div style={{display:'grid',gap:6}}>
            {rows.map((r, i) => (
              <div key={i} style={{display:'flex',alignItems:'baseline',gap:8,fontFamily:'var(--fm)',fontSize:12,background:i===0?'var(--surface)':'transparent',border:i===0?'1px solid var(--line-soft)':'none',borderRadius:9,padding:'7px 10px'}}>
                <span style={{fontWeight:600}}>{r.nome || `ID ${r.user_id}`}</span>
                <span style={{color:'var(--muted)',marginLeft:'auto',whiteSpace:'nowrap'}}>{fmt(r.criado_em)}</span>
                {i===0 && <span style={{fontSize:9.5,color:'var(--teal)',textTransform:'uppercase',letterSpacing:0.8}}>{pt?'atual':'latest'}</span>}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

const ImportPeopleModal = ({ users, jaNoPlano, onImport, onClose, lang, isMobile }) => {
  const pt = lang === 'pt';
  const [fEmpresa, setFEmpresa] = useState('');
  const [fRole, setFRole] = useState('');
  const [fTurno, setFTurno] = useState('');
  const [busca, setBusca] = useState('');
  const [sel, setSel] = useState(() => new Set());
  const candidatos = users.filter(u => u.role !== 'guest' && u.role !== 'admin' && !jaNoPlano.has(u.id));
  const empresas = [...new Set(candidatos.map(u => u.empresa).filter(Boolean))].sort();
  const turnos = [...new Set(candidatos.map(u => u.turno).filter(Boolean))].sort();
  const roles = [...new Set(candidatos.map(u => u.role).filter(Boolean))].sort();
  const filtrados = candidatos.filter(u =>
    (!fEmpresa || u.empresa === fEmpresa) &&
    (!fRole || u.role === fRole) &&
    (!fTurno || u.turno === fTurno) &&
    (!busca || (u.nome||'').toLowerCase().includes(busca.toLowerCase()) || (u.empresa||'').toLowerCase().includes(busca.toLowerCase()))
  );
  const toggle = (id) => setSel(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
  const addFiltrados = () => setSel(prev => { const s = new Set(prev); filtrados.forEach(u => s.add(u.id)); return s; });
  const selCol = { flex:'1 1 140px', minWidth:0, fontSize:13 };
  return (
    <div 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:'6vh 16px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:660,maxHeight:'86vh',display:'flex',flexDirection:'column',background:'var(--cream)',borderRadius:24,padding:'22px 24px',boxSizing:'border-box'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6,flexShrink:0}}>
          <div style={{fontFamily:'var(--fs)',fontSize:22}}>{pt?<>Importar <em style={{fontStyle:'italic',color:'var(--accent)'}}>pessoas</em></>:<>Import <em style={{fontStyle:'italic',color:'var(--accent)'}}>people</em></>}</div>
          <button className="btn btn-sm" onClick={onClose}>{pt?'fechar':'close'}</button>
        </div>
        <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',marginBottom:14,flexShrink:0}}>{pt?'Puxa do cadastro pro pool "a acomodar" do plano.':'Pulls from the registry into the plan\u2019s "to place" pool.'}</div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:10,flexShrink:0}}>
          <select className="select" value={fEmpresa} onChange={e=>setFEmpresa(e.target.value)} style={selCol}>
            <option value="">{pt?'Todas as empresas':'All companies'}</option>
            {empresas.map(x => <option key={x} value={x}>{x}</option>)}
          </select>
          <select className="select" value={fRole} onChange={e=>setFRole(e.target.value)} style={selCol}>
            <option value="">{pt?'Todas as funções':'All roles'}</option>
            {roles.map(x => <option key={x} value={x}>{_cabRoleLabel(x, pt)}</option>)}
          </select>
          <select className="select" value={fTurno} onChange={e=>setFTurno(e.target.value)} style={selCol}>
            <option value="">{pt?'Todos os turnos':'All shifts'}</option>
            {turnos.map(x => <option key={x} value={x}>{x}</option>)}
          </select>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:12,flexWrap:'wrap',flexShrink:0}}>
          <input className="input" placeholder={pt?'buscar nome/empresa…':'search name/company…'} value={busca} onChange={e=>setBusca(e.target.value)} style={{flex:'1 1 160px',boxSizing:'border-box'}}/>
          <button className="btn btn-sm" onClick={addFiltrados}>{pt?`Selecionar todos (${filtrados.length})`:`Select all (${filtrados.length})`}</button>
          {sel.size > 0 && <button className="btn btn-sm" onClick={()=>setSel(new Set())}>{pt?'limpar':'clear'}</button>}
        </div>
        <div style={{flex:1,overflowY:'auto',minHeight:0,border:'1px solid var(--line-soft)',borderRadius:14,background:'var(--surface)'}}>
          {filtrados.length === 0
            ? <div style={{padding:'40px 20px',textAlign:'center',fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)'}}>{pt?'ninguém disponível com esses filtros.':'nobody available with these filters.'}</div>
            : filtrados.map((u,i) => {
              const on = sel.has(u.id);
              return (
                <div key={u.id} onClick={()=>toggle(u.id)} style={{display:'flex',alignItems:'center',gap:12,padding:'10px 14px',cursor:'pointer',borderTop:i===0?'none':'1px solid var(--line-soft)',background:on?'rgba(217,105,75,0.06)':'transparent'}}>
                  <div style={{width:20,height:20,borderRadius:6,flexShrink:0,border:'2px solid '+(on?'var(--accent)':'var(--line)'),background:on?'var(--accent)':'transparent',display:'grid',placeItems:'center',color:'#fff',fontSize:12}}>{on?'✓':''}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:14,fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{u.nome}</div>
                    <div style={{fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:1}}>{u.empresa||'—'} · {_cabRoleLabel(u.role, pt)}{u.turno?` · ${u.turno}`:''}</div>
                  </div>
                </div>
              );
            })}
        </div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:16,flexShrink:0}}>
          <span style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)'}}>{sel.size} {pt?'selecionado(s)':'selected'}</span>
          <div style={{display:'flex',gap:8}}>
            <button className="btn" onClick={onClose}>{pt?'Cancelar':'Cancel'}</button>
            <button className="btn-tidal" disabled={sel.size===0} onClick={()=>onImport([...sel])}>{pt?`Importar ${sel.size}`:`Import ${sel.size}`}</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SwapModal, BerthHistModal, ImportPeopleModal });