const USER_ROLES = [
  { key: 'Administrador', tone: 'emerald', desc: 'Acesso total · gerencia usuários, configurações, IA, plano' },
  { key: 'Comprador',     tone: 'sky',     desc: 'Cotações, fornecedores e pedidos · sem configurações' },
  { key: 'Estoquista',    tone: 'amber',   desc: 'Estoque, recebimentos e leitura de pedidos' },
  { key: 'Visualizador',  tone: 'violet',  desc: 'Apenas leitura · sem permissão para ações' },
];

function ScreenSettings() {
  const { COMPANY } = window.SCP;
  const [tab, setTab] = useState('empresa');
  const [apiKey, setApiKey] = useState('sk-proj-••••••••••••••••••••••••••••••••');
  const [showKey, setShowKey] = useState(false);
  const [notif, setNotif] = useState({
    cotacoes: true,
    pedidos: true,
    estoque: true,
    recebimentos: true,
    ia: true,
    whatsFornec: true,
    whatsVoce: false,
    diario: true,
    semanal: true,
  });

  const [users, setUsers] = useState([]);
  const [usersLoading, setUsersLoading] = useState(true);
  const [usersErr, setUsersErr] = useState(null);
  const [userModal, setUserModal] = useState(null); // null | { mode: 'new' } | { mode: 'edit', user }
  const [highlightUserId, setHighlightUserId] = useState(null);

  // Carrega profiles na primeira vez que a aba Usuários é aberta
  useEffect(() => {
    if (tab !== 'usuarios') return;
    if (users.length > 0 && !usersErr) return;
    loadUsers();
  }, [tab]);

  const loadUsers = async () => {
    setUsersLoading(true);
    setUsersErr(null);
    try {
      const data = await window.scpDb.profiles.list();
      // Adapta DB → UI shape (role enum → label)
      const roleLabel = { admin: 'Administrador', comprador: 'Comprador', estoquista: 'Estoquista', visualizador: 'Visualizador' };
      setUsers(data.map(u => ({
        id: u.id,
        name: u.name,
        email: u.email,
        role: roleLabel[u.role] || 'Visualizador',
        role_db: u.role,
        active: u.active,
        last: u.last_seen_at ? new Date(u.last_seen_at).toLocaleString('pt-BR') : 'nunca',
      })));
    } catch (e) {
      setUsersErr(e.message || 'Falha ao carregar usuários');
    } finally {
      setUsersLoading(false);
    }
  };

  const roleTone = (role) => (USER_ROLES.find(r => r.key === role)?.tone) || 'fg';
  const roleToDb = { 'Administrador': 'admin', 'Comprador': 'comprador', 'Estoquista': 'estoquista', 'Visualizador': 'visualizador' };

  const handleSaveUser = async (data) => {
    try {
      if (userModal?.mode === 'edit') {
        await window.scpDb.profiles.update(userModal.user.id, {
          name: data.name,
          role: roleToDb[data.role],
        });
        window.scpToast('Usuário atualizado', { kind: 'emerald', sub: data.name });
        setHighlightUserId(userModal.user.id);
      } else {
        // Cria novo via signUp + atualiza profile
        const result = await window.scpDb.profiles.invite({
          name: data.name,
          email: data.email,
          password: data.password,
          role: roleToDb[data.role],
        });
        const msg = result.needsConfirmation
          ? `Convite enviado · ${data.email}`
          : `Usuário criado · ${data.email}`;
        const sub = result.needsConfirmation
          ? 'Pediu pra confirmar e-mail. Verifique a caixa de entrada do convidado.'
          : `Senha temporária: ${data.password}`;
        window.scpToast(msg, { kind: 'emerald', sub });
        setHighlightUserId(result.user.id);
      }
      await loadUsers();
      setUserModal(null);
      setTimeout(() => setHighlightUserId(null), 2400);
    } catch (e) {
      window.scpToast('Erro ao salvar', { kind: 'coral', sub: e.message });
    }
  };

  const handleDeleteUser = async (u) => {
    if (u.role === 'Administrador' && users.filter(x => x.role === 'Administrador' && x.active).length === 1) {
      window.scpToast('Não é possível desativar o único Administrador', { kind: 'coral' });
      return;
    }
    if (!confirm(`Desativar "${u.name}"? Ele não poderá mais acessar o sistema.`)) return;
    try {
      await window.scpDb.profiles.deactivate(u.id);
      await loadUsers();
      window.scpToast('Usuário desativado', { kind: 'amber', sub: u.name });
    } catch (e) {
      window.scpToast('Erro ao desativar', { kind: 'coral', sub: e.message });
    }
  };

  const TABS = [
    { k: 'empresa',       l: 'Empresa',          i: <Icon.Crown size={16}/> },
    { k: 'usuarios',      l: 'Usuários',         i: <Icon.Supplier size={16}/> },
    { k: 'ia',            l: 'Inteligência IA',  i: <Icon.Sparkle size={16}/> },
    { k: 'notificacoes',  l: 'Notificações',     i: <Icon.Bell size={16}/> },
    { k: 'seguranca',     l: 'Segurança',        i: <Icon.Settings size={16}/> },
  ];

  return (
    <div className="scp-screen scp-fade-in">
      <div className="scp-settings-layout">
        {/* sidebar tabs */}
        <div className="scp-settings-nav">
          {TABS.map(t => (
            <button key={t.k} className={cls('scp-snav', tab === t.k && 'active')} onClick={() => setTab(t.k)}>
              <span className="ico">{t.i}</span>
              <span>{t.l}</span>
            </button>
          ))}
        </div>

        <div className="scp-settings-body">
          {tab === 'empresa' && (
            <div className="scp-sfm">
              <h3>Dados da empresa</h3>
              <p>Informações exibidas nos pedidos de compra e comunicações com fornecedores.</p>
              <div className="scp-sfield-grid">
                <label className="scp-field"><span>Razão social / Nome</span><Input value={COMPANY.name} /></label>
                <label className="scp-field"><span>CNPJ</span><Input value={COMPANY.cnpj} /></label>
                <label className="scp-field"><span>E-mail principal</span><Input value={COMPANY.email} /></label>
                <label className="scp-field"><span>Cidade / Estado</span><Input value={COMPANY.city} /></label>
                <label className="scp-field" style={{ gridColumn: '1 / -1' }}><span>Endereço de entrega padrão</span><Input value="Rua Carlos Gomes, 1244 · Centro · São José do Rio Preto · SP · CEP 15010-080" /></label>
              </div>
              <div className="scp-sfield-upload">
                <div className="scp-logo-box">
                  <Icon.Camera size={22}/>
                  <span>Logo da empresa</span>
                  <small>PNG ou SVG · exibida nos pedidos de compra</small>
                </div>
              </div>
              <Btn kind="primary">Salvar alterações</Btn>
            </div>
          )}

          {tab === 'usuarios' && (
            <div className="scp-sfm">
              <h3>Usuários e permissões</h3>
              <p>Gerencie os perfis que podem acessar o sistema. O fornecedor não precisa de cadastro.</p>
              {usersErr && (
                <Card style={{ padding: 12, borderColor: 'oklch(0.42 0.10 25 / .55)', background: 'oklch(0.26 0.08 25 / .25)' }}>
                  <strong style={{ color: 'oklch(0.88 0.14 25)', fontSize: 13 }}>Falha ao carregar usuários:</strong>{' '}
                  <span style={{ color: 'var(--fg-2)', fontSize: 12.5 }}>{usersErr}</span>
                  <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 4 }}>
                    Se a função get_user_emails ainda não foi criada, rode <code>supabase/function-user-emails.sql</code>.
                  </div>
                </Card>
              )}
              <table className="scp-table scp-users-table">
                <thead>
                  <tr><th>Usuário</th><th>Perfil</th><th>Último acesso</th><th>Status</th><th></th></tr>
                </thead>
                <tbody>
                  {usersLoading && (
                    <tr><td colSpan={5} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 13 }}>Carregando usuários…</td></tr>
                  )}
                  {!usersLoading && users.length === 0 && (
                    <tr><td colSpan={5} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontSize: 13 }}>
                      Nenhum usuário cadastrado.
                    </td></tr>
                  )}
                  {!usersLoading && users.map(u => {
                    const tone = roleTone(u.role);
                    return (
                      <tr key={u.id} className={cls(highlightUserId === u.id && 'just-added')}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <Avatar name={u.name} tone={tone} size={32}/>
                            <div>
                              <div className="em">{u.name}</div>
                              <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{u.email}</div>
                            </div>
                          </div>
                        </td>
                        <td><Badge tone={tone}>{u.role}</Badge></td>
                        <td style={{ color: 'var(--fg-3)', fontSize: 12 }}>{u.last}</td>
                        <td><Badge tone={u.active ? 'emerald' : 'muted'}>{u.active ? 'Ativo' : 'Inativo'}</Badge></td>
                        <td>
                          <div style={{ display: 'flex', gap: 4 }}>
                            <IconBtn icon={<Icon.Edit size={14}/>} size="sm" kind="ghost" title="Editar" onClick={() => setUserModal({ mode: 'edit', user: u })}/>
                            <IconBtn icon={<Icon.Trash size={14}/>} size="sm" kind="ghost" title="Remover" onClick={() => handleDeleteUser(u)}/>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
              <Btn kind="secondary" icon={<Icon.Plus size={16}/>} onClick={() => setUserModal({ mode: 'new' })}>Convidar usuário</Btn>

              {userModal && (
                <UserModal
                  mode={userModal.mode}
                  initial={userModal.user}
                  existingEmails={users.map(u => u.email)}
                  onClose={() => setUserModal(null)}
                  onSave={handleSaveUser}
                />
              )}
            </div>
          )}

          {tab === 'ia' && (
            <div className="scp-sfm">
              <h3>Integração com IA · OpenAI</h3>
              <p>Configure sua chave de API da OpenAI para habilitar a análise inteligente de cotações (Módulo 5).</p>

              <div className="scp-ia-setup">
                <div className="scp-ia-status connected">
                  <Icon.Check size={16}/>
                  <span>API conectada · gpt-4o · 847 análises realizadas</span>
                </div>
                <label className="scp-field">
                  <span>API Key (OpenAI)</span>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <div style={{ flex: 1 }} className="scp-input">
                      <Icon.Lightning size={16}/>
                      <input type={showKey ? 'text' : 'password'} value={apiKey} onChange={e => setApiKey(e.target.value)} />
                    </div>
                    <Btn kind="secondary" onClick={() => setShowKey(!showKey)}>{showKey ? 'Ocultar' : 'Revelar'}</Btn>
                    <Btn kind="secondary">Testar</Btn>
                  </div>
                  <small style={{ color: 'var(--fg-3)', fontSize: 11, marginTop: 4 }}>Crie sua chave em platform.openai.com → API Keys. Custo médio: R$ 30–80/mês.</small>
                </label>
              </div>

              <div className="scp-ia-prefs">
                <h4>Critérios da análise</h4>
                <div className="scp-ia-weights">
                  {[
                    { l: 'Peso: Preço',        v: 60 },
                    { l: 'Peso: Confiabilidade', v: 25 },
                    { l: 'Peso: Prazo',         v: 15 },
                  ].map(w => (
                    <div key={w.l} className="weight-row">
                      <span>{w.l}</span>
                      <input type="range" min={0} max={100} defaultValue={w.v}/>
                      <span className="num">{w.v}%</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
                  <Toggle checked={true} label="Análise automática ao receber todos os lances"/>
                  <Toggle checked={false} label="Fechamento automático sem validação manual (avançado)"/>
                  <Toggle checked={true} label="Sugerir abertura de nova cotação com estoque crítico"/>
                </div>
              </div>

              <Btn kind="primary">Salvar configurações de IA</Btn>
            </div>
          )}

          {tab === 'notificacoes' && (
            <div className="scp-sfm">
              <h3>Notificações automáticas</h3>
              <p>Configure quando e como o sistema deve alertar você e seus fornecedores.</p>
              <div className="scp-notif-grid">
                {[
                  { g: 'Operação',       k: 'cotacoes',     t: 'Cotações e lances',           s: 'Novas respostas, vencimento de prazo, lembretes', icon: <Icon.Quote size={14}/> },
                  { g: 'Operação',       k: 'pedidos',      t: 'Pedidos de compra',           s: 'Confirmação, trânsito, entrega e cancelamento',   icon: <Icon.Order size={14}/> },
                  { g: 'Operação',       k: 'estoque',      t: 'Alertas de estoque',          s: 'Itens abaixo do mínimo e sugestão de cotação',    icon: <Icon.Warning size={14}/> },
                  { g: 'Operação',       k: 'recebimentos', t: 'Recebimentos com divergência', s: 'Conferência pendente, item faltando, validade',   icon: <Icon.Box size={14}/> },
                  { g: 'Inteligência',   k: 'ia',           t: 'Recomendações da IA',         s: 'Fechar cotação, abrir nova, otimizações',         icon: <Icon.Sparkle size={14}/> },
                  { g: 'WhatsApp',       k: 'whatsFornec',  t: 'WhatsApp para fornecedores',  s: 'Aviso de cotação e lembrete de prazo',            icon: <Icon.WhatsApp size={14}/> },
                  { g: 'WhatsApp',       k: 'whatsVoce',    t: 'WhatsApp para você',          s: 'Eventos críticos no seu WhatsApp pessoal',        icon: <Icon.WhatsApp size={14}/> },
                  { g: 'Resumos',        k: 'diario',       t: 'Resumo diário por e-mail',    s: 'Tudo que aconteceu no sistema · 18h',             icon: <Icon.Mail size={14}/> },
                  { g: 'Resumos',        k: 'semanal',      t: 'Resumo semanal por e-mail',   s: 'Métricas da semana toda segunda às 09h',          icon: <Icon.Mail size={14}/> },
                ].reduce((acc, n) => {
                  const last = acc[acc.length - 1];
                  if (!last || last.g !== n.g) acc.push({ g: n.g, items: [n] });
                  else last.items.push(n);
                  return acc;
                }, []).map(group => (
                  <div key={group.g} className="scp-notif-group">
                    <span className="scp-notif-group-title">{group.g}</span>
                    {group.items.map(n => (
                      <div key={n.k} className="scp-notif-row">
                        <span className="scp-notif-icon">{n.icon}</span>
                        <div>
                          <span className="t">{n.t}</span>
                          <span className="s">{n.s}</span>
                        </div>
                        <Toggle checked={notif[n.k] !== false} onChange={v => setNotif(p => ({...p, [n.k]: v}))}/>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
              <Btn kind="primary" onClick={() => {
                const ativos = Object.values(notif).filter(Boolean).length;
                window.scpToast('Preferências salvas', { kind: 'emerald', sub: `${ativos} canais de notificação ativos` });
              }}>Salvar preferências</Btn>
            </div>
          )}

          {tab === 'seguranca' && (
            <div className="scp-sfm">
              <h3>Segurança e acesso</h3>
              <p>Autenticação, logs de acesso e configurações de segurança da conta.</p>
              <div className="scp-sfield-grid">
                <label className="scp-field"><span>Senha atual</span><Input type="password" placeholder="••••••••••"/></label>
                <label className="scp-field"><span>Nova senha</span><Input type="password" placeholder="••••••••••"/></label>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '18px 0' }}>
                <Toggle checked={true} label="Autenticação em dois fatores (e-mail)"/>
                <Toggle checked={false} label="Login com Google"/>
                <Toggle checked={true} label="Sessão expira após 8h de inatividade"/>
              </div>
              <Card style={{ padding: 14, marginBottom: 14 }}>
                <h4 style={{ margin: '0 0 10px', fontSize: 12, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700 }}>Últimos acessos</h4>
                {[
                  { ip: '187.45.12.88', loc: 'São José do Rio Preto · SP', when: 'agora', browser: 'Chrome 124' },
                  { ip: '187.45.12.88', loc: 'São José do Rio Preto · SP', when: 'ontem 18:42', browser: 'Safari iOS' },
                  { ip: '177.32.66.11', loc: 'São Paulo · SP',            when: '11/05 09:12', browser: 'Chrome 124' },
                ].map((a, i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, padding: '8px 0', borderBottom: i < 2 ? '1px dashed var(--border-soft)' : 'none', fontSize: 12.5, color: 'var(--fg-2)' }}>
                    <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--fg-3)', minWidth: 120 }}>{a.ip}</span>
                    <span>{a.loc}</span>
                    <span style={{ marginLeft: 'auto', color: 'var(--fg-3)' }}>{a.when} · {a.browser}</span>
                  </div>
                ))}
              </Card>
              <Btn kind="primary">Salvar</Btn>
            </div>
          )}

        </div>
      </div>
    </div>
  );
}

(function() {
  if (document.getElementById('scp-settings-css')) return;
  const s = document.createElement('style'); s.id = 'scp-settings-css';
  s.textContent = `
    .scp-settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
    .scp-settings-nav { display: flex; flex-direction: column; gap: 2px; }
    .scp-snav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--fg-3); font-size: 13px; font-weight: 500; transition: background .12s, color .12s; text-align: left; }
    .scp-snav .ico { display: inline-flex; }
    .scp-snav:hover { background: var(--surface-2); color: var(--fg); }
    .scp-snav.active { background: oklch(0.22 0.05 160 / .55); color: oklch(0.92 0.14 160); box-shadow: inset 0 0 0 1px oklch(0.30 0.06 160 / .5); }

    .scp-settings-body > * { display: flex; flex-direction: column; gap: 14px; }
    .scp-sfm { display: flex; flex-direction: column; gap: 18px; }
    .scp-sfm h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    .scp-sfm > p { margin: -6px 0; color: var(--fg-3); font-size: 13.5px; }
    .scp-sfm h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); }

    .scp-sfield-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .scp-sfield-grid .scp-input { width: 100%; }

    .scp-sfield-upload { margin-top: 4px; }
    .scp-logo-box {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      width: 180px; height: 100px; border-radius: 12px; border: 2px dashed var(--border-strong);
      color: var(--fg-4); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s;
    }
    .scp-logo-box:hover { border-color: oklch(0.55 0.10 160); color: var(--fg-2); }
    .scp-logo-box small { font-size: 10.5px; color: var(--fg-4); }

    .scp-ia-setup { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--border-soft); }
    .scp-ia-status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
    .scp-ia-status.connected { background: oklch(0.26 0.06 160 / .5); color: oklch(0.92 0.13 160); }

    .scp-ia-prefs { padding: 16px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 12px; }
    .scp-ia-weights { display: flex; flex-direction: column; gap: 8px; }
    .weight-row { display: grid; grid-template-columns: 160px 1fr 40px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--fg-2); }
    .weight-row input[type=range] { accent-color: oklch(0.74 0.16 160); }
    .weight-row .num { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--fg); }

    .scp-notif-grid { display: flex; flex-direction: column; gap: 14px; }
    .scp-notif-group { display: flex; flex-direction: column; gap: 4px; }
    .scp-notif-group-title {
      font-size: 10.5px; font-weight: 700; color: var(--fg-3);
      text-transform: uppercase; letter-spacing: .14em;
      padding: 0 4px 4px;
    }
    .scp-notif-row {
      display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
      padding: 14px 16px; border-radius: 10px;
      background: var(--surface-2); border: 1px solid var(--border-soft);
      gap: 14px;
    }
    .scp-notif-row .t { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
    .scp-notif-row .s { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
    .scp-notif-icon {
      width: 28px; height: 28px; border-radius: 8px;
      display: grid; place-items: center;
      background: oklch(0.30 0.04 160 / .35); color: oklch(0.86 0.14 160);
    }

    .scp-altercoes { display: flex; flex-direction: column; gap: 8px; }
    .alt-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border-soft); gap: 16px; }
    .alt-row .t { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
    .alt-row .s { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

    .scp-suporte { padding: 16px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--border-soft); }
  `;
  document.head.appendChild(s);
})();

function generateTempPassword() {
  const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789';
  let pw = '';
  for (let i = 0; i < 12; i++) pw += chars[Math.floor(Math.random() * chars.length)];
  return pw;
}

function UserModal({ mode, initial, existingEmails, onClose, onSave }) {
  const [name, setName] = useState(initial?.name || '');
  const [email, setEmail] = useState(initial?.email || '');
  const [role, setRole] = useState(initial?.role || 'Comprador');
  const [password, setPassword] = useState(generateTempPassword());
  const [saving, setSaving] = useState(false);

  const isEdit = mode === 'edit';
  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
  const emailNorm = email.trim().toLowerCase();
  const dup = !isEdit && existingEmails.includes(emailNorm);
  const pwValid = isEdit || password.length >= 8;
  const canSubmit = !saving && name.trim().length >= 2 && emailValid && !dup && pwValid;

  const submit = async () => {
    if (!canSubmit) return;
    setSaving(true);
    try {
      await onSave({ name: name.trim(), email: emailNorm, role, password });
    } finally {
      setSaving(false);
    }
  };

  return ReactDOM.createPortal((
    <div className="scp-modal-mask" onClick={onClose}>
      <div className="scp-modal" style={{ width: 620 }} onClick={e => e.stopPropagation()}>
        <div className="scp-modal-head">
          <h3>{isEdit ? 'Editar usuário' : 'Convidar usuário'}</h3>
          <IconBtn icon={<Icon.X size={14}/>} size="sm" onClick={onClose}/>
        </div>
        <div className="scp-modal-body" style={{ padding: '18px 22px' }}>
          <div className="scp-wfield-list">
            <div className="scp-field-row">
              <div className="scp-field">
                <span>Nome completo <em style={{ color: 'oklch(0.74 0.18 25)', fontStyle: 'normal' }}>*</em></span>
                <Input placeholder="Maria Santos" value={name} onChange={e => setName(e.target.value)} autoFocus />
              </div>
              <div className="scp-field">
                <span>E-mail <em style={{ color: 'oklch(0.74 0.18 25)', fontStyle: 'normal' }}>*</em></span>
                <Input
                  placeholder="usuario@empresa.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  type="email"
                  disabled={isEdit}
                />
                {email && !emailValid && <small style={{ fontSize: 11, color: 'oklch(0.84 0.14 78)' }}>E-mail inválido</small>}
                {dup && <small style={{ fontSize: 11, color: 'oklch(0.84 0.14 25)' }}>Este e-mail já está cadastrado</small>}
              </div>
            </div>

            {!isEdit && (
              <div className="scp-field">
                <span>Senha temporária <em style={{ color: 'oklch(0.74 0.18 25)', fontStyle: 'normal' }}>*</em></span>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <Input style={{ flex: 1 }} value={password} onChange={e => setPassword(e.target.value)} type="text" />
                  <Btn kind="ghost" size="sm" onClick={() => setPassword(generateTempPassword())} type="button">Gerar nova</Btn>
                </div>
                <small style={{ fontSize: 11, color: 'var(--fg-3)' }}>
                  O usuário pode trocar depois. Mínimo 8 caracteres.
                </small>
              </div>
            )}

            <div className="scp-field">
              <span>Perfil de acesso</span>
              <div className="scp-role-grid">
                {USER_ROLES.map(r => (
                  <button
                    key={r.key}
                    type="button"
                    className={cls('scp-role-card', role === r.key && 'active', `tone-${r.tone}`)}
                    onClick={() => setRole(r.key)}
                  >
                    <div className="head">
                      <span className={cls('role-dot', `tone-${r.tone}`)} />
                      <strong>{r.key}</strong>
                      {role === r.key && <Icon.Check size={14}/>}
                    </div>
                    <span className="desc">{r.desc}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="scp-modal-foot">
          <span>{isEdit ? 'As alterações entram em vigor no próximo login' : 'O usuário receberá um convite por e-mail'}</span>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn kind="ghost" onClick={onClose}>Cancelar</Btn>
            <Btn kind="primary" disabled={!canSubmit} onClick={submit} icon={<Icon.Check size={14}/>}>
              {isEdit ? 'Salvar alterações' : 'Enviar convite'}
            </Btn>
          </div>
        </div>
      </div>
    </div>
  ), document.body);
}

(function() {
  if (document.getElementById('scp-users-css')) return;
  const s = document.createElement('style'); s.id = 'scp-users-css';
  s.textContent = `
    .scp-users-table { background: var(--surface-2); border-radius: 12px; border: 1px solid var(--border-soft); overflow: hidden; }
    .scp-users-table tbody tr.just-added td { background: oklch(0.26 0.06 160 / .35); animation: justAddedPulseUser 2.4s ease-out; }
    @keyframes justAddedPulseUser {
      0%   { background: oklch(0.34 0.10 160 / .55); box-shadow: inset 3px 0 0 oklch(0.78 0.16 160); }
      100% { background: oklch(0.235 0.014 250); box-shadow: inset 3px 0 0 transparent; }
    }
    .scp-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .scp-role-card {
      display: flex; flex-direction: column; gap: 6px;
      padding: 12px 14px; border-radius: 12px;
      background: var(--surface-2); border: 1px solid var(--border-soft);
      text-align: left; transition: background .12s, border-color .12s, transform .08s;
      cursor: pointer;
    }
    .scp-role-card:hover { background: var(--surface-3); border-color: var(--border); }
    .scp-role-card .head { display: flex; align-items: center; gap: 8px; }
    .scp-role-card .head strong { font-size: 13.5px; font-weight: 600; color: var(--fg); flex: 1; }
    .scp-role-card .head svg { color: oklch(0.86 0.14 160); }
    .role-dot { width: 8px; height: 8px; border-radius: 999px; }
    .role-dot.tone-emerald { background: oklch(0.78 0.16 160); box-shadow: 0 0 0 3px oklch(0.78 0.16 160 / .2); }
    .role-dot.tone-sky     { background: oklch(0.76 0.12 230); box-shadow: 0 0 0 3px oklch(0.76 0.12 230 / .2); }
    .role-dot.tone-amber   { background: oklch(0.84 0.14 78);  box-shadow: 0 0 0 3px oklch(0.84 0.14 78 / .2); }
    .role-dot.tone-violet  { background: oklch(0.74 0.14 285); box-shadow: 0 0 0 3px oklch(0.74 0.14 285 / .2); }
    .scp-role-card .desc { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
    .scp-role-card.active.tone-emerald { background: oklch(0.26 0.06 160 / .55); border-color: oklch(0.50 0.10 160 / .65); }
    .scp-role-card.active.tone-sky     { background: oklch(0.26 0.06 230 / .45); border-color: oklch(0.50 0.10 230 / .65); }
    .scp-role-card.active.tone-amber   { background: oklch(0.26 0.06 78  / .45); border-color: oklch(0.50 0.10 78  / .65); }
    .scp-role-card.active.tone-violet  { background: oklch(0.26 0.06 285 / .45); border-color: oklch(0.50 0.10 285 / .65); }
    .scp-role-card.active .desc { color: var(--fg-2); }
  `;
  document.head.appendChild(s);
})();

window.ScreenSettings = ScreenSettings;