// app.jsx — composition, language state, tweaks, hash routing
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardStyle": "Gölge",
  "headingFont": "Playfair Display",
  "accent": "#bb8e89"
}/*EDITMODE-END*/;

const CARD_MAP = { "Gölge": "soft", "Editöryel": "editorial", "Kapak": "caption" };

// Gerçek yol tabanlı (pathname) yönlendirme — arama motorlarının her sayfayı
// (blog yazısı, ürün, vb.) ayrı ve indekslenebilir bir URL olarak görmesi için
// hash (#) yerine tarayıcı History API'si (pushState/popstate) kullanılır.
// Anasayfa içi bölümler (#hikaye, #misafirler, #galeri) ise gerçek ayrı sayfa
// olmadığından hash çapası olarak kalır.
function parseRoute() {
  const path = (window.location.pathname || "/").replace(/\/+$/, "") || "/";
  const hash = (window.location.hash || "").replace(/^#/, "");

  let m = path.match(/^\/urun\/([\w-]+)$/);
  if (m) return { view: "product", slug: m[1] };
  if (path === "/urunler") return { view: "products" };
  if (path === "/galeri") return { view: "gallery" };
  if (path === "/iletisim") return { view: "contact" };
  m = path.match(/^\/blog\/([\w-]+)$/);
  if (m) return { view: "blog-post", slug: m[1] };
  if (path === "/blog") return { view: "blog" };
  if (path === "/kvkk") return { view: "kvkk" };
  if (path === "/gizlilik") return { view: "privacy" };
  if (path === "/kullanim-sozlesmesi") return { view: "terms" };
  if (path === "/mesafeli-satis-sozlesmesi") return { view: "distance" };
  if (path === "/on-bilgilendirme-formu") return { view: "preinfo" };
  if (path === "/sepet") return { view: "cart" };
  if (path === "/odeme") return { view: "checkout" };
  m = path.match(/^\/siparis-basarili\/([\w-]+)$/);
  if (m) return { view: "order-success", orderId: m[1] };
  if (path === "/siparis-basarisiz") return { view: "order-failed" };
  // Anasayfadaki bölümlere (#hikaye, #misafirler, #galeri) başka bir sayfadan
  // gelindiğinde, hedef eleman React yeniden render edilene kadar DOM'da yok
  // — bu yüzden hash'i saklayıp App'te render sonrası manuel kaydırıyoruz.
  return { view: "home", anchor: hash || null };
}

// İç linkler için: aynı origin'deki normal <a href="/..."> tıklamalarını
// yakalayıp gerçek sayfa yenilemesi yerine history.pushState ile yönlendirir.
// Yeni sekmede açma / Ctrl+tık / harici linkler dokunulmadan browser'a bırakılır.
function setupClientRouting(onNavigate) {
  function isModifiedClick(e) {
    return e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
  }
  function onClick(e) {
    if (isModifiedClick(e)) return;
    const a = e.target && e.target.closest && e.target.closest("a[href]");
    if (!a) return;
    if (a.hasAttribute("download") || (a.target && a.target !== "_self")) return;
    let url;
    try { url = new URL(a.getAttribute("href"), window.location.href); } catch { return; }
    if (url.origin !== window.location.origin) return;
    if (url.pathname.startsWith("/admin")) return; // ayrı statik uygulama, tam sayfa yenilemesi ile açılsın

    e.preventDefault();
    if (url.pathname === window.location.pathname) {
      // Aynı sayfa, sadece bölüm çapası değişiyor (ör. anasayfadayken #galeri)
      if (url.hash && url.hash !== window.location.hash) window.location.hash = url.hash;
      else if (url.hash) {
        const el = document.getElementById(url.hash.slice(1));
        if (el) el.scrollIntoView({ block: "start" });
      } else {
        window.scrollTo({ top: 0 });
      }
      return;
    }
    window.history.pushState({}, "", url.pathname + url.search + url.hash);
    onNavigate();
  }
  function onPop() { onNavigate(); }
  document.addEventListener("click", onClick);
  window.addEventListener("popstate", onPop);
  window.addEventListener("hashchange", onPop);
  return () => {
    document.removeEventListener("click", onClick);
    window.removeEventListener("popstate", onPop);
    window.removeEventListener("hashchange", onPop);
  };
}

// Programatik yönlendirme (ör. checkout tamamlandığında) için — pushState
// otomatik popstate tetiklemediğinden manuel olarak dispatch ediyoruz.
window.appNavigate = function (path) {
  window.history.pushState({}, "", path);
  window.dispatchEvent(new PopStateEvent("popstate"));
};

// ── SEO: keep <title>, meta description, Open Graph, canonical and Product
// structured data in sync with the current route/language (SPA-friendly SEO).
const SITE_URL = "https://www.elfinrose.com/";

function setMetaTag(attr, key, content) {
  if (!content) return;
  let el = document.head.querySelector(`meta[${attr}="${key}"]`);
  if (!el) { el = document.createElement("meta"); el.setAttribute(attr, key); document.head.appendChild(el); }
  el.setAttribute("content", content);
}
function setCanonical(url) {
  let el = document.head.querySelector('link[rel="canonical"]');
  if (!el) { el = document.createElement("link"); el.setAttribute("rel", "canonical"); document.head.appendChild(el); }
  el.setAttribute("href", url);
}
function setProductJsonLd(obj) {
  let el = document.getElementById("ld-product");
  if (!obj) { if (el) el.remove(); return; }
  if (!el) { el = document.createElement("script"); el.type = "application/ld+json"; el.id = "ld-product"; document.head.appendChild(el); }
  el.textContent = JSON.stringify(obj);
}

function useDocumentSeo(c, lang, route) {
  useEffectA(() => {
    let cancelled = false;

    async function apply() {
      let title = c.seo.title, desc = c.seo.description, url = SITE_URL, productLd = null, ogImage = null;

      if (route.view === "product") {
        const list = await fetchCatalog(lang);
        if (cancelled) return;
        const p = list.find((x) => x.slug === route.slug) || list[0];
        if (p) {
          title = `${p.name} — Elfinrose`;
          desc = p.tagline;
          url = SITE_URL + "urun/" + route.slug;
          const imgRel = p.imagePath ? productImageUrl(p.imagePath) : null;
          const imgAbs = imgRel ? (imgRel.startsWith("http") ? imgRel : SITE_URL + imgRel.replace(/^\//, "")) : null;
          if (imgAbs) ogImage = imgAbs;
          productLd = {
            "@context": "https://schema.org",
            "@graph": [
              {
                "@type": "Product",
                name: p.name, description: p.tagline, category: p.cat,
                ...(imgAbs ? { image: imgAbs } : {}),
                brand: { "@type": "Brand", name: "Elfinrose" },
                offers: {
                  "@type": "Offer", price: String(Math.round(p.priceKurus / 100)), priceCurrency: "TRY",
                  availability: "https://schema.org/InStock", url,
                  seller: { "@type": "Organization", name: "Elfinrose" },
                },
              },
              {
                "@type": "BreadcrumbList",
                itemListElement: [
                  { "@type": "ListItem", position: 1, name: lang === "tr" ? "Ana Sayfa" : "Home", item: SITE_URL },
                  { "@type": "ListItem", position: 2, name: lang === "tr" ? "Ürünler" : "Products", item: SITE_URL + "urunler" },
                  { "@type": "ListItem", position: 3, name: p.name, item: url },
                ],
              },
            ],
          };
        }
      } else if (route.view === "products") {
        title = `${c.products.title} — Elfinrose`;
        desc = c.products.sub;
        url = SITE_URL + "urunler";
      } else if (route.view === "gallery") {
        title = `${c.gallery.eyebrow} — Elfinrose`;
        desc = c.gallery.sub;
        url = SITE_URL + "galeri";
      } else if (route.view === "contact") {
        title = `${c.nav.contact} — Elfinrose`;
        url = SITE_URL + "iletisim";
      } else if (route.view === "blog") {
        title = `Blog — Elfinrose`;
        desc = c.seo.description;
        url = SITE_URL + "blog";
      } else if (route.view === "blog-post") {
        const posts = await fetchBlogPosts(lang);
        if (cancelled) return;
        const post = posts.find((x) => x.slug === route.slug);
        if (post) {
          title = `${post.title} — Elfinrose Blog`;
          desc = post.excerpt;
          url = SITE_URL + "blog/" + route.slug;
        }
      } else if (["kvkk", "privacy", "terms", "distance", "preinfo"].includes(route.view)) {
        const meta = {
          kvkk: ["KVKK Aydınlatma Metni", "kvkk"],
          privacy: ["Gizlilik Politikası", "gizlilik"],
          terms: ["Kullanım Sözleşmesi", "kullanim-sozlesmesi"],
          distance: ["Mesafeli Satış Sözleşmesi", "mesafeli-satis-sozlesmesi"],
          preinfo: ["Ön Bilgilendirme Formu", "on-bilgilendirme-formu"],
        }[route.view];
        title = `${meta[0]} — Elfinrose`;
        url = SITE_URL + meta[1];
      } else if (["cart", "checkout", "order-success", "order-failed"].includes(route.view)) {
        const titles = {
          cart: lang === "tr" ? "Sepetim" : "Your Cart",
          checkout: lang === "tr" ? "Ödeme" : "Checkout",
          "order-success": lang === "tr" ? "Siparişiniz Alındı" : "Order Received",
          "order-failed": lang === "tr" ? "Sipariş Başarısız" : "Order Failed",
        };
        title = `${titles[route.view]} — Elfinrose`;
      }

      document.title = title;
      document.documentElement.lang = lang;
      setMetaTag("name", "description", desc);
      setMetaTag("property", "og:title", title);
      setMetaTag("property", "og:description", desc);
      setMetaTag("property", "og:url", url);
      setMetaTag("property", "og:locale", lang === "tr" ? "tr_TR" : "en_US");
      setMetaTag("property", "og:image", ogImage || SITE_URL + "og-image.jpg");
      setMetaTag("name", "twitter:image", ogImage || SITE_URL + "og-image.jpg");
      setMetaTag("name", "twitter:title", title);
      setMetaTag("name", "twitter:description", desc);
      setCanonical(url);
      setProductJsonLd(productLd);

      const transactional = ["cart", "checkout", "order-success", "order-failed"].includes(route.view);
      setMetaTag("name", "robots", transactional ? "noindex, nofollow" : "index, follow, max-image-preview:large");
    }

    apply();
    return () => { cancelled = true; };
  }, [lang, route.view, route.slug]);
}

function App() {
  const [lang, setLang] = useStateA("tr");
  const [route, setRoute] = useStateA(parseRoute());
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const c = window.CONTENT[lang];
  const variant = CARD_MAP[t.cardStyle] || "soft";

  useDocumentSeo(c, lang, route);

  useEffectA(() => setupClientRouting(() => setRoute(parseRoute())), []);

  // Başka bir sayfadan (#urun/..., Ürünler, Blog, vb.) anasayfa bölümüne
  // (#hikaye, #misafirler, #galeri, #iletisim) dönüldüğünde, o an DOM'da
  // olmayan hedefe React render'ı bitince manuel kaydır.
  useEffectA(() => {
    if (route.view !== "home" || !route.anchor) return;
    const raf1 = requestAnimationFrame(() => {
      const raf2 = requestAnimationFrame(() => {
        const el = document.getElementById(route.anchor);
        if (el) el.scrollIntoView({ block: "start" });
      });
      return () => cancelAnimationFrame(raf2);
    });
    return () => cancelAnimationFrame(raf1);
  }, [route.view, route.anchor]);

  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--font-serif", `'${t.headingFont}'`);
  }, [t.accent, t.headingFont]);

  const panel = (
    <TweaksPanel>
      <TweakSection label={lang === "tr" ? "Ürün Kartı" : "Product Card"} />
      <TweakRadio label={lang === "tr" ? "Stil" : "Style"} value={t.cardStyle}
        options={["Gölge", "Editöryel", "Kapak"]} onChange={(v) => setTweak("cardStyle", v)} />
      <TweakSection label={lang === "tr" ? "Tipografi" : "Typography"} />
      <TweakSelect label={lang === "tr" ? "Başlık fontu" : "Heading font"} value={t.headingFont}
        options={["Playfair Display", "Cormorant Garamond", "Libre Baskerville"]}
        onChange={(v) => setTweak("headingFont", v)} />
      <TweakSection label={lang === "tr" ? "Renk" : "Color"} />
      <TweakColor label={lang === "tr" ? "Vurgu" : "Accent"} value={t.accent}
        options={["#bb8e89", "#7f8e70", "#b9836a", "#9d7a93"]}
        onChange={(v) => setTweak("accent", v)} />
    </TweaksPanel>
  );

  if (route.view === "product") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <ProductDetailPage slug={route.slug} lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "products") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <AllProductsPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "gallery") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <GalleryPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "contact") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <ContactPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "blog") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <BlogListPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "blog-post") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <BlogPostPage slug={route.slug} lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (["kvkk", "privacy", "terms", "distance", "preinfo"].includes(route.view)) {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <LegalPage kind={route.view} lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "cart") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <CartPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "checkout") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <CheckoutPage lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  if (route.view === "order-success" || route.view === "order-failed") {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <OrderResultPage status={route.view === "order-success" ? "success" : "failed"} orderId={route.orderId} lang={lang} setLang={setLang} />
        <FloatingWhatsApp lang={lang} />
        {panel}
      </div>
    );
  }

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />
      <main>
        <Hero c={c} />
        <Story c={c} />
        <Products c={c} cardStyle={variant} lang={lang} />
        <Testimonials c={c} />
        <Gallery c={c} />
      </main>
      <Footer c={c} />
      <FloatingWhatsApp lang={lang} />
      {panel}
    </div>
  );
}

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