/* global React, Icon, Button, Badge, Card, brl, PageHead, Toolbar, FooterPager, KpiMini */

// ============== NOTA FISCAL ==============
// NF components moved to: NF_Widgets.jsx, NF_Forms.jsx, NF_Sections.jsx
// Components available globally: NFEmissao, NFHistorico, NFEmpresas, NFImportarXml, NFLogs, NFTabs

// ============== FORMULÁRIOS ==============
const FORM_TIPOS = ['Captação de distribuidores', 'Captação de salões', 'Pesquisa de satisfação', 'Cadastro de leads', 'Outro'];
const FORM_CORES = ['#C9A36B', '#6BA3D6', '#5BB17A', '#D4A04A', '#D9655E', '#9B6DD7', '#E88C5D'];
const FORM_CAMPOS_PADRAO = [
  { id: 'nome', label: 'Nome completo', tipo: 'text', obrigatorio: true },
  { id: 'email', label: 'E-mail', tipo: 'email', obrigatorio: true },
  { id: 'celular', label: 'Celular / WhatsApp', tipo: 'tel', obrigatorio: true },
  { id: 'empresa', label: 'Nome da empresa', tipo: 'text', obrigatorio: false },
  { id: 'cnpj', label: 'CNPJ', tipo: 'text', obrigatorio: false },
  { id: 'cidade', label: 'Cidade', tipo: 'text', obrigatorio: false },
  { id: 'uf', label: 'UF', tipo: 'text', obrigatorio: false },
  { id: 'mensagem', label: 'Mensagem', tipo: 'textarea', obrigatorio: false },
];

function FormDrawer({ form, setForm, onSave, onCancel, saving }) {
  const toggleCampo = (id) => {
    const current = form.campos || [];
    const exists = current.find(c => c.id === id);
    if (exists) {
      setForm({ ...form, campos: current.filter(c => c.id !== id) });
    } else {
      const def = FORM_CAMPOS_PADRAO.find(c => c.id === id);
      setForm({ ...form, campos: [...current, { ...def }] });
    }
  };
  const isSelected = (id) => (form.campos || []).some(c => c.id === id);

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 999, display: 'flex', justifyContent: 'flex-end' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }} onClick={onCancel} />
      <div style={{
        position: 'relative', width: 480, maxWidth: '90vw', height: '100%',
        background: 'var(--tm-bg-1)', borderLeft: '1px solid var(--tm-line-1)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--tm-line-1)' }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--tm-fg-1)' }}>
            {form.id ? 'Editar formulário' : 'Novo formulário'}
          </div>
          <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--tm-fg-3)', padding: 4 }}>
            <Icon name="x" size={18} />
          </button>
        </div>

        {/* Body */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '20px' }}>
          <div className="field" style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 4, display: 'block' }}>Nome do formulário *</label>
            <input className="input" value={form.nome || ''} onChange={e => setForm({ ...form, nome: e.target.value })}
              placeholder="Ex: Cadastro de novos distribuidores" style={{ width: '100%' }} />
          </div>

          <div className="field" style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 4, display: 'block' }}>Tipo</label>
            <select className="input" value={form.tipo || 'Captação de distribuidores'} onChange={e => setForm({ ...form, tipo: e.target.value })} style={{ width: '100%' }}>
              {FORM_TIPOS.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>

          <div className="field" style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 4, display: 'block' }}>Descrição (opcional)</label>
            <textarea className="input" value={form.descricao || ''} onChange={e => setForm({ ...form, descricao: e.target.value })}
              placeholder="Texto exibido no topo do formulário..." rows={3} style={{ width: '100%', resize: 'vertical' }} />
          </div>

          <div className="field" style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 4, display: 'block' }}>Cor do tema</label>
            <div style={{ display: 'flex', gap: 8 }}>
              {FORM_CORES.map(c => (
                <div key={c} onClick={() => setForm({ ...form, cor: c })} style={{
                  width: 28, height: 28, borderRadius: 6, background: c, cursor: 'pointer',
                  border: form.cor === c ? '2px solid var(--tm-fg-1)' : '2px solid transparent',
                  transition: 'border-color .15s',
                }} />
              ))}
            </div>
          </div>

          <div style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 8, display: 'block' }}>Campos do formulário</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {FORM_CAMPOS_PADRAO.map(campo => (
                <label key={campo.id} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
                  borderRadius: 8, cursor: 'pointer',
                  background: isSelected(campo.id) ? 'rgba(201,163,107,0.08)' : 'var(--tm-bg-2)',
                  border: isSelected(campo.id) ? '1px solid rgba(201,163,107,0.25)' : '1px solid var(--tm-line-1)',
                  transition: 'all .15s',
                }}>
                  <input type="checkbox" checked={isSelected(campo.id)} onChange={() => toggleCampo(campo.id)}
                    style={{ accentColor: 'var(--tm-brand-champagne)' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, color: 'var(--tm-fg-1)' }}>{campo.label}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--tm-fg-4)' }}>Tipo: {campo.tipo}{campo.obrigatorio ? ' · obrigatório' : ''}</div>
                  </div>
                </label>
              ))}
            </div>
          </div>

          <div className="field" style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 4, display: 'block' }}>Status</label>
            <select className="input" value={form.status || 'Ativo'} onChange={e => setForm({ ...form, status: e.target.value })} style={{ width: '100%' }}>
              <option value="Ativo">Ativo</option>
              <option value="Inativo">Inativo</option>
            </select>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding: '14px 20px', borderTop: '1px solid var(--tm-line-1)', display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Button variant="secondary" size="sm" onClick={onCancel}>Cancelar</Button>
          <Button variant="primary" size="sm" onClick={onSave} disabled={saving || !(form.nome || '').trim()}>
            {saving ? 'Salvando...' : form.id ? 'Salvar alterações' : 'Criar formulário'}
          </Button>
        </div>
      </div>
    </div>
  );
}

