// Main app — home + router
const { useState: useStateA, useEffect: useEffectA } = React;

function Home() {
  const t = useT();
  const apps = [
    { ...t.home.apps.noctavia, icon: 'assets/noctavia-logo.png', link: '/noctavia', status: 'live' },
    { ...t.home.apps.zikirmatik, icon: 'assets/zikirmatik-logo.png', link: '/zikirmatik', status: 'live' },
    { ...t.home.apps.ramazan, icon: 'assets/ramazan-logo.jpg', link: '/ramazan', status: 'live' },
    { ...t.home.apps.kelimebul, icon: 'assets/kelimebul-logo.jpg', link: '/kelime-bul', status: 'live' },
    { ...t.home.apps.hesapvakti, icon: 'assets/hesapvakti-logo.png', link: '/hesap-vakti', status: 'live' },
    { ...t.home.apps.tasarrufcu, icon: 'assets/tasarrufcu-logo.png', link: '/tasarrufcu', status: 'soon' },
  ];

  return (
    <main>
      <section className="hero">
        <div className="hero-eyebrow">
          <span>{t.home.heroEyebrow}</span>
        </div>
        <h1 className="hero-title">kolabs<span className="dot-accent">{t.home.heroBrandDot}</span></h1>
        <div className="hero-sub">
          <div className="hero-tagline">
            {t.home.heroTagline}
          </div>
          <div className="hero-meta">
            <div><strong>06</strong> {t.home.metaApps}</div>
            <div><strong>7</strong> {t.home.metaLangs}</div>
            <div><strong>4.7</strong> {t.home.metaRating}</div>
          </div>
        </div>
      </section>

      <section>
        <div className="section-head">
          <div className="section-num">{t.home.portfolioNum}</div>
          <h2 className="section-title-h">{t.home.portfolioTitle}</h2>
          <div className="section-desc">{t.home.portfolioDesc}</div>
        </div>
        <div className="apps-grid">
          {apps.map((app, i) => <AppCard key={i} app={app} />)}
        </div>
      </section>

      {/* Featured Noctavia */}
      <div className="featured">
        <div className="featured-card">
          <div className="featured-content">
            <div className="featured-eyebrow">{t.home.featuredEyebrow}</div>
            <h2 className="featured-title">{t.home.featuredTitle1}<br/>{t.home.featuredTitle2}</h2>
            <p className="featured-text">
              {t.home.featuredText}
            </p>
            <div className="row-flex" style={{marginTop: 28}}>
              <Link to="/noctavia" className="btn btn-accent">{t.home.featuredCtaPrimary}</Link>
              <PlayButton appId="com.kolabs.noctavia" variant="ghost">{t.home.featuredCtaSecondary}</PlayButton>
            </div>
          </div>
          <div className="featured-mocks">
            <img src="assets/noctavia-1.png" alt="" />
            <img src="assets/noctavia-3.png" alt="" />
            <img src="assets/noctavia-5.png" alt="" />
          </div>
        </div>
      </div>

      {/* Manifesto */}
      <section id="manifesto">
        <div className="section-head">
          <div className="section-num">{t.home.manifestoNum}</div>
          <h2 className="section-title-h">{t.home.manifestoTitle}</h2>
          <div className="section-desc">{t.home.manifestoDesc}</div>
        </div>
        <div className="apps-grid" style={{marginBottom: 100}}>
          {t.home.principles.map((p, i) => (
            <div className="app-card" key={i}>
              <div className="app-card-head">
                <span style={{fontFamily:'var(--mono)', color:'var(--ink-muted)', fontSize:11, letterSpacing:'0.14em'}}>{p.num}</span>
                <span className="app-tag">{p.tag}</span>
              </div>
              <h3 className="app-name" style={{fontSize:28}}>{p.title}</h3>
              <p className="app-desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// 404
function NotFound() {
  const t = useT();
  return (
    <main>
      <div className="detail-wrap">
        <div className="crumbs"><Link to="/">kolabs</Link><span className="sep">/</span><span className="current">{t.notFound.crumb}</span></div>
        <h1 className="detail-h1">{t.notFound.h1}</h1>
        <p className="detail-h2">{t.notFound.h2}</p>
        <Link to="/" className="btn btn-primary">{t.notFound.cta}</Link>
      </div>
    </main>
  );
}

// Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "lime",
  "compactGrid": false
}/*EDITMODE-END*/;

function App() {
  const fullPath = usePathRoute();
  // Canonicalize to TR form for route matching (handles both /foo and /en/foo).
  const path = toTrCanonical(fullPath);

  // If the URL isn't canonical for its language (e.g. legacy `/en/sesli-yorum`
  // or `/en/kelime-bul`), silently rewrite to canonical without adding a
  // history entry. Old URLs keep working but search engines see the new ones.
  useEffectA(() => {
    const lang = langFromPath(fullPath);
    const canonical = pathForLang(fullPath, lang);
    if (canonical !== fullPath) {
      window.history.replaceState({}, '', canonical);
    }
  }, [fullPath]);
  // useTweaks returns [values, setTweak]; fall back to defaults if not loaded yet
  const hasTweaks = typeof window.useTweaks === 'function';
  const tweakResult = hasTweaks ? window.useTweaks(TWEAK_DEFAULTS) : null;
  const t = (tweakResult && tweakResult[0]) || TWEAK_DEFAULTS;
  const setTweak = (tweakResult && tweakResult[1]) || (() => {});

  // Apply theme
  useEffectA(() => {
    document.documentElement.setAttribute('data-theme', t.theme || 'dark');
    const accents = {
      lime:    { accent: '#b9ff3a', accent2: '#6aa6ff' },
      cyan:    { accent: '#5ee9d4', accent2: '#9b9bff' },
      orange:  { accent: '#ff9a4d', accent2: '#ff6b9d' },
      magenta: { accent: '#ff5cd0', accent2: '#9b9bff' },
    };
    const a = accents[t.accent] || accents.lime;
    document.documentElement.style.setProperty('--accent', a.accent);
    document.documentElement.style.setProperty('--accent-2', a.accent2);
  }, [t.theme, t.accent]);

  let page;
  if (path === '/' || path === '') page = <Home />;
  else if (path === '/noctavia') page = <NoctaviaHome />;
  else if (path === '/noctavia/sesli-yorum') page = <SesliYorum />;
  else if (path === '/noctavia/ruya-sozlugu' || path === '/noctavia/rüya-sözlüğü') page = <RuyaSozlugu />;
  else if (path === '/noctavia/tema-analizi') page = <TemaAnalizi />;
  else if (path === '/noctavia/premium') page = <Premium />;
  else if (path === '/noctavia/ruya-gunlugu' || path === '/noctavia/rüya-günlüğü') page = <RuyaGunlugu />;
  else if (path === '/zikirmatik') page = <Zikirmatik />;
  else if (path === '/ramazan' || path === '/ramazan-imsakiyesi') page = <RamazanImsakiyesi />;
  else if (path === '/kelime-bul') page = <KelimeBul />;
  else if (path === '/hesap-vakti') page = <HesapVakti />;
  else if (path === '/tasarrufcu') page = <Tasarrufcu />;
  else if (path === '/gizlilik' || path === '/privacy') page = <PrivacyPolicy />;
  else if (path === '/kullanim-sartlari' || path === '/terms') page = <TermsOfService />;
  else page = <NotFound />;

  // Update title + per-page hreflang + og:url canonical
  const tApp = useT();
  useEffectA(() => {
    document.title = `kolabs. — ${path === '/' ? tApp.home.title : path}`;
    // Dynamic per-page hreflang
    const origin = window.location.origin && window.location.origin.startsWith('http')
      ? window.location.origin : 'https://kolabs.tr';
    const trUrl = origin + window.pathForLang(fullPath, 'tr');
    const enUrl = origin + window.pathForLang(fullPath, 'en');
    const setAlt = (lang, url) => {
      let el = document.querySelector(`link[rel="alternate"][hreflang="${lang}"]`);
      if (!el) {
        el = document.createElement('link');
        el.setAttribute('rel', 'alternate');
        el.setAttribute('hreflang', lang);
        document.head.appendChild(el);
      }
      el.setAttribute('href', url);
    };
    setAlt('tr', trUrl);
    setAlt('en', enUrl);
    setAlt('x-default', trUrl);
    const ogUrl = document.querySelector('meta[property="og:url"]');
    if (ogUrl) ogUrl.setAttribute('content', origin + fullPath);
  }, [fullPath, path, tApp]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;

  return (
    <div data-screen-label={path === '/' ? 'home' : path}>
      <Nav current={path} />
      {page}
      <Footer />
      {hasTweaks && TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Görünüm">
            <TweakRadio label="Tema" value={t.theme} options={[{value:'dark',label:'Dark'},{value:'light',label:'Light'}]}
              onChange={(v)=>setTweak('theme', v)} />
            <TweakRadio label="Aksan rengi" value={t.accent}
              options={[{value:'lime',label:'Lime'},{value:'cyan',label:'Cyan'},{value:'orange',label:'Orange'},{value:'magenta',label:'Magenta'}]}
              onChange={(v)=>setTweak('accent', v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <LangProvider><App /></LangProvider>
);
setTimeout(() => {
  const sp = document.getElementById('splash');
  if (sp) sp.classList.add('hide');
  setTimeout(() => sp && sp.remove(), 500);
}, 600);