/* global React, ReactDOM, PRODUCTS, STORE, brl, productGradient, Icon,
   Dashboard, Vendas, Pedidos, Produtos, Promocoes, Feed, Taxas, Config,
   useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio */
const { useState: useS } = React;

/* ===== fontes de título (tweak) ===== */
const FONT_STACK = {
  "Fjalla One": '"Fjalla One","Archivo",sans-serif',
  "Anton": '"Anton","Archivo",sans-serif',
  "Bebas Neue": '"Bebas Neue","Archivo",sans-serif',
  "Oswald": '"Oswald","Archivo",sans-serif',
  "Squada One": '"Squada One","Archivo",sans-serif',
};
const HEAD_STYLE = { "Sólido": "", "Contorno escuro": "head-outline", "Etiqueta": "head-badge" };
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tituloFonte": "Fjalla One",
  "tituloEstilo": "Sólido"
}/*EDITMODE-END*/;

/* ===== comprime imagem no navegador (canvas → JPEG) ===== */
function compressImage(file, maxDim = 720, quality = 0.72) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      let w = img.width,h = img.height;
      const scale = Math.min(1, maxDim / Math.max(w, h));
      w = Math.round(w * scale);h = Math.round(h * scale);
      const c = document.createElement("canvas");
      c.width = w;c.height = h;
      const ctx = c.getContext("2d");
      ctx.fillStyle = "#fff";ctx.fillRect(0, 0, w, h);
      ctx.drawImage(img, 0, 0, w, h);
      const dataUrl = c.toDataURL("image/jpeg", quality);
      URL.revokeObjectURL(url);
      resolve({ dataUrl, kb: Math.round(dataUrl.length * 3 / 4 / 1024), origKb: Math.round(file.size / 1024), w, h });
    };
    img.src = url;
  });
}
window.compressImage = compressImage;

/* ===== salvamento automático (localStorage) ===== */
function usePersist(key, initial) {
  const K = "nikbar:admin:" + key;
  const [v, setV] = useS(() => {
    try { const s = localStorage.getItem(K); if (s != null) return JSON.parse(s); } catch (e) {}
    return typeof initial === "function" ? initial() : initial;
  });
  React.useEffect(() => {
    try { localStorage.setItem(K, JSON.stringify(v)); } catch (e) { console.warn("Não foi possível salvar", K, e); }
    // espelha na nuvem (Supabase) se o dono estiver logado
    if (window.NIKBAR_CLOUD && window.NIKBAR_CLOUD.mirror) window.NIKBAR_CLOUD.mirror(key, v);
  }, [K, v]);
  return [v, setV];
}

/* ===== seeds ===== */
const ORDERS_SEED = [
{ id: "#1042", cliente: "Lucas M.", bairro: "Cohama", itens: [["NIKBAR 30000 · Watermelon Cherry", 2], ["IGNITE V80 · Icy Mint", 1]], total: 349.97, status: "novo", hora: "há 4 min", fone: "5598991234567" },
{ id: "#1041", cliente: "Bruna S.", bairro: "Renascença", itens: [["OXBAR 50K · Grape Ice", 1]], total: 179.99, status: "novo", hora: "há 12 min", fone: "5598992345678" },
{ id: "#1040", cliente: "Diego A.", bairro: "Calhau", itens: [["ELFBAR 45000 · Pineapple", 1], ["ELFBAR BC 15000 · Miami Mint", 2]], total: 379.97, status: "confirmado", hora: "há 38 min", fone: "5598993456789" },
{ id: "#1039", cliente: "Rafael T.", bairro: "Turu", itens: [["IGNITE V400 ICE · Menthol", 1]], total: 149.99, status: "confirmado", hora: "há 1 h", fone: "5598994567890" },
{ id: "#1038", cliente: "Camila R.", bairro: "Olho d'Água", itens: [["LOSTMARY 35000 · Watermelon Ice", 1], ["NIKBAR 10000 · Cherry Bomb", 1]], total: 209.98, status: "entregue", hora: "há 2 h", fone: "5598995678901" },
{ id: "#1037", cliente: "Pedro H.", bairro: "Centro", itens: [["IGNITE V400 MIX · Aloe Grape", 2]], total: 359.98, status: "entregue", hora: "há 3 h", fone: "5598996789012" },
{ id: "#1036", cliente: "João V.", bairro: "Vinhais", itens: [["ELFKING · Cherry Fuse", 1]], total: 159.99, status: "cancelado", hora: "há 5 h", fone: "5598997890123" }];

