// Kotleto · main App + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D9461E",
  "displayStyle": "editorial",
  "vibe": "warm",
  "showMarquee": true,
  "showPromos": true
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useState("fa");
  const [route, setRoute] = useState("home");
  const [authOpen, setAuthOpen] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "fa" ? "rtl" : "ltr";
  }, [lang]);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--brand", tweaks.accent);
    root.style.setProperty("--brand-deep", darken(tweaks.accent, 0.25));
    root.style.setProperty("--brand-soft", lighten(tweaks.accent, 0.25));

    const presets = {
      warm:   { paper: "#FFF4E2", paper2: "#F7E8CE", ink: "#1A1410" },
      cream:  { paper: "#FAF6EE", paper2: "#F0E8D8", ink: "#2A1F18" },
      noir:   { paper: "#F4EDE0", paper2: "#E6DCC8", ink: "#0E0A06" },
      sand:   { paper: "#F2E8D0", paper2: "#E6D8B6", ink: "#1E170F" },
    };
    const p = presets[tweaks.vibe] || presets.warm;
    root.style.setProperty("--paper", p.paper);
    root.style.setProperty("--paper-2", p.paper2);
    root.style.setProperty("--ink", p.ink);

    // Display style maps to (Latin face, Persian face, weight, tracking)
    const styles = {
      editorial: { en: "'Fraunces', Georgia, serif",   fa: "'Vazirmatn', system-ui",     w: 900, tr: "-0.025em" },
      bold:      { en: "'Bagel Fat One', system-ui",    fa: "'Vazirmatn', system-ui",     w: 900, tr: "-0.01em" },
      modern:    { en: "'Familjen Grotesk', sans-serif",fa: "'Vazirmatn', system-ui",     w: 800, tr: "-0.04em" },
    };
    const s = styles[tweaks.displayStyle] || styles.editorial;
    root.style.setProperty("--display-en", s.en);
    root.style.setProperty("--display-fa", s.fa);
    root.style.setProperty("--display-weight", String(s.w));
    root.style.setProperty("--display-tracking", s.tr);
  }, [tweaks]);

  const onOrder = () => document.querySelector("#menu")?.scrollIntoView({ behavior: "smooth" });
  const onCheckout = () => setAuthOpen(true);

  return (
    <LangContext.Provider value={{ lang, setLang }}>
      <CartProvider>
        <OrderProvider>
          <DemoNotice />
          {route === "admin" ? (
            <Admin onExit={() => setRoute("home")} accent={tweaks.accent} />
          ) : (
            <>
              <TopNav route={route} setRoute={setRoute} onOpenAuth={()=>setAuthOpen(true)} />
              <main id="main-content">
                <Hero accent={tweaks.accent} onOrder={onOrder}/>
                {tweaks.showMarquee && <Marquee accent={tweaks.accent}/>}
                <MenuSection accent={tweaks.accent}/>
                <Tracking accent={tweaks.accent}/>
                <About accent={tweaks.accent}/>
                {tweaks.showPromos && <Promos accent={tweaks.accent}/>}
                <Reviews accent={tweaks.accent}/>
                <Location accent={tweaks.accent}/>
                <FooterCTA accent={tweaks.accent} onOrder={onOrder}/>
              </main>
              <Footer accent={tweaks.accent} onAdmin={()=>setRoute("admin")}/>
              <CartDrawer accent={tweaks.accent} onCheckout={onCheckout}/>
            </>
          )}

          <CheckoutController open={authOpen} onClose={()=>setAuthOpen(false)} />
          <ToastHost />

          <TweaksPanel title={lang==="fa"?"تنظیمات طراحی":"Design Tweaks"}>
            <TweakSection title={lang==="fa"?"رنگ و ظاهر":"Color & vibe"}>
              <TweakColor label={lang==="fa"?"رنگ اصلی":"Accent"} value={tweaks.accent}
                onChange={v=>setTweak("accent", v)}
                options={["#D9461E","#B83020","#8B2510","#E8853A","#C13B6A","#5B6B3A"]}/>
              <TweakSelect label={lang==="fa"?"حال‌و‌هوا":"Vibe"} value={tweaks.vibe}
                onChange={v=>setTweak("vibe", v)}
                options={[
                  { value: "warm",  label: lang==="fa"?"گرم (پیش‌فرض)":"Warm (default)" },
                  { value: "cream", label: lang==="fa"?"کرمی":"Cream" },
                  { value: "noir",  label: lang==="fa"?"شب":"Noir" },
                  { value: "sand",  label: lang==="fa"?"شنی":"Sand" },
                ]}/>
            </TweakSection>
            <TweakSection title={lang==="fa"?"تایپوگرافی":"Typography"}>
              <TweakRadio label={lang==="fa"?"حالت تیتر":"Display style"} value={tweaks.displayStyle}
                onChange={v=>setTweak("displayStyle", v)}
                options={[
                  { value: "editorial", label: lang==="fa"?"ادبی":"Editorial" },
                  { value: "bold",      label: lang==="fa"?"بولد":"Bold" },
                  { value: "modern",    label: lang==="fa"?"مدرن":"Modern" },
                ]}/>
            </TweakSection>
            <TweakSection title={lang==="fa"?"بخش‌ها":"Sections"}>
              <TweakToggle label={lang==="fa"?"نوار متحرک":"Marquee"} value={tweaks.showMarquee} onChange={v=>setTweak("showMarquee", v)}/>
              <TweakToggle label={lang==="fa"?"تخفیف‌ها":"Promos"} value={tweaks.showPromos} onChange={v=>setTweak("showPromos", v)}/>
            </TweakSection>
            <TweakSection title={lang==="fa"?"اقدام":"Action"}>
              <TweakButton label={lang==="fa"?"باز کردن پنل ادمین":"Open admin panel"} onClick={()=>setRoute(route==="admin"?"home":"admin")}/>
            </TweakSection>
          </TweaksPanel>
        </OrderProvider>
      </CartProvider>
    </LangContext.Provider>
  );
}

