/* Wood OS — SaaS Admin Panel */
const { useState: useStateAdm, useMemo: useMemoAdm } = React;

const AdminPanel = ({ navigate }) => {
  const [section, setSection] = useStateAdm("overview");
  const a = MOCK.admin;

  const sections = [
    { id: "overview", icon: "compass", label: "Visão geral" },
    { id: "tenants", icon: "building", label: "Marcenarias", count: a.tenants.length },
    { id: "billing", icon: "credit-card", label: "Planos & Receita" },
    { id: "users", icon: "users", label: "Usuários" },
    { id: "features", icon: "feature", label: "Feature flags" },
    { id: "tickets", icon: "support", label: "Suporte", count: a.tickets.filter(t => t.status !== "resolvido").length },
    { id: "audit", icon: "log", label: "Auditoria" },
    { id: "settings", icon: "settings", label: "Configurações" },
  ];

  return (
    <>
      {/* Admin banner */}
      <div className="wood-card wood-veneer p-5 mb-5 slide-up relative overflow-hidden" style={{
        background: "linear-gradient(135deg, rgba(56,189,248,0.08), rgba(11,10,7,0.6))",
        borderColor: "rgba(56,189,248,0.25)"
      }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 100% at 100% 0%, rgba(56,189,248,0.12), transparent 60%)", pointerEvents: "none" }} />
        <div className="flex items-center justify-between gap-4 relative flex-wrap">
          <div className="flex items-center gap-4">
            <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: "linear-gradient(135deg, rgba(56,189,248,0.2), rgba(11,10,7,0.6))",
              border: "1px solid rgba(56,189,248,0.45)",
              color: "var(--info)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 0 24px rgba(56,189,248,0.15)"
            }}>
              <Icon name="shield" size={24} />
            </div>
            <div>
              <div className="text-xs uppercase tracking-widest text-info mb-1" style={{ fontWeight: 600 }}>PAINEL ADMIN · ACESSO RESTRITO</div>
              <div className="text-2xl font-semibold tracking-tighter">Wood OS — Operação SaaS</div>
              <div className="text-3 text-sm">Você está vendo dados de todas as marcenarias na plataforma · sessão admin@woodos.app</div>
            </div>
          </div>
          <button className="wood-btn wood-btn-secondary" onClick={() => navigate("dashboard")}>
            <Icon name="chevron-left" size={13} /> Voltar ao app
          </button>
        </div>
      </div>

      {/* Section tabs */}
      <div className="wood-card p-2 mb-5 flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: "none" }}>
        {sections.map(s => (
          <button
            key={s.id}
            onClick={() => setSection(s.id)}
            className="wood-btn"
            style={{
              background: section === s.id ? "rgba(16, 185, 129,0.14)" : "transparent",
              border: `1px solid ${section === s.id ? "rgba(16, 185, 129,0.35)" : "transparent"}`,
              color: section === s.id ? "var(--cream)" : "var(--text-3)",
              fontWeight: section === s.id ? 600 : 500,
              fontSize: 13,
              padding: "8px 14px",
              whiteSpace: "nowrap"
            }}
          >
            <Icon name={s.icon} size={13} />
            {s.label}
            {s.count != null && (
              <span style={{
                fontSize: 10.5, padding: "1px 6px", borderRadius: 999,
                background: section === s.id ? "rgba(0,0,0,0.25)" : "rgba(255,255,255,0.06)",
                marginLeft: 2
              }}>{s.count}</span>
            )}
          </button>
        ))}
      </div>

      {section === "overview" && <AdminOverview />}
      {section === "tenants" && <AdminTenants />}
      {section === "billing" && <AdminBilling />}
      {section === "users" && <AdminUsers />}
      {section === "features" && <AdminFeatures />}
      {section === "tickets" && <AdminTickets />}
      {section === "audit" && <AdminAudit />}
      {section === "settings" && <AdminSettings />}
    </>
  );
};

/* ============================================================
   OVERVIEW
   ============================================================ */
