/* global React, ReactDOM, Nav, Footer, HomePage, PremiumPage, DownloadPage, FeaturesPage, BlogPage, ContactPage, PrivacyPage, TermsPage, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakText, TweakSelect */
// ============================================================
// frekanslol — App shell with hash routing & Tweaks
// ============================================================

const { useState, useEffect, useRef } = React;

const ROUTES = {
  home: { path: "/", title: "frekanslol — League of Legends Skin Changer and More | Ücretsiz İndir", desc: "frekanslol — 4.000+ topluluk skini ve tüm resmi skinleri tek uygulamada yönet. Otomatik rün, AI maç koçu, rakip analizi. Windows için ücretsiz." },
  features: { path: "/features", title: "Özellikler — frekanslol | Skin Yöneticisi, AI Koç, Resmi Galeri", desc: "frekanslol'un tüm özellikleri: skin yöneticisi, resmi skin galerisi, AI maç koçu, otomatik rün, çok hesap takibi ve daha fazlası." },
  premium: { path: "/premium", title: "Premium — frekanslol | Sınırsız AI koç ve otomasyon", desc: "Sınırsız AI analiz, otomatik rün, çok hesap takibi ve şampiyon havuzu analizi. frekanslol Premium ile tam güç." },
  download: { path: "/download", title: "İndir — frekanslol v1.7.1 Windows için Ücretsiz", desc: "Windows 10/11 için frekanslol'un en son sürümünü indir. Hızlı kurulum, sistem gereksinimleri, sorun giderme rehberi." },
  blog: { path: "/blog", title: "Blog — frekanslol | LoL Rehberleri ve Strateji Yazıları", desc: "frekanslol blog: skin değiştirme rehberleri, en iyi topluluk skinleri, AI maç koçluğu ile rank atlama ipuçları." },
  contact: { path: "/contact", title: "İletişim — frekanslol", desc: "frekanslol ekibi ile iletişime geç. Sorun bildirimi, özellik önerisi, premium destek." },
  privacy: { path: "/privacy", title: "Gizlilik Politikası — frekanslol", desc: "frekanslol gizlilik politikası — hangi verileri topluyoruz, topluyor muyuz." },
  terms: { path: "/terms", title: "Kullanım Koşulları — frekanslol", desc: "frekanslol kullanım koşulları ve sorumluluk reddi." },
};

const BLOG_SLUGS = ["skin-nasil-degistirilir-2026", "en-iyi-10-topluluk-skin-mayis-2026", "ai-mac-kocu-rank-atlama"];

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "priceTry": 59.99,
  "priceTryAnnual": 599.99,
  "priceEur": 1.99,
  "priceEurAnnual": 19.99,
  "userCount": 2000,
  "githubReleaseUrl": "https://github.com/frekans911/frekanslol/releases/latest",
  "lemonSqueezyUrl": "https://frekanslol.lemonsqueezy.com/buy/premium-monthly",
  "lemonSqueezyAnnualUrl": "",
  "discordUrl": "",
  "accentColor": "#6366f1"
}/*EDITMODE-END*/;

