// App entry — hash router + compare state + tweaks

function StaticPage({ type }) {
  const LABELS = {
    faq: 'Sık Sorulan Sorular',
    about: 'Hakkımızda',
    contact: 'İletişim',
    privacy: 'Gizlilik Politikası',
    terms: 'Kullanım Şartları',
    cookies: 'Çerez Politikası',
    help: 'Yardım',
  };
  return (
    <main id="main" className="container" style={{ padding: '80px 0 120px', maxWidth: 680, margin: '0 auto' }}>
      <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 16 }}>{LABELS[type] || type}</h1>
      <p style={{ color: 'var(--km-ink-500)', fontSize: 16 }}>Bu sayfa çok yakında yayına girecek.</p>
      <a href="#/" className="btn btn--ghost" style={{ marginTop: 24, display: 'inline-block' }}>Anasayfaya dön</a>
    </main>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F2A310",
  "deep": "#0A3D62",
  "density": "comfortable",
  "showSticky": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = React.useState(parseRoute());
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const [photoOpen, setPhotoOpen] = React.useState(false);
  const [compare, setCompare] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('km:compare') || '[]'); } catch { return []; }
  });

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

  React.useEffect(() => {
    localStorage.setItem('km:compare', JSON.stringify(compare));
  }, [compare]);

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.documentElement.style.setProperty('--km-accent', t.accent);
    document.documentElement.style.setProperty('--km-deep', t.deep);
    document.body.dataset.density = t.density;
  }, [t.accent, t.deep, t.density]);

  const compareSet = new Set(compare);
  const toggleCompare = (shortSlug) => {
    const wasIn = compare.includes(shortSlug);
    setCompare(prev => {
      if (prev.includes(shortSlug)) return prev.filter(s => s !== shortSlug);
      let next = [...prev, shortSlug];
      if (next.length > 3) next = next.slice(-3);
      return next;
    });
    showToast(wasIn ? 'Karşılaştırmadan çıkarıldı' : 'Karşılaştırmaya eklendi');
  };

  // Admin & signup have their own chrome — render directly
  if (route.name === 'admin') {
    return (
      <div className="app">
        <AdminPage/>
        {renderTweaks(t, setTweak)}
      </div>
    );
  }
  if (route.name === 'signup') {
    return (
      <div className="app">
        <SignupPage/>
        {renderTweaks(t, setTweak)}
      </div>
    );
  }

  let page;
  if (route.name === 'pdp') {
    const product = PRODUCTS.find(p => p.shortSlug === route.shortSlug) || PRODUCTS[0];
    page = <PdpPage product={product} onCompareToggle={toggleCompare} compareSet={compareSet}/>;
  } else if (route.name === 'search') {
    page = <SearchPage route={route} onCompareToggle={toggleCompare} compareSet={compareSet}/>;
  } else if (route.name === 'category') {
    page = <CategoryPage slug={route.slug} onCompareToggle={toggleCompare} compareSet={compareSet}/>;
  } else if (route.name === 'brand') {
    page = <BrandPage slug={route.slug} onCompareToggle={toggleCompare} compareSet={compareSet}/>;
  } else if (route.name === 'brands') {
    page = <BrandsIndexPage/>;
  } else if (route.name === 'categories') {
    page = <CategoriesIndexPage/>;
  } else if (route.name === 'seo-cheapest') {
    page = <SeoLandingPage slug={route.slug} onCompareToggle={toggleCompare} compareSet={compareSet}/>;
  } else if (route.name === 'how') {
    page = <HowItWorksPage/>;
  } else if (route.name === '404') {
    page = <NotFound/>;
  } else if (route.name === 'merchant' || route.name === 'priceReport' || route.name === 'go' || route.name === 'favorites' || route.name === 'alerts') {
    page = <NotFound/>;
  } else if (route.name === 'faq' || route.name === 'about' || route.name === 'contact' || route.name === 'privacy' || route.name === 'terms' || route.name === 'cookies' || route.name === 'help') {
    page = <StaticPage type={route.name}/>;
  } else {
    page = <HomePage onCompareToggle={toggleCompare} compareSet={compareSet} onPhotoSearch={() => setPhotoOpen(true)}/>;
  }

  return (
    <div className="app">
      <Header
        onCompareOpen={() => setDrawerOpen(true)}
        compareCount={compare.length}
        route={route}
        onPhotoSearch={() => setPhotoOpen(true)}
      />
      {page}
      <Footer/>

      <CompareDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        shortSlugs={compare}
        onRemove={(s) => setCompare(prev => prev.filter(x => x !== s))}
        onClear={() => setCompare([])}
      />
      <CompareFab count={compare.length} onClick={() => setDrawerOpen(true)}/>

      <PhotoSearchModal
        open={photoOpen}
        onClose={() => setPhotoOpen(false)}
        onResult={() => setPhotoOpen(false)}
      />

      {renderTweaks(t, setTweak)}
    </div>
  );
}

