/* ============================================================
   AGENDA — Login da empresa + Gestão de usuários
   ============================================================ */

/* ---------------- TELA DE LOGIN ----------------
   Cada empresa entra pelo próprio endereço (/<slug>). O login desta
   tela só vale para a empresa do endereço — credenciais de outra
   empresa não entram aqui. Sem endereço na URL, pede o endereço. */
const LEGACY_LOGIN_REMEMBER_PREFIX = 'ag-login-remember:';
const LAST_LOGIN_PREFIX = 'ag-last-login:';

function clearLegacyRememberedLogins() {
  try {
    Object.keys(localStorage)
      .filter((key) => key.startsWith(LEGACY_LOGIN_REMEMBER_PREFIX))
      .forEach((key) => localStorage.removeItem(key));
  } catch {
    // Armazenamento indisponivel: nao interfere no login.
  }
}

clearLegacyRememberedLogins();

function lastLoginKey(slug) {
  return LAST_LOGIN_PREFIX + String(slug || '').trim().toLowerCase();
}

function loadLastLogin(slug) {
  if (!slug) return '';
  try {
    return String(localStorage.getItem(lastLoginKey(slug)) || '').trim();
  } catch {
    return '';
  }
}

function saveLastLogin(slug, login) {
  if (!slug || !login) return;
  try {
    localStorage.setItem(lastLoginKey(slug), login);
  } catch {
    // Armazenamento indisponivel: o acesso continua normalmente.
  }
}

function loginFromTenantCredential(slug, value) {
  const text = String(value || '');
  const prefix = String(slug || '').trim().toLowerCase() + '::';
  return prefix !== '::' && text.toLowerCase().startsWith(prefix) ? text.slice(prefix.length) : text;
}

async function storeBrowserCredential(login, pass, companyName) {
  if (!window.isSecureContext || !navigator.credentials || typeof window.PasswordCredential !== 'function') {
    return false;
  }
  try {
    const credential = new window.PasswordCredential({
      id: login,
      password: pass,
      name: companyName || login,
    });
    await navigator.credentials.store(credential);
    return true;
  } catch {
    // O navegador ou uma política corporativa pode bloquear o armazenamento.
    return false;
  }
}