const SALES_SEED = [
{ id: "V-3012", data: "2026-06-10", produto: "NIKBAR 30000", qty: 2, valor: 229.98, pgto: "Pix", canal: "WhatsApp" },
{ id: "V-3011", data: "2026-06-10", produto: "IGNITE V400 ICE", qty: 1, valor: 149.99, pgto: "Cartão", canal: "Balcão" },
{ id: "V-3010", data: "2026-06-10", produto: "OXBAR 50K", qty: 1, valor: 179.99, pgto: "Dinheiro", canal: "WhatsApp" },
{ id: "V-3009", data: "2026-06-09", produto: "ELFBAR BC 15000", qty: 3, valor: 299.97, pgto: "Pix", canal: "Loja" },
{ id: "V-3008", data: "2026-06-09", produto: "LOSTMARY 35000", qty: 1, valor: 119.99, pgto: "Pix", canal: "Balcão" },
{ id: "V-3007", data: "2026-06-08", produto: "IGNITE V155 BLACK", qty: 2, valor: 259.98, pgto: "Cartão", canal: "WhatsApp" }];

const PROMOS_SEED = [
{ id: "p1", nome: "Combo 2 ELFBAR", tipo: "fixo", valor: 30, escopo: "ELFBAR", ativo: true },
{ id: "p2", nome: "Pix 10% OFF", tipo: "percent", valor: 10, escopo: "Toda a loja", ativo: true },
{ id: "p3", nome: "Premium 45K+", tipo: "percent", valor: 8, escopo: "Premium", ativo: false }];

const POSTS_SEED = [
{ id: "f1", legenda: "🔥 OXBAR 50K chegou! Entrega em 20min em SLZ. Chama no Whats 📲", quando: "Hoje 18:00", status: "agendado", img: null },
{ id: "f2", legenda: "Promo do dia: Pix com 10% OFF em toda a loja 💛", quando: "Ontem", status: "publicado", img: null },
{ id: "f3", legenda: "Novos sabores ELFBAR 45000 disponíveis 🍍🫐", quando: "—", status: "rascunho", img: null }];

const FEES_SEED = [
{ id: "t1", regiao: "Centro / Centro Histórico", valor: 6, prazo: "15–25 min" },
{ id: "t2", regiao: "Cohama / Cohatrac", valor: 8, prazo: "20–30 min" },
{ id: "t3", regiao: "Renascença / Ponta d'Areia", valor: 10, prazo: "20–35 min" },
{ id: "t4", regiao: "Calhau / Olho d'Água", valor: 12, prazo: "25–40 min" },
{ id: "t5", regiao: "Turu / Cohama", valor: 12, prazo: "25–40 min" }];

const REMINDERS_SEED = [
{ id: "r1", text: "Repor estoque ELFBAR 40K (zerado)", done: false },
{ id: "r2", text: "Pagar fornecedor IGNITE até sexta", done: false },
{ id: "r3", text: "Postar stories da promo do Pix", done: true }];


const STATUS = ["novo", "confirmado", "entregue", "cancelado"];
const STATUS_LABEL = { novo: "Novo", confirmado: "Confirmado", entregue: "Entregue", cancelado: "Cancelado" };
const STOCK_SEED = { "ignite-v55": 24, "nikbar-30000": 9, "elfbar-40k": 0, "ignite-v400-ice": 16, "oxbar-50k": 5,
  "elfbar-45000": 12, "ignite-v400-mix": 7, "elfking": 3, "elfbar-gh-23000": 18, "ignite-v300-ultra": 11,
  "black-sheep-30000": 0, "ignite-v155-laranja": 22, "ignite-v155-black": 14, "ignite-v80": 31,
  "lostmary-35000": 6, "elfbar-bc-15000": 27, "nikbar-10000": 19 };
const SALES_7D = [["Qua", 1850], ["Qui", 2390], ["Sex", 3120], ["Sáb", 4480], ["Dom", 2960], ["Seg", 2210], ["Ter", 3640]];
function stockState(q) {return q === 0 ? "out" : q <= 8 ? "low" : "ok";}
const CONFIG_SEED = {
  nome: "NIK BAR", instagram: STORE.handle, whatsapp: "+" + STORE.whatsapp, horario: "Aberto 24h",
  entrega: "São Luís — MA · Entrega em até 20 min (Uber/99) · Retirada em qualquer unidade",
  aviso: "🔞 Venda exclusiva para maiores de 18 anos · Produtos contêm nicotina",
  pagamento: "Pix · Dinheiro · Cartão na entrega", garantia: "24h contra defeito de fábrica"
};
Object.assign(window, { STATUS, STATUS_LABEL, SALES_7D, stockState });

