/* JRN — Admin: Usuários, cadastro/edição e permissões */

/* ---------- Modal: cadastro / edição de usuário ---------- */
function UserFormModal({ user, onClose, onSave }) {
  const isEdit = !!user;
  const [f, setF] = useState(user
    ? { nome: user.nome, email: user.email, cargo: user.cargo, perfil: user.perfil, status: user.status, _dbId: user._dbId }
    : { nome: '', email: '', cargo: '', perfil: 'comum', status: 'ativo' });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.nome.trim() && /\S+@\S+\.\S+/.test(f.email);

  const handleSave = async () => {
    setSaving(true);
    setErr('');
    try {
      await onSave(f);
    } catch (e) {
      setErr(e.message || 'Erro ao salvar.');
      setSaving(false);
    }
  };

  return (
    <Modal
      title={isEdit ? 'Editar usuário' : 'Cadastrar usuário'}
      sub={isEdit ? 'Atualize os dados cadastrais e o perfil de acesso.' : 'Crie um novo acesso ao portal de indicadores.'}
      onClose={onClose} width={580}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn icon="check" disabled={!valid || saving} onClick={handleSave}>
          {saving ? <Icons.refresh className="spin" size={14} /> : null}
          {isEdit ? 'Salvar alterações' : 'Cadastrar usuário'}
        </Btn>
      </React.Fragment>}>
      {err && <div style={{ marginBottom: 14, padding: '10px 13px', background: 'var(--danger-soft)', color: 'var(--danger)', borderRadius: 8, fontSize: 13 }}>{err}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label="Nome completo" full><TextInput value={f.nome} onChange={e => set('nome', e.target.value)} placeholder="Ex.: Maria Souza" /></Field>
        <Field label="E-mail corporativo" full>
          <TextInput type="email" value={f.email} onChange={e => set('email', e.target.value)}
            placeholder="nome@empresa.com.br" disabled={isEdit} />
        </Field>
        <Field label="Cargo"><TextInput value={f.cargo} onChange={e => set('cargo', e.target.value)} placeholder="Ex.: Controller" /></Field>
        <Field label="Perfil de acesso" hint={f.perfil === 'admin' ? 'Acesso total a todas as funções e empresas.' : 'Acesso somente ao que for concedido.'}>
          <Select value={f.perfil} onChange={e => set('perfil', e.target.value)}>
            <option value="comum">Usuário comum</option>
            <option value="admin">Administrador</option>
          </Select>
        </Field>
        <Field label="Status">
          <Select value={f.status} onChange={e => set('status', e.target.value)}>
            <option value="ativo">Ativo</option>
            <option value="inativo">Inativo</option>
          </Select>
        </Field>
        {!isEdit && (
          <Field label="Senha provisória" hint="O usuário define uma nova senha no primeiro acesso.">
            <TextInput value="Gerada automaticamente pelo sistema" readOnly style={{ color: 'var(--muted)', fontStyle: 'italic' }} />
          </Field>
        )}
      </div>
      {f.perfil === 'admin' && (
        <div style={{ marginTop: 18, padding: '13px 15px', background: 'var(--navy-50)', borderRadius: 10, display: 'flex', gap: 11, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          <Icons.shield size={18} style={{ color: 'var(--navy-700)', flexShrink: 0, marginTop: 1 }} />
          <span>Administradores acessam <strong>todas as empresas, dashboards e funções administrativas</strong> automaticamente.</span>
        </div>
      )}
    </Modal>
  );
}

/* ---------- Modal: permissões (empresa + dashboard + funções) ---------- */
function PermissionsModal({ user, empresas, onClose, onSaved }) {
  const [allDashboards, setAllDashboards] = useState([]);
  const [emp, setEmp] = useState(new Set());
  const [dash, setDash] = useState(new Set());
  const [fns, setFns] = useState(new Set());
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  useEffect(() => {
    Promise.all([
      apiDashboardsGet(),
      apiPermissoesGet(user.id, empresas),
    ]).then(([dashes, perms]) => {
      setAllDashboards(dashes);
      setEmp(new Set(perms.empresas));
      setDash(new Set(perms.dashboards));
      setFns(new Set(perms.funcoes));
    }).catch(e => setErr(e.message || 'Erro ao carregar permissões.'))
      .finally(() => setLoading(false));
  }, []);

  const dashByCompany = (companyId) => allDashboards.filter(d => d.companyId === companyId);

  const toggleEmp = (id) => {
    const ne = new Set(emp);
    const nd = new Set(dash);
    if (ne.has(id)) { ne.delete(id); dashByCompany(id).forEach(d => nd.delete(d.id)); }
    else { ne.add(id); }
    setEmp(ne); setDash(nd);
  };

  const toggleDash = (d) => {
    const nd = new Set(dash);
    if (nd.has(d.id)) { nd.delete(d.id); } else { nd.add(d.id); }
    setDash(nd);
    if (!emp.has(d.companyId) && nd.has(d.id)) setEmp(new Set(emp).add(d.companyId));
  };

  const toggleFn = (id) => {
    const n = new Set(fns);
    n.has(id) ? n.delete(id) : n.add(id);
    setFns(n);
  };

  const save = async () => {
    setSaving(true);
    setErr('');
    try {
      await apiPermissoesSet(user.id, [...emp], [...dash], [...fns], empresas, allDashboards);
      onSaved();
    } catch (e) {
      setErr(e.message || 'Erro ao salvar permissões.');
      setSaving(false);
    }
  };

  return (
    <Modal
      title="Gerenciar permissões"
      sub={`Defina o que ${(user.nome || '').split(' ')[0]} pode acessar no portal.`}
      onClose={onClose} width={680}
      footer={<React.Fragment>
        <span style={{ marginRight: 'auto', fontSize: 12.5, color: 'var(--muted)' }}>
          {emp.size} empresas · {dash.size} painéis · {fns.size} funções
        </span>
        <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn icon="check" disabled={saving || loading} onClick={save}>
          {saving ? <Icons.refresh className="spin" size={14} /> : null}
          Salvar permissões
        </Btn>
      </React.Fragment>}>

      {err && <div style={{ marginBottom: 14, padding: '10px 13px', background: 'var(--danger-soft)', color: 'var(--danger)', borderRadius: 8, fontSize: 13 }}>{err}</div>}

      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}>
          <Icons.refresh className="spin" size={22} style={{ color: 'var(--muted)' }} />
        </div>
      ) : (
        <React.Fragment>
          <div className="kicker" style={{ marginBottom: 12 }}>Empresas e painéis</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 340, overflowY: 'auto', paddingRight: 4 }}>
            {(empresas || []).map(c => {
              const ds = dashByCompany(c.id);
              const on = emp.has(c.id);
              return (
                <div key={c.id} style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: on ? c.corSoft : '#fff', transition: '.15s' }}>
                    <Check on={on} onChange={() => toggleEmp(c.id)} accent={c.cor} />
                    <CompanyMark company={c} size={34} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{c.nome}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{c.tipo} · {ds.length} painéis</div>
                    </div>
                  </div>
                  {on && (
                    <div style={{ padding: '6px 14px 12px 48px', display: 'flex', flexDirection: 'column', gap: 2, borderTop: '1px solid var(--line-2)' }}>
                      {ds.map(d => (
                        <label key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 4px', cursor: 'pointer', fontSize: 13 }}>
                          <Check on={dash.has(d.id)} onChange={() => toggleDash(d)} accent={c.cor} size={17} />
                          <span style={{ flex: 1, color: 'var(--ink-2)' }}>{d.nome}</span>
                          <span className="badge badge-neutral" style={{ fontSize: 10.5 }}>{d.categoria}</span>
                        </label>
                      ))}
                      {ds.length === 0 && <span style={{ fontSize: 12.5, color: 'var(--muted)', padding: '4px 4px' }}>Nenhum dashboard cadastrado.</span>}
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          <div className="kicker" style={{ margin: '22px 0 12px' }}>Funções administrativas</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {FUNCOES_ADMIN.map(fn => (
              <label key={fn.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, padding: '12px 13px', border: '1px solid var(--line)', borderRadius: 10, cursor: 'pointer', background: fns.has(fn.id) ? 'var(--navy-50)' : '#fff' }}>
                <Check on={fns.has(fn.id)} onChange={() => toggleFn(fn.id)} size={18} />
                <span>
                  <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{fn.nome}</span>
                  <span style={{ display: 'block', fontSize: 11.5, color: 'var(--muted)', marginTop: 2, lineHeight: 1.4 }}>{fn.desc}</span>
                </span>
              </label>
            ))}
          </div>
        </React.Fragment>
      )}
    </Modal>
  );
}

