// app.jsx — router, quick-view modal, tweaks, mount

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#FAF9F6", "#0A0A0A", "#C76B4F"],
  "accent": "#C76B4F",
  "headFont": "Playfair Display",
  "bodyScale": 17,
  "density": "regular",
  "cardStyle": "editorial"
}/*EDITMODE-END*/;

const HEAD_FONTS = {
  "Playfair Display": "'Playfair Display', Georgia, serif",
  "Cormorant Garamond": "'Cormorant Garamond', Georgia, serif",
  "Fraunces": "'Fraunces', Georgia, serif",
};

/* ---------------- Quick view modal ---------------- */
function QuickView({ p, go, onClose, onAdd, onToast }) {
  const [size, setSize] = React.useState("M");
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Kapat"><I.close /></button>
        <image-slot id={`slot-quick-${p.id}`} placeholder={`${p.model.toUpperCase()} · ${p.name}`}></image-slot>
        <div className="modal-body">
          <div className="pd-cat">{p.cat}</div>
          <h2 style={{ fontSize: 30, margin: "10px 0 12px" }}>{p.name}</h2>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
            <Stars n={p.rating} /><span style={{ fontSize: 13, color: "var(--muted)" }}>{p.rating} · {p.reviews} yorum</span>
          </div>
          <div className="pd-price" style={{ fontSize: 24 }}>{fmt(p.price)}{p.old && <span className="old">{fmt(p.old)}</span>}</div>
          <p style={{ color: "var(--ink-soft)", marginTop: 18, fontSize: 15.5, lineHeight: 1.6 }}>{p.fabric} · özel dikiş ve titiz atölye işçiliği.</p>
          <div className="pd-block">
            <div className="lbl">Beden</div>
            <div className="sizes">
              {["XS","S","M","L","XL"].map((s) => <button key={s} className={`size ${size === s ? "active" : ""}`} onClick={() => setSize(s)}>{s}</button>)}
            </div>
          </div>
          <div className="pd-actions" style={{ marginTop: "auto", paddingTop: 24 }}>
            <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={() => { onAdd(p); onToast(`${p.name} sepete eklendi`); onClose(); }}>Sepete Ekle</button>
            <button className="btn ghost sm" onClick={() => { onClose(); go("product", p.id); }}>Detay</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- App ---------------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [pid, setPid] = React.useState(null);
  const [cart, setCart] = React.useState(0);
  const [quick, setQuick] = React.useState(null);
  const [push, toastNode] = useToasts();

  const go = React.useCallback((r, id = null) => {
    if (r === "collection") {
      push("Koleksiyon lansmanımız çok yakında gerçekleşecektir! ✦");
      return;
    }
    setRoute(r); if (id) setPid(id);
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [push]);
  const onAdd = React.useCallback(() => setCart((c) => c + 1), []);
  const onFav = React.useCallback(() => push("Favorilere eklendi ♥"), [push]);

  // apply tweaks to CSS variables
  React.useEffect(() => {
    const r = document.documentElement.style;
    const pal = t.palette || TWEAK_DEFAULTS.palette;
    r.setProperty("--bg", pal[0]);
    r.setProperty("--ink", pal[1]);
    r.setProperty("--accent", t.accent || pal[2]);
    r.setProperty("--terracotta", t.accent || pal[2]);
    r.setProperty("--font-head", HEAD_FONTS[t.headFont] || HEAD_FONTS["Playfair Display"]);
    r.setProperty("--font-size-base", `${t.bodyScale}px`);
    document.body.style.fontSize = `${t.bodyScale}px`;
    r.setProperty("--u", t.density === "compact" ? ".82" : t.density === "comfy" ? "1.14" : "1");
  }, [t]);

  let screen;
  if (route === "collection") screen = <ScreenCollection go={go} onQuick={setQuick} onFav={onFav} />;
  else if (route === "product") screen = <ScreenProduct id={pid} go={go} onAdd={onAdd} onToast={push} />;
  else if (route === "story") screen = <ScreenStory go={go} onToast={push} />;
  else if (route === "vton") screen = <ScreenVTON go={go} onToast={push} />;
  else screen = <ScreenHome go={go} onQuick={setQuick} onFav={onFav} onToast={push} />;

  return (
    <>
      <Nav route={route} go={go} cartCount={cart} onSearch={() => push("Arama yakında ✦")} />
      {screen}
      <Footer go={go} />
      {quick && <QuickView p={quick} go={go} onClose={() => setQuick(null)} onAdd={onAdd} onToast={push} />}
      {toastNode}

      <TweaksPanel>
        <TweakSection label="Renk" />
        <TweakColor label="Palet (zemin · mürekkep · vurgu)" value={t.palette}
          options={[
            ["#FAF9F6","#0A0A0A","#C76B4F"],
            ["#F6F1E9","#1A1714","#6B8E23"],
            ["#FFFFFF","#161210","#D4AF37"],
            ["#0F0D0B","#FAF7F0","#C76B4F"]
          ]}
          onChange={(v) => setTweak("palette", v)} />
        <TweakColor label="Vurgu rengi" value={t.accent}
          options={["#C76B4F", "#6B8E23", "#D4AF37", "#9C5A3C"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Tipografi" />
        <TweakSelect label="Başlık fontu" value={t.headFont}
          options={["Playfair Display", "Cormorant Garamond", "Fraunces"]}
          onChange={(v) => setTweak("headFont", v)} />
        <TweakSlider label="Metin boyutu" value={t.bodyScale} min={15} max={19} step={1} unit="px"
          onChange={(v) => setTweak("bodyScale", v)} />

        <TweakSection label="Düzen" />
        <TweakRadio label="Yoğunluk" value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </>
  );
}

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