/* ============================================================ */
function Admin() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useS("dashboard");
  const [hist, setHist] = useS([]);
  const [open, setOpen] = useS(false);
  const [products, setProducts] = usePersist("products", () => PRODUCTS);
  const [stock, setStock] = usePersist("stock", STOCK_SEED);
  const [active, setActive] = usePersist("active", () => Object.fromEntries(PRODUCTS.map((p) => [p.id, true])));
  const [prices, setPrices] = usePersist("prices", () => Object.fromEntries(PRODUCTS.map((p) => [p.id, p.price])));
  const [images, setImages] = usePersist("images", {});
  const [orders, setOrders] = usePersist("orders", ORDERS_SEED);
  const [sales, setSales] = usePersist("sales", SALES_SEED);
  const [promos, setPromos] = usePersist("promos", PROMOS_SEED);
  const [posts, setPosts] = usePersist("posts", POSTS_SEED);
  const [fees, setFees] = usePersist("fees", FEES_SEED);
  const [reminders, setReminders] = usePersist("reminders", REMINDERS_SEED);
  const [config, setConfig] = usePersist("config", CONFIG_SEED);
  const [reviews, setReviews] = usePersist("reviews", () => (window.REVIEWS_SEED || []));

  const novos = orders.filter((o) => o.status === "novo").length;
  const setQty = (id, d) => setStock((s) => ({ ...s, [id]: Math.max(0, (s[id] || 0) + d) }));
  const setQtyVal = (id, v) => setStock((s) => ({ ...s, [id]: Math.max(0, parseInt(v || 0, 10)) }));
  const cycleStatus = (id) => setOrders((os) => os.map((o) => o.id === id ? { ...o, status: STATUS[(STATUS.indexOf(o.status) + 1) % 3] } : o));

  const addProduct = (np) => {
    setProducts((ps) => [{ ...np, custom: true }, ...ps]);
    setStock((s) => ({ ...s, [np.id]: np.estoqueInicial || 0 }));
    setPrices((pr) => ({ ...pr, [np.id]: np.price }));
    setActive((a) => ({ ...a, [np.id]: true }));
  };
  const delProduct = (id) => setProducts((ps) => ps.filter((p) => p.id !== id));
  const resetAll = () => {
    if (!window.confirm("Restaurar todos os dados de demonstração? Isso apaga suas alterações salvas.")) return;
    Object.keys(localStorage).filter((k) => k.startsWith("nikbar:admin:")).forEach((k) => localStorage.removeItem(k));
    location.reload();
  };

  const nav = [
  { id: "dashboard", label: "Dashboard", ic: "grid" },
  { id: "vendas", label: "Vendas", ic: "cash" },
  { id: "pedidos", label: "Pedidos", ic: "receipt", n: novos },
  { id: "produtos", label: "Produtos", ic: "box" },
  { id: "promocoes", label: "Promoções", ic: "percent" },
  { id: "feed", label: "Feed", ic: "feed" },
  { id: "avaliacoes", label: "Avaliações", ic: "star" },
  { id: "taxas", label: "Taxas de entrega", ic: "pin" },
  { id: "config", label: "Configurações", ic: "gear" }];

  const titles = {
    dashboard: ["Dashboard", "Visão geral · hoje, " + new Date().toLocaleDateString("pt-BR")],
    vendas: ["Vendas", "Registre, filtre e acompanhe as vendas"],
    pedidos: ["Pedidos", novos + " novos aguardando confirmação"],
    produtos: ["Produtos", products.length + " itens · preço, estoque e foto"],
    promocoes: ["Promoções", "Descontos e combos da loja"],
    feed: ["Feed", "Posts do Instagram @nikbar.ma"],
    avaliacoes: ["Avaliações", reviews.length + " avaliações na loja pública"],
    taxas: ["Taxas de entrega", "Valor do frete por região de São Luís"],
    config: ["Configurações", "Dados da loja, entrega e contato"]
  };
  const go = (id) => { if (id !== view) setHist((h) => [...h, view]); setView(id); setOpen(false); };
  const goBack = () => setHist((h) => { if (!h.length) return h; setView(h[h.length - 1]); setOpen(false); return h.slice(0, -1); });

  const fontStack = FONT_STACK[t.tituloFonte] || FONT_STACK["Fjalla One"];
  const headClass = HEAD_STYLE[t.tituloEstilo] || "";

  // Tokens da marca fixados inline — garante a identidade NIK BAR (preto +
  // amarelo + roxo) mesmo quando um host externo tenta tematizar à força.
  const brandVars = {
    "--font-display": fontStack,
    "--accent": "#FFD60A",
    "--accent-2": "#FFC400",
    "--ink": "#0B0B0C",
    "--purple": "#8B5CF6",
  };

  return (
    <div className={"app-root " + headClass} style={brandVars}>
      <div className="app-content">
        <div className="page-inner">
          <div className="page-bg" style={{ background: "#0B0B0C" }} />
          <div className="content-wrap" style={{ color: "#F6F6F2" }}>
            <div className="admin">
              {open && <div className="adm-scrim" onClick={() => setOpen(false)} />}
              <aside className={"adm-side" + (open ? " open" : "")}>
                <div className="adm-brand" onClick={() => go("dashboard")} style={{ cursor: "pointer" }} title="Ir para o Dashboard">
                  <img src="assets/nikbar-logo.png" className="brand-mark-img" style={{ width: 38, height: 38 }} alt="" />
                  <span className="brand-name">NIK<b>BAR</b></span>
                </div>
                <nav className="adm-nav">
                  <div className="adm-navlabel">Gestão</div>
                  {nav.map((n) =>
                  <div key={n.id} className={"adm-link" + (view === n.id ? " on" : "")} onClick={() => go(n.id)}>
                      <span className="ic"><Icon k={n.ic} size={19} /></span>{n.label}
                      {n.n > 0 && <span className="badge-n">{n.n}</span>}
                    </div>
                  )}
                  <div className="adm-navlabel">Loja</div>
                  <a className="adm-link" href="index.html">
                    <span className="ic"><Icon k="store" size={19} /></span>Ver loja pública
                  </a>
                </nav>
                <div className="adm-side-foot">
                  <div className="adm-owner">
                    <img src="assets/nikbar-logo.png" className="brand-mark-img" style={{ width: 36, height: 36 }} alt="" />
                    <div><div className="nm">NIK BAR</div><div className="rl">Proprietário</div></div>
                  </div>
                  <div className="adm-link" style={{ color: "var(--dim)" }}
                    onClick={() => { if (window.sb) window.sb.auth.signOut(); }}>
                    <span className="ic"><Icon k="logout" size={19} /></span>Sair
                  </div>
                </div>
              </aside>

              <div className="adm-main">
                <header className="adm-top">
                  <button className="adm-burger" onClick={() => setOpen(true)}><Icon k="menu" size={22} /></button>
                  {hist.length > 0 && <button className="adm-back" onClick={goBack} title="Voltar"><Icon k="back" size={20} /></button>}
                  <div>
                    <h1 style={{ fontFamily: "var(--font-display)" }}>{titles[view][0]}</h1>
                    <div className="sub">{titles[view][1]}</div>
                  </div>
                  <a className="btn btn-wa" style={{ marginLeft: "auto", padding: "11px 16px", fontSize: 14 }}
                  href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer">
                    <Icon k="wa" size={18} /> <span className="lbl-wide">WhatsApp</span>
                  </a>
                </header>
                <div className="adm-body">
                  {view === "dashboard" && <Dashboard products={products} stock={stock} orders={orders} reminders={reminders} setReminders={setReminders} sales={sales} go={go} />}
                  {view === "vendas" && <Vendas products={products} sales={sales} setSales={setSales} />}
                  {view === "pedidos" && <Pedidos products={products} orders={orders} setOrders={setOrders} cycleStatus={cycleStatus} />}
                  {view === "produtos" && <Produtos products={products} addProduct={addProduct} delProduct={delProduct} stock={stock} setQty={setQty} setQtyVal={setQtyVal}
                  active={active} setActive={setActive} prices={prices} setPrices={setPrices} images={images} setImages={setImages} />}
                  {view === "promocoes" && <Promocoes promos={promos} setPromos={setPromos} />}
                  {view === "feed" && <Feed posts={posts} setPosts={setPosts} />}
                  {view === "avaliacoes" && <Avaliacoes reviews={reviews} setReviews={setReviews} />}
                  {view === "taxas" && <Taxas fees={fees} setFees={setFees} />}
                  {view === "config" && <Config config={config} setConfig={setConfig} onReset={resetAll} />}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Títulos" />
        <TweakSelect label="Fonte" value={t.tituloFonte}
          options={Object.keys(FONT_STACK)} onChange={(v) => setTweak("tituloFonte", v)} />
        <TweakRadio label="Estilo" value={t.tituloEstilo}
          options={Object.keys(HEAD_STYLE)} onChange={(v) => setTweak("tituloEstilo", v)} />
        <TweakSection label="Dados" />
        <div style={{ fontSize: 11, color: "rgba(41,38,27,.6)", lineHeight: 1.4, padding: "2px 0 6px" }}>
          Tudo que você edita é salvo automaticamente neste navegador.
        </div>
      </TweaksPanel>
    </div>);

}

