// Painel do Super Admin — dono da plataforma (Octale Solutions).
// Gestão completa de organizações, sub-admins e audit log.

// ─── Constantes ──────────────────────────────────────────────────────────────
const PLAN_LABELS   = { trial: 'Trial', essencial: 'Essencial', starter: 'Starter', pro: 'Pro', enterprise: 'Enterprise' };
const STATUS_LABELS = { trial: 'Trial', active: 'Ativa', suspended: 'Suspensa', cancelled: 'Cancelada' };
const STATUS_COLORS = { trial: '#D49A1A', active: '#1F9D55', suspended: '#C2253E', cancelled: '#888' };
const ROLE_LABELS   = {
  socio_admin: 'Sócio Admin', socio: 'Sócio', advogado: 'Advogado',
  paralegal: 'Paralegal', cliente_externo: 'Cliente Externo',
};
const ORG_ROLE_LABELS = { owner: 'Dono', admin: 'Admin', member: 'Membro' };

const ALL_MODULES = [
  { key: 'peticoes',         label: 'Elaboração de Petições' },
  { key: 'propostas',        label: 'Propostas Comerciais' },
  { key: 'artigos',          label: 'Artigos (Site)' },
  { key: 'astrea',           label: 'Publicações Astrea' },
  { key: 'djen',             label: 'Publicações DJen' },
  { key: 'datajud',          label: 'Consulta DataJud' },
  { key: 'contratos_revisao',label: 'Revisão de Contratos' },
  { key: 'gmail',            label: 'Integração Gmail' },
  { key: 'credits',          label: 'Sistema de Créditos' },
  { key: 'financeiro',       label: 'Financeiro' },
];

const PERM_DOMAINS = [
  {
    key: 'organizations',
    label: 'Organizações',
    actions: [
      { key: 'view',    label: 'Visualizar' },
      { key: 'edit',    label: 'Editar' },
      { key: 'create',  label: 'Criar' },
      { key: 'suspend', label: 'Suspender' },
      { key: 'delete',  label: 'Excluir' },
    ],
  },
  {
    key: 'users',
    label: 'Usuários',
    actions: [
      { key: 'view',           label: 'Visualizar' },
      { key: 'add',            label: 'Adicionar' },
      { key: 'deactivate',     label: 'Desativar' },
      { key: 'reset_password', label: 'Redefinir senha' },
      { key: 'impersonate',    label: 'Impersonar' },
    ],
  },
  {
    key: 'credits',
    label: 'Créditos',
    actions: [
      { key: 'view', label: 'Visualizar' },
      { key: 'add',  label: 'Adicionar' },
    ],
  },
  {
    key: 'modules',
    label: 'Módulos',
    actions: [
      { key: 'view',   label: 'Visualizar' },
      { key: 'toggle', label: 'Alternar' },
    ],
  },
  {
    key: 'platform_admins',
    label: 'Admins da Plataforma',
    actions: [
      { key: 'view',   label: 'Visualizar' },
      { key: 'manage', label: 'Gerenciar' },
    ],
  },
  {
    key: 'audit_log',
    label: 'Audit Log',
    actions: [
      { key: 'view', label: 'Visualizar' },
    ],
  },
  {
    key: 'financial',
    label: 'Financeiro',
    actions: [
      { key: 'view',   label: 'Visualizar' },
      { key: 'export', label: 'Exportar' },
    ],
  },
];

// ─── Helpers visuais ──────────────────────────────────────────────────────────
const fmtDate = (d) => { try { return d ? new Date(d).toLocaleDateString('pt-BR') : '—'; } catch { return '—'; } };
const fmtDT   = (d) => { try { return d ? new Date(d).toLocaleString('pt-BR') : '—'; }   catch { return '—'; } };

const Badge = ({ children, bg = '#888', color = '#fff', style }) => (
  <span style={{
    fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 999,
    background: bg, color, display: 'inline-block', ...style,
  }}>{children}</span>
);

const StatusBadge = ({ status }) => (
  <Badge bg={STATUS_COLORS[status] || '#888'}>{STATUS_LABELS[status] || status}</Badge>
);

const Spinner = ({ size = 18 }) => (
  <div className="spinner" style={{ width: size, height: size, borderWidth: 2 }} />
);

const Empty = ({ children = 'Sem dados.' }) => (
  <div style={{ textAlign: 'center', padding: '40px 24px', color: 'var(--fg-muted)', fontSize: 13 }}>
    {children}
  </div>
);

const SectionTitle = ({ children }) => (
  <div style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--fg-muted)', marginBottom: 12 }}>
    {children}
  </div>
);

const SubTabBar = ({ tabs, active, onChange }) => (
  <div style={{
    display: 'flex', gap: 2, background: 'var(--octale-off-white)',
    borderRadius: 10, padding: 4, marginBottom: 20, width: 'fit-content', flexWrap: 'wrap',
  }}>
    {tabs.map(t => {
      const isActive = active === t.id;
      return (
        <button key={t.id} onClick={() => onChange(t.id)} style={{
          padding: '7px 14px', borderRadius: 7, border: 'none', cursor: 'pointer', fontSize: 12.5,
          background: isActive ? '#fff' : 'transparent',
          color: isActive ? 'var(--octale-navy)' : 'var(--fg-muted)',
          fontWeight: isActive ? 700 : 500,
          boxShadow: isActive ? '0 1px 4px rgba(0,0,0,.08)' : 'none',
          whiteSpace: 'nowrap',
        }}>
          {t.icon && <Icon name={t.icon} size={13} style={{ marginRight: 5, verticalAlign: 'middle' }} />}
          {t.label}
        </button>
      );
    })}
  </div>
);

