"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Logo from "@/components/Logo";
import { useRouter } from "next/navigation";
import type { ProductPublic } from "@/lib/products";
import type { PlatformSettings } from "@/lib/settings";
import LandingView from "./LandingView";
import LandingEditor from "./LandingEditor";
import ImageUploadField from "./ImageUploadField";
import HomeChart from "./HomeChart";
import NewProductModal from "./NewProductModal";
import UsersAdminPanel from "./UsersAdminPanel";
import SellerProfilePanel from "./SellerProfilePanel";
import AdminOperationsPanel from "./AdminOperationsPanel";
import type { LandingConfig } from "@/lib/landing-default";

type User = { id: string; email: string; name: string; role: string };

type Props = {
  initialUser: User;
  initialProducts: ProductPublic[];
  initialSettings: PlatformSettings;
  page?: string;
  editSlug?: string;
};

const NAV_COMPRAR: [string, string, string][] = [
  ["biblioteca", "📚", "Minha biblioteca"],
];

const NAV_VENDER: [string, string, string, string][] = [
  ["inicio", "📊", "Visão geral", ""],
  ["produtos", "📦", "Produtos", ""],
  ["landing", "🎨", "Landing pages", ""],
  ["vendas", "💳", "Vendas", "Gestão"],
  ["afiliados", "🤝", "Afiliados", ""],
  ["checkout", "🛒", "Checkout", ""],
  ["conta-vendedor", "📋", "Conta vendedor", ""],
  ["config", "⚙️", "Configurações", "Conta"],
  ["usuarios", "👥", "Usuários", "Admin"],
  ["aprovacoes", "✅", "Aprovações", "Admin"],
];

const TITLES: Record<string, string> = {
  biblioteca: "Meus e-books",
  inicio: "Visão geral",
  produtos: "Produtos",
  landing: "Landing pages",
  vendas: "Vendas",
  afiliados: "Afiliados",
  checkout: "Checkout",
  config: "Configurações",
  usuarios: "Usuários",
  "conta-vendedor": "Conta vendedor",
  aprovacoes: "Aprovações e repasses",
};

const ROLE_LABEL: Record<string, string> = {
  admin: "Administrador",
  user: "Vendedor",
  customer: "Comprador",
};