/* ============================================================
   LOGIN REAL (Supabase Auth) — protege a escrita no banco
   ============================================================ */
function AdminLoading() {
  return (
    <div className="app-root">
      <div className="page-bg" style={{ background: "#0B0B0C", position: "fixed", inset: 0 }} />
      <div style={{ position: "relative", minHeight: "100vh", display: "grid", placeItems: "center", color: "#9C9C9A", fontWeight: 700 }}>
        Carregando…
      </div>
    </div>
  );
}

function AdminLogin() {
  const [email, setEmail] = useS("");
  const [pass, setPass] = useS("");
  const [err, setErr] = useS("");
  const [busy, setBusy] = useS(false);
  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr("");
    const { error } = await window.sb.auth.signInWithPassword({ email: email.trim(), password: pass });
    setBusy(false);
    if (error) setErr("E-mail ou senha incorretos.");
  };
  return (
    <div className="app-root" style={{ "--accent": "#FFD60A", "--ink": "#0B0B0C" }}>
      <div className="page-bg" style={{ background: "#0B0B0C", position: "fixed", inset: 0,
        backgroundImage: "radial-gradient(60% 50% at 50% 0%, rgba(255,214,10,.12), transparent 70%)" }} />
      <div style={{ position: "relative", minHeight: "100vh", display: "grid", placeItems: "center", padding: 22, color: "#F6F6F2" }}>
        <form className="age-card" style={{ width: "min(400px,100%)" }} onSubmit={submit}>
          <img src="assets/nikbar-logo.png" className="brand-mark-img" style={{ width: 64, height: 64, margin: "0 auto 18px", display: "block" }} alt="" />
          <h2 className="display" style={{ fontSize: 28, textAlign: "center" }}>Painel do dono</h2>
          <p style={{ color: "var(--dim)", textAlign: "center", margin: "8px 0 22px", fontSize: 13.5 }}>Entre para gerenciar a loja</p>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>E-mail</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="seu@email.com" autoFocus />
          </div>
          <div className="field">
            <label>Senha</label>
            <input type="password" value={pass} onChange={(e) => setPass(e.target.value)} placeholder="••••••••" />
          </div>
          {err && <p style={{ color: "#ff8a95", fontSize: 13, fontWeight: 700, margin: "10px 0 0" }}>{err}</p>}
          <button className="btn btn-yellow btn-block btn-lg" type="submit" disabled={busy} style={{ marginTop: 18 }}>
            {busy ? "Entrando…" : "Entrar"}
          </button>
        </form>
      </div>
    </div>
  );
}

function AdminGate() {
  const cloudOn = !!(window.NIKBAR_CLOUD && window.NIKBAR_CLOUD.enabled);
  const [session, setSession] = useS(cloudOn ? undefined : "local"); // undefined = carregando
  React.useEffect(() => {
    if (!cloudOn) return;
    const apply = (s) => {
      setSession(s || null);
      window.NIKBAR_AUTHED = !!s;
      if (s && !window.__nikbarPushed) { window.__nikbarPushed = true; window.NIKBAR_CLOUD.pushAll(); }
    };
    window.sb.auth.getSession().then(({ data }) => apply(data.session));
    const { data: sub } = window.sb.auth.onAuthStateChange((_e, s) => apply(s));
    return () => { try { sub.subscription.unsubscribe(); } catch (e) {} };
  }, []);

  if (cloudOn && session === undefined) return <AdminLoading />;
  if (cloudOn && session === null) return <AdminLogin />;
  return <Admin />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<AdminGate />);