// Main app — router + tweaks + boot

const { useEffect: useEffectA, useState: useStateA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ribbon_gold",
  "accent": "rouge",
  "hero_image": "furoshiki",
  "type_pairing": "fraunces_inter",
  "show_topbar": true,
  "show_whatsapp_fab": true
}/*EDITMODE-END*/;

const PALETTES = {
  ribbon_gold: { paper: "#f6efe4", paper2: "#efe5d4", ink: "#1f1a16", gold: "#b08a4e", goldDeep: "#8a6a36", line: "#e6dac9", surface: "#fbf6ec", muted: "#8a7e6f" },
  silk_blush:  { paper: "#f4ebe4", paper2: "#ead9cd", ink: "#2a1a18", gold: "#c08562", goldDeep: "#945d3f", line: "#e6cebd", surface: "#f8efe8", muted: "#9b7c6c" },
  linen_sage:  { paper: "#f3efe6", paper2: "#e6e3d4", ink: "#1d2118", gold: "#7e8a5e", goldDeep: "#5e6b40", line: "#d6dbc6", surface: "#f6f4eb", muted: "#7d8270" },
  midnight_ink:{ paper: "#0f0e0c", paper2: "#1a1815", ink: "#f6efe4", gold: "#c09c64", goldDeep: "#a48050", line: "#2a2722", surface: "#15130f", muted: "#8a8278" },
};
const ACCENTS = {
  rouge: "#b23a48",
  saffron: "#d49146",
  emerald: "#436b50",
  indigo: "#3c4570",
};
const HEROES = {
  furoshiki: "media/lifestyle-furoshiki-wrapping.webp",
  banner: "media/home-banner.webp",
  giftset: "media/occasion-fabric-wrapped-gift-sets.webp",
  reuse: "media/lifestyle-reuse-with-maska.webp",
};
const TYPES = {
  fraunces_inter:    { display: '"Fraunces"', body: '"Inter"' },
  cormorant_inter:   { display: '"Cormorant Garamond"', body: '"Inter"' },
  fraunces_dmsans:   { display: '"Fraunces"', body: '"DM Sans"' },
};

function applyHeroImage(key) {
  const url = HEROES[key] || HEROES.furoshiki;
  let s = document.getElementById("tweak-hero-img");
  if (!s) { s = document.createElement("style"); s.id = "tweak-hero-img"; document.head.appendChild(s); }
  s.textContent = `.hero-bg img { content: url('${url}'); }`;
}

function applyTweaks(t) {
  applyHeroImage(t.hero_image);
  const r = document.documentElement.style;
  const p = PALETTES[t.palette] || PALETTES.ribbon_gold;
  r.setProperty("--paper", p.paper);
  r.setProperty("--paper-2", p.paper2);
  r.setProperty("--ink", p.ink);
  r.setProperty("--gold", p.gold);
  r.setProperty("--gold-deep", p.goldDeep);
  r.setProperty("--line", p.line);
  r.setProperty("--surface", p.surface);
  r.setProperty("--muted", p.muted);
  // darkmode pivot: derive ink-2
  if (t.palette === "midnight_ink") {
    r.setProperty("--ink-2", "#d6cabb");
    r.setProperty("--blush", "#221f1c");
  } else {
    r.setProperty("--ink-2", "#3a302a");
    r.setProperty("--blush", "#ecddd0");
  }
  r.setProperty("--rouge", ACCENTS[t.accent] || ACCENTS.rouge);
  const types = TYPES[t.type_pairing] || TYPES.fraunces_inter;
  // Inject font swap
  let styleNode = document.getElementById("tweak-fonts");
  if (!styleNode) {
    styleNode = document.createElement("style"); styleNode.id = "tweak-fonts";
    document.head.appendChild(styleNode);
  }
  styleNode.textContent = `
    body { font-family: ${types.body}, "Inter", system-ui, sans-serif; }
    .display, h1, h2, h3, .nav-brand-text, .pdp-title, .shop-hero-title, .product-card-title, .occasion-tile-label, .cart-head h3, .footer-brand-mark, .hero-h1, .signature h2, .story-year, .svc-step h4 {
      font-family: ${types.display}, "Fraunces", Georgia, serif;
    }
  `;
}