// ─── OrgDetailPanel.Info ──────────────────────────────────────────────────────
const OrgInfo = ({ org, onUpdated }) => {
  const [form, setForm] = React.useState({
    name: org.name || '',
    plan: org.plan || 'trial',
    status: org.status || 'active',
    trial_ends_at: org.trial_ends_at ? org.trial_ends_at.slice(0, 10) : '',
  });
  const [saving, setSaving] = React.useState(false);
  const [msg, setMsg] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const save = async () => {
    setSaving(true); setMsg('');
    try {
      const payload = {
        name: form.name,
        plan: form.plan,
        status: form.status,
        trial_ends_at: form.trial_ends_at || null,
      };
      const updated = await window.OctaleApi.organizations.update(org.id, payload);
      onUpdated({ ...org, ...updated });
      setMsg('ok');
      setTimeout(() => setMsg(''), 2500);
    } catch (e) { setMsg('err:' + (e.message || 'Erro')); }
    finally { setSaving(false); }
  };

  return (
    <div style={{ display: 'grid', gap: 14, maxWidth: 480 }}>
      <div className="field-w">
        <label>Nome da organização</label>
        <input value={form.name} onChange={e => set('name', e.target.value)} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div className="field-w">
          <label>Plano</label>
          <select value={form.plan} onChange={e => set('plan', e.target.value)}>
            {Object.entries(PLAN_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div className="field-w">
          <label>Status</label>
          <select value={form.status} onChange={e => set('status', e.target.value)}>
            {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
          </select>
        </div>
      </div>
      {(form.status === 'trial' || form.plan === 'trial') && (
        <div className="field-w">
          <label>Trial expira em</label>
          <input type="date" value={form.trial_ends_at} onChange={e => set('trial_ends_at', e.target.value)} />
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button className="btn sm" disabled={saving} onClick={save}>
          {saving ? <><Spinner size={12} /> Salvando…</> : 'Salvar alterações'}
        </button>
        {msg === 'ok' && <span style={{ fontSize: 12, color: '#1F9D55' }}>✓ Salvo</span>}
        {msg.startsWith('err:') && <span style={{ fontSize: 12, color: '#C2253E' }}>{msg.slice(4)}</span>}
      </div>
      <div style={{ borderTop: '1px solid var(--border)', paddingTop: 14, display: 'grid', gap: 6 }}>
        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>
          <b style={{ color: 'var(--octale-black)' }}>Slug:</b> /{org.slug}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>
          <b style={{ color: 'var(--octale-black)' }}>ID:</b> {org.id}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>
          <b style={{ color: 'var(--octale-black)' }}>Criada em:</b> {fmtDate(org.created_at)}
        </div>
        {org.usage && (
          <div style={{ display: 'flex', gap: 16, marginTop: 4, fontSize: 12 }}>
            <span><b>{org.usage.users ?? 0}</b> usuários</span>
            <span><b>{org.usage.clients ?? 0}</b> clientes</span>
            <span><b>{org.usage.cases ?? 0}</b> casos</span>
            <span><b>{org.usage.tasks ?? 0}</b> tarefas</span>
          </div>
        )}
      </div>
    </div>
  );
};

// ─── OrgDetailPanel.Usuários ──────────────────────────────────────────────────
const AddUserModal = ({ orgId, onClose, onCreated }) => {
  const [form, setForm] = React.useState({
    name: '', email: '', password: '', role: 'advogado', org_role: 'member', initials: '',
  });
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault(); setSaving(true); setError('');
    try {
      const user = await window.OctaleApi.organizations.createUser(orgId, form);
      onCreated(user); onClose();
    } catch (e) { setError(e.message || 'Erro'); }
    finally { setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 28, width: 420, maxWidth: '92vw' }}>
        <h3 style={{ fontSize: 16, fontWeight: 800, color: 'var(--octale-navy)', marginBottom: 16 }}>Novo usuário</h3>
        {error && <div style={{ marginBottom: 12, padding: '8px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>{error}</div>}
        <form onSubmit={submit} style={{ display: 'grid', gap: 10 }}>
          <div className="field-w"><label>Nome</label><input value={form.name} onChange={e => set('name', e.target.value)} required /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 80px', gap: 8 }}>
            <div className="field-w"><label>E-mail</label><input type="email" value={form.email} onChange={e => set('email', e.target.value)} required /></div>
            <div className="field-w"><label>Iniciais</label><input value={form.initials} onChange={e => set('initials', e.target.value.toUpperCase().slice(0, 3))} placeholder="ex: RH" /></div>
          </div>
          <div className="field-w"><label>Senha provisória</label><input type="text" value={form.password} onChange={e => set('password', e.target.value)} minLength={8} required /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div className="field-w">
              <label>Papel</label>
              <select value={form.role} onChange={e => set('role', e.target.value)}>
                {Object.entries(ROLE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
            <div className="field-w">
              <label>Org. Role</label>
              <select value={form.org_role} onChange={e => set('org_role', e.target.value)}>
                {Object.entries(ORG_ROLE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
            <button type="button" className="btn ghost sm" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn sm" disabled={saving}>{saving ? 'Criando…' : 'Criar usuário'}</button>
          </div>
        </form>
      </div>
    </div>
  );
};

const ResetPasswordModal = ({ user, orgId, onClose }) => {
  const [pw, setPw] = React.useState('');
  const [saving, setSaving] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault(); setSaving(true); setError('');
    try {
      await window.OctaleApi.organizations.resetUserPassword(orgId, user.id, pw);
      setDone(true);
    } catch (e) { setError(e.message || 'Erro'); }
    finally { setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 28, width: 360, maxWidth: '92vw' }}>
        <h3 style={{ fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Redefinir senha</h3>
        <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginBottom: 16 }}>{user.name} · {user.email}</p>
        {done ? (
          <div>
            <p style={{ fontSize: 13, color: '#1F9D55', marginBottom: 16 }}>✓ Senha redefinida com sucesso.</p>
            <button className="btn sm" onClick={onClose}>Fechar</button>
          </div>
        ) : (
          <form onSubmit={submit} style={{ display: 'grid', gap: 10 }}>
            {error && <div style={{ padding: '8px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>{error}</div>}
            <div className="field-w">
              <label>Nova senha (mínimo 8 caracteres)</label>
              <input type="text" value={pw} onChange={e => setPw(e.target.value)} minLength={8} required />
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button type="button" className="btn ghost sm" onClick={onClose}>Cancelar</button>
              <button type="submit" className="btn sm" disabled={saving || pw.length < 8}>{saving ? 'Salvando…' : 'Redefinir'}</button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

const ImpersonateModal = ({ result, onClose }) => {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard.writeText(result.url).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); });
  };
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 28, width: 480, maxWidth: '92vw' }}>
        <h3 style={{ fontSize: 15, fontWeight: 800, marginBottom: 8 }}>Link de impersonação gerado</h3>
        <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginBottom: 16 }}>
          Usuário: <b>{result.target_name}</b>. Este link é válido por <b>5 minutos</b> e só pode ser usado uma vez.
          Cole em uma <b>janela anônima</b> para não encerrar sua sessão atual.
        </p>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: 'var(--octale-off-white)', borderRadius: 8, padding: '10px 12px', marginBottom: 16 }}>
          <span style={{ flex: 1, fontSize: 12, wordBreak: 'break-all', color: 'var(--octale-black)' }}>{result.url}</span>
          <button className="btn sm" onClick={copy}>{copied ? '✓ Copiado' : 'Copiar'}</button>
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn ghost sm" onClick={onClose}>Fechar</button>
        </div>
      </div>
    </div>
  );
};

const OrgUsers = ({ org }) => {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [addModal, setAddModal] = React.useState(false);
  const [resetModal, setResetModal] = React.useState(null);
  const [impModal, setImpModal] = React.useState(null);
  const [busy, setBusy] = React.useState(null);

  const load = () => {
    setLoading(true);
    window.OctaleApi.organizations.listUsers(org.id)
      .then(setUsers).catch(() => {}).finally(() => setLoading(false));
  };
  React.useEffect(() => { load(); }, [org.id]);

  const toggleActive = async (user) => {
    setBusy(user.id);
    try {
      const updated = await window.OctaleApi.organizations.updateUser(org.id, user.id, { active: !user.active });
      setUsers(prev => prev.map(u => u.id === user.id ? { ...u, active: updated.active } : u));
    } catch (e) { alert(e.message || 'Erro'); }
    finally { setBusy(null); }
  };

  const impersonate = async (user) => {
    setBusy(user.id + '_imp');
    try {
      const result = await window.OctaleApi.organizations.impersonateUser(org.id, user.id);
      setImpModal(result);
    } catch (e) { alert(e.message || 'Erro'); }
    finally { setBusy(null); }
  };

  if (loading) return <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}><Spinner /></div>;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{users.length} usuário{users.length !== 1 ? 's' : ''}</span>
        <button className="btn sm" onClick={() => setAddModal(true)}>
          <Icon name="plus" size={13} /> Adicionar usuário
        </button>
      </div>

      {users.length === 0 ? <Empty>Nenhum usuário nesta organização.</Empty> : (
        <div style={{ display: 'grid', gap: 8 }}>
          {users.map(u => (
            <div key={u.id} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
              background: '#fff', border: '1px solid var(--border)', borderRadius: 10,
              flexWrap: 'wrap', opacity: u.active ? 1 : .6,
            }}>
              <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--octale-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11, fontWeight: 800, flexShrink: 0 }}>
                {u.name?.slice(0, 2).toUpperCase() || '??'}
              </div>
              <div style={{ flex: 1, minWidth: 160 }}>
                <div style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--octale-black)' }}>{u.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{u.email}</div>
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
                <Badge bg="var(--octale-off-white)" color="var(--octale-black)" style={{ border: '1px solid var(--border)' }}>
                  {ROLE_LABELS[u.role] || u.role}
                </Badge>
                <Badge bg="var(--octale-off-white)" color="var(--fg-muted)" style={{ border: '1px solid var(--border)' }}>
                  {ORG_ROLE_LABELS[u.org_role] || u.org_role}
                </Badge>
                {!u.active && <Badge bg="#888">Inativo</Badge>}
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn ghost sm" title="Redefinir senha" onClick={() => setResetModal(u)}>
                  <Icon name="key" size={13} />
                </button>
                <button
                  className="btn ghost sm"
                  title="Impersonar (janela anônima)"
                  disabled={busy === u.id + '_imp'}
                  onClick={() => impersonate(u)}
                >
                  <Icon name="logIn" size={13} />
                </button>
                <button
                  className="btn ghost sm"
                  title={u.active ? 'Desativar' : 'Reativar'}
                  disabled={busy === u.id}
                  onClick={() => toggleActive(u)}
                  style={{ color: u.active ? '#C2253E' : '#1F9D55' }}
                >
                  {busy === u.id ? <Spinner size={13} /> : <Icon name={u.active ? 'userX' : 'userCheck'} size={13} />}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {addModal && (
        <AddUserModal
          orgId={org.id}
          onClose={() => setAddModal(false)}
          onCreated={(user) => { setUsers(prev => [...prev, user]); }}
        />
      )}
      {resetModal && <ResetPasswordModal user={resetModal} orgId={org.id} onClose={() => setResetModal(null)} />}
      {impModal && <ImpersonateModal result={impModal} onClose={() => setImpModal(null)} />}
    </div>
  );
};

// ─── OrgDetailPanel.Módulos ───────────────────────────────────────────────────
const OrgModules = ({ org }) => {
  const [modules, setModules] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [msg, setMsg] = React.useState('');

  React.useEffect(() => {
    window.OctaleApi.organizations.getModules(org.id)
      .then(setModules).catch(() => {}).finally(() => setLoading(false));
  }, [org.id]);

  const toggle = (key) => setModules(prev => ({ ...prev, [key]: !prev[key] }));

  const save = async () => {
    setSaving(true); setMsg('');
    try {
      const updated = await window.OctaleApi.organizations.updateModules(org.id, modules);
      setModules(updated);
      setMsg('ok'); setTimeout(() => setMsg(''), 2500);
    } catch (e) { setMsg('err:' + (e.message || 'Erro')); }
    finally { setSaving(false); }
  };

  if (loading) return <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}><Spinner /></div>;

  return (
    <div>
      <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginBottom: 16 }}>
        Controla quais módulos estão disponíveis para esta organização. Módulos desativados ficam ocultos no menu.
      </p>
      <div style={{ display: 'grid', gap: 8, marginBottom: 16 }}>
        {ALL_MODULES.map(m => {
          const enabled = modules ? (modules[m.key] !== false) : true;
          return (
            <div key={m.key} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '12px 16px', background: '#fff', border: '1px solid var(--border)',
              borderRadius: 10, cursor: 'pointer',
            }} onClick={() => toggle(m.key)}>
              <span style={{ fontSize: 13.5, fontWeight: 600, color: enabled ? 'var(--octale-black)' : 'var(--fg-muted)' }}>
                {m.label}
              </span>
              <div style={{
                width: 40, height: 22, borderRadius: 11, border: 'none', cursor: 'pointer',
                background: enabled ? 'var(--octale-navy)' : '#d1d5db', position: 'relative', flexShrink: 0,
              }}>
                <span style={{
                  position: 'absolute', top: 3, left: enabled ? 21 : 3, width: 16, height: 16,
                  borderRadius: '50%', background: '#fff', transition: 'left .2s',
                }} />
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button className="btn sm" disabled={saving} onClick={save}>
          {saving ? <><Spinner size={12} /> Salvando…</> : 'Salvar módulos'}
        </button>
        {msg === 'ok' && <span style={{ fontSize: 12, color: '#1F9D55' }}>✓ Salvo</span>}
        {msg.startsWith('err:') && <span style={{ fontSize: 12, color: '#C2253E' }}>{msg.slice(4)}</span>}
      </div>
    </div>
  );
};

// ─── OrgDetailPanel.Créditos ──────────────────────────────────────────────────
const OrgCredits = ({ org }) => {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [amount, setAmount] = React.useState('');
  const [note, setNote]     = React.useState('');
  const [adding, setAdding] = React.useState(false);
  const [msg, setMsg]       = React.useState('');

  const load = () => {
    window.OctaleApi.creditsAdmin.tenant(org.id)
      .then(setData).catch(() => {}).finally(() => setLoading(false));
  };
  React.useEffect(() => { load(); }, [org.id]);

  const addCredits = async (e) => {
    e.preventDefault();
    const n = Number(amount);
    if (!n || n <= 0) return;
    setAdding(true); setMsg('');
    try {
      await window.OctaleApi.organizations.addCredits(org.id, n, note);
      setMsg(`ok:${n}`); setAmount(''); setNote('');
      load();
    } catch (e) { setMsg('err:' + (e.message || 'Erro')); }
    finally { setAdding(false); }
  };

  if (loading) return <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}><Spinner /></div>;

  const wallet = data?.wallet || {};
  const balance = Number(wallet.balance) || 0;

  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 12, padding: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--fg-muted)', marginBottom: 8 }}>
          Saldo atual
        </div>
        <div style={{ fontSize: 28, fontWeight: 800, color: balance < 20 ? '#C2253E' : 'var(--octale-black)' }}>
          {balance.toLocaleString('pt-BR')} <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)' }}>créditos</span>
        </div>
        {balance < 20 && <div style={{ fontSize: 12, color: '#C2253E', marginTop: 4 }}>⚠ Saldo crítico</div>}
      </div>

      <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 12, padding: 20 }}>
        <SectionTitle>Adicionar créditos manualmente</SectionTitle>
        <form onSubmit={addCredits} style={{ display: 'grid', gap: 10 }}>
          {msg.startsWith('ok:') && (
            <div style={{ padding: '8px 12px', background: 'rgba(31,157,85,.08)', border: '1px solid rgba(31,157,85,.2)', borderRadius: 6, color: '#1F9D55', fontSize: 12.5 }}>
              ✓ {msg.slice(3)} créditos adicionados com sucesso.
            </div>
          )}
          {msg.startsWith('err:') && (
            <div style={{ padding: '8px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>
              {msg.slice(4)}
            </div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 10 }}>
            <div className="field-w">
              <label>Quantidade</label>
              <input type="number" min="1" value={amount} onChange={e => setAmount(e.target.value)} placeholder="ex: 100" required />
            </div>
            <div className="field-w">
              <label>Observação (opcional)</label>
              <input value={note} onChange={e => setNote(e.target.value)} placeholder="ex: Bônus de onboarding" maxLength={200} />
            </div>
          </div>
          <div>
            <button type="submit" className="btn sm" disabled={adding || !amount}>
              {adding ? <><Spinner size={12} /> Adicionando…</> : 'Adicionar créditos'}
            </button>
          </div>
        </form>
      </div>

      {data && (
        <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 12, padding: 20 }}>
          <SectionTitle>Resumo do mês</SectionTitle>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 10 }}>
            {[
              { label: 'Créditos debitados', value: data.creditsDebited },
              { label: 'Custo Jusbrasil', value: 'R$ ' + (Number(data.jusbrasilCost) || 0).toFixed(2).replace('.', ',') },
              { label: 'Receita', value: 'R$ ' + (Number(data.revenue) || 0).toFixed(2).replace('.', ',') },
            ].map(kpi => (
              <div key={kpi.label} style={{ padding: 12, background: 'var(--octale-off-white)', borderRadius: 8 }}>
                <div style={{ fontSize: 10.5, color: 'var(--fg-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 4 }}>{kpi.label}</div>
                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--octale-black)' }}>{kpi.value ?? '—'}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

// ─── OrgDetailPanel (drawer lateral) ─────────────────────────────────────────
const OrgDetailPanel = ({ org, onClose, onUpdated }) => {
  const [tab, setTab] = React.useState('info');

  const tabs = [
    { id: 'info',     label: 'Informações', icon: 'building' },
    { id: 'users',    label: 'Usuários',    icon: 'users' },
    { id: 'modules',  label: 'Módulos',     icon: 'grid' },
    { id: 'credits',  label: 'Créditos',    icon: 'coins' },
  ];

  return (
    <div style={{
      position: 'fixed', top: 0, right: 0, bottom: 0, width: Math.min(680, window.innerWidth),
      background: '#fff', boxShadow: '-4px 0 24px rgba(0,0,0,.12)', zIndex: 9000,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Cabeçalho do drawer */}
      <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 2 }}>
            Organização
          </div>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)', display: 'flex', alignItems: 'center', gap: 8 }}>
            {org.name}
            <StatusBadge status={org.status} />
            <Badge bg="var(--octale-off-white)" color="var(--octale-black)" style={{ border: '1px solid var(--border)', fontSize: 10 }}>
              {PLAN_LABELS[org.plan] || org.plan}
            </Badge>
          </div>
        </div>
        <button className="btn ghost sm" onClick={onClose} style={{ flexShrink: 0, marginTop: 2 }}>
          <Icon name="x" size={16} />
        </button>
      </div>

      {/* Sub-tabs */}
      <div style={{ padding: '12px 24px 0', borderBottom: '1px solid var(--border)' }}>
        <SubTabBar tabs={tabs} active={tab} onChange={setTab} />
      </div>

      {/* Conteúdo */}
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
        {tab === 'info'    && <OrgInfo org={org} onUpdated={onUpdated} />}
        {tab === 'users'   && <OrgUsers org={org} />}
        {tab === 'modules' && <OrgModules org={org} />}
        {tab === 'credits' && <OrgCredits org={org} />}
      </div>
    </div>
  );
};

// ─── Aba Organizações ─────────────────────────────────────────────────────────
const NewOrgModal = ({ onClose, onCreated }) => {
  const [form, setForm] = React.useState({
    name: '', plan: 'trial',
    ownerName: '', ownerEmail: '', ownerPassword: '', ownerInitials: '',
  });
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const onSubmit = async (e) => {
    e.preventDefault(); setSaving(true); setError('');
    try {
      const result = await window.OctaleApi.organizations.create({
        name: form.name,
        plan: form.plan,
        owner: {
          name: form.ownerName,
          email: form.ownerEmail,
          password: form.ownerPassword,
          initials: form.ownerInitials || form.ownerName.slice(0, 2).toUpperCase(),
        },
      });
      onCreated(result.organization);
      onClose();
    } catch (err) { setError(err.message || 'Erro ao criar organização.'); }
    finally { setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 32, width: 440, maxWidth: '92vw', maxHeight: '90vh', overflow: 'auto' }}>
        <h2 style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)', marginBottom: 4 }}>Nova organização</h2>
        <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginBottom: 20 }}>Cadastra o escritório e cria o primeiro usuário (dono/admin).</p>
        <form onSubmit={onSubmit} style={{ display: 'grid', gap: 12 }}>
          {error && <div style={{ padding: '9px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>{error}</div>}
          <div className="field-w"><label>Nome da organização</label><input value={form.name} onChange={e => set('name', e.target.value)} required /></div>
          <div className="field-w">
            <label>Plano inicial</label>
            <select value={form.plan} onChange={e => set('plan', e.target.value)}>
              {Object.entries(PLAN_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
            </select>
          </div>
          <div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} />
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--fg-muted)' }}>Primeiro usuário (dono)</div>
          <div className="field-w"><label>Nome</label><input value={form.ownerName} onChange={e => set('ownerName', e.target.value)} required /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 90px', gap: 8 }}>
            <div className="field-w"><label>E-mail</label><input type="email" value={form.ownerEmail} onChange={e => set('ownerEmail', e.target.value)} required /></div>
            <div className="field-w"><label>Iniciais</label><input value={form.ownerInitials} onChange={e => set('ownerInitials', e.target.value.toUpperCase().slice(0, 3))} placeholder="ex: RH" /></div>
          </div>
          <div className="field-w"><label>Senha provisória</label><input type="text" value={form.ownerPassword} onChange={e => set('ownerPassword', e.target.value)} placeholder="mínimo 8 caracteres" required minLength={8} /></div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
            <button type="button" className="btn ghost sm" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn sm" disabled={saving}>
              {saving ? <><Spinner size={12} /> Criando…</> : 'Criar organização'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

const TabOrganizations = () => {
  const [orgs, setOrgs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [filterPlan, setFilterPlan] = React.useState('');
  const [filterStatus, setFilterStatus] = React.useState('');
  const [selected, setSelected] = React.useState(null);
  const [newModal, setNewModal] = React.useState(false);

  const load = () => {
    setLoading(true);
    window.OctaleApi.organizations.list()
      .then(setOrgs).catch(() => {}).finally(() => setLoading(false));
  };
  React.useEffect(() => { load(); }, []);

  const filtered = orgs.filter(o => {
    if (search && !(o.name || '').toLowerCase().includes(search.toLowerCase())) return false;
    if (filterPlan && o.plan !== filterPlan) return false;
    if (filterStatus && o.status !== filterStatus) return false;
    return true;
  });

  const updateOrg = (updated) => {
    setOrgs(prev => prev.map(o => o.id === updated.id ? { ...o, ...updated } : o));
    setSelected(s => s && s.id === updated.id ? { ...s, ...updated } : s);
  };

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 200 }}>
          <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-muted)', display: 'flex' }}>
            <Icon name="search" size={14} />
          </span>
          <input
            value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar organização…"
            style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px 8px 30px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}
          />
        </div>
        <select value={filterPlan} onChange={e => setFilterPlan(e.target.value)} style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}>
          <option value="">Todos os planos</option>
          {Object.entries(PLAN_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}>
          <option value="">Todos os status</option>
          {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        <button className="btn sm" onClick={() => setNewModal(true)}>
          <Icon name="plus" size={13} /> Nova organização
        </button>
      </div>

      <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 10 }}>
        {filtered.length} de {orgs.length} organização{orgs.length !== 1 ? 'ões' : ''}
      </div>

      {loading ? (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 200, gap: 12, color: 'var(--fg-muted)', fontSize: 13 }}>
          <Spinner /> Carregando…
        </div>
      ) : filtered.length === 0 ? (
        <Empty>Nenhuma organização encontrada.</Empty>
      ) : (
        <div style={{ display: 'grid', gap: 8 }}>
          {filtered.map(org => (
            <div
              key={org.id}
              onClick={() => setSelected(org)}
              style={{
                background: '#fff', border: '1px solid ' + (selected?.id === org.id ? 'var(--octale-navy)' : 'var(--border)'),
                borderRadius: 10, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14,
                cursor: 'pointer', flexWrap: 'wrap', transition: 'border-color .15s',
              }}
            >
              <div style={{ flex: 1, minWidth: 180 }}>
                <div style={{ fontWeight: 700, fontSize: 14.5, color: 'var(--octale-black)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  {org.name}
                  <StatusBadge status={org.status} />
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 2 }}>
                  /{org.slug} · {PLAN_LABELS[org.plan] || org.plan}
                  {org.trial_ends_at && org.status === 'trial' && (
                    <> · trial até {fmtDate(org.trial_ends_at)}</>
                  )}
                </div>
              </div>
              {org.usage && (
                <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--fg-muted)' }}>
                  <span><b style={{ color: 'var(--octale-black)' }}>{org.usage.users ?? 0}</b> usuários</span>
                  <span><b style={{ color: 'var(--octale-black)' }}>{org.usage.clients ?? 0}</b> clientes</span>
                  <span><b style={{ color: 'var(--octale-black)' }}>{org.usage.cases ?? 0}</b> casos</span>
                </div>
              )}
              <Icon name="chevronRight" size={15} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
            </div>
          ))}
        </div>
      )}

      {selected && (
        <OrgDetailPanel
          org={selected}
          onClose={() => setSelected(null)}
          onUpdated={updateOrg}
        />
      )}
      {/* Overlay para fechar o drawer clicando fora */}
      {selected && (
        <div onClick={() => setSelected(null)} style={{ position: 'fixed', inset: 0, zIndex: 8999 }} />
      )}

      {newModal && (
        <NewOrgModal
          onClose={() => setNewModal(false)}
          onCreated={(org) => { setOrgs(prev => [{ ...org, usage: { users: 1, clients: 0, cases: 0, tasks: 0 } }, ...prev]); }}
        />
      )}
    </div>
  );
};