/* ---------- Página: lista de usuários ---------- */
function UsersAdmin({ empresas, toast }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [q, setQ] = useState('');
  const [perfil, setPerfil] = useState('todos');
  const [modal, setModal] = useState(null); // {type:'form'|'perm', user}

  const loadUsers = () => {
    setLoading(true);
    apiUsuariosGet().then(setUsers).catch(() => toast('Erro ao carregar usuários.', 'danger')).finally(() => setLoading(false));
  };

  useEffect(loadUsers, []);

  const filtered = users.filter(u =>
    (perfil === 'todos' || u.perfil === perfil) &&
    (u.nome.toLowerCase().includes(q.toLowerCase()) || u.email.toLowerCase().includes(q.toLowerCase()))
  );

  const saveUser = async (f) => {
    if (f._dbId) {
      await apiUsuariosUpdate(f);
      toast('Usuário atualizado com sucesso.');
    } else {
      await apiUsuariosCreate(f);
      toast('Usuário cadastrado com sucesso.');
    }
    setModal(null);
    loadUsers();
  };

  const savePerm = () => {
    setModal(null);
    toast('Permissões atualizadas.');
  };

  const removeUser = async (u) => {
    if (!confirm(`Remover ${u.nome}?`)) return;
    try {
      await apiUsuariosDelete(u);
      toast('Usuário removido.', 'danger');
      loadUsers();
    } catch (e) {
      toast(e.message || 'Erro ao remover.', 'danger');
    }
  };

  return (
    <div className="fade-in">
      <PageHead kicker="Administração" title="Usuários"
        sub="Cadastre, edite e gerencie os acessos das pessoas que utilizam o portal."
        actions={<Btn icon="plus" onClick={() => setModal({ type: 'form' })}>Novo usuário</Btn>} />

      <div className="card">
        <div style={{ display: 'flex', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--line-2)', flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', flex: 1, minWidth: 220 }}>
            <Icons.search size={16} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }} />
            <input className="input" style={{ paddingLeft: 36 }} placeholder="Buscar por nome ou e-mail…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div style={{ width: 200 }}>
            <Select value={perfil} onChange={e => setPerfil(e.target.value)}>
              <option value="todos">Todos os perfis</option>
              <option value="admin">Administradores</option>
              <option value="comum">Usuários comuns</option>
            </Select>
          </div>
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: 48 }}>
            <Icons.refresh className="spin" size={22} style={{ color: 'var(--muted)' }} />
          </div>
        ) : (
          <React.Fragment>
            <table className="tbl">
              <thead><tr><th>Usuário</th><th>Cargo</th><th>Perfil</th><th>Status</th><th>Último acesso</th><th></th></tr></thead>
              <tbody>
                {filtered.map(u => (
                  <tr key={u.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <span className="avatar">{u.avatar}</span>
                        <span>
                          <span style={{ display: 'block', fontWeight: 600, color: 'var(--ink)' }}>{u.nome}</span>
                          <span style={{ fontSize: 12, color: 'var(--muted)' }}>{u.email}</span>
                        </span>
                      </div>
                    </td>
                    <td>{u.cargo}</td>
                    <td>
                      {u.perfil === 'admin'
                        ? <span className="badge badge-admin"><Icons.shield size={12} />Admin</span>
                        : <span className="badge badge-neutral">Comum</span>}
                    </td>
                    <td><StatusBadge status={u.status} /></td>
                    <td className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{u.ultimoAcesso}</td>
                    <td>
                      <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                        {u.perfil !== 'admin' && (
                          <button title="Permissões" onClick={() => setModal({ type: 'perm', user: u })}
                            className="btn btn-ghost btn-sm" style={{ padding: 8, border: '1px solid var(--line)' }}>
                            <Icons.shield size={16} />
                          </button>
                        )}
                        <button title="Editar" onClick={() => setModal({ type: 'form', user: u })}
                          className="btn btn-ghost btn-sm" style={{ padding: 8, border: '1px solid var(--line)' }}>
                          <Icons.edit size={16} />
                        </button>
                        <button title="Remover" onClick={() => removeUser(u)}
                          className="btn btn-danger btn-sm" style={{ padding: 8 }}>
                          <Icons.trash size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {filtered.length === 0 && <Empty title="Nenhum usuário encontrado" sub="Ajuste a busca ou os filtros." />}
          </React.Fragment>
        )}
      </div>

      {modal?.type === 'form' && (
        <UserFormModal user={modal.user} onClose={() => setModal(null)} onSave={saveUser} />
      )}
      {modal?.type === 'perm' && (
        <PermissionsModal user={modal.user} empresas={empresas} onClose={() => setModal(null)} onSaved={savePerm} />
      )}
    </div>
  );
}

Object.assign(window, { UsersAdmin, UserFormModal, PermissionsModal });