function App() {
  const route = useRoute();
  const { lang } = window.useStore();
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  useEffectA(() => { applyTweaks(tweaks); }, [tweaks]);

  // Route resolution
  let page;
  let heroMode = false;
  if (route === "/" || route === "") { page = <HomePage/>; heroMode = true; }
  else if (route === "/shop") page = <ShopPage filter={null}/>;
  else if (route.startsWith("/c/")) {
    const id = route.replace("/c/", "").split("?")[0];
    page = <ShopPage key={id} filter={id}/>;
  }
  else if (route.startsWith("/product/")) {
    const handle = route.replace("/product/", "").split("?")[0];
    page = <ProductPage key={handle} handle={handle}/>;
  }
  else if (route === "/services" || route.startsWith("/services")) page = <ServicesPage/>;
  else if (route === "/corporate") page = <CorporatePage/>;
  else if (route === "/our-story") { page = <StoryPage/>; heroMode = true; }
  else if (route === "/stores") page = <StoresPage/>;
  else if (route === "/contact") page = <ContactPage/>;
  else page = <HomePage/>;

  return (
    <>
      {tweaks.show_topbar && <Topbar/>}
      <Navbar heroMode={heroMode}/>
      {page}
      <Footer/>
      <CartDrawer/>
      <Toast/>
      {tweaks.show_whatsapp_fab && <WhatsAppFab/>}
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks" subtitle="MASKA design controls">
          <TweakSection title="Palette">
            <TweakColor
              label="Palette family"
              value={tweaks.palette}
              onChange={v => setTweak("palette", v)}
              options={[
                ["#b08a4e","#f6efe4","#1f1a16"],
                ["#c08562","#f4ebe4","#2a1a18"],
                ["#7e8a5e","#f3efe6","#1d2118"],
                ["#c09c64","#0f0e0c","#f6efe4"],
              ]}
            />
            <TweakSelect
              label="Palette name"
              value={tweaks.palette}
              onChange={v => setTweak("palette", v)}
              options={[
                ["ribbon_gold", "Ribbon Gold"],
                ["silk_blush", "Silk Blush"],
                ["linen_sage", "Linen Sage"],
                ["midnight_ink", "Midnight Ink"],
              ]}
            />
            <TweakRadio
              label="Festive accent"
              value={tweaks.accent}
              onChange={v => setTweak("accent", v)}
              options={[
                ["rouge", "Rouge"],
                ["saffron", "Saffron"],
                ["emerald", "Emerald"],
                ["indigo", "Indigo"],
              ]}
            />
          </TweakSection>
          <TweakSection title="Type">
            <TweakSelect
              label="Pairing"
              value={tweaks.type_pairing}
              onChange={v => setTweak("type_pairing", v)}
              options={[
                ["fraunces_inter", "Fraunces × Inter"],
                ["cormorant_inter", "Cormorant × Inter"],
                ["fraunces_dmsans", "Fraunces × DM Sans"],
              ]}
            />
          </TweakSection>
          <TweakSection title="Hero">
            <TweakRadio
              label="Hero image"
              value={tweaks.hero_image}
              onChange={v => setTweak("hero_image", v)}
              options={[
                ["furoshiki", "Furoshiki"],
                ["banner", "Banner"],
                ["giftset", "Gift set"],
                ["reuse", "Reuse"],
              ]}
            />
          </TweakSection>
          <TweakSection title="Chrome">
            <TweakToggle label="Show topbar marquee" value={tweaks.show_topbar} onChange={v => setTweak("show_topbar", v)}/>
            <TweakToggle label="WhatsApp button" value={tweaks.show_whatsapp_fab} onChange={v => setTweak("show_whatsapp_fab", v)}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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