function brl(n: number) {
  return n.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

export default function PlatformApp({
  initialUser,
  initialProducts,
  initialSettings,
  page = "inicio",
  editSlug,
}: Props) {
  const router = useRouter();
  const [user, setUser] = useState(initialUser);
  const isAdmin = user.role === "admin";
  const [products, setProducts] = useState(initialProducts);
  const [settings, setSettings] = useState(initialSettings);
  const [toast, setToast] = useState("");
  const [sales, setSales] = useState<
    {
      buyerName: string;
      productName: string;
      amount: string;
      status: string;
      createdAt: string;
      paymentMethod?: string;
    }[]
  >([]);
  const [stats, setStats] = useState({ totalSales: 0, revenue: 0 });
  const [sbOpen, setSbOpen] = useState(false);
  const [newProductOpen, setNewProductOpen] = useState(false);
  const [library, setLibrary] = useState<
    {
      id: string;
      slug: string;
      name: string;
      emoji: string;
      contents: { id: string; type: string; title: string }[];
    }[]
  >([]);
  const [panelMode, setPanelMode] = useState<"comprar" | "vender">(
    user.role === "customer" ? "comprar" : "vender"
  );
  const [becomingSeller, setBecomingSeller] = useState(false);
  const isCustomer = user.role === "customer";
  const canSell = user.role === "user" || user.role === "admin";

  const editProduct = editSlug ? products.find((p) => p.slug === editSlug) : null;
  const [landingDraft, setLandingDraft] = useState<LandingConfig | null>(
    editProduct?.landing ?? null
  );
  const landingDraftRef = useRef<LandingConfig | null>(editProduct?.landing ?? null);
  const [editorOpen, setEditorOpen] = useState(true);
  const [saving, setSaving] = useState(false);

  const showToast = (m: string) => {
    setToast(m);
    setTimeout(() => setToast(""), 2200);
  };

  useEffect(() => {
    if (page === "biblioteca") {
      fetch("/api/library")
        .then((r) => r.json())
        .then((d) => setLibrary(d.items || []))
        .catch(() => setLibrary([]));
    }
  }, [page]);

  useEffect(() => {
    if (page === "vendas" || page === "inicio") {
      fetch("/api/sales")
        .then((r) => r.json())
        .then((d) => {
          setSales(d.sales || []);
          setStats(d.stats || { totalSales: 0, revenue: 0 });
        })
        .catch(() => {});
    }
  }, [page]);

  useEffect(() => {
    if (editProduct) {
      setLandingDraft(editProduct.landing);
      landingDraftRef.current = editProduct.landing;
    }
  }, [editProduct]);

  useEffect(() => {
    landingDraftRef.current = landingDraft;
  }, [landingDraft]);

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
  }

  async function saveLanding() {
    if (!editProduct || saving) return;
    const active = document.activeElement as HTMLElement | null;
    if (active?.isContentEditable) active.blur();
    await new Promise((r) => setTimeout(r, 0));

    const draft = landingDraftRef.current;
    if (!draft) return;

    setSaving(true);
    try {
      const res = await fetch(`/api/products/${editProduct.slug}`, {
        method: "PATCH",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          landing: draft,
          price: draft.price,
          priceFrom: draft.priceFrom,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.product) {
        setProducts((prev) => prev.map((p) => (p.slug === data.product.slug ? data.product : p)));
        setLandingDraft(data.product.landing);
        landingDraftRef.current = data.product.landing;
        setEditorOpen(true);
        showToast("Página salva!");
      } else {
        showToast(data.error || "Erro ao salvar");
      }
    } finally {
      setSaving(false);
    }
  }

  if (editSlug && editProduct && landingDraft) {
    return (
      <>
        <div id="lpbar">
          <Link href="/painel/produtos" className="lpb back">
            ← Painel
          </Link>
          <button type="button" className="lpb ghost" onClick={() => router.push(`/${editSlug}`)}>
            👁 Visualizar
          </button>
        </div>
        <LandingEditor
          open={editorOpen}
          landing={landingDraft}
          productSlug={editProduct.slug}
          allProducts={products}
          onChange={setLandingDraft}
          onClose={() => setEditorOpen(false)}
          onSave={saveLanding}
          saving={saving}
          onReset={() => setLandingDraft(editProduct.landing)}
        />
        {!editorOpen && (
          <button
            type="button"
            className="lpb"
            style={{ position: "fixed", top: 16, right: 120, zIndex: 50 }}
            onClick={() => setEditorOpen(true)}
          >
            ✏️ Editar
          </button>
        )}
        <LandingView
          product={{ ...editProduct, landing: landingDraft }}
          domain={settings.domain}
          editing
          onLandingChange={setLandingDraft}
          checkoutHref={`/checkout/${editSlug}`}
        />
        <div className={`toast${toast ? " show" : ""}`}>{toast}</div>
      </>
    );
  }

  const totalRevenue = products.reduce((s, p) => s + p.revenue, 0);
  const totalSales = products.reduce((s, p) => s + p.sales, 0);

  return (
    <div className="app">
      <aside className={`sb${sbOpen ? " open" : ""}`}>
        <Logo href="/painel" />
        <div className="panel-mode-switch">
          <button
            type="button"
            className={panelMode === "comprar" ? "on" : ""}
            onClick={() => {
              setPanelMode("comprar");
              if (page !== "biblioteca") router.push("/painel/biblioteca");
            }}
          >
            🛒 Comprar
          </button>
          <button
            type="button"
            className={panelMode === "vender" ? "on" : ""}
            onClick={() => {
              if (!canSell) return;
              setPanelMode("vender");
              if (page === "biblioteca") router.push("/painel/inicio");
            }}
            disabled={!canSell}
            title={canSell ? "Painel do vendedor" : "Ative o modo vendedor"}
          >
            💼 Vender
          </button>
        </div>
        {panelMode === "comprar"
          ? NAV_COMPRAR.map(([id, icon, label]) => (
              <Link
                key={id}
                href={`/painel/${id}`}
                className={`m${page === id ? " on" : ""}`}
                onClick={() => setSbOpen(false)}
              >
                <span className="i">{icon}</span>
                {label}
              </Link>
            ))
          : NAV_VENDER.filter(([id]) => {
              if (id === "usuarios" || id === "aprovacoes") return isAdmin;
              return true;
            }).map(([id, icon, label, group]) => (
              <span key={id}>
                {group ? <div className="sb-group">{group}</div> : null}
                <Link
                  href={`/painel/${id}`}
                  className={`m${page === id ? " on" : ""}`}
                  onClick={() => setSbOpen(false)}
                >
                  <span className="i">{icon}</span>
                  {label}
                </Link>
              </span>
            ))}
        <div className="user">
          <div className="av">{(user.name.trim()[0] || "U").toUpperCase()}</div>
          <div>
            <b>{user.name}</b>
            <span>
              {user.email}
              {ROLE_LABEL[user.role] ? ` · ${ROLE_LABEL[user.role]}` : ""}
            </span>
          </div>
          <span className="out" onClick={logout} role="button" tabIndex={0} title="Sair">
            ⏻
          </span>
        </div>
      </aside>

      <div className="main">
        <header className="topbar">
          <button type="button" className="menu-btn" onClick={() => setSbOpen(!sbOpen)}>
            ☰
          </button>
          <h1>{TITLES[page] || "Painel"}</h1>
          <div className="sp" />
          {panelMode === "vender" && canSell ? (
            <button type="button" className="b lime sm" onClick={() => setNewProductOpen(true)}>
              + Novo produto
            </button>
          ) : null}
        </header>
        <div className="content">
          {page === "biblioteca" && (
            <div className="panel">
              <div className="ph">
                <h3>Minha biblioteca</h3>
              </div>
              {isCustomer && panelMode === "comprar" ? (
                <div className="seller-cta">
                  <p>Quer vender seus infoprodutos nesta plataforma?</p>
                  <button
                    type="button"
                    className="b lime sm"
                    disabled={becomingSeller}
                    onClick={async () => {
                      setBecomingSeller(true);
                      try {
                        const res = await fetch("/api/auth/become-seller", { method: "POST" });
                        if (!res.ok) throw new Error();
                        setPanelMode("vender");
                        router.push("/painel/conta-vendedor");
                        router.refresh();
                      } catch {
                        showToast("Não foi possível ativar o modo vendedor");
                      } finally {
                        setBecomingSeller(false);
                      }
                    }}
                  >
                    {becomingSeller ? "Ativando…" : "💼 Quero vender"}
                  </button>
                </div>
              ) : null}
              {library.length === 0 ? (
                <div style={{ textAlign: "center", padding: "48px 20px", color: "var(--mut)" }}>
                  <div style={{ fontSize: "3rem", marginBottom: 12 }}>📚</div>
                  <p>Nenhum conteúdo liberado ainda. Após o pagamento, o acesso aparece aqui.</p>
                </div>
              ) : (
                <div className="pgrid">
                  {library.map((item) => (
                    <div className="pcard" key={item.id}>
                      <div className="cover">{item.emoji}</div>
                      <div className="bd">
                        <h4>{item.name}</h4>
                        <p style={{ color: "var(--mut)", fontSize: ".88rem", margin: "8px 0 12px" }}>
                          {item.contents.length} conteúdo{item.contents.length !== 1 ? "s" : ""} • acesso vitalício
                        </p>
                        <div className="library-contents">
                          {item.contents.map((c) => (
                            <div className="library-content-row" key={c.id}>
                              <span>{c.type === "video" ? "🎬" : "📄"} {c.title}</span>
                              <div className="acts">
                                <Link
                                  href={`/painel/conteudo/${item.slug}/${c.id}`}
                                  className="b ghost sm"
                                >
                                  {c.type === "video" ? "Assistir" : "Ler"}
                                </Link>
                                <a
                                  href={`/api/library/${item.slug}/content/${c.id}/download`}
                                  className="b lime sm"
                                >
                                  Baixar
                                </a>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {page === "inicio" && panelMode === "vender" && canSell && (
            <>
              <div className="mcards">
                <div className="mc">
                  <div className="top">
                    <span className="lab">Faturamento (mês)</span>
                    <span className="ic">💰</span>
                  </div>
                  <div className="val">R$ {brl(stats.revenue || totalRevenue)}</div>
                  <div className="delta up">↑ 18,2% vs. mês anterior</div>
                </div>
                <div className="mc">
                  <div className="top">
                    <span className="lab">Vendas</span>
                    <span className="ic">🛍️</span>
                  </div>
                  <div className="val">{stats.totalSales || totalSales}</div>
                  <div className="delta up">↑ 9,4%</div>
                </div>
                <div className="mc">
                  <div className="top">
                    <span className="lab">Ticket médio</span>
                    <span className="ic">🎯</span>
                  </div>
                  <div className="val">
                    R${" "}
                    {brl(
                      (stats.totalSales || totalSales) > 0
                        ? (stats.revenue || totalRevenue) / (stats.totalSales || totalSales)
                        : 0
                    )}
                  </div>
                  <div className="delta up">↑ 2,1%</div>
                </div>
                <div className="mc">
                  <div className="top">
                    <span className="lab">Conversão</span>
                    <span className="ic">⚡</span>
                  </div>
                  <div className="val">7,4%</div>
                  <div className="delta down">↓ 0,3%</div>
                </div>
              </div>
              <div className="panel">
                <div className="ph">
                  <h3>Vendas nos últimos 7 dias</h3>
                  <Link href="/painel/vendas">Ver vendas →</Link>
                </div>
                <HomeChart />
              </div>
              <div className="panel">
                <div className="ph">
                  <h3>Vendas recentes</h3>
                  <Link href="/painel/vendas">Ver todas →</Link>
                </div>
                <SalesTable sales={sales} products={products} limit={5} />
              </div>
            </>
          )}

          {page === "produtos" && panelMode === "vender" && canSell && (
            <div className="pgrid">
              {products.map((p) => (
                <div className="pcard" key={p.id}>
                  <div className="cover">
                    {p.emoji}
                    <span className="st">
                      <span className={`tag ${p.status === "ativo" ? "ok" : "off"} dot`}>
                        {p.status === "ativo" ? "Ativo" : "Rascunho"}
                      </span>
                    </span>
                  </div>
                  <div className="bd">
                    <h4>{p.name}</h4>
                    <div className="url">
                      {settings.domain}/{p.slug}
                    </div>
                    <div className="pr">
                      R$ {p.price}
                      <small>R$ {p.priceFrom}</small>
                    </div>
                    <div className="stats">
                      <span>
                        <b>{p.sales}</b> vendas
                      </span>
                      <span>
                        <b>R$ {brl(p.revenue)}</b>
                      </span>
                      <span style={{ color: p.ebookFile ? "var(--lime)" : "var(--mut)" }}>
                        {p.ebookFile ? "📎 PDF ok" : "⚠ Sem PDF"}
                      </span>
                    </div>
                    <div className="acts">
                      <Link href={`/painel/editar/${p.slug}`} className="b lime sm">
                        ✏️ Editar landing
                      </Link>
                      <Link href={`/${p.slug}`} className="b ghost sm" target="_blank">
                        ↗ Ver página
                      </Link>
                    </div>
                  </div>
                </div>
              ))}
              <button type="button" className="pcard add" onClick={() => setNewProductOpen(true)}>
                <div className="in">
                  <div className="plus">＋</div>
                  Novo produto
                </div>
              </button>
            </div>
          )}

          {page === "landing" && panelMode === "vender" && canSell && (
            <div className="panel">
              <div className="ph">
                <h3>Suas landing pages</h3>
                <button type="button" className="b lime sm" style={{ background: "none", border: 0, color: "var(--lime)", cursor: "pointer" }} onClick={() => setNewProductOpen(true)}>
                  + Nova landing
                </button>
              </div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Produto</th>
                    <th>URL</th>
                    <th>Status</th>
                    <th>Layout</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {products.map((p) => (
                    <tr key={p.id}>
                      <td>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                          <span style={{ fontSize: "1.3rem" }}>{p.emoji}</span>
                          <b>{p.name}</b>
                        </div>
                      </td>
                      <td style={{ color: "var(--mut)" }}>
                        {settings.domain}/{p.slug}
                      </td>
                      <td>
                        <span className={`tag ${p.status === "ativo" ? "ok" : "off"} dot`}>
                          {p.status === "ativo" ? "Publicada" : "Rascunho"}
                        </span>
                      </td>
                      <td style={{ textTransform: "capitalize" }}>{p.landing.layout}</td>
                      <td>
                        <Link href={`/painel/editar/${p.slug}`} className="b lime sm">
                          Editar
                        </Link>{" "}
                        <Link href={`/${p.slug}`} className="b ghost sm" target="_blank">
                          Ver
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {page === "vendas" && panelMode === "vender" && canSell && (
            <div className="panel">
              <div className="ph">
                <h3>Todas as vendas</h3>
                <a href="#">Exportar CSV</a>
              </div>
              <SalesTable sales={sales} products={products} limit={12} />
            </div>
          )}

          {page === "afiliados" && panelMode === "vender" && canSell && (
            <div className="panel">
              <div className="ph">
                <h3>Programa de afiliados</h3>
                <a href="#">+ Convidar afiliado</a>
              </div>
              <div style={{ textAlign: "center", padding: "50px 20px", color: "var(--mut)" }}>
                <div style={{ fontSize: "3rem", marginBottom: 14 }}>🤝</div>
                <h3 style={{ fontFamily: "var(--fd)", color: "var(--ink)", fontSize: "1.3rem", marginBottom: 8 }}>
                  Recrute afiliados para vender por você
                </h3>
                <p style={{ maxWidth: "42ch", margin: "0 auto 22px" }}>
                  Defina a comissão de cada produto e gere links exclusivos. Os afiliados aparecem
                  aqui assim que se cadastrarem.
                </p>
                <button type="button" className="b lime" onClick={() => showToast("Recurso disponível no plano Pro")}>
                  Ativar programa de afiliados
                </button>
              </div>
            </div>
          )}

          {page === "checkout" && panelMode === "vender" && canSell && (
            <>
              <div className="panel">
                <div className="ph">
                  <h3>Formas de pagamento</h3>
                </div>
                <CheckoutRow k="pix" on={settings.pix} title="Pix" desc="Aprovação imediata, menor taxa." onToggle={toggleSetting} />
                <CheckoutRow k="card" on={settings.card} title="Cartão de crédito" desc="Parcelamento em até 12x." onToggle={toggleSetting} />
                <CheckoutRow k="boleto" on={settings.boleto} title="Boleto" desc="Compensação em 1–2 dias úteis." onToggle={toggleSetting} />
              </div>
              <div className="panel">
                <div className="ph">
                  <h3>Otimização de conversão</h3>
                </div>
                <CheckoutRow k="orderbump" on={settings.orderbump} title="Order bump" desc="Oferta extra dentro do checkout." onToggle={toggleSetting} />
                <CheckoutRow k="upsell" on={settings.upsell} title="Upsell pós-compra" desc="Oferta após o pagamento aprovado." onToggle={toggleSetting} />
                <CheckoutRow k="social" on={settings.social} title="Prova social" desc='Avisos de "X pessoas compraram agora".' onToggle={toggleSetting} />
              </div>
            </>
          )}

          {page === "conta-vendedor" && panelMode === "vender" && canSell && (
            <SellerProfilePanel onToast={showToast} />
          )}

          {page === "usuarios" && isAdmin && panelMode === "vender" && (
            <UsersAdminPanel currentUserId={user.id} onToast={showToast} />
          )}

          {page === "aprovacoes" && isAdmin && panelMode === "vender" && (
            <AdminOperationsPanel onToast={showToast} />
          )}

          {page === "config" && panelMode === "vender" && canSell && (
            <ConfigPanel
              user={user}
              domain={settings.domain}
              favicon={settings.favicon}
              isAdmin={isAdmin}
              onFaviconChange={async (favicon) => {
                const res = await fetch("/api/settings", {
                  method: "PATCH",
                  credentials: "include",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify({ favicon }),
                });
                if (res.ok) {
                  const data = await res.json();
                  setSettings(data.settings);
                  showToast("Favicon atualizado!");
                } else {
                  showToast("Erro ao salvar favicon");
                }
              }}
              onSave={async (name, email, domain, password, currentPassword) => {
                const body: Record<string, string> = {};
                if (name.trim() && name !== user.name) body.name = name.trim();
                if (email.trim() && email !== user.email) body.email = email.trim();
                if (password) {
                  body.password = password;
                  if (currentPassword) body.currentPassword = currentPassword;
                }
                if (Object.keys(body).length) {
                  const res = await fetch("/api/auth/me", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(body),
                  });
                  const data = await res.json();
                  if (!res.ok) {
                    showToast(data.error || "Erro ao salvar perfil");
                    return;
                  }
                  if (data.user) setUser(data.user);
                }
                if (isAdmin && domain !== settings.domain) {
                  const res = await fetch("/api/settings", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ domain }),
                  });
                  if (res.ok) {
                    const data = await res.json();
                    setSettings(data.settings);
                  }
                }
                showToast("Alterações salvas");
                router.refresh();
              }}
            />
          )}
        </div>
      </div>
      <NewProductModal
        open={newProductOpen}
        onClose={() => setNewProductOpen(false)}
        onCreate={async (data) => {
          const res = await fetch("/api/products", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
          });
          const json = await res.json();
          if (!res.ok) {
            showToast(json.error || "Erro");
            return;
          }
          showToast("Produto criado!");
          router.push(`/painel/editar/${json.product?.slug ?? json.slug}`);
        }}
      />
      <div className={`toast${toast ? " show" : ""}`}>{toast}</div>
    </div>
  );

  async function toggleSetting(key: keyof PlatformSettings, value: boolean) {
    const next = { ...settings, [key]: value };
    setSettings(next);
    await fetch("/api/settings", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ [key]: value }),
    }).catch(() => showToast("Configuração salva localmente"));
    showToast("Configuração salva");
  }
}

function SalesTable({
  sales,
  products,
  limit,
}: {
  sales: {
    buyerName: string;
    productName: string;
    amount: string;
    status: string;
    createdAt: string;
    paymentMethod?: string;
  }[];
  products: ProductPublic[];
  limit: number;
}) {
  const NOMES = [
    "Ana Paula",
    "Bruno Costa",
    "Carla Dias",
    "Diego Lima",
    "Fernanda R.",
    "Gustavo M.",
    "Helena T.",
    "Igor S.",
    "Júlia N.",
    "Lucas P.",
  ];

  if (sales.length > 0) {
    return (
      <table className="tbl">
        <thead>
          <tr>
            <th>Cliente</th>
            <th>Produto</th>
            <th>Pagamento</th>
            <th>Valor</th>
            <th>Status</th>
            <th>Quando</th>
          </tr>
        </thead>
        <tbody>
          {sales.slice(0, limit).map((s, i) => (
            <tr key={i}>
              <td>{s.buyerName}</td>
              <td>{s.productName}</td>
              <td>{s.paymentMethod === "card" ? "Cartão" : s.paymentMethod === "boleto" ? "Boleto" : "Pix"}</td>
              <td>{s.amount}</td>
              <td>
                <span className={`tag ${s.status === "paid" || s.status === "aprovado" ? "ok" : "pend"} dot`}>
                  {s.status === "paid" ? "Aprovado" : s.status}
                </span>
              </td>
              <td style={{ color: "var(--mut)" }}>{s.createdAt}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }

  const rows = [];
  for (let i = 0; i < limit; i++) {
    const p = products[i % products.length];
    if (!p) break;
    const st = i % 5 === 0 ? ["pend", "Pendente"] : ["ok", "Aprovado"];
    rows.push(
      <tr key={i}>
        <td>{NOMES[i % NOMES.length]}</td>
        <td>{p.name}</td>
        <td>{i % 2 ? "Pix" : "Cartão"}</td>
        <td>R$ {p.price}</td>
        <td>
          <span className={`tag ${st[0]} dot`}>{st[1]}</span>
        </td>
        <td style={{ color: "var(--mut)" }}>há {i + 1}h</td>
      </tr>
    );
  }

  return (
    <table className="tbl">
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Produto</th>
          <th>Pagamento</th>
          <th>Valor</th>
          <th>Status</th>
          <th>Quando</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

function CheckoutRow({
  k,
  on,
  title,
  desc,
  onToggle,
}: {
  k: keyof PlatformSettings;
  on: boolean;
  title: string;
  desc: string;
  onToggle: (key: keyof PlatformSettings, value: boolean) => void;
}) {
  return (
    <div className="crow">
      <div className="lf">
        <b>{title}</b>
        <span>{desc}</span>
      </div>
      <div
        className={`sw${on ? " on" : ""}`}
        onClick={() => onToggle(k, !on)}
        role="switch"
        aria-checked={on}
        tabIndex={0}
        onKeyDown={(e) => e.key === "Enter" && onToggle(k, !on)}
      />
    </div>
  );
}

function ConfigPanel({
  user,
  domain,
  favicon,
  isAdmin,
  onFaviconChange,
  onSave,
}: {
  user: User;
  domain: string;
  favicon: string;
  isAdmin: boolean;
  onFaviconChange: (url: string) => void | Promise<void>;
  onSave: (
    name: string,
    email: string,
    domain: string,
    password?: string,
    currentPassword?: string
  ) => void | Promise<void>;
}) {
  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);
  const [dom, setDom] = useState(domain);
  const [fav, setFav] = useState(favicon);
  const [password, setPassword] = useState("");
  const [currentPassword, setCurrentPassword] = useState("");
  return (
    <>
      {isAdmin ? (
        <div className="panel">
          <div className="ph">
            <h3>Favicon do site</h3>
          </div>
          <p style={{ color: "var(--mut)", fontSize: ".86rem", marginBottom: 14 }}>
            Ícone exibido na aba do navegador em todas as páginas. Recomendado: PNG ou ICO quadrado (32×32 ou 64×64).
          </p>
          <div
            style={{
              background: "rgba(255,255,255,.04)",
              border: "1px solid var(--line)",
              borderRadius: 12,
              padding: 16,
            }}
          >
            <ImageUploadField
              url={fav}
              onUrl={(url) => {
                setFav(url);
                void onFaviconChange(url);
              }}
              previewHeight={48}
            />
          </div>
        </div>
      ) : null}
      <div className="panel">
        <div className="ph">
          <h3>Conta</h3>
        </div>
        <div className="kv">
          <label>Nome</label>
          <input value={name} onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="kv">
          <label>E-mail</label>
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="kv">
          <label>Perfil</label>
          <input value={ROLE_LABEL[user.role] || user.role} readOnly />
        </div>
        <div className="kv">
          <label>Senha atual</label>
          <input
            type="password"
            value={currentPassword}
            onChange={(e) => setCurrentPassword(e.target.value)}
            placeholder="Necessária para alterar a senha"
          />
        </div>
        <div className="kv">
          <label>Nova senha</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Deixe em branco para não alterar"
          />
        </div>
      </div>
      {isAdmin ? (
        <div className="panel">
          <div className="ph">
            <h3>Domínio</h3>
          </div>
          <div className="kv">
            <label>Domínio das páginas</label>
            <input value={dom} onChange={(e) => setDom(e.target.value)} />
          </div>
          <p style={{ color: "var(--mut)", fontSize: ".86rem", marginTop: 10 }}>
            Cada produto fica em {dom || domain}/slug-do-produto. Ex.: {dom || domain}/como-vender-instagram
          </p>
        </div>
      ) : null}
      <div className="panel">
        <div className="ph">
          <h3>Gateway de pagamento</h3>
        </div>
        <div className="kv">
          <label>Provedor</label>
          <input defaultValue="Asaas" placeholder="provedor" readOnly />
        </div>
        <div className="kv">
          <label>Chave pública</label>
          <input placeholder="pk_live_..." />
        </div>
        <div className="kv">
          <label>Chave secreta</label>
          <input type="password" placeholder="sk_live_..." />
        </div>
        <p style={{ color: "var(--mut)", fontSize: ".86rem", marginTop: 10 }}>
          As chaves conectam o checkout a um gateway real para processar Pix e cartão.
        </p>
      </div>
      <button
        type="button"
        className="b lime"
        style={{ marginTop: 18 }}
        onClick={() => onSave(name, email, dom, password || undefined, currentPassword || undefined)}
      >
        Salvar alterações
      </button>
    </>
  );
}