const AdminOverview = () => {
  const m = MOCK.admin.metrics;
  return (
    <>
      <div className="grid grid-cols-4 gap-4 mb-5">
        <MetricCard icon="dollar" label="MRR" value={fmtBRL(m.mrr)} sub="receita recorrente mensal" trend={14.6} accent="amber" delay={0} />
        <MetricCard icon="trending" label="ARR projetado" value={fmtBRL(m.arr)} sub={`+${m.growth}% mês a mês`} trend={m.growth} accent="success" delay={60} />
        <MetricCard icon="building" label="Marcenarias ativas" value={m.activeTenants} sub={`${m.trialTenants} em trial · +${m.newThisMonth} este mês`} accent="info" delay={120} />
        <MetricCard icon="users" label="Usuários ativos" value={fmtBR(m.activeUsers)} sub={`em ${m.tenants} marcenarias`} trend={9} accent="amber" delay={180} />
      </div>

      <div className="grid grid-cols-12 gap-5">
        {/* MRR chart */}
        <div className="col-span-8 wood-card p-5 slide-up" style={{ animationDelay: "240ms" }}>
          <div className="flex items-center justify-between mb-4">
            <div>
              <div className="text-md font-semibold tracking-tight">Crescimento de MRR</div>
              <div className="text-xs text-3">últimos 12 meses</div>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2 text-xs">
                <span className="wood-dot" style={{ background: "var(--amber)" }} /> Novo
              </div>
              <div className="flex items-center gap-2 text-xs">
                <span className="wood-dot" style={{ background: "var(--wood-mid)" }} /> Existente
              </div>
              <div className="flex items-center gap-2 text-xs">
                <span className="wood-dot" style={{ background: "var(--error)" }} /> Churn
              </div>
            </div>
          </div>
          <MRRChart />
        </div>

        {/* Latest tenants */}
        <div className="col-span-4 wood-card p-5 slide-up" style={{ animationDelay: "300ms" }}>
          <div className="text-md font-semibold tracking-tight mb-1">Novos tenants</div>
          <div className="text-xs text-3 mb-4">últimas marcenarias cadastradas</div>
          <div className="flex flex-col gap-3">
            {MOCK.admin.tenants.slice(0, 5).map(t => (
              <div key={t.id} className="flex items-center gap-3">
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: "linear-gradient(135deg, #047857, #022C22)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "#FFFFFF", fontWeight: 700, fontSize: 11,
                  border: "1px solid var(--wood-border-strong)", flexShrink: 0
                }}>{t.name.substring(0, 2).toUpperCase()}</div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm truncate" style={{ fontWeight: 500 }}>{t.name}</div>
                  <div className="text-xs text-3">{t.users} usuários · {t.region}</div>
                </div>
                <StatusPill status={t.status} />
              </div>
            ))}
          </div>
        </div>

        {/* Plans split */}
        <div className="col-span-6 wood-card p-5 slide-up" style={{ animationDelay: "360ms" }}>
          <div className="text-md font-semibold tracking-tight mb-1">Distribuição por plano</div>
          <div className="text-xs text-3 mb-4">tenants ativos por nível</div>
          <div className="flex flex-col gap-4">
            {MOCK.admin.plans.map((p) => {
              const total = MOCK.admin.plans.reduce((s, pl) => s + pl.users, 0);
              const pct = (p.users / total) * 100;
              return (
                <div key={p.id}>
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <span className="wood-dot" style={{ background: p.color, width: 8, height: 8 }} />
                      <span className="text-sm" style={{ fontWeight: 600 }}>{p.name}</span>
                      <span className="text-xs text-3">{fmtBRL(p.price)} / mês</span>
                    </div>
                    <div className="text-sm font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{p.users} <span className="text-3" style={{ fontWeight: 400 }}>· {fmtBRL(p.mrr)}</span></div>
                  </div>
                  <div className="wood-progress" style={{ height: 6 }}>
                    <div className="wood-progress-fill" style={{ width: `${pct}%`, background: `linear-gradient(90deg, ${p.color}aa, ${p.color})` }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Health alerts */}
        <div className="col-span-6 wood-card p-5 slide-up" style={{ animationDelay: "420ms" }}>
          <div className="flex items-center justify-between mb-4">
            <div>
              <div className="text-md font-semibold tracking-tight">Saúde dos tenants</div>
              <div className="text-xs text-3">marcenarias precisando de atenção</div>
            </div>
            <Icon name="alert-circle" size={16} className="text-warning" />
          </div>
          <div className="flex flex-col gap-3">
            {MOCK.admin.tenants.filter(t => t.health < 75 || t.status === "suspenso").slice(0, 4).map(t => (
              <div key={t.id} className="flex items-center gap-3 p-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                <div style={{
                  width: 38, height: 38, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: t.health < 40 ? "rgba(239,68,68,0.16)" : "rgba(245,158,11,0.16)",
                  color: t.health < 40 ? "var(--error)" : "var(--warning)",
                  flexShrink: 0, fontWeight: 700, fontSize: 12, fontVariantNumeric: "tabular-nums"
                }}>{t.health}</div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm truncate" style={{ fontWeight: 500 }}>{t.name}</div>
                  <div className="text-xs text-3">
                    {t.status === "suspenso" ? "Conta suspensa · inadimplência" :
                     t.health < 50 ? "Engajamento muito baixo · 7+ dias sem login" :
                     "Engajamento decrescente"}
                  </div>
                </div>
                <button className="wood-btn wood-btn-ghost wood-btn-sm">
                  <Icon name="arrow-right" size={12} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

/* ============================================================
   MRR Chart — fake sparkline-bars
   ============================================================ */
const MRRChart = () => {
  const months = ["Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", "Jan", "Fev", "Mar", "Abr", "Mai"];
  const data = [
    { new: 12, ex: 48, chu: 4 },
    { new: 14, ex: 56, chu: 3 },
    { new: 18, ex: 66, chu: 5 },
    { new: 16, ex: 78, chu: 4 },
    { new: 22, ex: 88, chu: 6 },
    { new: 24, ex: 102, chu: 5 },
    { new: 28, ex: 118, chu: 4 },
    { new: 32, ex: 134, chu: 7 },
    { new: 30, ex: 152, chu: 5 },
    { new: 36, ex: 168, chu: 8 },
    { new: 38, ex: 178, chu: 5 },
    { new: 44, ex: 195, chu: 6 },
  ];
  const max = Math.max(...data.map(d => d.new + d.ex)) + 10;

  return (
    <div className="relative" style={{ height: 240 }}>
      <div className="absolute inset-0 flex items-end gap-2">
        {data.map((d, i) => {
          const total = d.new + d.ex;
          const pct = (total / max) * 100;
          const newPct = (d.new / total) * 100;
          const chPct = (d.chu / max) * 100;
          return (
            <div key={i} className="flex-1 flex flex-col items-center gap-1">
              <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", position: "relative" }}>
                <div style={{
                  height: `${pct}%`,
                  background: `linear-gradient(180deg, var(--amber-bright) 0%, var(--amber) ${newPct}%, var(--wood-mid) ${newPct + 0.5}%, var(--wood-dark) 100%)`,
                  borderRadius: "4px 4px 0 0",
                  position: "relative",
                  transition: "height 0.7s var(--ease-out)",
                  boxShadow: i === 11 ? "0 0 16px rgba(16, 185, 129,0.4)" : "none"
                }}>
                  {i === 11 && (
                    <div style={{
                      position: "absolute", top: -28, left: "50%", transform: "translateX(-50%)",
                      background: "var(--amber)", color: "#0a0a0a",
                      padding: "3px 8px", borderRadius: 6, fontSize: 11, fontWeight: 700,
                      whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums"
                    }}>R$ 239k</div>
                  )}
                </div>
                <div style={{
                  position: "absolute", left: 0, right: 0, bottom: -2,
                  height: `${chPct}%`, maxHeight: 8,
                  background: "var(--error)", opacity: 0.6,
                  borderRadius: "0 0 4px 4px"
                }} />
              </div>
              <div className="text-xs text-4">{months[i]}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* ============================================================
   TENANTS — list + filter
   ============================================================ */
const AdminTenants = () => {
  const [filter, setFilter] = useStateAdm("todos");
  const [drawer, setDrawer] = useStateAdm(null);
  const tenants = filter === "todos" ? MOCK.admin.tenants : MOCK.admin.tenants.filter(t => t.status === filter || t.plan.toLowerCase() === filter);

  return (
    <>
      <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
        <div className="flex items-center gap-2 flex-wrap">
          <FilterChip active={filter === "todos"} onClick={() => setFilter("todos")} count={MOCK.admin.tenants.length}>Todos</FilterChip>
          <FilterChip active={filter === "ativo"} onClick={() => setFilter("ativo")}>Ativos</FilterChip>
          <FilterChip active={filter === "trial"} onClick={() => setFilter("trial")}>Trial</FilterChip>
          <FilterChip active={filter === "suspenso"} onClick={() => setFilter("suspenso")}>Suspensos</FilterChip>
          <div className="wood-divider md-hide" style={{ width: 1, height: 24, background: "var(--wood-border)" }} />
          <FilterChip active={filter === "starter"} onClick={() => setFilter("starter")}>Starter</FilterChip>
          <FilterChip active={filter === "profissional"} onClick={() => setFilter("profissional")}>Profissional</FilterChip>
          <FilterChip active={filter === "enterprise"} onClick={() => setFilter("enterprise")}>Enterprise</FilterChip>
        </div>
        <div className="flex items-center gap-2">
          <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Exportar CSV</button>
          <button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Convidar marcenaria</button>
        </div>
      </div>

      <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="wood-table">
          <thead>
            <tr>
              <th>Marcenaria</th>
              <th>Plano</th>
              <th>Usuários</th>
              <th>MRR</th>
              <th>Saúde</th>
              <th>Último acesso</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {tenants.map(t => (
              <tr key={t.id} onClick={() => setDrawer(t)} style={{ cursor: "pointer" }}>
                <td>
                  <div className="flex items-center gap-3">
                    <div style={{
                      width: 36, height: 36, borderRadius: 9,
                      background: "linear-gradient(135deg, #047857, #022C22)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: "#FFFFFF", fontWeight: 700, fontSize: 12,
                      border: "1px solid var(--wood-border-strong)", flexShrink: 0
                    }}>{t.name.substring(0, 2).toUpperCase()}</div>
                    <div>
                      <div style={{ fontWeight: 600, color: "var(--text)" }}>{t.name}</div>
                      <div className="text-xs text-4">{t.owner} · {t.region}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <span className="wood-badge" style={{
                    background: t.plan === "Enterprise" ? "rgba(2, 44, 34,0.4)" : t.plan === "Profissional" ? "rgba(16, 185, 129,0.14)" : "rgba(255, 255, 255,0.06)",
                    color: t.plan === "Enterprise" ? "var(--cream)" : t.plan === "Profissional" ? "var(--amber-bright)" : "var(--text-2)",
                    border: `1px solid ${t.plan === "Enterprise" ? "rgba(16, 185, 129,0.45)" : "var(--wood-border)"}`,
                  }}>{t.plan}</span>
                </td>
                <td className="text-sm" style={{ fontVariantNumeric: "tabular-nums" }}>{t.users}</td>
                <td className="text-sm" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>
                  {t.mrr > 0 ? fmtBRL(t.mrr) : <span className="text-4">—</span>}
                </td>
                <td>
                  <div className="flex items-center gap-2">
                    <div style={{ width: 60 }}>
                      <AnimatedProgress
                        value={t.health}
                        max={100}
                        height={4}
                        color={t.health < 40 ? "var(--error)" : t.health < 70 ? "var(--warning)" : "linear-gradient(90deg, #34D399, #10B981)"}
                      />
                    </div>
                    <span className="text-xs" style={{
                      fontVariantNumeric: "tabular-nums", fontWeight: 600,
                      color: t.health < 40 ? "var(--error)" : t.health < 70 ? "var(--warning)" : "var(--success)"
                    }}>{t.health}</span>
                  </div>
                </td>
                <td className="text-sm text-3">{t.lastActive}</td>
                <td><StatusPill status={t.status} /></td>
                <td onClick={e => e.stopPropagation()}>
                  <button className="wood-btn wood-btn-ghost wood-btn-icon-sm">
                    <Icon name="more" size={14} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.name}
        subtitle={drawer?.id}
        actions={
          <>
            <button className="wood-btn wood-btn-ghost" style={{ color: "var(--error)" }}>
              <Icon name="alert" size={13} /> Suspender
            </button>
            <div className="flex-1" />
            <button className="wood-btn wood-btn-secondary">
              <Icon name="settings" size={13} /> Configurações
            </button>
            <button className="wood-btn wood-btn-primary">
              <Icon name="key" size={13} /> Entrar como tenant
            </button>
          </>
        }
      >
        {drawer && <TenantDetail t={drawer} />}
      </PremiumDrawer>
    </>
  );
};

const TenantDetail = ({ t }) => (
  <div>
    {/* Header card */}
    <div className="wood-card wood-veneer p-5 mb-5">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-4">
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: "linear-gradient(135deg, #047857, #022C22)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color: "#FFFFFF", fontWeight: 700, fontSize: 18,
            border: "1px solid var(--wood-border-strong)"
          }}>{t.name.substring(0, 2).toUpperCase()}</div>
          <div>
            <div className="text-xl font-semibold tracking-tight">{t.name}</div>
            <div className="text-3 text-sm">{t.owner} · {t.region}</div>
            <div className="flex items-center gap-2 mt-2">
              <StatusPill status={t.status} />
              <span className="wood-badge wood-badge-amber">{t.plan}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="grid grid-cols-3 gap-3 mb-5">
      <div className="wood-card p-4" style={{ background: "rgba(0,0,0,0.18)" }}>
        <div className="text-xs text-4 mb-1 uppercase tracking-widest" style={{ fontWeight: 500 }}>MRR</div>
        <div className="text-xl font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{t.mrr > 0 ? fmtBRL(t.mrr) : "—"}</div>
      </div>
      <div className="wood-card p-4" style={{ background: "rgba(0,0,0,0.18)" }}>
        <div className="text-xs text-4 mb-1 uppercase tracking-widest" style={{ fontWeight: 500 }}>USUÁRIOS</div>
        <div className="text-xl font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{t.users}</div>
      </div>
      <div className="wood-card p-4" style={{ background: "rgba(0,0,0,0.18)" }}>
        <div className="text-xs text-4 mb-1 uppercase tracking-widest" style={{ fontWeight: 500 }}>HEALTH</div>
        <div className="text-xl font-semibold tracking-tight" style={{
          fontVariantNumeric: "tabular-nums",
          color: t.health < 40 ? "var(--error)" : t.health < 70 ? "var(--warning)" : "var(--success)"
        }}>{t.health}/100</div>
      </div>
    </div>

    <div className="text-sm font-semibold mb-2">Informações</div>
    <div className="grid grid-cols-1 gap-2 mb-5">
      {[
        { label: "Proprietário", value: t.owner, icon: "users" },
        { label: "Região", value: t.region, icon: "map-pin" },
        { label: "Cliente desde", value: fmtDateLong(t.joined), icon: "calendar" },
        { label: "Último acesso", value: t.lastActive + " atrás", icon: "clock" },
        { label: "Plano atual", value: `${t.plan} · ${t.mrr > 0 ? fmtBRL(t.mrr) + "/mês" : "Trial"}`, icon: "credit-card" },
        { label: "Status", value: STATUS_MAP[t.status]?.label, icon: "shield" },
      ].map(d => (
        <div key={d.label} className="flex items-center justify-between p-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
          <span className="text-sm text-3 flex items-center gap-2"><Icon name={d.icon} size={13} /> {d.label}</span>
          <span className="text-sm" style={{ fontWeight: 500 }}>{d.value}</span>
        </div>
      ))}
    </div>

    <div className="text-sm font-semibold mb-2">Ações administrativas</div>
    <div className="grid grid-cols-2 gap-2">
      {[
        { icon: "key", label: "Entrar como tenant", color: "info" },
        { icon: "feature", label: "Feature flags", color: "amber" },
        { icon: "credit-card", label: "Faturamento", color: "amber" },
        { icon: "log", label: "Logs deste tenant", color: "neutral" },
      ].map(a => (
        <button key={a.label} className="wood-btn wood-btn-secondary" style={{ justifyContent: "flex-start", padding: 12 }}>
          <Icon name={a.icon} size={13} className={a.color === "info" ? "text-info" : a.color === "amber" ? "text-amber" : ""} />
          {a.label}
        </button>
      ))}
    </div>
  </div>
);

/* ============================================================
   BILLING
   ============================================================ */
const AdminBilling = () => {
  return (
    <>
      <div className="grid grid-cols-3 gap-4 mb-5">
        {MOCK.admin.plans.map((p, i) => (
          <div key={p.id} className="wood-card p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }}>
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: p.color, display: "inline-block" }} />
                <span className="text-lg font-semibold tracking-tight">{p.name}</span>
              </div>
              <span className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums" }}>{p.users} tenants</span>
            </div>
            <div className="text-3xl font-semibold tracking-tighter wood-gradient-text mb-1" style={{ fontVariantNumeric: "tabular-nums" }}>
              {fmtBRL(p.mrr)}
            </div>
            <div className="text-sm text-3 mb-4">MRR · {fmtBRL(p.price)} por marcenaria</div>
            <AnimatedProgress value={p.mrr} max={Math.max(...MOCK.admin.plans.map(x => x.mrr))} height={4} />
          </div>
        ))}
      </div>

      <div className="grid grid-cols-12 gap-5">
        <div className="col-span-8 wood-card p-5">
          <div className="flex items-center justify-between mb-4">
            <div className="text-md font-semibold tracking-tight">Cobranças recentes</div>
            <button className="wood-btn wood-btn-secondary wood-btn-sm">Ver todas</button>
          </div>
          <table className="wood-table">
            <thead>
              <tr><th>Data</th><th>Marcenaria</th><th>Plano</th><th>Valor</th><th>Status</th></tr>
            </thead>
            <tbody>
              {[
                { date: "15 mai 2026", tenant: "Marcenaria Norte LTDA", plan: "Profissional", value: 1490, status: "pago" },
                { date: "14 mai 2026", tenant: "Olympus Movelaria", plan: "Enterprise", value: 4890, status: "pago" },
                { date: "14 mai 2026", tenant: "MadeireirA Boavista", plan: "Enterprise", value: 3290, status: "pago" },
                { date: "13 mai 2026", tenant: "Móveis Catarinense", plan: "Profissional", value: 1490, status: "pago" },
                { date: "12 mai 2026", tenant: "ArtCedro Marcenaria", plan: "Profissional", value: 1490, status: "falhou" },
                { date: "11 mai 2026", tenant: "Falcão Arquitetura", plan: "Enterprise", value: 3290, status: "pago" },
              ].map((p, i) => (
                <tr key={i}>
                  <td className="text-sm">{p.date}</td>
                  <td style={{ fontWeight: 500 }}>{p.tenant}</td>
                  <td><span className="wood-badge wood-badge-neutral">{p.plan}</span></td>
                  <td className="font-mono" style={{ fontWeight: 600 }}>{fmtBRL(p.value)}</td>
                  <td>
                    <span className={`wood-badge ${p.status === "pago" ? "wood-badge-success" : "wood-badge-error"}`}>
                      <Icon name={p.status === "pago" ? "check" : "x"} size={11} />
                      {p.status === "pago" ? "Pago" : "Falhou"}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="col-span-4 wood-card p-5">
          <div className="text-md font-semibold tracking-tight mb-1">Conversão de trial</div>
          <div className="text-xs text-3 mb-5">últimos 30 dias</div>
          <div className="text-5xl font-semibold tracking-tighter wood-gradient-text mb-2" style={{ fontVariantNumeric: "tabular-nums" }}>68%</div>
          <div className="flex items-center gap-2 text-sm text-success mb-5">
            <Icon name="trend-up" size={13} /> +8% vs. abril
          </div>
          <div className="flex flex-col gap-3">
            <div className="flex items-center justify-between"><span className="text-sm text-3">Trials iniciados</span><span className="font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>32</span></div>
            <div className="flex items-center justify-between"><span className="text-sm text-3">Converteram para Pro</span><span className="font-semibold" style={{ fontVariantNumeric: "tabular-nums", color: "var(--success)" }}>22</span></div>
            <div className="flex items-center justify-between"><span className="text-sm text-3">Converteram para Enterprise</span><span className="font-semibold" style={{ fontVariantNumeric: "tabular-nums", color: "var(--success)" }}>4</span></div>
            <div className="flex items-center justify-between"><span className="text-sm text-3">Abandonaram</span><span className="font-semibold" style={{ fontVariantNumeric: "tabular-nums", color: "var(--error)" }}>6</span></div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ============================================================
   USERS (across tenants)
   ============================================================ */
const AdminUsers = () => {
  return (
    <div className="wood-card p-5">
      <div className="flex items-center justify-between mb-4">
        <div>
          <div className="text-md font-semibold tracking-tight">Usuários globais</div>
          <div className="text-xs text-3">{fmtBR(MOCK.admin.metrics.activeUsers)} ativos em {MOCK.admin.metrics.tenants} marcenarias</div>
        </div>
        <div className="flex items-center gap-2">
          <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Exportar</button>
          <div className="wood-cmd" style={{ width: 240 }}>
            <Icon name="search" size={13} className="text-3" />
            <input placeholder="Buscar por nome ou email…" />
          </div>
        </div>
      </div>

      <table className="wood-table">
        <thead><tr><th>Usuário</th><th>Marcenaria</th><th>Função</th><th>Status</th><th>Último acesso</th></tr></thead>
        <tbody>
          {[
            { name: "Eduardo Marques", email: "eduardo@marcenarianorte.com.br", tenant: "Marcenaria Norte LTDA", role: "Owner", status: "ativo", last: "5 min" },
            { name: "Augusto Reis", email: "augusto@madeireira-boavista.com.br", tenant: "MadeireirA Boavista", role: "Owner", status: "ativo", last: "1h" },
            { name: "Lara Schmidt", email: "lara@moveiscatarinense.com.br", tenant: "Móveis Catarinense", role: "Owner", status: "ativo", last: "12 min" },
            { name: "Hélio Camargo", email: "helio@olympus.com.br", tenant: "Olympus Movelaria", role: "Owner", status: "ativo", last: "3h" },
            { name: "Bernardo Falcão", email: "bernardo@falcaoarq.com.br", tenant: "Falcão Arquitetura", role: "Owner", status: "ativo", last: "30 min" },
            { name: "Ricardo Tavares", email: "ricardo@marcenarianorte.com.br", tenant: "Marcenaria Norte LTDA", role: "Manager", status: "ativo", last: "2h" },
            { name: "Vanessa Castro", email: "vanessa@artcedro.com.br", tenant: "ArtCedro Marcenaria", role: "Owner", status: "inativo", last: "12d" },
            { name: "Camila Bartira", email: "camila@bartira.com.br", tenant: "Bartira Estúdio", role: "Owner", status: "ativo", last: "20 min" },
          ].map((u, i) => (
            <tr key={i}>
              <td>
                <div className="flex items-center gap-3">
                  <Avatar name={u.name} size={32} />
                  <div>
                    <div style={{ fontWeight: 600 }}>{u.name}</div>
                    <div className="text-xs text-4">{u.email}</div>
                  </div>
                </div>
              </td>
              <td className="text-sm">{u.tenant}</td>
              <td><span className="wood-badge wood-badge-neutral">{u.role}</span></td>
              <td><StatusPill status={u.status} /></td>
              <td className="text-sm text-3">{u.last}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

/* ============================================================
   FEATURES — feature flags
   ============================================================ */
const AdminFeatures = () => {
  const [flags, setFlags] = useStateAdm(MOCK.admin.features.map(f => ({ ...f, enabled: f.coverage > 0 })));
  return (
    <div className="grid grid-cols-2 gap-4">
      {flags.map((f, i) => (
        <div key={f.key} className="wood-card p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }}>
          <div className="flex items-start justify-between mb-3">
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <span className="font-mono text-xs text-amber">{f.key}</span>
                <span className="wood-badge" style={{
                  background: f.status === "ga" ? "rgba(52,211,153,0.14)" : f.status === "beta" ? "rgba(56,189,248,0.14)" : "rgba(245,158,11,0.14)",
                  color: f.status === "ga" ? "var(--success)" : f.status === "beta" ? "var(--info)" : "var(--warning)",
                  border: `1px solid ${f.status === "ga" ? "rgba(52,211,153,0.3)" : f.status === "beta" ? "rgba(56,189,248,0.3)" : "rgba(245,158,11,0.3)"}`,
                  textTransform: "uppercase", fontSize: 9.5, letterSpacing: "0.08em", fontWeight: 700
                }}>{f.status}</span>
              </div>
              <div className="text-md font-semibold tracking-tight mb-1">{f.name}</div>
              <div className="text-sm text-3 text-pretty">{f.description}</div>
            </div>
            <Toggle
              checked={flags[i].enabled}
              onChange={() => setFlags(flags.map((x, j) => j === i ? { ...x, enabled: !x.enabled } : x))}
            />
          </div>

          <div className="mt-4 pt-4 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
            <div className="flex items-center justify-between mb-2">
              <span className="text-xs text-3">Cobertura nos tenants</span>
              <span className="text-xs font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{f.coverage}%</span>
            </div>
            <AnimatedProgress value={f.coverage} max={100} height={4} />
          </div>

          <div className="flex items-center gap-2 mt-4">
            <button className="wood-btn wood-btn-secondary wood-btn-sm flex-1"><Icon name="users" size={12} /> Selecionar tenants</button>
            <button className="wood-btn wood-btn-secondary wood-btn-sm"><Icon name="settings" size={12} /></button>
          </div>
        </div>
      ))}
    </div>
  );
};

const Toggle = ({ checked, onChange }) => (
  <button
    onClick={onChange}
    style={{
      width: 40, height: 22, borderRadius: 11,
      background: checked ? "linear-gradient(180deg, var(--amber-bright), var(--amber-deep))" : "rgba(255, 255, 255,0.08)",
      border: `1px solid ${checked ? "rgba(16, 185, 129,0.5)" : "var(--wood-border)"}`,
      padding: 0, cursor: "pointer", position: "relative",
      transition: "background 0.24s var(--ease-out)",
      flexShrink: 0
    }}
  >
    <span style={{
      position: "absolute", top: 2, left: checked ? 20 : 2,
      width: 16, height: 16, borderRadius: "50%",
      background: checked ? "#0a0a0a" : "var(--text-3)",
      transition: "left 0.24s var(--ease-out)",
      boxShadow: "0 1px 3px rgba(0,0,0,0.5)"
    }} />
  </button>
);

/* ============================================================
   TICKETS — Suporte
   ============================================================ */
const AdminTickets = () => (
  <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
    <table className="wood-table">
      <thead><tr><th>ID</th><th>Título</th><th>Marcenaria</th><th>Prioridade</th><th>Status</th><th>Aberto há</th></tr></thead>
      <tbody>
        {MOCK.admin.tickets.map(t => (
          <tr key={t.id} style={{ cursor: "pointer" }}>
            <td className="font-mono text-3" style={{ fontSize: 12 }}>{t.id}</td>
            <td style={{ fontWeight: 600 }}>{t.title}</td>
            <td className="text-sm">{t.tenant}</td>
            <td>
              <span className="wood-badge" style={{
                background: t.priority === "alta" ? "rgba(245,158,11,0.14)" : t.priority === "media" ? "rgba(56,189,248,0.12)" : "rgba(255, 255, 255,0.06)",
                color: t.priority === "alta" ? "var(--warning)" : t.priority === "media" ? "var(--info)" : "var(--text-3)",
                border: `1px solid ${t.priority === "alta" ? "rgba(245,158,11,0.3)" : "var(--wood-border)"}`,
                textTransform: "capitalize"
              }}>{t.priority}</span>
            </td>
            <td>
              <span className={`wood-badge ${t.status === "resolvido" ? "wood-badge-success" : t.status === "aberto" ? "wood-badge-warning" : "wood-badge-info"}`}>
                {t.status}
              </span>
            </td>
            <td className="text-sm text-3">{t.time}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

/* ============================================================
   AUDIT log
   ============================================================ */
const AdminAudit = () => (
  <div className="wood-card p-5">
    <div className="flex items-center justify-between mb-4">
      <div className="text-md font-semibold tracking-tight">Log de auditoria</div>
      <button className="wood-btn wood-btn-secondary wood-btn-sm"><Icon name="external" size={13} /> Exportar</button>
    </div>
    <div className="flex flex-col gap-2">
      {MOCK.admin.auditLogs.map((l, i) => (
        <div key={l.id} className="flex items-center gap-3 p-3 rounded-lg slide-up" style={{
          background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)",
          animationDelay: `${i * 30}ms`
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background:
              l.severity === "error" ? "rgba(239,68,68,0.14)" :
              l.severity === "warning" ? "rgba(245,158,11,0.14)" :
              l.severity === "success" ? "rgba(52,211,153,0.14)" :
              "rgba(56,189,248,0.12)",
            color:
              l.severity === "error" ? "var(--error)" :
              l.severity === "warning" ? "var(--warning)" :
              l.severity === "success" ? "var(--success)" :
              "var(--info)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
          }}>
            <Icon name={l.severity === "error" ? "x" : l.severity === "warning" ? "alert" : l.severity === "success" ? "check" : "info"} size={14} />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-sm" style={{ fontWeight: 500 }}>{l.action}</div>
            <div className="text-xs text-3 flex items-center gap-2">
              <span>{l.target}</span>
              <span>·</span>
              <span>{l.actor}</span>
            </div>
          </div>
          <span className="font-mono text-xs text-4">{l.id}</span>
          <span className="text-xs text-4">{l.time}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ============================================================
   SETTINGS
   ============================================================ */
const AdminSettings = () => (
  <div className="grid grid-cols-2 gap-4">
    {[
      { icon: "globe", title: "Dados da plataforma", desc: "Nome, domínio, regiões disponíveis." },
      { icon: "credit-card", title: "Stripe & Cobrança", desc: "Webhooks, planos sincronizados, taxas." },
      { icon: "shield", title: "Segurança & SSO", desc: "SAML, MFA, políticas de senha por tenant." },
      { icon: "send", title: "Email & comunicação", desc: "Templates de notificação, white-label." },
      { icon: "log", title: "Auditoria & retenção", desc: "Política de logs, exportação LGPD." },
      { icon: "key", title: "API & integrações", desc: "Tokens administrativos, rate limits." },
    ].map((s, i) => (
      <div key={s.title} className="wood-card wood-card-hover p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }}>
        <div className="flex items-start gap-4">
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: "rgba(16, 185, 129,0.12)", color: "var(--amber-bright)",
            border: "1px solid var(--wood-border)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
          }}>
            <Icon name={s.icon} size={18} />
          </div>
          <div className="flex-1">
            <div className="text-md font-semibold tracking-tight mb-1">{s.title}</div>
            <div className="text-sm text-3 text-pretty">{s.desc}</div>
          </div>
          <Icon name="arrow-right" size={14} className="text-4" />
        </div>
      </div>
    ))}
  </div>
);

window.AdminPanel = AdminPanel;