/* Views: Gestão (usuários + unidades) e Configurações */
const { useState:gS } = React;

function GestaoView({profile,onToast}){
  const [tab,setTab]=gS('usuarios');
  return (
    <div className="content-inner">
      <div className="tabs">
        {[['usuarios','Usuários'],['unidades','Unidades'],['perfis','Perfis & Acessos']].map(([k,l])=>(
          <button key={k} className={tab===k?'on':''} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>
      {tab==='usuarios' && <GestaoUsuarios onToast={onToast}/>}
      {tab==='unidades' && <GestaoUnidades onToast={onToast}/>}
      {tab==='perfis' && <GestaoPerfis/>}
    </div>
  );
}

function GestaoUsuarios({onToast}){
  const [busca,setBusca]=gS('');
  const [unitF,setUnitF]=gS('todas');
  const [people,setPeople]=gS(MX.people.map((p,i)=>({...p, ativo: i!==11, ultimoAcesso:['há 5 min','há 1h','ontem','há 2h','há 3 dias','agora','ontem','há 4h','há 1 dia','há 6h','há 2 dias','há 8 dias'][i]})));
  let list=people;
  if(unitF!=='todas') list=list.filter(p=>p.unit===unitF);
  if(busca.trim()) list=list.filter(p=>p.nome.toLowerCase().includes(busca.toLowerCase()));
  const toggle=(id)=>setPeople(people.map(p=>p.id===id?{...p,ativo:!p.ativo}:p));

  return (
    <>
      <div className="row between" style={{marginBottom:16,flexWrap:'wrap',gap:12}}>
        <div className="row gap8" style={{flexWrap:'wrap'}}>
          <button className={'chip'+(unitF==='todas'?' on':'')} onClick={()=>setUnitF('todas')}>Todas</button>
          {MX.units.map(u=><button key={u.id} className={'chip'+(unitF===u.id?' on':'')} onClick={()=>setUnitF(u.id)}><span className="cdot" style={{background:u.cor}}></span>{u.nome}</button>)}
        </div>
        <div className="row gap12">
          <div className="search" style={{width:200}}><Icon name="search" size={16}/><input placeholder="Buscar usuário…" value={busca} onChange={e=>setBusca(e.target.value)}/></div>
          <button className="btn btn-gold" style={{height:40,padding:'0 16px'}} onClick={()=>onToast('Convite enviado — senha temporária gerada.')}><Icon name="plus" size={16}/> Novo usuário</button>
        </div>
      </div>
      <div className="card card-table">
        <table className="tbl">
          <thead><tr><th>Colaborador</th><th>Cargo</th><th>Unidade</th><th>Último acesso</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {list.map(p=>(
              <tr key={p.id}>
                <td><div className="person">
                  <div className="avatar" style={{width:36,height:36,background:p.ativo?'#3a4159':'#c2bbac'}}>{p.ini}</div>
                  <div><div className="pj">{p.nome}</div><div className="pm">{p.nivel}</div></div>
                </div></td>
                <td style={{fontSize:12.5}}>{p.cargo}</td>
                <td>{MX.unitById(p.unit).nome}</td>
                <td className="muted" style={{fontSize:12.5}}>{p.ultimoAcesso}</td>
                <td><span className="status-pill"><span className="sd" style={{background:p.ativo?'var(--pos)':'var(--ink-3)'}}></span>{p.ativo?'Ativo':'Inativo'}</span></td>
                <td style={{textAlign:'right'}}>
                  <div className="row gap8" style={{justifyContent:'flex-end'}}>
                    <button className="icon-btn" style={{width:32,height:32}} onClick={()=>toggle(p.id)} title={p.ativo?'Desativar':'Ativar'}>
                      <Icon name={p.ativo?'lock':'check'} size={15}/>
                    </button>
                    <button className="icon-btn" style={{width:32,height:32}}><Icon name="edit" size={15}/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function GestaoUnidades({onToast}){
  return (
    <div className="grid g-2">
      {MX.units.map(u=>{
        const team=MX.people.filter(p=>p.unit===u.id);
        const atingido=Math.round(u.fatMes/u.metaMes*100);
        return (
          <div key={u.id} className="card card-pad fade-up">
            <div className="row between" style={{marginBottom:14}}>
              <div className="row gap12">
                <div style={{width:44,height:44,borderRadius:11,background:u.cor+'22',color:u.cor,display:'grid',placeItems:'center'}}><Icon name="building" size={20}/></div>
                <div>
                  <div className="row gap8"><h3 style={{fontSize:17}}>{u.nome}</h3><span className="post-ch" style={{background:'var(--gold-50)',color:'var(--gold-700)'}}>{u.tag}</span></div>
                  <div style={{fontSize:12,color:'var(--ink-3)'}}>Responsável: {u.resp}</div>
                </div>
              </div>
              <span className="status-pill"><span className="sd" style={{background:'var(--pos)'}}></span>Ativa</span>
            </div>
            <div className="grid g-3" style={{gap:12,marginBottom:14}}>
              {[['Faturamento/mês',MX.fmtBRL(u.fatMes,{compact:true})],['Equipe',u.equipe+' pessoas'],['Casos ativos',u.casosAtivos]].map((x,i)=>(
                <div key={i} style={{background:'var(--surface-2)',border:'1px solid var(--border-2)',borderRadius:10,padding:'11px 12px'}}>
                  <div style={{fontSize:10.5,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:5}}>{x[0]}</div>
                  <div style={{fontFamily:'Spectral,serif',fontSize:17,fontWeight:600}}>{x[1]}</div>
                </div>
              ))}
            </div>
            <div className="row between" style={{fontSize:12,marginBottom:6}}><span className="muted">Meta do mês</span><b className="tnum">{atingido}%</b></div>
            <div className="bar-track"><div className="bar-fill" style={{width:Math.min(atingido,100)+'%'}}></div></div>
            <div className="divider"></div>
            <div className="row between">
              <div style={{display:'flex'}}>
                {team.slice(0,5).map((p,i)=>(
                  <div key={p.id} className="avatar" style={{width:30,height:30,fontSize:11,background:'#3a4159',border:'2px solid #fff',marginLeft:i?-8:0}}>{p.ini}</div>
                ))}
                {team.length>5 && <div className="avatar" style={{width:30,height:30,fontSize:10,background:'#c2bbac',border:'2px solid #fff',marginLeft:-8}}>+{team.length-5}</div>}
              </div>
              <button className="btn btn-ghost" style={{height:34,padding:'0 12px',fontSize:12.5}} onClick={()=>onToast('Abrindo organograma de '+u.nome)}>Ver equipe <Icon name="chevRight" size={14}/></button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function GestaoPerfis(){
  const perfis=[
    {nome:'Super Admin',desc:'Acesso total ao sistema, usuários e configurações globais',n:1,cor:'#a8554a'},
    {nome:'Admin',desc:'Cria, edita e publica comunicados; gerencia canais',n:2,cor:'#9a743b'},
    {nome:'CEO / Sócio Diretor',desc:'Todos os dashboards, unidades e métricas estratégicas',n:2,cor:'#b68b4c'},
    {nome:'Gestor de Unidade',desc:'Visualiza dados da própria unidade: equipe e faturamento',n:3,cor:'#3f6079'},
    {nome:'Advogado / Colaborador',desc:'Próprio faturamento, comunicados direcionados e jurídico',n:8,cor:'#3f7a57'},
  ];
  const matriz=[
    ['Publicar comunicados',[1,1,0,0,0]],
    ['Ver todas as unidades',[1,1,1,0,0]],
    ['Gerenciar usuários',[1,1,0,0,0]],
    ['Faturamento consolidado',[1,0,1,0,0]],
    ['Faturamento próprio',[1,1,1,1,1]],
    ['Configurações globais',[1,0,0,0,0]],
  ];
  return (
    <div className="grid g-2" style={{gap:18,alignItems:'start'}}>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {perfis.map((p,i)=>(
          <div key={i} className="card card-pad fade-up" style={{padding:'15px 18px'}}>
            <div className="row between">
              <div className="row gap12">
                <div style={{width:38,height:38,borderRadius:10,background:p.cor+'22',color:p.cor,display:'grid',placeItems:'center'}}><Icon name="shield" size={18}/></div>
                <div><div style={{fontWeight:600,fontSize:14}}>{p.nome}</div><div style={{fontSize:12,color:'var(--ink-3)',maxWidth:280}}>{p.desc}</div></div>
              </div>
              <div style={{textAlign:'right'}}><div style={{fontFamily:'Spectral,serif',fontSize:20,fontWeight:600}}>{p.n}</div><div style={{fontSize:10.5,color:'var(--ink-3)'}}>usuários</div></div>
            </div>
          </div>
        ))}
      </div>
      <div className="card card-pad fade-up">
        <div className="card-h"><div><h3>Matriz de permissões</h3><div className="ch-sub">RBAC — controle de acesso por papel</div></div></div>
        <div className="tbl-wrap"><table className="tbl">
          <thead><tr><th>Permissão</th><th style={{textAlign:'center'}}>S.Adm</th><th style={{textAlign:'center'}}>Adm</th><th style={{textAlign:'center'}}>CEO</th><th style={{textAlign:'center'}}>Gestor</th><th style={{textAlign:'center'}}>Adv</th></tr></thead>
          <tbody>
            {matriz.map((m,i)=>(
              <tr key={i}>
                <td style={{fontSize:12.5,fontWeight:600}}>{m[0]}</td>
                {m[1].map((v,j)=>(
                  <td key={j} style={{textAlign:'center'}}>
                    {v? <span style={{color:'var(--pos)',display:'inline-grid',placeItems:'center'}}><Icon name="check" size={15} stroke={2.6}/></span>
                       : <span style={{color:'var(--border)',fontSize:14}}>—</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table></div>
      </div>
    </div>
  );
}

/* ============== CONFIGURAÇÕES ============== */
function ConfigView({onToast}){
  const [mfa,setMfa]=gS(true);
  const [rotacao,setRotacao]=gS(false);
  const integ=[
    {nome:'Omie ERP',desc:'Sincronização de faturamento e dados financeiros',status:'Conectado',cor:'var(--pos)',on:true,fase:'Fase 1'},
    {nome:'WhatsApp Business API',desc:'Notificações críticas via WhatsApp',status:'Pendente',cor:'var(--warn)',on:false,fase:'Fase 2'},
    {nome:'DOU · STF · STJ',desc:'Feed automático de novidades jurídicas',status:'Pendente',cor:'var(--warn)',on:false,fase:'Fase 2'},
    {nome:'Google Workspace (SSO)',desc:'Autenticação única e agenda',status:'Inativo',cor:'var(--ink-3)',on:false,fase:'Fase 3'},
  ];
  const Toggle=({on,set})=>(
    <button onClick={()=>set(!on)} style={{width:42,height:24,borderRadius:14,background:on?'var(--navy-700)':'var(--border)',position:'relative',transition:'.18s',flexShrink:0}}>
      <span style={{position:'absolute',top:3,left:on?21:3,width:18,height:18,borderRadius:'50%',background:'#fff',transition:'.18s',boxShadow:'0 1px 3px rgba(0,0,0,.2)'}}></span>
    </button>
  );
  return (
    <div className="content-inner">
      <div className="grid g-2" style={{alignItems:'start'}}>
        <div className="card card-pad fade-up">
          <div className="card-h"><div><h3>Aparência</h3><div className="ch-sub">Identidade visual do portal</div></div></div>
          <div className="row gap16" style={{marginBottom:18}}>
            <div style={{width:88,height:88,borderRadius:14,background:'#2d3245',display:'grid',placeItems:'center',flexShrink:0}}>
              <img src="assets/logo-mark.png" style={{height:54}}/>
            </div>
            <div>
              <div style={{fontWeight:600,marginBottom:4}}>Logo do escritório</div>
              <div style={{fontSize:12.5,color:'var(--ink-3)',marginBottom:10}}>PNG ou SVG · fundo transparente</div>
              <button className="btn btn-ghost" style={{height:36,padding:'0 14px',fontSize:12.5}}><Icon name="image" size={15}/> Substituir</button>
            </div>
          </div>
          <div style={{fontSize:12.5,fontWeight:600,color:'var(--ink-2)',marginBottom:9}}>Cores do tema</div>
          <div className="row gap12">
            {[['Marinho','#2d3245'],['Dourado','#b68b4c'],['Fundo','#f4f1ea']].map((c,i)=>(
              <div key={i} className="row gap8"><span style={{width:30,height:30,borderRadius:8,background:c[1],border:'1px solid var(--border)'}}></span><span style={{fontSize:12.5}}>{c[0]}</span></div>
            ))}
          </div>
        </div>

        <div className="card card-pad fade-up">
          <div className="card-h"><div><h3>Segurança</h3><div className="ch-sub">Políticas de acesso e autenticação</div></div></div>
          {[['Autenticação em dois fatores (MFA)','Exigir segundo fator no login',mfa,setMfa],['Rotação de senha','Forçar troca a cada 90 dias',rotacao,setRotacao]].map((r,i)=>(
            <div key={i} className="row between" style={{padding:'14px 0',borderBottom:i===0?'1px solid var(--border-2)':'none'}}>
              <div style={{maxWidth:'70%'}}><div style={{fontSize:13.5,fontWeight:600}}>{r[0]}</div><div style={{fontSize:12,color:'var(--ink-3)'}}>{r[1]}</div></div>
              <Toggle on={r[2]} set={r[3]}/>
            </div>
          ))}
          <div className="divider"></div>
          <div className="row between"><span className="muted" style={{fontSize:12.5}}>Expiração de sessão</span><b style={{fontSize:13}}>8h de inatividade</b></div>
          <div className="row between" style={{marginTop:10}}><span className="muted" style={{fontSize:12.5}}>Bloqueio após tentativas</span><b style={{fontSize:13}}>5 tentativas</b></div>
        </div>

        <div className="card card-pad fade-up" style={{gridColumn:'1 / -1'}}>
          <div className="card-h"><div><h3>Integrações</h3><div className="ch-sub">Conexões externas do portal</div></div></div>
          <div className="grid g-2" style={{gap:12}}>
            {integ.map((it,i)=>(
              <div key={i} className="row between" style={{background:'var(--surface-2)',border:'1px solid var(--border-2)',borderRadius:12,padding:'14px 16px'}}>
                <div className="row gap12">
                  <div style={{width:40,height:40,borderRadius:10,background:'#fff',border:'1px solid var(--border)',display:'grid',placeItems:'center',color:'var(--ink-2)'}}><Icon name="layers" size={18}/></div>
                  <div>
                    <div className="row gap8"><span style={{fontWeight:600,fontSize:13.5}}>{it.nome}</span><span className="post-ch" style={{background:'var(--navy-tint)',color:'var(--navy-600)',fontSize:10}}>{it.fase}</span></div>
                    <div style={{fontSize:12,color:'var(--ink-3)'}}>{it.desc}</div>
                  </div>
                </div>
                <span className="status-pill" style={{flexShrink:0}}><span className="sd" style={{background:it.cor}}></span>{it.status}</span>
              </div>
            ))}
          </div>
          <div className="divider"></div>
          <div className="row between">
            <div className="row gap8" style={{color:'var(--ink-3)',fontSize:12.5}}><Icon name="shield" size={15}/> Logs de auditoria imutáveis · conforme LGPD</div>
            <button className="btn btn-ghost" style={{height:38}} onClick={()=>onToast('Backup completo iniciado.')}><Icon name="download" size={15}/> Exportar dados</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.GestaoView=GestaoView; window.ConfigView=ConfigView;