function parseRoute() {
  const h = (window.location.hash || "#/").replace(/^#/, "");
  // Blog post sub-route?
  const m = h.match(/^\/blog\/(.+)$/);
  if (m && BLOG_SLUGS.includes(m[1])) {
    return { route: "blog", postSlug: m[1] };
  }
  for (const [k, v] of Object.entries(ROUTES)) {
    if (v.path === h) return { route: k, postSlug: null };
  }
  return { route: "home", postSlug: null };
}

function App() {
  const [{ route, postSlug }, setLoc] = useState(parseRoute());
  const [tweaks, setTweak] = useTweaks(DEFAULT_TWEAKS);

  useEffect(() => {
    const onHash = () => setLoc(parseRoute());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    const r = ROUTES[route];
    if (!r) return;
    document.title = r.title;
    const md = document.querySelector('meta[name="description"]');
    if (md) md.setAttribute("content", r.desc);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route, postSlug]);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accentColor);
    document.documentElement.style.setProperty("--accent-hi", lighten(tweaks.accentColor, 18));
    document.documentElement.style.setProperty("--accent-lo", darken(tweaks.accentColor, 12));
    document.documentElement.style.setProperty("--accent-glow", hexToRgba(tweaks.accentColor, 0.35));
  }, [tweaks.accentColor]);

  const onNav = (key) => {
    if (!ROUTES[key]) return;
    window.location.hash = ROUTES[key].path;
    setLoc({ route: key, postSlug: null });
  };

  const pageProps = { onNav, tweaks };

  return (
    <React.Fragment>
      <Nav route={route} onNav={onNav} tweaks={tweaks} />
      <div data-screen-label={"page:" + route + (postSlug ? "/" + postSlug : "")}>
        {route === "home" && <HomePage {...pageProps} />}
        {route === "features" && <FeaturesPage {...pageProps} />}
        {route === "premium" && <PremiumPage {...pageProps} />}
        {route === "download" && <DownloadPage {...pageProps} />}
        {route === "blog" && <BlogPage {...pageProps} postSlug={postSlug} />}
        {route === "contact" && <ContactPage {...pageProps} />}
        {route === "privacy" && <PrivacyPage {...pageProps} />}
        {route === "terms" && <TermsPage {...pageProps} />}
      </div>
      <Footer onNav={onNav} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent color"
            value={tweaks.accentColor}
            onChange={(v) => setTweak("accentColor", v)}
            options={["#6366f1", "#8b5cf6", "#22d3ee", "#f43f5e", "#22c55e"]}
          />
        </TweakSection>

        <TweakSection label="Pricing">
          <TweakSlider
            label="Aylık ücret (₺)"
            value={tweaks.priceTry}
            min={29}
            max={299}
            step={0.5}
            unit="₺"
            onChange={(v) => setTweak("priceTry", v)}
          />
          <TweakSlider
            label="Yıllık ücret (₺)"
            value={tweaks.priceTryAnnual}
            min={299}
            max={2999}
            step={5}
            unit="₺"
            onChange={(v) => setTweak("priceTryAnnual", v)}
          />
          <TweakSlider
            label="EUR aylık"
            value={tweaks.priceEur}
            min={1}
            max={20}
            step={0.5}
            unit="€"
            onChange={(v) => setTweak("priceEur", v)}
          />
          <TweakSlider
            label="EUR yıllık"
            value={tweaks.priceEurAnnual}
            min={5}
            max={199}
            step={1}
            unit="€"
            onChange={(v) => setTweak("priceEurAnnual", v)}
          />
        </TweakSection>

        <TweakSection label="Sosyal kanıt">
          <TweakSlider
            label="Aktif kullanıcı"
            value={tweaks.userCount}
            min={500}
            max={50000}
            step={500}
            onChange={(v) => setTweak("userCount", v)}
          />
        </TweakSection>

        <TweakSection label="Bağlantılar">
          <TweakText
            label="GitHub release URL"
            value={tweaks.githubReleaseUrl}
            onChange={(v) => setTweak("githubReleaseUrl", v)}
          />
          <TweakText
            label="LemonSqueezy aylık URL"
            value={tweaks.lemonSqueezyUrl}
            onChange={(v) => setTweak("lemonSqueezyUrl", v)}
          />
          <TweakText
            label="LemonSqueezy yıllık URL"
            value={tweaks.lemonSqueezyAnnualUrl}
            onChange={(v) => setTweak("lemonSqueezyAnnualUrl", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

// ---- Color helpers ----
function hexToRgb(hex) {
  const m = hex.replace("#", "").match(/.{2}/g);
  return m ? m.map((x) => parseInt(x, 16)) : [99, 102, 241];
}
function hexToRgba(hex, a) {
  const [r, g, b] = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function lighten(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  const mix = (c) => Math.round(c + (255 - c) * (pct / 100));
  return `#${[mix(r), mix(g), mix(b)].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
}
function darken(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  const mix = (c) => Math.round(c * (1 - pct / 100));
  return `#${[mix(r), mix(g), mix(b)].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
}

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