function CheckoutController({ open, onClose }) {
  const { lang } = useLang();
  const cart = useCart();
  const { place } = useOrder();

  const completeOrder = (details) => {
    const order = {
      id: LocalDB.nextOrderId(ORDER_FEED.map(item => item.id)),
      items: cart.count,
      lineItems: cart.items,
      total: details.total,
      placedAt: Date.now(),
      eta: 35 * 60 * 1000,
      status: "placed",
      address: { fa: details.address, en: details.address },
      courier: { fa: "در حال تخصیص", en: "Assigning rider" },
      customer: { name: details.name, phone: details.phone },
      note: details.note,
      payment: details.payment,
      promo: cart.promo || null,
    };
    place(order);
    cart.clear();
    cart.setPromo("");
    cart.setOpen(false);
    onClose();
    notify(lang === "fa" ? `سفارش ${toFa(order.id)} با موفقیت ثبت شد` : `Order ${order.id} placed successfully`);
    setTimeout(() => document.querySelector("#track")?.scrollIntoView({ behavior: "smooth" }), 120);
  };

  return <CheckoutModal open={open} onClose={onClose} onSuccess={completeOrder} />;
}

function hexToRgb(h) {
  h = h.replace("#",""); if (h.length===3) h = h.split("").map(c=>c+c).join("");
  return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
}
function rgbToHex(r,g,b) { return "#"+[r,g,b].map(x=>Math.max(0,Math.min(255,Math.round(x))).toString(16).padStart(2,"0")).join(""); }
function darken(hex, amt) { const [r,g,b]=hexToRgb(hex); return rgbToHex(r*(1-amt), g*(1-amt), b*(1-amt)); }
function lighten(hex, amt) { const [r,g,b]=hexToRgb(hex); return rgbToHex(r+(255-r)*amt, g+(255-g)*amt, b+(255-b)*amt); }

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