function renderTweaks(t, setTweak) {
  return (
    <TweaksPanel>
      <TweakSection label="Marka renkleri"/>
      <TweakColor label="CTA (amber)" value={t.accent}
        options={['#F2A310', '#E55934', '#0EAD69', '#7B2CBF']}
        onChange={(v) => setTweak('accent', v)}/>
      <TweakColor label="Marka mavisi" value={t.deep}
        options={['#0A3D62', '#1B3A5B', '#0E4D40', '#2E1B4E']}
        onChange={(v) => setTweak('deep', v)}/>

      <TweakSection label="Hızlı gezinti — site haritası"/>
      <TweakButton label="🏠 Anasayfa" onClick={() => navigate('#/')}/>
      <TweakButton label="🔍 Arama: 'garmin'" onClick={() => navigate(urlForSearch('garmin'))}/>
      <TweakButton label="📦 PDP — Garmin Echomap 92sv" onClick={() => navigate(urlForProduct(PRODUCTS[0]))}/>
      <TweakButton label="📦 PDP — Lewmar V700 Vinç" onClick={() => navigate(urlForProduct(PRODUCTS[1]))}/>
      <TweakButton label="🗂 Kategori — Balık Bulucu" onClick={() => navigate(urlForCategory('balik-bulucu'))}/>
      <TweakButton label="🏷 Markalar — index" onClick={() => navigate('#/markalar')}/>
      <TweakButton label="🏷 Marka — Garmin" onClick={() => navigate('#/marka/garmin')}/>
      <TweakButton label="🚀 SEO — En ucuz Balık Bulucu" onClick={() => navigate('#/en-ucuz-balik-bulucu')}/>
      <TweakButton label="❓ Nasıl çalışır" onClick={() => navigate('#/nasil-calisir')}/>
      <TweakButton label="🏪 Satıcı başvurusu" onClick={() => navigate('#/satici-basvuru')}/>
      <TweakButton label="⚙️ Admin paneli" onClick={() => navigate('#/admin')}/>
    </TweaksPanel>
  );
}

// tiny toast
function showToast(msg) {
  let el = document.getElementById('km-toast');
  if (!el) {
    el = document.createElement('div');
    el.id = 'km-toast';
    el.style.cssText = `
      position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
      background: var(--km-ink-900); color: white; padding: 10px 16px; border-radius: 999px;
      font-size: 13px; font-weight: 500; z-index: 100; opacity: 0; transition: all .25s;
      box-shadow: var(--shadow-3); pointer-events: none;
    `;
    document.body.appendChild(el);
  }
  el.textContent = msg;
  requestAnimationFrame(() => {
    el.style.opacity = '1';
    el.style.transform = 'translateX(-50%) translateY(0)';
  });
  clearTimeout(el._t);
  el._t = setTimeout(() => {
    el.style.opacity = '0';
    el.style.transform = 'translateX(-50%) translateY(20px)';
  }, 1800);
}

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