function Formularios({ onNav }) {
  const [forms, setForms] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [drawer, setDrawer] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [respostasMap, setRespostasMap] = React.useState({});

  const load = React.useCallback(async () => {
    if (!window.tmSupabase) { setLoading(false); return; }
    setLoading(true);
    const { data } = await window.tmSupabase.from('formularios').select('*').order('created_at', { ascending: false });
    if (data) setForms(data);
    // Count respostas per formulario
    const { data: resps } = await window.tmSupabase.from('formulario_respostas').select('formulario_id');
    if (resps) {
      const map = {};
      resps.forEach(r => { map[r.formulario_id] = (map[r.formulario_id] || 0) + 1; });
      setRespostasMap(map);
    }
    setLoading(false);
  }, []);
  React.useEffect(() => { load(); }, [load]);

  const openNew = () => {
    const defaultCampos = FORM_CAMPOS_PADRAO.filter(c => c.obrigatorio).map(c => ({ ...c }));
    setDrawer({
      nome: '', tipo: 'Captação de distribuidores', status: 'Ativo',
      campos: defaultCampos, cor: '#C9A36B', descricao: '',
    });
  };

  const openEdit = (f) => {
    setDrawer({ ...f, campos: f.campos || [] });
  };

  const saveForm = async () => {
    if (!drawer || !(drawer.nome || '').trim()) return;
    if (!window.tmSupabase) { alert('Supabase indisponível.'); return; }
    setSaving(true);
    const payload = {
      nome: drawer.nome.trim(), tipo: drawer.tipo, status: drawer.status,
      campos: drawer.campos || [], cor: drawer.cor || '#C9A36B',
      descricao: drawer.descricao || null,
    };
    let error;
    if (drawer.id) {
      payload.updated_at = new Date().toISOString();
      ({ error } = await window.tmSupabase.from('formularios').update(payload).eq('id', drawer.id));
    } else {
      ({ error } = await window.tmSupabase.from('formularios').insert(payload));
    }
    setSaving(false);
    if (error) { alert('Erro ao salvar: ' + error.message); return; }
    setDrawer(null);
    load();
  };

  const deleteForm = async (id) => {
    if (!confirm('Excluir este formulário e todas as respostas? Esta ação não pode ser desfeita.')) return;
    await window.tmSupabase.from('formularios').delete().eq('id', id);
    setDrawer(null);
    load();
  };

  const toggleStatus = async (f) => {
    const newStatus = f.status === 'Ativo' ? 'Inativo' : 'Ativo';
    await window.tmSupabase.from('formularios').update({ status: newStatus }).eq('id', f.id);
    load();
  };

  const fmtDate = (iso) => {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
  };

  return (
    <div className="canvas">
      <PageHead title="Formulários" sub="Páginas públicas para captação de distribuidores, salões e leads"
        right={<Button variant="primary" icon="plus" size="sm" onClick={openNew}>Novo formulário</Button>}/>
      <FormTabs active="lista" onNav={onNav} />

      {loading ? (
        <div style={{ padding: '60px 0', textAlign: 'center', color: 'var(--tm-fg-3)', fontSize: 13 }}>Carregando...</div>
      ) : forms.length === 0 ? (
        <div style={{ padding: '60px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
          <Icon name="file-plus" size={40} style={{ opacity: 0.3, marginBottom: 14 }} />
          <div style={{ fontSize: 15, marginBottom: 6 }}>Nenhum formulário criado</div>
          <div style={{ fontSize: 12.5, marginBottom: 16 }}>Clique em "Novo formulário" para criar uma página de captação</div>
          <Button variant="primary" icon="plus" size="sm" onClick={openNew}>Criar primeiro formulário</Button>
        </div>
      ) : (
        <div className="grid-3">
          {forms.map(f => {
            const resps = respostasMap[f.id] || 0;
            const cor = f.cor || '#C9A36B';
            return (
              <div key={f.id} className="card" style={{ padding: 20, cursor: 'pointer' }} onClick={() => openEdit(f)}>
                <div className="row between">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 8, background: cor + '22', color: cor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="file-text" size={16} />
                    </div>
                    <div>
                      <div style={{ fontWeight: 500, fontSize: 14 }}>{f.nome}</div>
                      <div className="muted" style={{ fontSize: 11.5 }}>{f.tipo}</div>
                    </div>
                  </div>
                  <Badge tone={f.status === 'Ativo' ? 'success' : 'neutral'}>{f.status}</Badge>
                </div>
                <div style={{ display: 'flex', gap: 18, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--tm-line-1)', alignItems: 'flex-end' }}>
                  <div>
                    <div className="muted" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Respostas</div>
                    <div style={{ fontSize: 16, fontWeight: 600 }}>{resps}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Campos</div>
                    <div style={{ fontSize: 16, fontWeight: 600 }}>{(f.campos || []).length}</div>
                  </div>
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
                    <button className="icon-btn" title={f.status === 'Ativo' ? 'Desativar' : 'Ativar'} onClick={(e) => { e.stopPropagation(); toggleStatus(f); }}>
                      <Icon name={f.status === 'Ativo' ? 'pause' : 'play'} size={14} />
                    </button>
                    <button className="icon-btn" title="Excluir" onClick={(e) => { e.stopPropagation(); deleteForm(f.id); }}>
                      <Icon name="trash-2" size={14} style={{ color: 'var(--tm-danger)' }} />
                    </button>
                  </div>
                </div>
                <div className="muted" style={{ fontSize: 10.5, marginTop: 10 }}>Criado em {fmtDate(f.created_at)}</div>
              </div>
            );
          })}
        </div>
      )}

      {drawer && (
        <FormDrawer
          form={drawer}
          setForm={setDrawer}
          onSave={saveForm}
          onCancel={() => setDrawer(null)}
          saving={saving}
        />
      )}
    </div>
  );
}

function FormLeads({ onNav }) {
  const [leads, setLeads] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (!window.tmSupabase) { setLoading(false); return; }
    setLoading(true);
    window.tmSupabase.from('formulario_respostas')
      .select('*, formularios(nome)')
      .order('created_at', { ascending: false })
      .then(({ data }) => { if (data) setLeads(data); setLoading(false); });
  }, []);

  const novos       = leads.filter(l => l.status === 'Novo');
  const negociando  = leads.filter(l => l.status === 'Em contato');
  const convertidos = leads.filter(l => l.status === 'Convertido');

  const updateStatus = async (id, status) => {
    await window.tmSupabase.from('formulario_respostas').update({ status }).eq('id', id);
    setLeads(prev => prev.map(l => l.id === id ? { ...l, status } : l));
  };

  const fmtDate = (iso) => {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
  };

  return (
    <div className="canvas">
      <PageHead title="Leads Recebidos"
        sub={leads.length > 0 ? `${leads.length} lead${leads.length !== 1 ? 's' : ''} recebido${leads.length !== 1 ? 's' : ''}` : 'Nenhum lead recebido'}
        right={<Button variant="secondary" icon="download" size="sm">Exportar CSV</Button>}/>
      <FormTabs active="leads" onNav={onNav} />
      <div className="grid-4" style={{ marginBottom: 16 }}>
        <KpiMini lbl="Leads novos" v={String(novos.length)} sub={novos.length > 0 ? 'aguardando contato' : 'sem dados'} />
        <KpiMini lbl="Em negociação" v={String(negociando.length)} sub={negociando.length > 0 ? 'follow-up ativo' : 'sem dados'} />
        <KpiMini lbl="Convertidos" v={String(convertidos.length)} sub={leads.length > 0 ? `taxa ${Math.round(convertidos.length / leads.length * 100)}%` : 'sem dados'} />
        <KpiMini lbl="Total leads" v={String(leads.length)} sub="todos os formulários" />
      </div>
      <Card title="Todos os leads">
        {loading ? (
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)', fontSize: 13 }}>Carregando...</div>
        ) : leads.length === 0 ? (
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="users" size={36} style={{ opacity: 0.3, marginBottom: 12 }} />
            <div style={{ fontSize: 14, marginBottom: 6 }}>Nenhum lead recebido</div>
            <div style={{ fontSize: 12 }}>Os leads dos seus formulários aparecerão aqui</div>
          </div>
        ) : (
          <div style={{ overflowX: 'auto', padding: '4px 16px 16px' }}>
            <table className="tbl">
              <thead><tr><th>Lead</th><th>E-mail</th><th>Celular</th><th>Origem</th><th>Recebido</th><th>Status</th></tr></thead>
              <tbody>
                {leads.map(l => (
                  <tr key={l.id}>
                    <td><div style={{ fontWeight: 500 }}>{l.nome || (l.dados && l.dados.nome) || '—'}</div></td>
                    <td><span className="muted" style={{ fontSize: 12 }}>{l.email || (l.dados && l.dados.email) || '—'}</span></td>
                    <td style={{ fontSize: 12 }}>{l.celular || (l.dados && l.dados.celular) || '—'}</td>
                    <td><span className="ch-chip">{l.formularios?.nome || '—'}</span></td>
                    <td className="muted" style={{ fontSize: 12, whiteSpace: 'nowrap' }}>{fmtDate(l.created_at)}</td>
                    <td>
                      <select value={l.status} onChange={e => updateStatus(l.id, e.target.value)}
                        style={{
                          fontSize: 11, padding: '3px 8px', borderRadius: 6,
                          background: l.status === 'Convertido' ? 'rgba(91,177,122,0.12)' : l.status === 'Em contato' ? 'rgba(212,160,74,0.12)' : l.status === 'Descartado' ? 'rgba(217,101,94,0.12)' : 'rgba(201,163,107,0.08)',
                          color: l.status === 'Convertido' ? 'var(--tm-success)' : l.status === 'Em contato' ? '#D4A04A' : l.status === 'Descartado' ? 'var(--tm-danger)' : 'var(--tm-brand-champagne)',
                          border: '1px solid var(--tm-line-2)', cursor: 'pointer', fontFamily: 'inherit',
                        }}>
                        <option value="Novo">Novo</option>
                        <option value="Em contato">Em contato</option>
                        <option value="Convertido">Convertido</option>
                        <option value="Descartado">Descartado</option>
                      </select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </div>
  );
}

function FormTabs({ active, onNav }) {
  const tabs = [{ id: "lista", label: "Formulários" }, { id: "leads", label: "Leads Recebidos" }];
  return (
    <div className="tabs">
      {tabs.map(t => (
        <div key={t.id} className={`tab ${active === t.id ? "active" : ""}`} onClick={() => onNav(`formularios/${t.id}`)}>{t.label}</div>
      ))}
    </div>
  );
}

// ============== RELATÓRIOS (movidos para Relatorios_Widgets/Sections/Relatorios.jsx) ==============

// ============== CONFIGURAÇÕES ==============
const CONFIG_SECTIONS = [
  { id: "perfil",      label: "Perfil",                ico: "user" },
  { id: "equipe",      label: "Equipe",                ico: "users-2" },
  { id: "empresa",     label: "Dados da Empresa",      ico: "building-2" },
  { id: "canais",      label: "Integrações",           ico: "plug" },
  { id: "ia",          label: "Personalização IA",     ico: "bot" },
  { id: "permissoes",  label: "Permissões e Papéis",   ico: "user-cog" },
];

function ConfigPage({ which, onNav, profile }) {
  return (
    <div className="canvas">
      <PageHead title="Configurações" sub="Gerencie sua conta, equipe, empresa e integrações"/>
      <div className="settings-grid">
        <div className="settings-side">
          {CONFIG_SECTIONS.map(s => (
            <div key={s.id} className={`nav-item ${which === s.id ? "active" : ""}`} onClick={() => onNav(`config/${s.id}`)}>
              <Icon name={s.ico} size={16} />
              <span>{s.label}</span>
            </div>
          ))}
        </div>
        <div>
          {which === "perfil" && <PerfilContent profile={profile} />}
          {which === "equipe" && <EquipeContent />}
          {which === "empresa" && <EmpresaContent />}
          {which === "canais" && <CanaisContent />}
          {which === "ia" && <IAConfigContent />}
          {which === "permissoes" && <PermissoesContent />}
        </div>
      </div>
    </div>
  );
}

// ── Recortador de avatar — zoom + reposicionamento ────────────────────────────
const zoomBtn = {
  width: 30, height: 30, borderRadius: 7, border: '1px solid var(--tm-line-2)',
  background: 'var(--tm-bg-2)', color: 'var(--tm-fg-2)', cursor: 'pointer',
  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
};

function AvatarCropper({ src, onCancel, onConfirm }) {
  const VIEW = 280;
  const imgRef = React.useRef(null);
  const drag   = React.useRef(null);
  const [nat, setNat]       = React.useState(null);
  const [zoom, setZoom]     = React.useState(1);
  const [offset, setOffset] = React.useState({ x: 0, y: 0 });
  const [busy, setBusy]     = React.useState(false);

  const base = nat ? VIEW / Math.min(nat.w, nat.h) : 1;
  const disp = base * zoom;
  const dw = nat ? nat.w * disp : VIEW;
  const dh = nat ? nat.h * disp : VIEW;

  const clamp = (o, w, h) => ({
    x: Math.min(0, Math.max(VIEW - w, o.x)),
    y: Math.min(0, Math.max(VIEW - h, o.y)),
  });

  const onImgLoad = (e) => {
    const w = e.target.naturalWidth, h = e.target.naturalHeight;
    const b = VIEW / Math.min(w, h);
    setNat({ w, h });
    setOffset({ x: (VIEW - w * b) / 2, y: (VIEW - h * b) / 2 });
    setZoom(1);
  };

  const applyZoom = (z) => {
    if (!nat) return;
    z = Math.min(3, Math.max(1, Math.round(z * 100) / 100));
    const oldDisp = base * zoom, newDisp = base * z;
    const cx = (VIEW / 2 - offset.x) / oldDisp;
    const cy = (VIEW / 2 - offset.y) / oldDisp;
    setZoom(z);
    setOffset(clamp({ x: VIEW / 2 - cx * newDisp, y: VIEW / 2 - cy * newDisp },
      nat.w * newDisp, nat.h * newDisp));
  };

  const onPointerDown = (e) => {
    if (!nat) return;
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
    drag.current = { px: e.clientX, py: e.clientY, ox: offset.x, oy: offset.y };
  };
  const onPointerMove = (e) => {
    if (!drag.current) return;
    setOffset(clamp({
      x: drag.current.ox + (e.clientX - drag.current.px),
      y: drag.current.oy + (e.clientY - drag.current.py),
    }, dw, dh));
  };
  const onPointerUp = (e) => {
    drag.current = null;
    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {}
  };

  const aplicar = () => {
    if (!nat || !imgRef.current) return;
    setBusy(true);
    const OUT = 480;
    const canvas = document.createElement('canvas');
    canvas.width = OUT; canvas.height = OUT;
    const ctx = canvas.getContext('2d');
    const sSize = VIEW / disp;
    ctx.drawImage(imgRef.current, -offset.x / disp, -offset.y / disp, sSize, sSize, 0, 0, OUT, OUT);
    canvas.toBlob((blob) => {
      if (blob) onConfirm(blob);
      else { setBusy(false); }
    }, 'image/jpeg', 0.92);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 340, background: 'rgba(0,0,0,0.7)',
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}
      onClick={() => !busy && onCancel()}>
      <div onClick={(e) => e.stopPropagation()}
        style={{ background: 'var(--tm-bg-1)', borderRadius: 14, border: '1px solid var(--tm-line-1)',
          boxShadow: '0 24px 64px rgba(0,0,0,0.5)', padding: '22px 24px', width: 340 }}>
        <div style={{ fontFamily: 'var(--tm-font-display)', fontSize: 17, marginBottom: 4 }}>Ajustar foto de perfil</div>
        <div className="muted" style={{ fontSize: 12, marginBottom: 14 }}>Arraste para posicionar e use o zoom para enquadrar.</div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div onPointerDown={onPointerDown} onPointerMove={onPointerMove}
            onPointerUp={onPointerUp} onPointerCancel={onPointerUp}
            style={{ position: 'relative', width: VIEW, height: VIEW, overflow: 'hidden',
              borderRadius: 10, background: 'var(--tm-bg-2)', touchAction: 'none',
              cursor: drag.current ? 'grabbing' : 'grab' }}>
            <img ref={imgRef} src={src} alt="" onLoad={onImgLoad} draggable={false}
              style={{ position: 'absolute', left: offset.x, top: offset.y, width: dw, height: dh,
                maxWidth: 'none', userSelect: 'none', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%',
              boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)', pointerEvents: 'none' }} />
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16 }}>
          <button onClick={() => applyZoom(zoom - 0.2)} style={zoomBtn}><Icon name="minus" size={14} /></button>
          <input type="range" min={1} max={3} step={0.01} value={zoom}
            onChange={(e) => applyZoom(parseFloat(e.target.value))}
            style={{ flex: 1, accentColor: 'var(--tm-brand-champagne)' }} />
          <button onClick={() => applyZoom(zoom + 0.2)} style={zoomBtn}><Icon name="plus" size={14} /></button>
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 18 }}>
          <Button variant="secondary" onClick={onCancel} disabled={busy}>Cancelar</Button>
          <Button variant="primary" icon="check" onClick={aplicar} disabled={busy || !nat}>
            {busy ? 'Enviando…' : 'Aplicar foto'}
          </Button>
        </div>
      </div>
    </div>
  );
}

function PerfilContent({ profile }) {
  const BLANK = { nome: '', cargo: '', celular: '', cpf_cnpj: '', data_aniversario: '' };
  const [form, setForm]           = React.useState(BLANK);
  const [avatarUrl, setAvatarUrl] = React.useState(null);
  const [uploading, setUploading] = React.useState(false);
  const [saving, setSaving]       = React.useState(false);
  const [msg, setMsg]             = React.useState('');
  const [err, setErr]             = React.useState('');
  const [cropSrc, setCropSrc]     = React.useState(null);
  const fileRef                   = React.useRef(null);

  // Sincroniza o formulário toda vez que o perfil (prop reativa do App) muda —
  // isso cobre tanto o carregamento inicial quanto o reload pós-save.
  const profileKey = profile
    ? `${profile.id}|${profile.nome}|${profile.cargo}|${profile.celular}|${profile.cpf_cnpj}|${profile.data_aniversario}|${profile.avatar_url}`
    : null;

  React.useEffect(() => {
    if (!profile) return;
    setForm({
      nome:             profile.nome             || '',
      cargo:            profile.cargo            || '',
      celular:          profile.celular          || '',
      cpf_cnpj:         profile.cpf_cnpj         || '',
      data_aniversario: profile.data_aniversario || '',
    });
    setAvatarUrl(profile.avatar_url || null);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [profileKey]);

  const initials = (form.nome || profile?.email || '?')[0].toUpperCase();

  // Escolhe o arquivo → abre o recortador (não envia ainda)
  const onPickFile = (e) => {
    const file = e.target.files?.[0];
    e.target.value = '';
    if (!file) return;
    if (!file.type.startsWith('image/')) { setErr('Selecione uma imagem (PNG, JPG, WEBP…).'); return; }
    if (file.size > 5 * 1024 * 1024) { setErr('A imagem deve ter no máximo 5 MB.'); return; }
    setErr(''); setMsg('');
    setCropSrc(URL.createObjectURL(file));
  };

  const cancelCrop = () => {
    if (cropSrc) URL.revokeObjectURL(cropSrc);
    setCropSrc(null);
  };

  // Recebe o recorte (Blob JPEG) do AvatarCropper e envia ao Storage
  const uploadAvatar = async (blob) => {
    if (cropSrc) URL.revokeObjectURL(cropSrc);
    setCropSrc(null);
    setUploading(true); setErr(''); setMsg('');
    try {
      const userId = window.tmUser?.id;
      const path   = `${userId}.jpg`;

      const { error: upErr } = await window.tmSupabase.storage
        .from('avatars').upload(path, blob, { upsert: true, contentType: 'image/jpeg' });
      if (upErr) throw upErr;

      const { data: { publicUrl } } = window.tmSupabase.storage
        .from('avatars').getPublicUrl(path);

      const finalUrl = `${publicUrl}?t=${Date.now()}`;

      await window.tmSupabase.from('usuarios')
        .update({ avatar_url: finalUrl }).eq('auth_user_id', userId);

      setAvatarUrl(finalUrl);
      if (window.tmUserProfile) window.tmUserProfile.avatar_url = finalUrl;
      window.tmReloadProfile?.();
      setMsg('Foto de perfil atualizada com sucesso!');
    } catch (ex) { setErr(ex.message || 'Erro ao enviar imagem.'); }

    setUploading(false);
  };

  const removeAvatar = async () => {
    if (!confirm('Remover foto de perfil?')) return;
    setUploading(true);
    await window.tmSupabase.from('usuarios')
      .update({ avatar_url: null }).eq('auth_user_id', window.tmUser?.id);
    setAvatarUrl(null);
    if (window.tmUserProfile) window.tmUserProfile.avatar_url = null;
    window.tmReloadProfile?.();
    setUploading(false);
  };

  const savePerfil = async () => {
    if (!form.nome.trim()) { setErr('Nome é obrigatório.'); return; }
    setSaving(true); setErr(''); setMsg('');
    const { error } = await window.tmSupabase.from('usuarios')
      .update({
        nome:             form.nome.trim(),
        cargo:            form.cargo.trim(),
        celular:          form.celular.trim()          || null,
        cpf_cnpj:         form.cpf_cnpj.trim()         || null,
        data_aniversario: form.data_aniversario         || null,
      })
      .eq('auth_user_id', window.tmUser?.id);
    if (error) { setErr(error.message); }
    else {
      window.tmReloadProfile?.();
      setMsg('Perfil salvo com sucesso!');
    }
    setSaving(false);
  };

  const reset = () => {
    setForm({
      nome:             profile?.nome             || '',
      cargo:            profile?.cargo            || '',
      celular:          profile?.celular          || '',
      cpf_cnpj:         profile?.cpf_cnpj         || '',
      data_aniversario: profile?.data_aniversario || '',
    });
    setMsg(''); setErr('');
  };

  return (
    <Card title="Meu Perfil">
      <div style={{ padding: 24 }}>

        {/* ── Avatar ── */}
        <div style={{ display:'flex', alignItems:'center', gap:22, marginBottom:28 }}>
          <div style={{ position:'relative', flexShrink:0 }}>
            {avatarUrl ? (
              <img src={avatarUrl} alt={initials}
                style={{ width:84, height:84, borderRadius:'50%', objectFit:'cover', border:'2px solid var(--tm-line-2)', display:'block' }} />
            ) : (
              <div className="avatar lg" style={{ width:84, height:84, fontSize:28 }}>{initials}</div>
            )}
            {/* hover overlay */}
            <div
              style={{ position:'absolute',inset:0,borderRadius:'50%',background:'rgba(0,0,0,0)',display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',transition:'background 0.15s' }}
              onClick={() => fileRef.current?.click()}
              onMouseEnter={e => { e.currentTarget.style.background='rgba(0,0,0,0.45)'; e.currentTarget.querySelector('svg').style.opacity=1; }}
              onMouseLeave={e => { e.currentTarget.style.background='rgba(0,0,0,0)';    e.currentTarget.querySelector('svg').style.opacity=0; }}>
              <Icon name={uploading ? 'loader-2' : 'camera'} size={22} style={{ color:'#fff', opacity:0, transition:'opacity 0.15s' }} />
            </div>
          </div>

          <input ref={fileRef} type="file" accept="image/*" style={{ display:'none' }} onChange={onPickFile} />

          {cropSrc && (
            <AvatarCropper src={cropSrc} onCancel={cancelCrop} onConfirm={uploadAvatar} />
          )}

          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--tm-font-display)', fontSize:21, fontWeight:600, lineHeight:1.1 }}>
              {form.nome || profile?.nome || '…'}
            </div>
            <div className="muted" style={{ fontSize:12.5, marginTop:5 }}>
              {profile?.perfil || 'Usuário'} · {profile?.email || ''}
            </div>
            <div style={{ display:'flex', gap:8, marginTop:12 }}>
              <button disabled={uploading} onClick={() => fileRef.current?.click()}
                style={{ display:'inline-flex',alignItems:'center',gap:6,fontSize:12.5,padding:'5px 13px',borderRadius:7,border:'1px solid var(--tm-line-2)',background:'var(--tm-bg-2)',cursor:'pointer',color:'var(--tm-fg-2)',fontWeight:500 }}>
                <Icon name={uploading ? 'loader-2' : 'upload'} size={13} />
                {uploading ? 'Enviando…' : 'Trocar foto'}
              </button>
              {avatarUrl && !uploading && (
                <button onClick={removeAvatar}
                  style={{ display:'inline-flex',alignItems:'center',gap:6,fontSize:12.5,padding:'5px 13px',borderRadius:7,border:'1px solid var(--tm-line-2)',background:'none',cursor:'pointer',color:'var(--tm-danger)',fontWeight:500 }}>
                  <Icon name="trash-2" size={13} />
                  Remover
                </button>
              )}
            </div>
            <div className="muted" style={{ fontSize:11,marginTop:6 }}>PNG, JPG ou WEBP · máx. 5 MB</div>
          </div>
        </div>

        {/* ── Feedback ── */}
        {msg && (
          <div style={{ marginBottom:16,padding:'9px 13px',borderRadius:7,background:'rgba(34,197,94,0.1)',color:'var(--tm-success)',fontSize:13,display:'flex',alignItems:'center',gap:7 }}>
            <Icon name="check-circle" size={14} />{msg}
          </div>
        )}
        {err && (
          <div style={{ marginBottom:16,padding:'9px 13px',borderRadius:7,background:'rgba(239,68,68,0.1)',color:'var(--tm-danger)',fontSize:13,display:'flex',alignItems:'center',gap:7 }}>
            <Icon name="alert-circle" size={14} />{err}
          </div>
        )}

        {/* ── Form ── */}
        <div className="form-grid">
          <div className="field">
            <label>Nome completo *</label>
            <input className="input" value={form.nome}
              onChange={e => setForm(f => ({...f, nome:e.target.value}))}
              placeholder="Seu nome completo" />
          </div>
          <div className="field">
            <label>E-mail</label>
            <input className="input" value={profile?.email || ''} disabled style={{ opacity:0.55 }}
              title="O e-mail é o seu login e não pode ser alterado aqui." />
          </div>
          <div className="field">
            <label>Cargo / Função</label>
            <input className="input" value={form.cargo}
              onChange={e => setForm(f => ({...f, cargo:e.target.value}))}
              placeholder="Ex: Gerente Comercial, Diretora…" />
          </div>
          <div className="field">
            <label>Celular / WhatsApp</label>
            <input className="input" value={form.celular}
              onChange={e => setForm(f => ({...f, celular:e.target.value}))}
              placeholder="(11) 99999-9999" />
          </div>
          <div className="field">
            <label>CPF / CNPJ</label>
            <input className="input" value={form.cpf_cnpj}
              onChange={e => setForm(f => ({...f, cpf_cnpj:e.target.value}))}
              placeholder="000.000.000-00 ou 00.000.000/0001-00" />
          </div>
          <div className="field">
            <label>Data de aniversário</label>
            <input className="input" type="date" value={form.data_aniversario}
              onChange={e => setForm(f => ({...f, data_aniversario:e.target.value}))} />
          </div>
          <div className="field">
            <label>Perfil de acesso</label>
            <input className="input" value={profile?.perfil || '—'} disabled style={{ opacity:0.55 }}
              title="O perfil é definido pelo administrador." />
          </div>
        </div>

        <div style={{ marginTop:24,paddingTop:20,borderTop:'1px solid var(--tm-line-1)',display:'flex',gap:8 }}>
          <Button variant="primary" size="md" icon="save" onClick={savePerfil} disabled={saving}>
            {saving ? 'Salvando…' : 'Salvar alterações'}
          </Button>
          <Button variant="ghost" size="md" onClick={reset}>Cancelar</Button>
        </div>
      </div>
    </Card>
  );
}

// ---------- Vendedores (time interno) ----------
// Cadastro mora aqui (sob Configurações › Equipe › Vendedores)
// e é espelhado em window.TM_VENDEDORES para o Pedido lê-lo no select.
// Carrega do Supabase na inicialização para estar disponível em todas as telas.
if (typeof window !== "undefined") {
  window.TM_VENDEDORES = window.TM_VENDEDORES || [];
  if (window.tmSupabase && window.TM_VENDEDORES.length === 0) {
    window.tmSupabase.from("vendedores").select("*").order("created_at", { ascending: false })
      .then(({ data }) => { if (data) window.TM_VENDEDORES = data.map(fromDbVendedor); });
  }
}

function EquipeContent() {
  const [tab, setTab] = React.useState("usuarios");
  const [vendCount, setVendCount] = React.useState((window.TM_VENDEDORES || []).length);

  React.useEffect(() => {
    if (!window.tmSupabase) return;
    window.tmSupabase.from("vendedores").select("id", { count: "exact", head: true })
      .then(({ count }) => { if (typeof count === "number") setVendCount(count); });
  }, [tab]);

  return (
    <div>
      <div className="section-tabs" style={{ marginBottom: 16 }}>
        <span className={`stab ${tab === "usuarios" ? "active" : ""}`} onClick={() => setTab("usuarios")}>
          Usuários do sistema
        </span>
        <span className={`stab ${tab === "vendedores" ? "active" : ""}`} onClick={() => setTab("vendedores")}>
          Vendedores <span className="muted" style={{ marginLeft: 4 }}>({vendCount})</span>
        </span>
      </div>
      {tab === "usuarios" ? <UsuariosTable /> : <VendedoresTable onCountChange={setVendCount} />}
    </div>
  );
}

const PERFIS_SISTEMA = ['Administrador', 'Comercial', 'Operação', 'TI'];
const PERFIL_DESC = {
  'Administrador': 'Acesso total — configurações, equipe, financeiro.',
  'Comercial':     'CRM, pedidos, mensagens e relatórios de vendas.',
  'Operação':      'Pedidos, estoque, notas fiscais e agenda.',
  'TI':            'Configurações técnicas e agentes de IA.',
};
const SUPABASE_FN_URL = 'https://ilgxpxfdrhshitkozlqs.supabase.co/functions/v1';

function fmtAcesso(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  const dd = String(d.getDate()).padStart(2,'0');
  const mm = String(d.getMonth()+1).padStart(2,'0');
  const hh = String(d.getHours()).padStart(2,'0');
  const mi = String(d.getMinutes()).padStart(2,'0');
  return `${dd}/${mm}/${d.getFullYear()} · ${hh}:${mi}`;
}

function MenuBtn({ icon, color, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '8px 12px', width: '100%', fontSize: 13,
      color: color || 'var(--tm-fg-1)', background: 'none',
      border: 'none', cursor: 'pointer', borderRadius: 6, textAlign: 'left',
    }}>
      <Icon name={icon} size={14} style={{ color: color || 'var(--tm-fg-3)', flexShrink: 0 }} />
      {children}
    </button>
  );
}

function UsuariosTable() {
  const [users, setUsers]         = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [filtro, setFiltro]       = React.useState('ativos');
  const [drawer, setDrawer]       = React.useState(false);
  const [form, setForm]           = React.useState({ nome: '', email: '', password: '', cargo: '', perfil: '', perfil_id: '' });
  const [saving, setSaving]       = React.useState(false);
  const [formErr, setFormErr]     = React.useState('');
  const [menuId, setMenuId]       = React.useState(null);
  const [confirmDel, setConfirmDel] = React.useState(null);
  const [deleting, setDeleting]   = React.useState(false);
  const [perfis, setPerfis]       = React.useState([]);

  const load = React.useCallback(async () => {
    if (!window.tmSupabase) return;
    setLoading(true);
    const { data } = await window.tmSupabase
      .from('usuarios').select('*').order('created_at');
    if (data) setUsers(data);
    setLoading(false);
  }, []);

  React.useEffect(() => { load(); }, [load]);

  React.useEffect(() => {
    if (!window.tmSupabase) return;
    window.tmSupabase
      .from('perfis_acesso').select('id,nome,cor,descricao').eq('ativo', true).order('nome')
      .then(({ data }) => { if (data) setPerfis(data); });
  }, []);

  React.useEffect(() => {
    if (!menuId) return;
    const h = () => setMenuId(null);
    document.addEventListener('click', h);
    return () => document.removeEventListener('click', h);
  }, [menuId]);

  // ── Actions ──────────────────────────────────────────────────
  const toggleAtivo = async (u) => {
    setMenuId(null);
    await window.tmSupabase.from('usuarios').update({ ativo: !u.ativo }).eq('id', u.id);
    load();
  };

  const arquivar = async (u) => {
    setMenuId(null);
    await window.tmSupabase.from('usuarios').update({ ativo: false, arquivado: true }).eq('id', u.id);
    load();
  };

  const restaurar = async (u) => {
    setMenuId(null);
    await window.tmSupabase.from('usuarios').update({ ativo: true, arquivado: false }).eq('id', u.id);
    load();
  };

  const excluir = async () => {
    if (!confirmDel) return;
    setDeleting(true);
    try {
      const token = window.tmSession?.access_token || window.tmAnonKey || '';
      await fetch(`${SUPABASE_FN_URL}/delete-user`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify({ auth_user_id: confirmDel.auth_user_id, usuario_id: confirmDel.id }),
      });
    } catch (_) {
      await window.tmSupabase.from('usuarios').delete().eq('id', confirmDel.id);
    }
    setConfirmDel(null);
    setDeleting(false);
    load();
  };

  // ── Add member ───────────────────────────────────────────────
  const openDrawer = () => {
    const first = perfis[0];
    setForm({ nome: '', email: '', password: '', cargo: '', perfil: first?.nome || 'Operação', perfil_id: first?.id || '' });
    setFormErr(''); setDrawer(true);
  };

  const saveUser = async () => {
    if (!form.nome.trim() || !form.email.trim() || !form.password.trim()) {
      setFormErr('Nome, e-mail e senha são obrigatórios.'); return;
    }
    if (form.password.length < 6) {
      setFormErr('A senha deve ter pelo menos 6 caracteres.'); return;
    }
    setSaving(true); setFormErr('');
    try {
      const token = window.tmSession?.access_token || window.tmAnonKey || '';
      const res = await fetch(`${SUPABASE_FN_URL}/create-user`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, 'x-user-id': window.tmUserProfile?.id || '' },
        body: JSON.stringify({ nome: form.nome, email: form.email, password: form.password, cargo: form.cargo, perfil: form.perfil, perfil_id: form.perfil_id || null }),
      });
      const result = await res.json();
      if (result.error) throw new Error(result.error);
      setDrawer(false);
      load();
    } catch (e) { setFormErr(e.message); }
    setSaving(false);
  };

  // ── Derived lists ────────────────────────────────────────────
  const ativos     = users.filter(u => !u.arquivado);
  const arquivados = users.filter(u => u.arquivado);
  const visible    = filtro === 'ativos' ? ativos : arquivados;

  return (
    <>
      {/* ── Confirm delete modal ────────────────────────────── */}
      {confirmDel && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(0,0,0,0.65)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
          onClick={() => !deleting && setConfirmDel(null)}>
          <div style={{ background: 'var(--tm-bg-1)', borderRadius: 14, padding: 28, width: 400, border: '1px solid var(--tm-line-1)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)' }}
            onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 24 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(239,68,68,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="trash-2" size={20} style={{ color: 'var(--tm-danger)' }} />
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15.5, marginBottom: 6 }}>Excluir usuário permanentemente</div>
                <div className="muted" style={{ fontSize: 13, lineHeight: 1.5 }}>
                  Você está prestes a excluir <strong style={{ color: 'var(--tm-fg-1)' }}>{confirmDel.nome}</strong>. O acesso ao sistema será removido imediatamente e essa ação <strong style={{ color: 'var(--tm-fg-1)' }}>não pode ser desfeita</strong>.
                </div>
                <div style={{ marginTop: 10, padding: '8px 12px', background: 'rgba(239,68,68,0.08)', borderRadius: 6, fontSize: 12, color: 'var(--tm-danger)' }}>
                  Dica: prefira <strong>Arquivar</strong> para manter o histórico do usuário.
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <Button variant="ghost" onClick={() => setConfirmDel(null)} disabled={deleting}>Cancelar</Button>
              <button
                disabled={deleting}
                onClick={excluir}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', borderRadius: 8, border: 'none', cursor: deleting ? 'not-allowed' : 'pointer', background: 'var(--tm-danger)', color: '#fff', fontSize: 13, fontWeight: 500, opacity: deleting ? 0.7 : 1 }}>
                <Icon name="trash-2" size={14} />
                {deleting ? 'Excluindo…' : 'Sim, excluir'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── Header: filtro tabs + add button ────────────────── */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div className="section-tabs" style={{ marginBottom: 0 }}>
          <span className={`stab ${filtro === 'ativos' ? 'active' : ''}`} onClick={() => setFiltro('ativos')}>
            Ativos <span className="muted" style={{ marginLeft: 4 }}>({ativos.length})</span>
          </span>
          <span className={`stab ${filtro === 'arquivados' ? 'active' : ''}`} onClick={() => setFiltro('arquivados')} style={{ position: 'relative' }}>
            Arquivados
            {arquivados.length > 0 && (
              <span style={{ marginLeft: 6, background: 'var(--tm-fg-4)', color: 'var(--tm-bg-0)', borderRadius: 10, fontSize: 10, padding: '1px 6px', fontWeight: 600 }}>
                {arquivados.length}
              </span>
            )}
          </span>
        </div>
        <Button variant="primary" size="sm" icon="user-plus" onClick={openDrawer}>Adicionar membro</Button>
      </div>

      {/* ── Table ───────────────────────────────────────────── */}
      <Card>
        {loading ? (
          <div style={{ padding: 28, textAlign: 'center', color: 'var(--tm-fg-3)' }}>Carregando…</div>
        ) : visible.length === 0 ? (
          <div style={{ padding: 40, textAlign: 'center' }}>
            <Icon name={filtro === 'arquivados' ? 'archive' : 'users'} size={36} className="muted" />
            <div style={{ marginTop: 14, fontSize: 14, color: 'var(--tm-fg-2)' }}>
              {filtro === 'arquivados' ? 'Nenhum usuário arquivado.' : 'Nenhum membro ativo.'}
            </div>
            {filtro === 'arquivados' && (
              <div className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>Usuários arquivados ficam aqui. Você pode restaurá-los a qualquer momento.</div>
            )}
          </div>
        ) : (
          <table className="tbl">
            <thead>
              <tr><th>Membro</th><th>E-mail</th><th>Cargo</th><th>Perfil</th><th>Último acesso</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
              {visible.map(u => (
                <tr key={u.id} style={{ opacity: u.arquivado ? 0.65 : 1 }}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      {u.avatar_url ? (
                        <img src={u.avatar_url} alt={(u.nome||'?')[0]}
                          style={{ width:34,height:34,borderRadius:'50%',objectFit:'cover',border:'1px solid var(--tm-line-2)',flexShrink:0,opacity:u.arquivado?0.5:1 }} />
                      ) : (
                        <div className="avatar md" style={{ opacity: u.arquivado ? 0.5 : 1 }}>{(u.nome || '?')[0].toUpperCase()}</div>
                      )}
                      <div>
                        <div style={{ fontWeight: 500 }}>{u.nome}</div>
                        {!u.auth_user_id && <div className="muted" style={{ fontSize: 10.5 }}>Sem login cadastrado</div>}
                      </div>
                    </div>
                  </td>
                  <td className="muted" style={{ fontSize: 12.5 }}>{u.email || '—'}</td>
                  <td style={{ fontSize: 13 }}>{u.cargo || <span className="muted">—</span>}</td>
                  <td>
                    {(() => {
                      const p = perfis.find(x => x.id === u.perfil_id);
                      const nome = p?.nome || u.perfil || '—';
                      return (
                        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                          {p && <div style={{ width:8, height:8, borderRadius:2, background:p.cor, flexShrink:0 }} />}
                          <Badge tone={nome === 'Administrador' ? 'brand' : 'neutral'}>{nome}</Badge>
                        </div>
                      );
                    })()}
                  </td>
                  <td className="muted" style={{ fontSize: 12 }}>{fmtAcesso(u.ultimo_acesso)}</td>
                  <td>
                    {u.arquivado
                      ? <Badge tone="neutral">Arquivado</Badge>
                      : <Badge tone={u.ativo ? 'success' : 'warning'}>{u.ativo ? 'Ativo' : 'Inativo'}</Badge>}
                  </td>
                  <td>
                    <div style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>
                      <button className="icon-btn" onClick={() => setMenuId(menuId === u.id ? null : u.id)}>
                        <Icon name="more-horizontal" size={15} />
                      </button>
                      {menuId === u.id && (
                        <div style={{ position: 'absolute', right: 0, top: '110%', zIndex: 60, background: 'var(--tm-bg-2)', border: '1px solid var(--tm-line-1)', borderRadius: 8, padding: 4, minWidth: 210, boxShadow: '0 8px 24px rgba(0,0,0,0.3)' }}>
                          {u.arquivado ? (
                            <>
                              <MenuBtn icon="user-check" color="var(--tm-success)" onClick={() => restaurar(u)}>Restaurar acesso</MenuBtn>
                              <div style={{ height: 1, background: 'var(--tm-line-1)', margin: '4px 0' }} />
                              <MenuBtn icon="trash-2" color="var(--tm-danger)" onClick={() => { setMenuId(null); setConfirmDel(u); }}>Excluir permanentemente</MenuBtn>
                            </>
                          ) : (
                            <>
                              <MenuBtn icon={u.ativo ? 'user-x' : 'user-check'} color={u.ativo ? 'var(--tm-warning)' : 'var(--tm-success)'} onClick={() => toggleAtivo(u)}>
                                {u.ativo ? 'Desativar acesso' : 'Reativar acesso'}
                              </MenuBtn>
                              <MenuBtn icon="archive" onClick={() => arquivar(u)}>Arquivar usuário</MenuBtn>
                              <div style={{ height: 1, background: 'var(--tm-line-1)', margin: '4px 0' }} />
                              <MenuBtn icon="trash-2" color="var(--tm-danger)" onClick={() => { setMenuId(null); setConfirmDel(u); }}>Excluir permanentemente</MenuBtn>
                            </>
                          )}
                        </div>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Card>

      {/* ── Add member drawer ────────────────────────────────── */}
      <Drawer
        open={drawer}
        onClose={() => setDrawer(false)}
        title="Adicionar membro da equipe"
        subtitle="Crie as credenciais de acesso ao sistema para um novo colaborador."
        footer={
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="primary" onClick={saveUser} disabled={saving}>{saving ? 'Criando…' : 'Criar acesso'}</Button>
            <Button variant="ghost" onClick={() => setDrawer(false)}>Cancelar</Button>
          </div>
        }
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '4px 0' }}>
          {formErr && (
            <div style={{ fontSize: 12.5, padding: '8px 12px', borderRadius: 6, background: 'rgba(239,68,68,0.12)', color: 'var(--tm-danger)' }}>{formErr}</div>
          )}
          <Field label="Nome completo" value={form.nome} onChange={v => setForm(f => ({ ...f, nome: v }))} placeholder="Ex: João Silva" />
          <Field label="E-mail de acesso" type="email" value={form.email} onChange={v => setForm(f => ({ ...f, email: v }))} placeholder="joao@topmix.com.br"
            hint="Este e-mail é o login do colaborador no sistema." />
          <Field label="Senha inicial" type="password" value={form.password} onChange={v => setForm(f => ({ ...f, password: v }))} placeholder="Mínimo 6 caracteres"
            hint="Compartilhe com o colaborador e oriente-o a guardar com segurança." />
          <Field label="Cargo na empresa" value={form.cargo} onChange={v => setForm(f => ({ ...f, cargo: v }))} placeholder="Ex: Gerente Comercial, Atendente…" />
          <div className="field">
            <label>Perfil de acesso</label>
            {perfis.length > 0 ? (
              <>
                <select className="input" value={form.perfil_id}
                  onChange={e => {
                    const p = perfis.find(x => x.id === e.target.value);
                    setForm(f => ({ ...f, perfil_id: e.target.value, perfil: p?.nome || '' }));
                  }}>
                  {perfis.map(p => (
                    <option key={p.id} value={p.id}>{p.nome}</option>
                  ))}
                </select>
                {form.perfil_id && (() => {
                  const p = perfis.find(x => x.id === form.perfil_id);
                  return p?.descricao ? <span className="field-hint">{p.descricao}</span> : null;
                })()}
              </>
            ) : (
              <select className="input" value={form.perfil} onChange={e => setForm(f => ({ ...f, perfil: e.target.value }))}>
                {PERFIS_SISTEMA.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            )}
          </div>
        </div>
      </Drawer>
    </>
  );
}

// Vendedores ↔ Supabase — conversão entre colunas snake_case e o draft camelCase do form
function fromDbVendedor(r) {
  return {
    id: r.id, codigo: r.codigo, nome: r.nome, fantasia: r.fantasia,
    cpf: r.cpf, rg: r.rg, dataNasc: r.data_nasc, admissao: r.admissao,
    fone: r.fone, celular: r.celular, email: r.email, ramal: r.ramal,
    loja: r.loja, departamento: r.departamento, turno: r.turno, contrato: r.contrato,
    perfil: r.perfil, situacao: r.situacao, supervisor: r.supervisor,
    meta: r.meta, realizado: r.realizado, comissao: r.comissao, descMax: r.desc_max,
    tabelaComissao: r.tabela_comissao, freqPag: r.freq_pag, podeNFe: r.pode_nfe,
    observacoes: r.observacoes,
  };
}
function toDbVendedor(d) {
  const num = (v) => (v === "" || v == null ? null : Number(v));
  return {
    codigo: d.codigo || null, nome: d.nome, fantasia: d.fantasia || null,
    cpf: d.cpf || null, rg: d.rg || null, data_nasc: d.dataNasc || null, admissao: d.admissao || null,
    fone: d.fone || null, celular: d.celular || null, email: d.email || null, ramal: d.ramal || null,
    loja: d.loja || null, departamento: d.departamento || null, turno: d.turno || null, contrato: d.contrato || null,
    perfil: d.perfil || null, situacao: d.situacao || null, supervisor: d.supervisor || null,
    meta: num(d.meta), realizado: num(d.realizado), comissao: num(d.comissao), desc_max: num(d.descMax),
    tabela_comissao: d.tabelaComissao || null, freq_pag: d.freqPag || null, pode_nfe: !!d.podeNFe,
    observacoes: d.observacoes || null,
  };
}

function VendedoresTable({ onCountChange }) {
  const [rows, setRows]       = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [edit, setEdit]       = React.useState(null);
  // Mirror to global so Pedidos / PDV picks up changes (skip empty to avoid clearing on mount)
  React.useEffect(() => {
    if (rows.length > 0) window.TM_VENDEDORES = rows;
    if (onCountChange) onCountChange(rows.length);
  }, [rows]);

  const load = React.useCallback(async () => {
    if (!window.tmSupabase) { setLoading(false); return; }
    setLoading(true);
    const { data, error } = await window.tmSupabase
      .from("vendedores").select("*").order("created_at", { ascending: false });
    if (!error && data) setRows(data.map(fromDbVendedor));
    setLoading(false);
  }, []);
  React.useEffect(() => { load(); }, [load]);

  const blank = { nome: "", cpf: "", email: "", celular: "", loja: "Matriz · SP", departamento: "Comercial interno", perfil: "Vendedor", situacao: "Ativo", contrato: "CLT", comissao: 1.5, descMax: 8, meta: 0, realizado: 0, podeNFe: false };
  const open  = (mode, idx) => setEdit({ mode, idx, draft: { ...(idx != null ? rows[idx] : blank) } });
  const close = () => setEdit(null);
  const save  = async () => {
    if (!edit.draft.nome || !edit.draft.nome.trim()) { alert("Informe o nome do vendedor."); return; }
    if (!window.tmSupabase) { alert("Supabase indisponível — não foi possível salvar."); return; }
    const payload = toDbVendedor(edit.draft);
    let error;
    if (edit.mode === "new") {
      ({ error } = await window.tmSupabase.from("vendedores").insert(payload));
    } else {
      payload.updated_at = new Date().toISOString();
      ({ error } = await window.tmSupabase.from("vendedores").update(payload).eq("id", edit.draft.id));
    }
    if (error) { alert("Erro ao salvar vendedor: " + error.message); return; }
    setEdit(null);
    load();
  };
  const remove = async (idx) => {
    const row = rows[idx];
    if (!confirm(`Excluir "${row.nome}"? Esta ação não pode ser desfeita.`)) return;
    const { error } = await window.tmSupabase.from("vendedores").delete().eq("id", row.id);
    if (error) { alert("Erro ao excluir: " + error.message); return; }
    if (edit && edit.idx === idx) setEdit(null);
    load();
  };
  const setField = (k, v) => setEdit({ ...edit, draft: { ...edit.draft, [k]: v } });

  if (edit) {
    return (
      <window.VendedorForm
        state={edit}
        set={setField}
        onCancel={close}
        onSave={save}
        onDelete={edit.mode === "new" ? null : () => remove(edit.idx)}
      />
    );
  }

  const ativos  = rows.filter(v => v.situacao === "Ativo").length;
  const totMeta = rows.reduce((a, v) => a + (v.meta || 0), 0);
  const totReal = rows.reduce((a, v) => a + (v.realizado || 0), 0);

  return (
    <div>
      <div className="grid-4" style={{ marginBottom: 16 }}>
        <KpiMini lbl="Vendedores ativos" v={String(ativos)} sub={`${rows.length - ativos} inativos / férias`} />
        <KpiMini lbl="Meta agregada"     v={`R$ ${brl(totMeta)}`} sub="meta consolidada" />
        <KpiMini lbl="Realizado mês"     v={`R$ ${brl(totReal)}`} sub={`${Math.round(totReal / Math.max(totMeta, 1) * 100)}% da meta`} />
        <KpiMini lbl="Ticket médio"      v="R$ 482" sub="últimos 90 dias" />
      </div>

      <Card title="Cadastro de vendedores"
            action={<>
              <Button variant="secondary" icon="download" size="sm">Exportar</Button>
              <Button variant="primary" icon="user-plus" size="sm" onClick={() => open("new", null)}>Novo vendedor</Button>
            </>}>
        {loading ? (
          <div style={{ padding: 40, textAlign: "center", color: "var(--tm-fg-2)", fontSize: 14 }}>
            Carregando vendedores…
          </div>
        ) : rows.length === 0 ? (
          <div style={{ padding: 40, textAlign: "center" }}>
            <Icon name="user-search" size={36} className="muted" />
            <div style={{ marginTop: 14, fontSize: 14, color: "var(--tm-fg-2)" }}>Nenhum vendedor cadastrado.</div>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>Clique em "Novo vendedor" para adicionar o primeiro membro do time comercial.</div>
          </div>
        ) : (
        <table className="tbl">
          <thead><tr>
            <th>Vendedor</th><th>Departamento</th><th>Loja</th><th>E-mail</th>
            <th className="num right">Meta</th><th className="num right">Realizado</th>
            <th className="num right">Comissão</th><th>Situação</th><th></th>
          </tr></thead>
          <tbody>
            {rows.map((v, i) => {
              const pct = v.meta ? v.realizado / v.meta : 0;
              return (
                <tr key={i} className="clickable" onClick={() => open("edit", i)}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div className="avatar md">{v.nome[0]}</div>
                      <div>
                        <div style={{ fontWeight: 500 }}>{v.nome}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{v.fantasia || v.codigo}</div>
                      </div>
                    </div>
                  </td>
                  <td>{v.departamento}</td>
                  <td>{v.loja}</td>
                  <td><span className="muted" style={{ fontSize: 12 }}>{v.email}</span></td>
                  <td className="num right">R$ {brl(v.meta || 0)}</td>
                  <td className="num right" style={{ color: pct >= 1 ? "var(--tm-success)" : pct >= 0.75 ? "var(--tm-brand-champagne)" : "var(--tm-warning)", fontWeight: 500 }}>
                    R$ {brl(v.realizado || 0)} <span className="muted" style={{ fontSize: 10.5 }}>({Math.round(pct * 100)}%)</span>
                  </td>
                  <td className="num right">{v.comissao}%</td>
                  <td><Badge tone={v.situacao === "Ativo" ? "success" : v.situacao === "Férias" ? "info" : v.situacao === "Afastado" ? "warning" : "neutral"}>{v.situacao}</Badge></td>
                  <td>
                    <span className="row-actions" onClick={(e) => e.stopPropagation()}>
                      <button className="icon-btn" title="Editar" onClick={() => open("edit", i)}><Icon name="pencil" size={14} /></button>
                      <button className="icon-btn danger" title="Excluir" onClick={() => remove(i)}><Icon name="trash-2" size={14} /></button>
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        )}
      </Card>
    </div>
  );
}

// ── Empresa helpers ───────────────────────────────────────────────────────────
const UF_OPTIONS = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT',
  'PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO'];
const REGIME_OPTIONS = ['Simples Nacional','Lucro Presumido','Lucro Real','MEI'];
const CORES_EMPRESA  = ['#C9A36B','#ef4444','#f97316','#eab308','#22c55e',
  '#10b981','#06b6d4','#3b82f6','#8b5cf6','#ec4899','#6b7280'];

function EmpresaContent() {
  const [empresas, setEmpresas]           = React.useState([]);
  const [loading, setLoading]             = React.useState(true);
  const [drawer, setDrawer]               = React.useState(false);
  const [editing, setEditing]             = React.useState(null);
  const [draft, setDraft]                 = React.useState(null);
  const [saving, setSaving]               = React.useState(false);
  const [saveErr, setSaveErr]             = React.useState('');
  const [confirmDel, setConfirmDel]       = React.useState(null);
  const [deletingEmp, setDeletingEmp]     = React.useState(false);
  const [uploadingLogo, setUploadingLogo] = React.useState(false);
  const logoRef = React.useRef(null);

  const blank = () => ({
    nome_fantasia:'', razao_social:'', cnpj:'', inscricao_estadual:'',
    inscricao_municipal:'', regime_tributario:'Simples Nacional',
    certificado_validade:'', email_fiscal:'', email_contato:'',
    telefone:'', site:'', cep:'', logradouro:'', numero:'',
    complemento:'', bairro:'', cidade:'', uf:'SP',
    cor:'#6366f1', logo_url:'',
  });

  const load = React.useCallback(async () => {
    if (!window.tmSupabase) return;
    setLoading(true);
    const { data } = await window.tmSupabase
      .from('empresas').select('*').order('principal', { ascending:false }).order('nome_fantasia');
    if (data) setEmpresas(data);
    setLoading(false);
  }, []);

  React.useEffect(() => { load(); }, [load]);

  const openCreate = () => { setEditing(null); setDraft(blank()); setSaveErr(''); setDrawer(true); };
  const openEdit   = (e)  => { setEditing(e.id); setDraft({ ...blank(), ...e, certificado_validade: e.certificado_validade||'' }); setSaveErr(''); setDrawer(true); };
  const f          = (k,v)=> setDraft(d => ({ ...d, [k]: v }));

  const onLogoFile = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => setDraft(d => ({ ...d, _logoFile: file, logo_url: ev.target.result }));
    reader.readAsDataURL(file);
    e.target.value = '';
  };

  const save = async () => {
    if (!draft.razao_social.trim()) { setSaveErr('Razão social é obrigatória.'); return; }
    setSaving(true); setSaveErr('');
    try {
      let logoUrl = draft.logo_url?.startsWith('data:') ? '' : draft.logo_url;
      if (draft._logoFile) {
        const ext  = draft._logoFile.name.split('.').pop() || 'png';
        const path = `${editing || 'new_' + Date.now()}.${ext}`;
        const { error: upErr } = await window.tmSupabase.storage
          .from('empresa-logos').upload(path, draft._logoFile, { upsert:true, contentType:draft._logoFile.type });
        if (upErr) throw upErr;
        const { data: { publicUrl } } = window.tmSupabase.storage.from('empresa-logos').getPublicUrl(path);
        logoUrl = `${publicUrl}?t=${Date.now()}`;
      }
      const payload = { nome_fantasia:draft.nome_fantasia, razao_social:draft.razao_social,
        cnpj:draft.cnpj||null, inscricao_estadual:draft.inscricao_estadual||null,
        inscricao_municipal:draft.inscricao_municipal||null, regime_tributario:draft.regime_tributario,
        certificado_validade:draft.certificado_validade||null, email_fiscal:draft.email_fiscal||null,
        email_contato:draft.email_contato||null, telefone:draft.telefone||null, site:draft.site||null,
        cep:draft.cep||null, logradouro:draft.logradouro||null, numero:draft.numero||null,
        complemento:draft.complemento||null, bairro:draft.bairro||null,
        cidade:draft.cidade||null, uf:draft.uf||null, cor:draft.cor, logo_url:logoUrl||null };

      const { error } = editing
        ? await window.tmSupabase.from('empresas').update(payload).eq('id', editing)
        : await window.tmSupabase.from('empresas').insert(payload);
      if (error) throw error;
      setDrawer(false); load(); window.tmReloadEmpresas?.();
    } catch (ex) { setSaveErr(ex.message); }
    setSaving(false);
  };

  const setPrincipal = async (e) => {
    await window.tmSupabase.from('empresas').update({ principal:false }).neq('id', e.id);
    await window.tmSupabase.from('empresas').update({ principal:true  }).eq('id', e.id);
    load(); window.tmReloadEmpresas?.();
  };

  const deleteEmpresa = async () => {
    if (!confirmDel) return;
    setDeletingEmp(true);
    await window.tmSupabase.from('empresas').delete().eq('id', confirmDel.id);
    setConfirmDel(null); setDeletingEmp(false); load(); window.tmReloadEmpresas?.();
  };

  // ── JSX ──────────────────────────────────────────────────────────────────────
  return (
    <>
      {/* Confirm delete */}
      {confirmDel && (
        <div style={{ position:'fixed',inset:0,zIndex:300,background:'rgba(0,0,0,0.65)',display:'flex',alignItems:'center',justifyContent:'center' }}
          onClick={() => !deletingEmp && setConfirmDel(null)}>
          <div style={{ background:'var(--tm-bg-1)',borderRadius:14,padding:28,width:420,border:'1px solid var(--tm-line-1)',boxShadow:'0 24px 64px rgba(0,0,0,0.5)' }}
            onClick={e => e.stopPropagation()}>
            <div style={{ display:'flex',gap:14,alignItems:'flex-start',marginBottom:22 }}>
              <div style={{ width:44,height:44,borderRadius:10,background:'rgba(239,68,68,0.12)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                <Icon name="building-2" size={20} style={{ color:'var(--tm-danger)' }} />
              </div>
              <div>
                <div style={{ fontWeight:600,fontSize:15.5,marginBottom:6 }}>Excluir empresa</div>
                <div className="muted" style={{ fontSize:13,lineHeight:1.5 }}>
                  Excluir <strong style={{ color:'var(--tm-fg-1)' }}>{confirmDel.nome_fantasia||confirmDel.razao_social}</strong> removerá o cadastro permanentemente.
                </div>
              </div>
            </div>
            <div style={{ display:'flex',gap:8,justifyContent:'flex-end' }}>
              <Button variant="ghost" onClick={() => setConfirmDel(null)} disabled={deletingEmp}>Cancelar</Button>
              <button disabled={deletingEmp} onClick={deleteEmpresa}
                style={{ display:'flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:8,border:'none',cursor:deletingEmp?'not-allowed':'pointer',background:'var(--tm-danger)',color:'#fff',fontSize:13,fontWeight:500 }}>
                <Icon name="trash-2" size={14} />{deletingEmp ? 'Excluindo…' : 'Excluir empresa'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Cards */}
      <Card title="Minhas Empresas"
        action={<Button variant="primary" size="sm" icon="plus" onClick={openCreate}>Nova empresa</Button>}>
        {loading ? (
          <div style={{ padding:28,textAlign:'center',color:'var(--tm-fg-3)' }}>Carregando…</div>
        ) : empresas.length === 0 ? (
          <div style={{ padding:40,textAlign:'center' }}>
            <Icon name="building-2" size={36} className="muted" />
            <div style={{ marginTop:12,fontSize:14,color:'var(--tm-fg-2)' }}>Nenhuma empresa cadastrada.</div>
          </div>
        ) : (
          <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(310px,1fr))',gap:16,padding:20 }}>
            {empresas.map(e => {
              const certOk  = e.certificado_validade ? new Date(e.certificado_validade) > new Date() : null;
              const display = e.nome_fantasia || e.razao_social;
              return (
                <div key={e.id} style={{ background:'var(--tm-bg-2)',borderRadius:12,border:'1px solid var(--tm-line-1)',overflow:'hidden' }}>
                  <div style={{ height:4,background:e.cor }} />
                  <div style={{ padding:18 }}>
                    <div style={{ display:'flex',alignItems:'flex-start',justifyContent:'space-between',gap:10 }}>
                      <div style={{ display:'flex',alignItems:'center',gap:12,flex:1,minWidth:0 }}>
                        {e.logo_url ? (
                          <img src={e.logo_url} alt="" style={{ width:44,height:44,borderRadius:8,objectFit:'contain',background:'var(--tm-bg-3)',flexShrink:0 }} />
                        ) : (
                          <div style={{ width:44,height:44,borderRadius:8,background:e.cor+'22',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                            <span style={{ fontFamily:'var(--tm-font-display)',fontSize:18,color:e.cor,fontWeight:700 }}>{display[0]}</span>
                          </div>
                        )}
                        <div style={{ minWidth:0 }}>
                          <div style={{ display:'flex',alignItems:'center',gap:7,flexWrap:'wrap' }}>
                            <span style={{ fontWeight:600,fontSize:14 }}>{display}</span>
                            {e.principal && (
                              <span style={{ fontSize:9.5,padding:'1px 7px',borderRadius:10,background:e.cor+'22',color:e.cor,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase' }}>★ PRINCIPAL</span>
                            )}
                          </div>
                          <div className="muted" style={{ fontSize:11.5,marginTop:2 }}>{e.razao_social}</div>
                        </div>
                      </div>
                      <div style={{ display:'flex',gap:2,flexShrink:0 }}>
                        <button className="icon-btn" title="Editar" onClick={() => openEdit(e)}><Icon name="pencil" size={14} /></button>
                        {!e.principal && (
                          <button className="icon-btn" title="Excluir" style={{ color:'var(--tm-danger)' }} onClick={() => setConfirmDel(e)}><Icon name="trash-2" size={14} /></button>
                        )}
                      </div>
                    </div>

                    <div style={{ marginTop:14,display:'flex',flexDirection:'column',gap:5,fontSize:12 }}>
                      {e.cnpj && <div style={{ display:'flex',gap:8 }}><span className="muted" style={{ width:90,flexShrink:0 }}>CNPJ</span><span className="ref-mono" style={{ fontSize:11 }}>{e.cnpj}</span></div>}
                      {e.regime_tributario && <div style={{ display:'flex',gap:8 }}><span className="muted" style={{ width:90,flexShrink:0 }}>Regime</span><span>{e.regime_tributario}</span></div>}
                      {(e.cidade||e.uf) && <div style={{ display:'flex',gap:8 }}><span className="muted" style={{ width:90,flexShrink:0 }}>Cidade</span><span>{[e.cidade,e.uf].filter(Boolean).join(' · ')}</span></div>}
                      {e.certificado_validade && (
                        <div style={{ display:'flex',gap:8 }}>
                          <span className="muted" style={{ width:90,flexShrink:0 }}>Cert. A1</span>
                          <span style={{ color:certOk?'var(--tm-success)':'var(--tm-danger)',display:'flex',alignItems:'center',gap:4 }}>
                            <Icon name={certOk?'shield-check':'shield-off'} size={12} />
                            {new Date(e.certificado_validade).toLocaleDateString('pt-BR')}
                          </span>
                        </div>
                      )}
                    </div>

                    {!e.principal && (
                      <button onClick={() => setPrincipal(e)}
                        style={{ marginTop:14,width:'100%',padding:'7px 0',borderRadius:7,border:'1px solid var(--tm-line-2)',background:'none',cursor:'pointer',fontSize:12.5,color:'var(--tm-fg-2)',fontWeight:500,display:'flex',alignItems:'center',justifyContent:'center',gap:6 }}>
                        <Icon name="star" size={13} />Definir como principal
                      </button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </Card>

      {/* Drawer criar/editar */}
      <Drawer
        open={drawer}
        onClose={() => setDrawer(false)}
        title={editing ? 'Editar empresa' : 'Nova empresa'}
        subtitle="Cadastre os dados fiscais, de contato e endereço."
        footer={
          <div style={{ display:'flex',gap:8 }}>
            <Button variant="primary" onClick={save} disabled={saving}>{saving ? 'Salvando…' : editing ? 'Salvar alterações' : 'Criar empresa'}</Button>
            <Button variant="ghost" onClick={() => setDrawer(false)}>Cancelar</Button>
          </div>
        }
      >
        {draft && (
          <div style={{ display:'flex',flexDirection:'column',padding:'4px 0' }}>
            {saveErr && <div style={{ marginBottom:14,padding:'8px 12px',borderRadius:6,background:'rgba(239,68,68,0.12)',color:'var(--tm-danger)',fontSize:12.5 }}>{saveErr}</div>}

            {/* Visual */}
            <div style={{ display:'flex',alignItems:'center',gap:16,paddingBottom:16 }}>
              <div style={{ width:64,height:64,borderRadius:10,background:draft.logo_url?'var(--tm-bg-3)':draft.cor+'22',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,border:'1px solid var(--tm-line-1)',overflow:'hidden' }}>
                {draft.logo_url
                  ? <img src={draft.logo_url} alt="" style={{ width:'100%',height:'100%',objectFit:'contain' }} />
                  : <span style={{ fontFamily:'var(--tm-font-display)',fontSize:24,color:draft.cor,fontWeight:700 }}>{(draft.nome_fantasia||draft.razao_social||'E')[0]}</span>}
              </div>
              <div style={{ flex:1 }}>
                <div className="muted" style={{ fontSize:11,marginBottom:7 }}>Cor identificadora</div>
                <div style={{ display:'flex',gap:6,flexWrap:'wrap',marginBottom:10 }}>
                  {CORES_EMPRESA.map(c => (
                    <button key={c} onClick={() => f('cor',c)} style={{ width:24,height:24,borderRadius:5,background:c,border:draft.cor===c?'3px solid var(--tm-fg-1)':'2px solid transparent',cursor:'pointer' }} />
                  ))}
                </div>
                <div style={{ display:'flex',gap:8 }}>
                  <button disabled={uploadingLogo} onClick={() => logoRef.current?.click()}
                    style={{ display:'inline-flex',alignItems:'center',gap:5,fontSize:12,padding:'4px 10px',borderRadius:6,border:'1px solid var(--tm-line-2)',background:'var(--tm-bg-2)',cursor:'pointer',color:'var(--tm-fg-2)',fontWeight:500 }}>
                    <Icon name="image" size={12} />Logo
                  </button>
                  {draft.logo_url && <button onClick={() => f('logo_url','')} style={{ fontSize:12,padding:'4px 10px',borderRadius:6,border:'1px solid var(--tm-line-2)',background:'none',cursor:'pointer',color:'var(--tm-danger)' }}>Remover</button>}
                  <input ref={logoRef} type="file" accept="image/*" style={{ display:'none' }} onChange={onLogoFile} />
                </div>
              </div>
            </div>

            {/* Identificação */}
            <div className="muted" style={{ fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:10,paddingTop:14,borderTop:'1px solid var(--tm-line-1)' }}>Identificação</div>
            <div className="form-grid">
              <Field label="Nome fantasia / Marca" value={draft.nome_fantasia} onChange={v=>f('nome_fantasia',v)} placeholder="Ex: TopMix Profissional" />
              <Field label="Razão social *"         value={draft.razao_social}  onChange={v=>f('razao_social',v)}  placeholder="Ex: TopMix Beleza Cosméticos Eireli" />
              <Field label="CNPJ"                   value={draft.cnpj}          onChange={v=>f('cnpj',v)}          placeholder="00.000.000/0001-00" />
              <Field label="Inscrição Estadual"      value={draft.inscricao_estadual}  onChange={v=>f('inscricao_estadual',v)}  placeholder="000.000.000.000" />
              <Field label="Inscrição Municipal"     value={draft.inscricao_municipal} onChange={v=>f('inscricao_municipal',v)} placeholder="0000000" />
            </div>

            {/* Tributação */}
            <div className="muted" style={{ fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:10,paddingTop:14,marginTop:8,borderTop:'1px solid var(--tm-line-1)' }}>Tributação</div>
            <div className="form-grid">
              <div className="field">
                <label>Regime tributário</label>
                <select className="input" value={draft.regime_tributario} onChange={e=>f('regime_tributario',e.target.value)}>
                  {REGIME_OPTIONS.map(r=><option key={r} value={r}>{r}</option>)}
                </select>
              </div>
              <div className="field">
                <label>Certificado A1 — Validade</label>
                <input className="input" type="date" value={draft.certificado_validade||''} onChange={e=>f('certificado_validade',e.target.value)} />
              </div>
            </div>

            {/* Contato */}
            <div className="muted" style={{ fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:10,paddingTop:14,marginTop:8,borderTop:'1px solid var(--tm-line-1)' }}>Contato</div>
            <div className="form-grid">
              <Field label="E-mail fiscal"  type="email" value={draft.email_fiscal}  onChange={v=>f('email_fiscal',v)}  placeholder="fiscal@empresa.com.br" />
              <Field label="E-mail geral"   type="email" value={draft.email_contato} onChange={v=>f('email_contato',v)} placeholder="contato@empresa.com.br" />
              <Field label="Telefone"  value={draft.telefone} onChange={v=>f('telefone',v)} placeholder="(11) 4002-8922" />
              <Field label="Site"      value={draft.site}     onChange={v=>f('site',v)}     placeholder="https://www.empresa.com.br" />
            </div>

            {/* Endereço */}
            <div className="muted" style={{ fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:10,paddingTop:14,marginTop:8,borderTop:'1px solid var(--tm-line-1)' }}>Endereço fiscal</div>
            <div className="form-grid">
              <Field label="CEP" value={draft.cep} onChange={v=>f('cep',v)} placeholder="00000-000" />
              <div className="field">
                <label>UF</label>
                <select className="input" value={draft.uf||''} onChange={e=>f('uf',e.target.value)}>
                  <option value="">—</option>
                  {UF_OPTIONS.map(u=><option key={u} value={u}>{u}</option>)}
                </select>
              </div>
              <div className="field" style={{ gridColumn:'1 / -1' }}>
                <label>Logradouro</label>
                <input className="input" value={draft.logradouro} onChange={e=>f('logradouro',e.target.value)} placeholder="Rua / Av." />
              </div>
              <Field label="Número"      value={draft.numero}      onChange={v=>f('numero',v)}      placeholder="1480" />
              <Field label="Complemento" value={draft.complemento} onChange={v=>f('complemento',v)} placeholder="Sala, Andar…" />
              <Field label="Bairro"      value={draft.bairro}      onChange={v=>f('bairro',v)}      placeholder="Bairro" />
              <Field label="Cidade"      value={draft.cidade}      onChange={v=>f('cidade',v)}      placeholder="São Paulo" />
            </div>
          </div>
        )}
      </Drawer>
    </>
  );
}

const INTEGRATIONS = [
  { nome: "WhatsApp Cloud API", desc: "Mensageria oficial Meta", on: true, ico: "phone", color: "#25D366" },
  { nome: "Focus NFe",          desc: "Emissão de NF-e",          on: true, ico: "file-text", color: "#C9A36B" },
  { nome: "Bling ERP",          desc: "Sincronização de estoque", on: false, ico: "package", color: "#1F8A5B" },
  { nome: "Asaas",              desc: "Pagamentos PIX e boleto",   on: true, ico: "wallet", color: "#0F6CE8" },
  { nome: "Mercado Pago",       desc: "Cartão e PIX cliente final", on: true, ico: "credit-card", color: "#00B1EA" },
  { nome: "Correios",           desc: "Cálculo de frete e rastreio", on: true, ico: "truck", color: "#FAA61A" },
  { nome: "Google Analytics 4", desc: "Web analytics",             on: false, ico: "bar-chart-3", color: "#E37400" },
  { nome: "Zapier",             desc: "Automações personalizadas",  on: false, ico: "zap", color: "#FF4F00" },
];
function CanaisContent() {
  return (
    <Card title="Integrações"
          action={<Button variant="primary" size="sm" icon="plus">Conectar</Button>}>
      <div style={{ padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {INTEGRATIONS.map((it, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: 14, background: "var(--tm-bg-1)", borderRadius: 8 }}>
            <div style={{ width: 38, height: 38, borderRadius: 8, background: it.color + "22", color: it.color, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name={it.ico} size={16} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{it.nome}</div>
              <div className="muted" style={{ fontSize: 11.5 }}>{it.desc}</div>
            </div>
            <span className={`toggle ${it.on ? "on" : ""}`}><span className="knob" /></span>
          </div>
        ))}
      </div>
    </Card>
  );
}

function IAConfigContent() {
  return (
    <Card title="Personalização dos Agentes de IA">
      <div style={{ padding: 24 }}>
        <div className="muted" style={{ fontSize: 12, lineHeight: 1.6, marginBottom: 20 }}>
          Esses ajustes afetam as três IAs ao mesmo tempo. Para regras específicas, edite cada agente diretamente em <span className="gold">Agentes de IA</span>.
        </div>
        <div className="form-grid">
          <div className="field span-2"><label>Tom de voz padrão</label>
            <select className="input"><option>Profissional, próximo (você)</option><option>Profissional, formal (senhora/senhor)</option><option>Casual</option></select>
          </div>
          <div className="field"><label>Modelo</label><select className="input"><option>claude-haiku-4.5</option><option>claude-sonnet-4.5</option></select></div>
          <div className="field"><label>Temperatura</label><input className="input" defaultValue="0.4" /></div>
          <div className="field span-2"><label>Assinatura padrão</label><input className="input" defaultValue="Equipe Gunai · Resposta automatizada por IA. Para falar com humano, digite 1." /></div>
        </div>

        <div style={{ marginTop: 24 }}>
          <div className="muted" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 10 }}>Guardrails globais</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Nunca conceder desconto acima de 10% sem aprovação humana",
              "Transferir para humano em assuntos jurídicos, fiscais ou reembolsos > R$ 500",
              "Não expor dados de outros clientes",
              "Sempre informar prazo realista de entrega",
            ].map(g => (
              <div key={g} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--tm-bg-1)", borderRadius: 6, fontSize: 13 }}>
                <Icon name="check" size={14} className="gold" /> {g}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Card>
  );
}

// ── Perfis de Acesso helpers ──────────────────────────────────────────────────
const MODULOS_PERM = [
  { id: 'dashboard',   label: 'Dashboard' },
  { id: 'crm',         label: 'CRM' },
  { id: 'mensagens',   label: 'Mensagens' },
  { id: 'ia',          label: 'Agentes de IA' },
  { id: 'produtos',    label: 'Produtos' },
  { id: 'pedidos',     label: 'Pedidos' },
  { id: 'pdv',         label: 'PDV (Frente de Caixa)' },
  { id: 'financeiro',  label: 'Financeiro' },
  { id: 'relatorios',  label: 'Relatórios' },
  { id: 'formularios', label: 'Formulários' },
  { id: 'kanban',      label: 'Kanban / Tarefas' },
  { id: 'agenda',      label: 'Agenda / Calendário' },
  { id: 'nf',          label: 'Nota Fiscal' },
  { id: 'config',      label: 'Configurações' },
];

const CORES_PERFIL = [
  '#ef4444','#f97316','#eab308','#22c55e',
  '#10b981','#06b6d4','#3b82f6','#8b5cf6',
  '#ec4899','#6b7280',
];

const defaultPermissoes = () =>
  Object.fromEntries(MODULOS_PERM.map(m => [m.id, { ver: false, criar: false, editar: false, excluir: false }]));

function PermissoesContent() {
  const [perfis, setPerfis]               = React.useState([]);
  const [countMap, setCountMap]           = React.useState({});
  const [loading, setLoading]             = React.useState(true);
  const [drawer, setDrawer]               = React.useState(false);
  const [editing, setEditing]             = React.useState(null);
  const [draft, setDraft]                 = React.useState(null);
  const [saving, setSaving]               = React.useState(false);
  const [saveErr, setSaveErr]             = React.useState('');
  const [confirmDelPerfil, setConfirmDelPerfil] = React.useState(null);
  const [deletingPerfil, setDeletingPerfil]     = React.useState(false);

  const blankDraft = () => ({ nome: '', descricao: '', cor: '#6366f1', permissoes: defaultPermissoes() });

  const load = React.useCallback(async () => {
    if (!window.tmSupabase) return;
    setLoading(true);
    const [{ data: ps }, { data: us }] = await Promise.all([
      window.tmSupabase.from('perfis_acesso').select('*').order('sistema', { ascending: false }).order('nome'),
      window.tmSupabase.from('usuarios').select('perfil_id').eq('arquivado', false),
    ]);
    if (ps) setPerfis(ps);
    const cm = {};
    (us || []).forEach(u => { if (u.perfil_id) cm[u.perfil_id] = (cm[u.perfil_id] || 0) + 1; });
    setCountMap(cm);
    setLoading(false);
  }, []);

  React.useEffect(() => { load(); }, [load]);

  const openCreate = () => {
    setEditing(null); setDraft(blankDraft()); setSaveErr(''); setDrawer(true);
  };

  const openEdit = (p) => {
    setEditing(p.id);
    setDraft({ nome: p.nome, descricao: p.descricao || '', cor: p.cor, permissoes: { ...defaultPermissoes(), ...p.permissoes } });
    setSaveErr(''); setDrawer(true);
  };

  const togglePerm = (modId, key, val) => {
    setDraft(d => {
      const mod = { ...(d.permissoes[modId] || { ver:false,criar:false,editar:false,excluir:false }) };
      mod[key] = val;
      if ((key === 'criar' || key === 'editar' || key === 'excluir') && val) mod.ver = true;
      if (key === 'ver' && !val) { mod.criar = false; mod.editar = false; mod.excluir = false; }
      return { ...d, permissoes: { ...d.permissoes, [modId]: mod } };
    });
  };

  const savePerfil = async () => {
    if (!draft.nome.trim()) { setSaveErr('Nome do perfil é obrigatório.'); return; }
    setSaving(true); setSaveErr('');
    try {
      if (editing) {
        const { error } = await window.tmSupabase.from('perfis_acesso')
          .update({ nome: draft.nome, descricao: draft.descricao, cor: draft.cor, permissoes: draft.permissoes })
          .eq('id', editing);
        if (error) throw error;
      } else {
        const { error } = await window.tmSupabase.from('perfis_acesso')
          .insert({ nome: draft.nome, descricao: draft.descricao, cor: draft.cor, permissoes: draft.permissoes });
        if (error) throw error;
      }
      setDrawer(false); load();
    } catch (e) { setSaveErr(e.message); }
    setSaving(false);
  };

  const deletePerfil = async () => {
    if (!confirmDelPerfil) return;
    setDeletingPerfil(true);
    await window.tmSupabase.from('perfis_acesso').delete().eq('id', confirmDelPerfil.id);
    setConfirmDelPerfil(null); setDeletingPerfil(false); load();
  };

  return (
    <>
      {/* ── Confirmar exclusão ──────────────────────────────────── */}
      {confirmDelPerfil && (
        <div style={{ position:'fixed',inset:0,zIndex:300,background:'rgba(0,0,0,0.65)',display:'flex',alignItems:'center',justifyContent:'center' }}
          onClick={() => !deletingPerfil && setConfirmDelPerfil(null)}>
          <div style={{ background:'var(--tm-bg-1)',borderRadius:14,padding:28,width:420,border:'1px solid var(--tm-line-1)',boxShadow:'0 24px 64px rgba(0,0,0,0.5)' }}
            onClick={e => e.stopPropagation()}>
            <div style={{ display:'flex',gap:14,alignItems:'flex-start',marginBottom:22 }}>
              <div style={{ width:44,height:44,borderRadius:10,background:'rgba(239,68,68,0.12)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                <Icon name="shield-off" size={20} style={{ color:'var(--tm-danger)' }} />
              </div>
              <div>
                <div style={{ fontWeight:600,fontSize:15.5,marginBottom:6 }}>Excluir perfil de acesso</div>
                <div className="muted" style={{ fontSize:13,lineHeight:1.5 }}>
                  Excluir <strong style={{ color:'var(--tm-fg-1)' }}>{confirmDelPerfil.nome}</strong> removerá o perfil permanentemente.
                  Usuários vinculados perderão as permissões associadas.
                </div>
              </div>
            </div>
            <div style={{ display:'flex',gap:8,justifyContent:'flex-end' }}>
              <Button variant="ghost" onClick={() => setConfirmDelPerfil(null)} disabled={deletingPerfil}>Cancelar</Button>
              <button disabled={deletingPerfil} onClick={deletePerfil}
                style={{ display:'flex',alignItems:'center',gap:6,padding:'8px 16px',borderRadius:8,border:'none',cursor:deletingPerfil?'not-allowed':'pointer',background:'var(--tm-danger)',color:'#fff',fontSize:13,fontWeight:500,opacity:deletingPerfil?0.7:1 }}>
                <Icon name="trash-2" size={14} />{deletingPerfil ? 'Excluindo…' : 'Excluir perfil'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── Cards de perfis ─────────────────────────────────────── */}
      <Card title="Perfis de Acesso"
        action={<Button variant="primary" size="sm" icon="plus" onClick={openCreate}>Novo perfil</Button>}>
        {loading ? (
          <div style={{ padding:28,textAlign:'center',color:'var(--tm-fg-3)' }}>Carregando…</div>
        ) : perfis.length === 0 ? (
          <div style={{ padding:40,textAlign:'center' }}>
            <Icon name="shield" size={36} className="muted" />
            <div style={{ marginTop:12,fontSize:14,color:'var(--tm-fg-2)' }}>Nenhum perfil cadastrado.</div>
          </div>
        ) : (
          <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(290px,1fr))',gap:16,padding:20 }}>
            {perfis.map(p => {
              const count = countMap[p.id] || 0;
              const modsAtivos = Object.values(p.permissoes || {}).filter(v => v.ver).length;
              return (
                <div key={p.id} style={{ background:'var(--tm-bg-2)',borderRadius:12,padding:18,border:'1px solid var(--tm-line-1)',display:'flex',flexDirection:'column',gap:10 }}>
                  <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between' }}>
                    <div style={{ display:'flex',alignItems:'center',gap:9 }}>
                      <div style={{ width:13,height:13,borderRadius:3,background:p.cor,flexShrink:0 }} />
                      <span style={{ fontWeight:600,fontSize:14 }}>{p.nome}</span>
                      {p.sistema && (
                        <span style={{ fontSize:9.5,padding:'1px 7px',borderRadius:10,background:'var(--tm-bg-3)',color:'var(--tm-fg-3)',fontWeight:600,letterSpacing:'0.06em',textTransform:'uppercase' }}>SISTEMA</span>
                      )}
                    </div>
                    <div style={{ display:'flex',gap:2 }}>
                      <button className="icon-btn" title="Editar" onClick={() => openEdit(p)}>
                        <Icon name="pencil" size={14} />
                      </button>
                      {!p.sistema && (
                        <button className="icon-btn" title="Excluir" style={{ color:'var(--tm-danger)' }} onClick={() => setConfirmDelPerfil(p)}>
                          <Icon name="trash-2" size={14} />
                        </button>
                      )}
                    </div>
                  </div>
                  {p.descricao && <div className="muted" style={{ fontSize:12.5,lineHeight:1.55 }}>{p.descricao}</div>}
                  <div style={{ display:'flex',alignItems:'center',gap:8,paddingTop:8,borderTop:'1px solid var(--tm-line-1)',marginTop:2 }}>
                    <Icon name="users" size={12} className="muted" />
                    <span className="muted" style={{ fontSize:12 }}>{count} {count === 1 ? 'usuário' : 'usuários'}</span>
                    <span style={{ marginLeft:'auto',fontSize:11,color:'var(--tm-fg-4)' }}>{modsAtivos}/{MODULOS_PERM.length} módulos</span>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </Card>

      {/* ── Drawer criar / editar ──────────────────────────────── */}
      <Drawer
        open={drawer}
        onClose={() => setDrawer(false)}
        title={editing ? 'Editar perfil de acesso' : 'Novo perfil de acesso'}
        subtitle="Defina o nome, cor e quais módulos este perfil pode acessar."
        footer={
          <div style={{ display:'flex',gap:8 }}>
            <Button variant="primary" onClick={savePerfil} disabled={saving}>{saving ? 'Salvando…' : editing ? 'Salvar alterações' : 'Criar perfil'}</Button>
            <Button variant="ghost" onClick={() => setDrawer(false)}>Cancelar</Button>
          </div>
        }
      >
        {draft && (
          <div style={{ display:'flex',flexDirection:'column',gap:18,padding:'4px 0' }}>
            {saveErr && (
              <div style={{ fontSize:12.5,padding:'8px 12px',borderRadius:6,background:'rgba(239,68,68,0.12)',color:'var(--tm-danger)' }}>{saveErr}</div>
            )}

            <Field label="Nome do perfil" value={draft.nome}
              onChange={v => setDraft(d => ({...d, nome:v}))}
              placeholder="Ex: Gerente, TI, Estoquista…" />

            <Field label="Descrição (opcional)" value={draft.descricao}
              onChange={v => setDraft(d => ({...d, descricao:v}))}
              placeholder="Resumo das responsabilidades deste perfil" />

            <div className="field">
              <label>Cor identificadora</label>
              <div style={{ display:'flex',gap:7,flexWrap:'wrap',marginTop:6 }}>
                {CORES_PERFIL.map(c => (
                  <button key={c} onClick={() => setDraft(d => ({...d, cor:c}))}
                    title={c}
                    style={{ width:28,height:28,borderRadius:7,background:c,border:draft.cor===c?'3px solid var(--tm-fg-1)':'2px solid transparent',cursor:'pointer',transition:'border 0.12s',flexShrink:0 }} />
                ))}
              </div>
            </div>

            <div>
              <div className="muted" style={{ fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',marginBottom:10,fontWeight:600 }}>Permissões por módulo</div>
              <div style={{ border:'1px solid var(--tm-line-1)',borderRadius:8,overflow:'hidden' }}>
                <table style={{ width:'100%',borderCollapse:'collapse' }}>
                  <thead>
                    <tr style={{ background:'var(--tm-bg-3)' }}>
                      <th style={{ padding:'8px 12px',textAlign:'left',fontSize:10.5,fontWeight:600,color:'var(--tm-fg-3)',letterSpacing:'0.07em',textTransform:'uppercase' }}>Módulo</th>
                      {['ver','criar','editar','excluir'].map(k => (
                        <th key={k} style={{ padding:'8px 6px',textAlign:'center',fontSize:10.5,fontWeight:600,color:'var(--tm-fg-3)',letterSpacing:'0.07em',textTransform:'uppercase',width:54 }}>
                          {k.charAt(0).toUpperCase()+k.slice(1)}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {MODULOS_PERM.map((m, i) => {
                      const mp = draft.permissoes[m.id] || { ver:false,criar:false,editar:false,excluir:false };
                      return (
                        <tr key={m.id} style={{ borderTop:i>0?'1px solid var(--tm-line-1)':'none',background:i%2===0?'transparent':'rgba(0,0,0,0.03)' }}>
                          <td style={{ padding:'9px 12px',fontSize:13,fontWeight:mp.ver?500:400,color:mp.ver?'var(--tm-fg-1)':'var(--tm-fg-3)' }}>{m.label}</td>
                          {['ver','criar','editar','excluir'].map(k => (
                            <td key={k} style={{ textAlign:'center',padding:'9px 6px' }}>
                              <input type="checkbox"
                                checked={!!mp[k]}
                                disabled={k !== 'ver' && !mp.ver}
                                onChange={e => togglePerm(m.id, k, e.target.checked)}
                                style={{ width:15,height:15,cursor:(k!=='ver'&&!mp.ver)?'not-allowed':'pointer',accentColor:'var(--tm-brand-champagne)' }}
                              />
                            </td>
                          ))}
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
              <div className="muted" style={{ fontSize:11.5,marginTop:8,display:'flex',alignItems:'center',gap:5 }}>
                <Icon name="info" size={12} />
                Ativar Criar, Editar ou Excluir habilita automaticamente o Visualizar.
              </div>
            </div>
          </div>
        )}
      </Drawer>
    </>
  );
}

Object.assign(window, {
  NFEmissao, NFHistorico, NFImportarXml, NFLogs,
  Formularios, FormLeads,
  ConfigPage
});