// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Permissões — gestão de perfis (RBAC): matriz módulo × ação, grupos e contagem de pessoas

const PermMatriz = ({catalogo, selecionadas, onToggle}) => (
  <div style={{display:'grid',gap:10}}>
    {Object.entries(catalogo).map(([mod, info]) => (
      <div key={mod} style={{border:'1px solid var(--cream-3)',borderRadius:12,padding:'10px 13px',background:'var(--cream)'}}>
        <div style={{fontFamily:'var(--fm)',fontSize:10,letterSpacing:1,textTransform:'uppercase',color:'var(--teal)',fontWeight:700,marginBottom:7}}>{info.nome}</div>
        <div style={{display:'grid',gap:5}}>
          {Object.entries(info.acoes).map(([acao, desc]) => {
            const chave = `${mod}.${acao}`;
            const on = selecionadas.has(chave);
            return (
              <label key={chave} style={{display:'flex',alignItems:'center',gap:8,padding:'6px 9px',borderRadius:9,cursor:'pointer',
                border:'1px solid '+(on?'var(--teal)':'var(--line-soft)'),background:on?'rgba(31,87,85,0.07)':'var(--surface)'}}>
                <input type="checkbox" checked={on} onChange={()=>onToggle(chave)}/>
                <span style={{fontFamily:'var(--fm)',fontSize:11,fontWeight:600,flexShrink:0}}>{acao}</span>
                <span style={{fontSize:11.5,color:'var(--muted)'}}>{desc}</span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
);

const PermPerfilModal = ({perfil, catalogo, token, toast, lang, onClose, onSaved}) => {
  const [nome, setNome] = React.useState(perfil ? perfil.nome : '');
  const [descricao, setDescricao] = React.useState(perfil ? (perfil.descricao||'') : '');
  const [sel, setSel] = React.useState(() => new Set(perfil ? perfil.permissoes : []));
  const [salvando, setSalvando] = React.useState(false);
  const H = () => ({'Authorization':`Bearer ${token()}`, 'Content-Type':'application/json'});
  const toggle = (k) => setSel(s => { const n = new Set(s); n.has(k) ? n.delete(k) : n.add(k); return n; });
  const salvar = async () => {
    if (!nome.trim()) { toast.push({icon:'lock', title: lang==='pt'?'Dá um nome ao perfil':'Name required'}); return; }
    setSalvando(true);
    const body = { nome: nome.trim(), descricao, permissoes: [...sel] };
    const r = perfil
      ? await fetch(`/api/users/perm/perfis/${perfil.id}`, { method:'PUT', headers:H(), body: JSON.stringify(body) })
      : await fetch('/api/users/perm/perfis', { method:'POST', headers:H(), body: JSON.stringify(body) });
    setSalvando(false);
    if (r.ok) {
      toast.push({icon:'check', title: perfil ? (lang==='pt'?`Perfil salvo — vale pra ${perfil.pessoas||0} pessoa(s) na hora`:'Saved') : (lang==='pt'?'Perfil criado 🔐':'Created 🔐')});
      onSaved(); onClose();
    } else { const d = await r.json().catch(()=>({})); toast.push({icon:'x', title: d.error || 'Erro'}); }
  };
  return (
    <div style={{position:'fixed',inset:0,zIndex:250,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'4vh 16px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:560,background:'var(--cream)',borderRadius:20,padding:'22px 24px',marginBottom:'4vh'}}>
        <div style={{fontFamily:'var(--fs)',fontSize:19,marginBottom:14}}>🔐 {perfil ? (lang==='pt'?'Editar perfil de permissões':'Edit permission profile') : (lang==='pt'?'Novo perfil de permissões':'New permission profile')}</div>
        <div style={{display:'grid',gap:11,marginBottom:14}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:9}}>
            <div><div className="label">{lang==='pt'?'Nome':'Name'}</div><input className="input" value={nome} onChange={e=>setNome(e.target.value)} placeholder="Passadiço, Câmara, Praça…" style={{width:'100%',boxSizing:'border-box'}}/></div>
            <div><div className="label">{lang==='pt'?'Descrição':'Description'}</div><input className="input" value={descricao} onChange={e=>setDescricao(e.target.value)} placeholder={lang==='pt'?'quem usa este perfil?':'who uses this?'} style={{width:'100%',boxSizing:'border-box'}}/></div>
          </div>
        </div>
        <div className="label" style={{marginBottom:8}}>{lang==='pt'?'O que este grupo pode fazer':'What this group can do'} <span style={{color:'var(--teal)',fontFamily:'var(--fm)'}}>· {sel.size} {lang==='pt'?'autorizações':'grants'}</span></div>
        <PermMatriz catalogo={catalogo} selecionadas={sel} onToggle={toggle}/>
        <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:16}}>
          <button className="btn" onClick={onClose}>{lang==='pt'?'cancelar':'cancel'}</button>
          <button className="btn btn-primary" disabled={salvando} onClick={salvar}>{salvando?'…':(lang==='pt'?'Salvar':'Save')}</button>
        </div>
      </div>
    </div>
  );
};

const Permissoes = ({state, setState, setPage}) => {
  const { lang } = useT();
  const toast = useToast();
  const isMobile = useMobile();
  const token = () => localStorage.getItem('genesis_token');
  const me = state.currentUser || {};
  const canManage = me.role === 'admin' || me.is_staff === true;

  const [perfis, setPerfis] = React.useState([]);
  const [catalogo, setCatalogo] = React.useState(null);
  const [modal, setModal] = React.useState(null); // null | {perfil?}
  const H = () => ({'Authorization':`Bearer ${token()}`});

  const carregar = () => {
    fetch('/api/users/perm/perfis', {headers:H()}).then(r=>r.ok?r.json():[]).then(d=>setPerfis(Array.isArray(d)?d:[])).catch(()=>{});
    fetch('/api/users/perm/catalogo', {headers:H()}).then(r=>r.ok?r.json():null).then(d=>d&&setCatalogo(d.catalogo)).catch(()=>{});
  };
  React.useEffect(carregar, []);

  if (!canManage) return <main style={{padding:40}}><div style={{fontFamily:'var(--fm)',color:'var(--muted)'}}>🔒 acesso restrito.</div></main>;

  return (
    <main style={{padding: isMobile ? '16px 16px 80px' : '30px 36px 56px', flex:1, overflowY:'auto'}}>
      <div style={{marginBottom:22,display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:14,flexWrap:'wrap'}}>
        <div>
          <div className="t-eyebrow">{lang==='pt'?'controle de acesso':'access control'}</div>
          <h1 style={{fontFamily:'var(--fs)',fontSize:isMobile?28:36,letterSpacing:'-0.8px',lineHeight:1.05,marginTop:6}}>
            {lang==='pt'?<>Perfis de <em style={{fontStyle:'italic',color:'var(--accent)'}}>permissões.</em></>:<>Permission <em style={{fontStyle:'italic',color:'var(--accent)'}}>profiles.</em></>}
          </h1>
          <div style={{fontSize:13,color:'var(--muted)',marginTop:6,maxWidth:520,lineHeight:1.55}}>
            {lang==='pt'
              ? 'Defina o que cada grupo pode fazer, módulo por módulo. Editar um perfil muda todo o grupo de uma vez; ajustes individuais são feitos no cadastro da pessoa (Pessoas → editar → Permissões).'
              : 'Define what each group can do, module by module.'}
          </div>
        </div>
        <button className="btn-tidal" onClick={()=>setModal({})}>+ {lang==='pt'?'Novo perfil':'New profile'}</button>
      </div>

      <div style={{background:'rgba(31,87,85,0.05)',border:'1px dashed var(--teal)',borderRadius:14,padding:'11px 15px',marginBottom:18,fontFamily:'var(--fm)',fontSize:11,color:'var(--ink)',lineHeight:1.6}}>
        💡 {lang==='pt'
          ? <><b>Como funciona:</b> admin e staff continuam podendo tudo (nada muda pra eles). Estes perfis dão poderes específicos a quem NÃO é staff — ex.: o perfil "Passadiço" com <i>logbook.registrar</i> deixa a equipe registrar no logbook sem virar staff. A permissão só surte efeito nos módulos já migrados (piloto atual: <b>Cabines</b>) — os demais entram módulo a módulo.</>
          : <>Admin/staff keep full access. Profiles grant specific powers to non-staff. Rolling out module by module (pilot: Cabins).</>}
      </div>

      {perfis.length === 0 ? (
        <div style={{textAlign:'center',padding:'46px 20px',color:'var(--muted)'}}>
          <div style={{fontSize:30,marginBottom:8}}>🔐</div>
          <div style={{fontFamily:'var(--fs)',fontSize:18}}>{lang==='pt'?'Nenhum perfil ainda':'No profiles yet'}</div>
          <div style={{fontFamily:'var(--fm)',fontSize:12,marginTop:4}}>{lang==='pt'?'crie o primeiro — ex.: "Passadiço", "Câmara", "Praça de Máquinas".':'create the first one.'}</div>
        </div>
      ) : (
        <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(auto-fill, minmax(300px, 1fr))',gap:14}}>
          {perfis.map(p => (
            <div key={p.id} style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--teal)',borderRadius:16,padding:'16px 18px',boxShadow:'var(--shadow-sm)'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:8}}>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:'var(--fs)',fontSize:18,letterSpacing:'-0.3px'}}>{p.nome}</div>
                  {p.descricao && <div style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)',marginTop:2}}>{p.descricao}</div>}
                </div>
                <span style={{display:'flex',gap:4,flexShrink:0}}>
                  <button onClick={()=>setModal({perfil:p})} title="editar" style={{border:'none',background:'transparent',cursor:'pointer',fontSize:14}}>✏️</button>
                  <button onClick={async ()=>{
                    if (!confirm(lang==='pt'?`Excluir "${p.nome}"? As ${p.pessoas} pessoa(s) do grupo ficam sem perfil.`:'Delete?')) return;
                    await fetch(`/api/users/perm/perfis/${p.id}`, {method:'DELETE', headers:H()}); carregar();
                  }} title="excluir" style={{border:'none',background:'transparent',cursor:'pointer',fontSize:14,color:'var(--rose)'}}>×</button>
                </span>
              </div>
              <div style={{display:'flex',gap:10,margin:'12px 0',fontFamily:'var(--fm)',fontSize:10.5}}>
                <span style={{padding:'3px 10px',borderRadius:999,background:'rgba(31,87,85,0.08)',color:'var(--teal)',fontWeight:700}}>{p.permissoes.length} {lang==='pt'?'autorizações':'grants'}</span>
                <span style={{padding:'3px 10px',borderRadius:999,background:'var(--cream-2)',color:'var(--muted)'}}>{p.pessoas} {lang==='pt'?'pessoa(s)':'people'}</span>
              </div>
              <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
                {p.permissoes.slice(0,6).map(k => <span key={k} style={{fontFamily:'var(--fm)',fontSize:9.5,padding:'2px 8px',borderRadius:999,border:'1px solid var(--line-soft)',color:'var(--muted)'}}>{k}</span>)}
                {p.permissoes.length > 6 && <span style={{fontFamily:'var(--fm)',fontSize:9.5,color:'var(--muted)'}}>+{p.permissoes.length-6}</span>}
              </div>
            </div>
          ))}
        </div>
      )}

      {modal && catalogo && <PermPerfilModal perfil={modal.perfil} catalogo={catalogo} token={token} toast={toast} lang={lang} onClose={()=>setModal(null)} onSaved={carregar}/>}
    </main>
  );
};