function LoginScreen({ onLogin, notice }) {
  const slug = window.TENANT_SLUG || '';
  const lastLogin = loadLastLogin(slug);
  const [remember, setRemember] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [empresa, setEmpresa] = React.useState(null); // null = carregando · false = não encontrada
  const [addr, setAddr] = React.useState('');

  React.useEffect(() => {
    clearLegacyRememberedLogins();
    setRemember(false);
  }, [slug]);

  React.useEffect(() => {
    if (!slug) return;
    window.API.tenantInfo(slug)
      .then((t) => { setEmpresa(t); document.title = t.name + ' — Agenda'; })
      .catch(() => setEmpresa(false));
  }, [slug]);

  const goAddr = (e) => {
    e.preventDefault();
    const s = addr.trim().toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
    if (s) window.location.href = (window.BASE_PATH || '/') + s;
  };

  // sem endereço na URL (ou endereço que não existe): pede o endereço da empresa
  if (!slug || empresa === false) {
    return (
      <div className="login-wrap">
        <form className="login-card" onSubmit={goAddr}>
          <div className="login-logo"><window.Icon name="calendar" size={26} stroke={2.2} /></div>
          <h1 className="login-title">Agenda</h1>
          <p className="login-sub">Informe o endereço da sua empresa para entrar</p>
          {empresa === false && (
            <div className="login-err">
              <window.Icon name="info" size={15} /> <span>Empresa não encontrada neste endereço. Confira o endereço recebido (ex.: …/suaempresa).</span>
            </div>
          )}
          <window.Field label="Endereço da empresa">
            <window.Input value={addr} onChange={(e) => setAddr(e.target.value)}
              placeholder="ex.: delsistemas" autoFocus />
          </window.Field>
          <window.Button type="submit" variant="primary" block>Continuar</window.Button>
        </form>
        <div className="login-foot muted">Sistema de agendamentos · acesso restrito</div>
      </div>
    );
  }

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setErr('');
    setBusy(true);
    try {
      const form = e.currentTarget;
      const submittedLogin = form.elements.username ? form.elements.username.value : '';
      const submittedPass = form.elements.password ? form.elements.password.value : '';
      const cleanLogin = loginFromTenantCredential(slug, submittedLogin).trim();
      await onLogin(cleanLogin, submittedPass, remember);
      saveLastLogin(slug, cleanLogin);
      await storeBrowserCredential(cleanLogin, submittedPass, empresa && empresa.name);
    } catch (ex) {
      setErr(ex.message || 'Não foi possível entrar.');
      setBusy(false);
    }
  };

  return (
    <div className="login-wrap">
      <form className="login-card" name="tenant-login" autoComplete="on" onSubmit={submit}>
        <div className="login-logo"><window.Icon name="calendar" size={26} stroke={2.2} /></div>
        <h1 className="login-title">{empresa ? empresa.name : 'Agenda'}</h1>
        <p className="login-sub">Entre com seu usuário e senha</p>

        {notice && !err && (
          <div className="login-err">
            <window.Icon name="info" size={15} /> <span>{notice}</span>
          </div>
        )}

        {err && (
          <div className="login-err">
            <window.Icon name="info" size={15} /> <span>{err}</span>
          </div>
        )}

        <window.Field label="Usuário">
          <window.Input key={'username-' + slug} defaultValue={lastLogin}
            id="login-username" name="username" placeholder="seu usuário" autoFocus required
            autoComplete="username" autoCapitalize="none" autoCorrect="off" spellCheck={false} />
        </window.Field>
        <window.Field label="Senha">
          <window.Input key={'password-' + slug} type="password" defaultValue=""
            id="login-password" name="password" placeholder="••••••••" required
            autoComplete="current-password" autoCapitalize="none" autoCorrect="off" spellCheck={false} />
        </window.Field>

        <label className="login-remember">
          <input
            type="checkbox"
            checked={remember}
            onChange={(e) => setRemember(e.target.checked)}
          />
          <span>Manter conectado neste dispositivo</span>
        </label>

        <window.Button type="submit" variant="primary" block disabled={busy}>
          {busy ? 'Entrando…' : 'Entrar'}
        </window.Button>
      </form>
      <div className="login-foot muted">Sistema de agendamentos · acesso restrito</div>
    </div>
  );
}