// ─── Aba Admins da Plataforma ─────────────────────────────────────────────────
const PermissionMatrix = ({ permissions, onChange, disabled }) => {
  const perms = permissions || {};

  const toggle = (domain, action) => {
    const current = !!(perms[domain] && perms[domain][action]);
    onChange({
      ...perms,
      [domain]: { ...(perms[domain] || {}), [action]: !current },
    });
  };

  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
        <thead>
          <tr>
            <th style={{ textAlign: 'left', padding: '8px 12px', borderBottom: '1px solid var(--border)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--fg-muted)', width: 180 }}>
              Domínio
            </th>
            {['Ação', ''].map((h, i) => (
              <th key={i} style={{ textAlign: 'left', padding: '8px 12px', borderBottom: '1px solid var(--border)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--fg-muted)' }}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {PERM_DOMAINS.map(domain => (
            domain.actions.map((action, ai) => (
              <tr key={`${domain.key}-${action.key}`} style={{ background: ai % 2 === 0 ? 'transparent' : 'var(--octale-off-white)' }}>
                {ai === 0 && (
                  <td rowSpan={domain.actions.length} style={{
                    padding: '10px 12px', borderBottom: '1px solid var(--border)', borderRight: '1px solid var(--border)',
                    fontWeight: 700, color: 'var(--octale-black)', verticalAlign: 'top', fontSize: 12.5,
                  }}>
                    {domain.label}
                  </td>
                )}
                <td style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)', color: 'var(--fg-muted)' }}>
                  {action.label}
                </td>
                <td style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)', textAlign: 'center' }}>
                  <input
                    type="checkbox"
                    disabled={disabled}
                    checked={!!(perms[domain.key] && perms[domain.key][action.key])}
                    onChange={() => toggle(domain.key, action.key)}
                    style={{ width: 16, height: 16, cursor: disabled ? 'default' : 'pointer' }}
                  />
                </td>
              </tr>
            ))
          ))}
        </tbody>
      </table>
    </div>
  );
};

