/* ============================================================
   app.jsx — main router & mount
   ============================================================ */

const ROUTES = {
  "/login":      () => <Login/>,
  "/dashboard":  () => <Dashboard/>,
  "/checkouts":  () => <CreateCheckout/>,
  "/products":   () => <Products/>,
  "/bumps":      () => <Bumps/>,
  "/sales":      () => <Sales/>,
  "/customers":  () => <Customers/>,
  "/settings":   () => <Settings/>,
  "/pay/preview":() => <CustomerPay/>,
  "/obrigado":   () => <ThankYou/>,
};

function Router(){
  const { route, user, setRoute } = useApp();

  // Auth gate — public routes
  const publicRoutes = ["/login", "/pay/preview", "/obrigado"];
  React.useEffect(() => {
    if (!user && !publicRoutes.includes(route)){
      // For demo: if user navigates somewhere requiring auth without logging in,
      // bounce to login — but auto-mock-login on first run for convenience.
      setRoute("/login");
    }
  }, [route, user]);

  const View = ROUTES[route] || ROUTES["/login"];
  return <View/>;
}

function App(){
  return (
    <AppProvider>
      <Router/>
      <TweaksUI/>
    </AppProvider>
  );
}

/* ============================================================
   Tweaks panel — exposed via the toolbar Tweaks toggle
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0a0a0a",
  "paper": "#f7f6f4",
  "density": "comfortable",
  "showInkKpi": true
}/*EDITMODE-END*/;

function TweaksUI(){
  const { setRoute, pushToast } = useApp();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to root vars
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--ink", t.accent);
    r.setProperty("--paper", t.paper);
    r.setProperty("--paper-2", shade(t.paper, -3));
    r.setProperty("--paper-3", shade(t.paper, -6));
    document.body.style.fontSize = t.density === "compact" ? "13.5px" : "14.5px";
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Marca">
        <TweakColor label="Cor primária" value={t.accent} onChange={(v) => setTweak("accent", v)}
          options={["#0a0a0a", "#1a1a1f", "#1f4f7d", "#2a4a2f", "#5a2a2a"]}/>
        <TweakColor label="Fundo paper" value={t.paper} onChange={(v) => setTweak("paper", v)}
          options={["#f7f6f4", "#f1f0ec", "#f4eee6", "#ffffff", "#0a0a0a"]}/>
      </TweakSection>

      <TweakSection title="Densidade">
        <TweakRadio label="Espaçamento" value={t.density} onChange={(v) => setTweak("density", v)}
          options={[{ label: "Confortável", value: "comfortable" }, { label: "Compacto", value: "compact" }]}/>
      </TweakSection>

      <TweakSection title="Navegação rápida">
        <TweakButton label="Login" onClick={() => setRoute("/login")} />
        <TweakButton label="Dashboard" onClick={() => setRoute("/dashboard")} />
        <TweakButton label="Criar checkout" onClick={() => setRoute("/checkouts")} />
        <TweakButton label="Vendas" onClick={() => setRoute("/sales")} />
        <TweakButton label="Página de pagamento" onClick={() => setRoute("/pay/preview")} />
        <TweakButton label="Página de obrigado" onClick={() => setRoute("/obrigado")} />
      </TweakSection>

      <TweakSection title="Demo de notificações push">
        <TweakButton label="Push: venda aprovada" onClick={() => pushToast("Venda aprovada · ORD-7843", "ok")} />
        <TweakButton label="Push: cartão recusado" onClick={() => pushToast("Cartão recusado · ORD-7844", "bad")} />
      </TweakSection>
    </TweaksPanel>
  );
}

function shade(hex, dl){
  // small helper — darken / lighten by delta percent (-10..10)
  try {
    const c = hex.replace("#", "");
    const v = parseInt(c.length === 3 ? c.split("").map(x => x + x).join("") : c, 16);
    let r = (v >> 16) & 255, g = (v >> 8) & 255, b = v & 255;
    const adj = Math.round(255 * (dl / 100));
    r = Math.max(0, Math.min(255, r + adj));
    g = Math.max(0, Math.min(255, g + adj));
    b = Math.max(0, Math.min(255, b + adj));
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  } catch { return hex; }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);