/* ---------------- TELA DE TESTE GRATUITO ---------------- */
function FreeTrialScreen({ onRegister }) {
  const [name, setName] = React.useState('');
  const [businessType, setBusinessType] = React.useState('geral');
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [infoOpen, setInfoOpen] = React.useState(false);
  const [termsOpen, setTermsOpen] = React.useState(false);
  const [termsAccepted, setTermsAccepted] = React.useState(false);
  const [privacyOpen, setPrivacyOpen] = React.useState(false);
  const [privacyAccepted, setPrivacyAccepted] = React.useState(false);
  const businessOptions = Object.values(window.DB.businessTypes || {});
  const termsVersion = '2026-06-30';
  const privacyVersion = '2026-07-09';
  const features = [
    { icon: 'calendar', title: 'Agenda inteligente', text: 'Visualize horários, remarcações, confirmações e histórico em poucos cliques.' },
    { icon: 'users', title: 'Clientes organizados', text: 'Cadastre clientes, contatos, observações e vínculos com serviços ou planos.' },
    { icon: 'team', title: 'Equipe e permissões', text: 'Controle profissionais, usuários, horários de atendimento e acessos da empresa.' },
    { icon: 'wallet', title: 'Financeiro integrado', text: 'Acompanhe receitas, despesas, cobranças e pagamentos dentro do mesmo sistema.' },
  ];

  const previewSlug = name.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '');

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setErr('');
    if (!termsAccepted || !privacyAccepted) {
      setErr('Para criar o teste gratuito, aceite os termos e a política de privacidade do DEL AGENDA.');
      return;
    }
    setBusy(true);
    try {
      const res = await window.API.freeTrial({ name, businessType, email, pass, termsAccepted, termsVersion, privacyAccepted, privacyVersion });
      // Redireciona para a nova empresa
      if (res.slug) {
        window.location.href = (window.BASE_PATH || '/') + res.slug;
      } else {
        setErr(res.message || 'Erro ao realizar cadastro.');
        setBusy(false);
      }
    } catch (ex) {
      setErr(ex.message || 'Não foi possível realizar o cadastro.');
      setBusy(false);
    }
  };

  return (
    <div className="login-wrap">
      <form className="login-card" onSubmit={submit}>
        <div className="login-logo brand"><img src="assets/del-agenda-icon.png" alt="" /></div>
        <div className="trial-badge">7 dias grátis</div>
        <h1 className="login-title">Teste Gratuito</h1>
        <p className="login-sub">Crie sua conta e experimente o DEL AGENDA sem cartão de crédito</p>

        <window.Button type="button" variant="outline" icon="info" block onClick={() => setInfoOpen(true)}>
          Ver o que o sistema oferece
        </window.Button>

        {err && (
          <div className="login-err">
            <window.Icon name="info" size={15} /> <span>{err}</span>
          </div>
        )}

        <window.Field label="Nome da Empresa">
          <window.Input value={name} onChange={(e) => setName(e.target.value)}
            placeholder="Minha Clínica" autoFocus />
          {previewSlug && (
            <div className="field-hint" style={{ marginTop: 6, color: '#10b981' }}>
              Seu acesso será: <strong>/{previewSlug}</strong>
            </div>
          )}
        </window.Field>

        <window.Field label="Setor / ramo">
          <window.Select value={businessType} onChange={(e) => setBusinessType(e.target.value)}>
            {businessOptions.map((type) => (
              <option key={type.id} value={type.id}>{type.name}</option>
            ))}
          </window.Select>
        </window.Field>
        
        <window.Field label="E-mail (Seu login)">
          <window.Input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
            placeholder="seu@email.com" autoComplete="username" />
        </window.Field>

        <window.Field label="Senha">
          <window.Input type="password" value={pass} onChange={(e) => setPass(e.target.value)}
            placeholder="••••••••" autoComplete="new-password" />
        </window.Field>

        <div className="trial-terms">
          <input
            id="freeTrialTerms"
            type="checkbox"
            checked={termsAccepted}
            onChange={(e) => setTermsAccepted(e.target.checked)}
          />
          <span>
            <label htmlFor="freeTrialTerms">Li e aceito os </label>
            <button type="button" className="terms-link" onClick={() => setTermsOpen(true)}>
              Termos do Teste Gratuito
            </button>
            <label htmlFor="freeTrialTerms">.</label>
          </span>
        </div>

        <div className="trial-terms">
          <input
            id="freeTrialPrivacy"
            type="checkbox"
            checked={privacyAccepted}
            onChange={(e) => setPrivacyAccepted(e.target.checked)}
          />
          <span>
            <label htmlFor="freeTrialPrivacy">Li e aceito a </label>
            <button type="button" className="terms-link" onClick={() => setPrivacyOpen(true)}>
              Política de Privacidade
            </button>
            <label htmlFor="freeTrialPrivacy">.</label>
          </span>
        </div>

        <window.Button type="submit" variant="primary" block disabled={busy || !name || !email || pass.length < 8 || !termsAccepted || !privacyAccepted}>
          {busy ? 'Criando Conta…' : 'Criar Conta e Começar Teste'}
        </window.Button>
      </form>
      <div className="login-foot muted">Não é necessário cartão de crédito</div>

      {infoOpen && (
        <window.Modal
          title="DEL AGENDA"
          sub="Teste gratuito por 7 dias"
          wide
          onClose={() => setInfoOpen(false)}
          footer={(
            <>
              <window.Button onClick={() => setInfoOpen(false)}>Fechar</window.Button>
              <window.Button variant="primary" onClick={() => setInfoOpen(false)}>Começar cadastro</window.Button>
            </>
          )}
        >
          <div className="trial-modal">
            <div className="trial-modal-brand">
              <img src="assets/del-agenda-icon.png" alt="" />
              <div>
                <b>Organize sua operação em um só lugar</b>
                <span>Durante o teste gratuito você pode conhecer a agenda, cadastrar clientes, configurar serviços, montar equipe e avaliar o financeiro do sistema.</span>
              </div>
            </div>

            <div className="trial-feature-grid">
              {features.map((feature) => (
                <div className="trial-feature" key={feature.title}>
                  <div className="trial-feature-icon"><window.Icon name={feature.icon} size={19} /></div>
                  <div>
                    <b>{feature.title}</b>
                    <span>{feature.text}</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="trial-note">
              <window.Icon name="check2" size={18} />
              <span>O teste dura 7 dias, não exige cartão de crédito e cria um endereço exclusivo para sua empresa acessar o sistema.</span>
            </div>
          </div>
        </window.Modal>
      )}

      {termsOpen && (
        <window.Modal
          title="Termos do Teste Gratuito"
          sub="DEL AGENDA"
          wide
          onClose={() => setTermsOpen(false)}
          footer={(
            <>
              <window.Button onClick={() => setTermsOpen(false)}>Fechar</window.Button>
              <window.Button
                variant="primary"
                icon="check2"
                onClick={() => { setTermsAccepted(true); setTermsOpen(false); }}
              >
                Aceitar termos
              </window.Button>
            </>
          )}
        >
          <div className="trial-modal trial-terms-modal">
            <div className="trial-modal-brand">
              <img src="assets/del-agenda-icon.png" alt="" />
              <div>
                <b>Teste gratuito do DEL AGENDA</b>
                <span>Ao criar a conta, você recebe 7 dias para conhecer os recursos do sistema, sem cobrança automática e sem necessidade de cartão de crédito.</span>
              </div>
            </div>

            <div className="trial-terms-list">
              <section>
                <b>1. Prazo do teste</b>
                <span>O acesso gratuito dura 7 dias a partir da criação da conta. Depois desse período, o acesso poderá ser limitado até a contratação de um plano.</span>
              </section>
              <section>
                <b>2. Uso dos dados</b>
                <span>Os dados informados serão usados para criar a empresa, o usuário administrador, enviar comunicações do sistema e permitir o uso do DEL AGENDA.</span>
              </section>
              <section>
                <b>3. Responsabilidade do usuário</b>
                <span>O usuário é responsável pelas informações cadastradas, pelo uso adequado do sistema e pela segurança do e-mail e senha de acesso.</span>
              </section>
              <section>
                <b>4. Recursos do período gratuito</b>
                <span>Durante o teste, algumas funções podem ter limites técnicos ou operacionais, especialmente envios automáticos, integrações e recursos pagos.</span>
              </section>
              <section>
                <b>5. Privacidade e segurança</b>
                <span>As informações serão tratadas para cadastro, suporte, segurança, comunicação e operação do serviço, conforme a finalidade do teste gratuito.</span>
              </section>
              <section>
                <b>6. Registro do aceite</b>
                <span>Ao aceitar estes termos, o sistema registra a data, a versão dos termos e dados técnicos do acesso para comprovar a concordância.</span>
              </section>
            </div>
          </div>
        </window.Modal>
      )}
      {privacyOpen && (
        <window.Modal
          title="Política de Privacidade"
          sub={`Versão ${privacyVersion}`}
          wide
          onClose={() => setPrivacyOpen(false)}
          footer={(
            <>
              <window.Button onClick={() => setPrivacyOpen(false)}>Fechar</window.Button>
              <window.Button
                variant="primary"
                icon="check2"
                onClick={() => { setPrivacyAccepted(true); setPrivacyOpen(false); }}
              >
                Aceitar política
              </window.Button>
            </>
          )}
        >
          <div className="trial-modal trial-terms-modal">
            <div className="trial-modal-brand">
              <img src="assets/del-agenda-icon.png" alt="" />
              <div>
                <b>Como o DEL AGENDA trata dados pessoais</b>
                <span>Este resumo cobre o cadastro do teste e a operação básica da plataforma. Cada empresa usuária deve complementar o tema com sua própria base legal e comunicação ao titular.</span>
              </div>
            </div>

            <div className="trial-terms-list">
              <section>
                <b>1. Dados coletados</b>
                <span>Nome da empresa, segmento, e-mail de acesso, senha, IP, navegador e registros técnicos necessários para criar a conta, autenticar acessos e proteger o sistema.</span>
              </section>
              <section>
                <b>2. Finalidades</b>
                <span>Cadastro da empresa, autenticação, suporte, comunicações operacionais, segurança, auditoria, prevenção a fraude e funcionamento da agenda.</span>
              </section>
              <section>
                <b>3. Compartilhamento</b>
                <span>Os dados podem ser tratados por provedores necessários à operação, como hospedagem, banco de dados, envio de e-mail e integrações de pagamento, sempre na extensão necessária ao serviço.</span>
              </section>
              <section>
                <b>4. Direitos do titular</b>
                <span>O titular pode solicitar confirmação de tratamento, acesso, correção, anonimização, eliminação quando cabível e informações sobre compartilhamento, conforme a LGPD.</span>
              </section>
              <section>
                <b>5. Retenção e segurança</b>
                <span>Os dados são mantidos pelo tempo necessário ao serviço, obrigações legais, auditoria e defesa. O sistema adota hash de senha, sessões protegidas, trilha de auditoria e rotinas de backup.</span>
              </section>
              <section>
                <b>6. Papel das partes</b>
                <span>No modelo SaaS, a empresa usuária normalmente é a controladora dos dados do dia a dia e o DEL AGENDA atua como operador da plataforma.</span>
              </section>
            </div>
          </div>
        </window.Modal>
      )}
    </div>
  );
}
window.FreeTrialScreen = FreeTrialScreen;

/* ---------------- MODAL: NOVO/EDITAR USUÁRIO ---------------- */
function UserModal({ user, onSave, onClose, maxUsers = 0, userCount = 0, team = [], protectedAdmin = false }) {
  const editing = !!user;
  const [name, setName] = React.useState(user ? user.name : '');
  const [login, setLogin] = React.useState(user ? user.login : '');
  const [pass, setPass] = React.useState('');
  const [role, setRole] = React.useState(user ? user.role : 'user');
  const linkedPro = user && user.proId ? team.find((p) => Number(p.id) === Number(user.proId)) : null;
  const [color, setColor] = React.useState(user ? (user.color || (linkedPro && linkedPro.color) || '') : '');
  const [busy, setBusy] = React.useState(false);
  const usedColors = (team || []).filter((p) => !p.archived && (!user || Number(p.id) !== Number(user.proId))).map((p) => p.color);

  const userLimitReached = maxUsers > 0 && userCount >= maxUsers;
  const blockedByUserLimit = !editing && userLimitReached;

  const save = async () => {
    if (busy || blockedByUserLimit) return;
    setBusy(true);
    try {
      const payload = editing
        ? { name, role, color, ...(pass ? { pass } : {}) }
        : { name, login, pass, role, color };
      await onSave(payload);
      onClose();
    } catch (ex) {
      window.alert(ex.message || 'Erro ao salvar usuário.');
      setBusy(false);
    }
  };

  return (
    <window.Modal
      title={editing ? 'Editar usuário' : 'Novo usuário'}
      sub={editing ? 'Atualize nome, papel ou redefina a senha' : 'Crie um acesso para sua equipe'}
      onClose={onClose}
      footer={(
        <>
          <window.Button onClick={onClose}>Cancelar</window.Button>
          <window.Button variant="primary" onClick={save} disabled={busy || blockedByUserLimit}>
            {busy ? 'Salvando…' : 'Salvar'}
          </window.Button>
        </>
      )}
    >
      <div className="stack" style={{ gap: 14 }}>
        <window.Field label="Nome">
          <window.Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Nome da pessoa" />
        </window.Field>
        <window.Field label="Usuário (login)">
          <window.Input value={login} disabled={editing}
            onChange={(e) => setLogin(e.target.value)}
            placeholder="ex.: recepcao, ana.silva" />
        </window.Field>
        <window.Field label={editing ? 'Nova senha' : 'Senha'} optional={editing}>
          <window.Input type="password" value={pass} onChange={(e) => setPass(e.target.value)}
            placeholder={editing ? 'deixe em branco p/ manter' : 'mínimo 8 caracteres'} autoComplete="new-password" />
        </window.Field>
        <window.Field label="Papel">
          <window.Select value={role} disabled={protectedAdmin} onChange={(e) => setRole(e.target.value)}>
            <option value="user">Usuário (acesso somente à própria agenda)</option>
            <option value="admin">Administrador (gerencia tudo, exceto financeiro, usuários e exclusões)</option>
          </window.Select>
          {blockedByUserLimit && (
            <div className="field-hint err" style={{ marginTop: 6 }}>
              Limite de usuários com login atingido ({maxUsers}). Faça upgrade para criar outro acesso.
            </div>
          )}
        </window.Field>
        <window.ColorPicker value={color} currentColor={user && (user.color || (linkedPro && linkedPro.color))} usedColors={usedColors} onChange={setColor} />
      </div>
    </window.Modal>
  );
}

/* ---------------- TELA: USUÁRIOS ---------------- */
function UsersScreen(ctx) {
  const [users, setUsers] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [modal, setModal] = React.useState(null); // {} novo | {user} editar | null

  const load = React.useCallback(async () => {
    try {
      const r = await window.API.users.list();
      setUsers(r.users);
    } catch (ex) {
      setErr(ex.message || 'Erro ao carregar usuários.');
    }
  }, []);
  React.useEffect(() => { load(); }, [load]);

  const roleLabel = (r) => (r === 'admin' ? 'Administrador' : (r === 'pro' ? 'Profissional' : 'Usuário'));

  const save = async (payload, editId) => {
    const r = editId ? await window.API.users.update(editId, payload) : await window.API.users.create(payload);
    setUsers((list) => {
      if (!list) return list;
      return list.some((u) => u.id === r.user.id)
        ? list.map((u) => (u.id === r.user.id ? r.user : u))
        : [...list, r.user];
    });
    if (ctx.user && r.user && ctx.user.id === r.user.id && ctx.updateCurrentUser) {
      ctx.updateCurrentUser(r.user);
    }
    ctx.toast(editId ? 'Usuário atualizado' : 'Usuário criado');
  };

  const toggleStatus = async (u) => {
    try {
      const next = u.status === 'ativo' ? 'suspenso' : 'ativo';
      const r = await window.API.users.update(u.id, { status: next });
      setUsers((list) => list.map((x) => (x.id === u.id ? r.user : x)));
      ctx.toast(next === 'ativo' ? 'Usuário reativado' : 'Usuário suspenso');
    } catch (ex) { ctx.toast(ex.message || 'Erro', 'x'); }
  };

  const remove = async (u) => {
    if (!window.confirm(`Excluir o usuário "${u.name}"? Esta ação não pode ser desfeita.`)) return;
    try {
      await window.API.users.remove(u.id);
      setUsers((list) => list.filter((x) => x.id !== u.id));
      ctx.toast('Usuário excluído');
    } catch (ex) { ctx.toast(ex.message || 'Erro', 'x'); }
  };

  const maxUsers = (ctx.limits && ctx.limits.maxUsers) || 0;
  const userCount = (users || []).length;
  const primaryAdminId = (users || []).filter((u) => u.role === 'admin').reduce((lowest, u) => lowest === null || u.id < lowest ? u.id : lowest, null);
  const currentIsPrimaryAdmin = !!(ctx.user && ctx.user.id === primaryAdminId);
  const userLimitReached = maxUsers > 0 && userCount >= maxUsers;

  return (
    <div className="content-inner fadein" style={{ maxWidth: 860 }}>
      <window.Header title="Usuários" sub="Quem pode acessar a agenda da sua empresa"
        action={<window.Button variant="primary" icon="plus" disabled={userLimitReached} onClick={() => setModal({})}>Novo usuário</window.Button>} />

      {err && <div className="login-err" style={{ marginBottom: 14 }}><window.Icon name="info" size={15} /> <span>{err}</span></div>}

      {userLimitReached && (
        <div className="card" style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '12px 16px', marginBottom: 14, background: 'var(--warning-soft)', borderColor: 'var(--warning)' }}>
          <window.Icon name="info" size={18} style={{ color: 'var(--warning)', flex: 'none' }} />
          <div style={{ fontSize: 13 }}>
            <b>Limite de usuários com login atingido ({maxUsers}).</b> Contas de administrador, usuário e profissional usam essa mesma cota. Membros da equipe sem login não entram na contagem.
          </div>
        </div>
      )}

      <div className="card">
        <div style={{ overflowX: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr><th>Nome</th><th>Usuário</th><th>Papel</th><th>Situação</th><th></th></tr>
            </thead>
            <tbody>
              {users === null && <tr><td colSpan={5} className="muted" style={{ padding: 18 }}>Carregando…</td></tr>}
              {users && users.length === 0 && <tr><td colSpan={5} className="muted" style={{ padding: 18 }}>Nenhum usuário.</td></tr>}
              {users && users.map((u) => {
                const isMe = ctx.user && u.id === ctx.user.id;
                const isPrimaryAdmin = u.id === primaryAdminId;
                const canManageTarget = u.role !== 'admin' || currentIsPrimaryAdmin;
                return (
                  <tr key={u.id}>
                    <td>
                      <div className="row" style={{ gap: 11 }}>
                        <window.Avatar initials={(u.name || u.login).slice(0, 2).toUpperCase()} color={u.color || 'gray'} size={34} />
                        <span style={{ fontWeight: 600 }}>{u.name || '—'}{isMe && <span className="muted" style={{ fontWeight: 400 }}> (você)</span>}</span>
                      </div>
                    </td>
                    <td className="muted">{u.login}</td>
                    <td><window.Badge cls={u.role === 'admin' ? 'blue' : (u.role === 'pro' ? 'violet' : 'plain')}>{roleLabel(u.role)}</window.Badge></td>
                    <td><window.Badge cls={u.status === 'ativo' ? 'green' : 'red'} dot>{u.status === 'ativo' ? 'Ativo' : 'Suspenso'}</window.Badge></td>
                    <td onClick={(e) => e.stopPropagation()}>
                      <div className="row" style={{ justifyContent: 'flex-end' }}>
                        {(!isMe || currentIsPrimaryAdmin) && canManageTarget && (
                          <window.Menu trigger={<button className="iconbtn"><window.Icon name="dots" size={18} /></button>}>
                            <button onClick={() => setModal({ user: u })}><window.Icon name="edit" size={15} /> Editar</button>
                            {!isPrimaryAdmin && <>
                              <button onClick={() => toggleStatus(u)}>
                                <window.Icon name={u.status === 'ativo' ? 'x' : 'check'} size={15} /> {u.status === 'ativo' ? 'Suspender' : 'Reativar'}
                              </button>
                              <div className="sep" />
                              <button className="danger" onClick={() => remove(u)}><window.Icon name="trash" size={15} /> Excluir</button>
                            </>}
                          </window.Menu>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {modal && (
        <UserModal
          user={modal.user}
          protectedAdmin={!!(modal.user && modal.user.id === primaryAdminId)}
          maxUsers={maxUsers}
          userCount={userCount}
          team={ctx.team || []}
          onClose={() => setModal(null)}
          onSave={(payload) => save(payload, modal.user ? modal.user.id : null)}
        />
      )}
    </div>
  );
}

Object.assign(window, { LoginScreen, UsersScreen, UserModal });