const NewAdminModal = ({ onClose, onCreated }) => {
  const [form, setForm] = React.useState({ name: '', email: '', password: '' });
  const [permissions, setPermissions] = React.useState({});
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault(); setSaving(true); setError('');
    try {
      const admin = await window.OctaleApi.platformAdmins.create({ ...form, permissions });
      onCreated(admin); onClose();
    } catch (e) { setError(e.message || 'Erro'); }
    finally { setSaving(false); }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 28, width: 620, maxWidth: '95vw', maxHeight: '90vh', overflow: 'auto' }}>
        <h3 style={{ fontSize: 17, fontWeight: 800, color: 'var(--octale-navy)', marginBottom: 16 }}>Novo admin da plataforma</h3>
        {error && <div style={{ marginBottom: 12, padding: '8px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>{error}</div>}
        <form onSubmit={submit} style={{ display: 'grid', gap: 12 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div className="field-w"><label>Nome</label><input value={form.name} onChange={e => set('name', e.target.value)} required /></div>
            <div className="field-w"><label>E-mail</label><input type="email" value={form.email} onChange={e => set('email', e.target.value)} required /></div>
          </div>
          <div className="field-w"><label>Senha (mínimo 8 caracteres)</label><input type="text" value={form.password} onChange={e => set('password', e.target.value)} minLength={8} required /></div>
          <div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} />
          <div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--fg-muted)', marginBottom: 4 }}>
            Permissões granulares
          </div>
          <PermissionMatrix permissions={permissions} onChange={setPermissions} />
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
            <button type="button" className="btn ghost sm" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn sm" disabled={saving}>{saving ? 'Criando…' : 'Criar admin'}</button>
          </div>
        </form>
      </div>
    </div>
  );
};

const TabPlatformAdmins = ({ currentUserId }) => {
  const [admins, setAdmins] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [newModal, setNewModal] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [editPerms, setEditPerms] = React.useState({});
  const [saving, setSaving] = React.useState(false);
  const [msg, setMsg] = React.useState('');

  const load = () => {
    window.OctaleApi.platformAdmins.list()
      .then(setAdmins).catch(() => {}).finally(() => setLoading(false));
  };
  React.useEffect(() => { load(); }, []);

  const startEdit = (admin) => {
    setEditing(admin);
    setEditPerms(admin.permissions || {});
    setMsg('');
  };

  const savePerms = async () => {
    setSaving(true); setMsg('');
    try {
      await window.OctaleApi.platformAdmins.updatePermissions(editing.id, editPerms);
      setAdmins(prev => prev.map(a => a.id === editing.id ? { ...a, permissions: editPerms } : a));
      setEditing(null);
      setMsg('ok'); setTimeout(() => setMsg(''), 2500);
    } catch (e) { setMsg('err:' + (e.message || 'Erro')); }
    finally { setSaving(false); }
  };

  const revoke = async (admin) => {
    if (!confirm(`Revogar acesso de ${admin.name}?`)) return;
    try {
      await window.OctaleApi.platformAdmins.revoke(admin.id);
      setAdmins(prev => prev.filter(a => a.id !== admin.id));
    } catch (e) { alert(e.message || 'Erro'); }
  };

  if (loading) return <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}><Spinner /></div>;

  return (
    <div>
      <p style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 16, maxWidth: 640 }}>
        Aqui você controla quem mais pode acessar este painel e o que cada pessoa pode fazer.
        Admins sem linha de permissão explícita são reconhecidos como donos da plataforma com acesso total.
      </p>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{admins.length} admin{admins.length !== 1 ? 's' : ''}</span>
        <button className="btn sm" onClick={() => setNewModal(true)}>
          <Icon name="plus" size={13} /> Novo admin
        </button>
      </div>

      {msg === 'ok' && <div style={{ marginBottom: 12, padding: '8px 14px', background: 'rgba(31,157,85,.08)', border: '1px solid rgba(31,157,85,.2)', borderRadius: 8, color: '#1F9D55', fontSize: 12.5 }}>✓ Permissões atualizadas.</div>}

      {admins.length === 0 ? <Empty>Nenhum admin cadastrado além de você.</Empty> : (
        <div style={{ display: 'grid', gap: 10 }}>
          {admins.map(admin => {
            const isMe = admin.id === currentUserId;
            const isEditingThis = editing?.id === admin.id;
            return (
              <div key={admin.id} style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden' }}>
                <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--octale-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 12, fontWeight: 800, flexShrink: 0 }}>
                    {admin.name?.slice(0, 2).toUpperCase() || '?'}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--octale-black)', display: 'flex', alignItems: 'center', gap: 8 }}>
                      {admin.name}
                      {isMe && <Badge bg="var(--octale-navy)">Você</Badge>}
                      {admin.is_master && <Badge bg="#1F9D55">Dono</Badge>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{admin.email}</div>
                  </div>
                  {!isMe && !admin.is_master && (
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button className="btn ghost sm" onClick={() => isEditingThis ? setEditing(null) : startEdit(admin)}>
                        <Icon name={isEditingThis ? 'x' : 'settings'} size={13} /> {isEditingThis ? 'Cancelar' : 'Permissões'}
                      </button>
                      <button className="btn ghost sm" style={{ color: '#C2253E' }} onClick={() => revoke(admin)}>
                        <Icon name="userX" size={13} /> Revogar
                      </button>
                    </div>
                  )}
                </div>
                {isEditingThis && (
                  <div style={{ borderTop: '1px solid var(--border)', padding: '16px 18px' }}>
                    <div style={{ marginBottom: 12, fontSize: 12.5, fontWeight: 700, color: 'var(--octale-black)' }}>
                      Editando permissões de {editing.name}
                    </div>
                    <PermissionMatrix permissions={editPerms} onChange={setEditPerms} />
                    <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                      <button className="btn sm" disabled={saving} onClick={savePerms}>
                        {saving ? <><Spinner size={12} /> Salvando…</> : 'Salvar permissões'}
                      </button>
                      <button className="btn ghost sm" onClick={() => setEditing(null)}>Cancelar</button>
                    </div>
                    {msg.startsWith('err:') && <span style={{ fontSize: 12, color: '#C2253E', marginLeft: 10 }}>{msg.slice(4)}</span>}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      {newModal && (
        <NewAdminModal
          onClose={() => setNewModal(false)}
          onCreated={(admin) => setAdmins(prev => [...prev, admin])}
        />
      )}
    </div>
  );
};

// ─── Aba Audit Log ────────────────────────────────────────────────────────────
const ACTION_LABELS = {
  'org.create': 'Org criada',
  'org.update': 'Org atualizada',
  'org.modules_update': 'Módulos atualizados',
  'user.create': 'Usuário criado',
  'user.update': 'Usuário atualizado',
  'user.reset_password': 'Senha redefinida',
  'user.impersonate': 'Impersonação',
  'credits.add': 'Créditos adicionados',
  'platform_admin.create': 'Admin criado',
  'platform_admin.update_permissions': 'Permissões alteradas',
  'platform_admin.revoke': 'Acesso revogado',
};

const ACTION_COLORS = {
  'user.impersonate': '#D49A1A',
  'org.create': '#1F9D55',
  'credits.add': 'var(--octale-navy)',
  'platform_admin.revoke': '#C2253E',
};

const TabAuditLog = () => {
  const [state, setState] = React.useState({ entries: [], total: 0, page: 1, hasMore: false, loading: true });
  const [filters, setFilters] = React.useState({ action: '', target_type: '' });
  const setFilter = (k, v) => setFilters(f => ({ ...f, [k]: v }));

  const load = (page = 1) => {
    setState(s => ({ ...s, loading: true }));
    window.OctaleApi.platformAudit.list({ ...filters, page, limit: 50 })
      .then(d => setState({ entries: d.entries || [], total: d.total || 0, page: d.page || page, hasMore: !!d.hasMore, loading: false }))
      .catch(() => setState(s => ({ ...s, loading: false })));
  };

  React.useEffect(() => { load(1); }, [filters.action, filters.target_type]);

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <select value={filters.action} onChange={e => setFilter('action', e.target.value)} style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}>
          <option value="">Todas as ações</option>
          {Object.entries(ACTION_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        <select value={filters.target_type} onChange={e => setFilter('target_type', e.target.value)} style={{ padding: '8px 10px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}>
          <option value="">Todos os alvos</option>
          <option value="organization">Organização</option>
          <option value="user">Usuário</option>
          <option value="platform_admin">Admin da plataforma</option>
        </select>
        <button className="btn ghost sm" onClick={() => load(1)}>Atualizar</button>
      </div>

      {state.loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}><Spinner /></div>
      ) : state.entries.length === 0 ? (
        <Empty>Nenhum registro no audit log.</Empty>
      ) : (
        <div>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
              <thead>
                <tr>
                  {['Data', 'Admin', 'Ação', 'Alvo', 'IP'].map(h => (
                    <th key={h} style={{ textAlign: 'left', padding: '8px 12px', borderBottom: '2px solid var(--border)', fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--fg-muted)', whiteSpace: 'nowrap' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {state.entries.map((e, i) => (
                  <tr key={e.id || i} style={{ borderBottom: '1px solid var(--border)' }}>
                    <td style={{ padding: '10px 12px', whiteSpace: 'nowrap', color: 'var(--fg-muted)' }}>{fmtDT(e.created_at)}</td>
                    <td style={{ padding: '10px 12px', fontWeight: 600, color: 'var(--octale-black)' }}>{e.admin_name || '—'}</td>
                    <td style={{ padding: '10px 12px' }}>
                      <Badge bg={ACTION_COLORS[e.action] ? ACTION_COLORS[e.action] + '20' : 'var(--octale-off-white)'} color={ACTION_COLORS[e.action] || 'var(--octale-black)'} style={{ border: '1px solid ' + (ACTION_COLORS[e.action] || 'var(--border)') + '50' }}>
                        {ACTION_LABELS[e.action] || e.action}
                      </Badge>
                    </td>
                    <td style={{ padding: '10px 12px', color: 'var(--octale-black)' }}>
                      <span style={{ fontWeight: 600 }}>{e.target_name || e.target_id || '—'}</span>
                      {e.target_type && <span style={{ fontSize: 11, color: 'var(--fg-muted)', marginLeft: 6 }}>({e.target_type})</span>}
                    </td>
                    <td style={{ padding: '10px 12px', color: 'var(--fg-muted)', fontSize: 11 }}>{e.ip_address || '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
            <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
              Página {state.page} · {state.total} registro{state.total !== 1 ? 's' : ''}
            </span>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn ghost sm" disabled={state.page <= 1 || state.loading} onClick={() => load(state.page - 1)}>Anterior</button>
              <button className="btn ghost sm" disabled={!state.hasMore || state.loading} onClick={() => load(state.page + 1)}>Próxima</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ─── Raiz: SuperAdminPanel ────────────────────────────────────────────────────
const MAIN_TABS = [
  { id: 'orgs',    label: 'Organizações',      icon: 'building' },
  { id: 'admins',  label: 'Admins do Painel',  icon: 'shield' },
  { id: 'audit',   label: 'Audit Log',         icon: 'fileText' },
  { id: 'credits', label: 'Créditos',          icon: 'trendingUp' },
];

const SuperAdminPanel = ({ currentUser, onLogout }) => {
  const [tab, setTab] = React.useState('orgs');

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg, #f7f7fb)' }}>
      {/* Header */}
      <div style={{
        background: 'var(--octale-navy)', color: '#fff',
        padding: '16px 32px 0', display: 'flex', flexDirection: 'column', gap: 0,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', opacity: .55, marginBottom: 2 }}>
              Painel do Super Admin · Octale Solutions
            </div>
            <div style={{ fontSize: 20, fontWeight: 800 }}>
              {MAIN_TABS.find(t => t.id === tab)?.label || 'Painel'}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 12.5, opacity: .7 }}>{currentUser?.name}</span>
            <button className="btn ghost sm" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.3)' }} onClick={onLogout}>
              <Icon name="logOut" size={13} /> Sair
            </button>
          </div>
        </div>

        {/* Tab nav no header */}
        <div style={{ display: 'flex', gap: 2 }}>
          {MAIN_TABS.map(t => {
            const active = tab === t.id;
            return (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '9px 16px', border: 'none', borderRadius: '8px 8px 0 0',
                  background: active ? 'var(--bg, #f7f7fb)' : 'transparent',
                  color: active ? 'var(--octale-navy)' : 'rgba(255,255,255,.7)',
                  fontWeight: active ? 700 : 500, fontSize: 13, cursor: 'pointer',
                  transition: 'all .15s',
                }}
              >
                <Icon name={t.icon} size={14} />
                {t.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Corpo */}
      <div style={{ padding: '28px 32px', maxWidth: 1200, margin: '0 auto' }}>
        {tab === 'orgs'    && <TabOrganizations />}
        {tab === 'admins'  && <TabPlatformAdmins currentUserId={currentUser?.id} />}
        {tab === 'audit'   && <TabAuditLog />}
        {tab === 'credits' && <SuperAdminCredits />}
      </div>
    </div>
  );
};

window.SuperAdminPanel = SuperAdminPanel;