// ============ Ula Belediyesi — App + Tweaks ============

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentPalette": "gov-blue",
  "fontPair": "plex-source",
  "density": "default"
}/*EDITMODE-END*/;

// Kurumsal palet seçenekleri (devlet sitelerinden esinli)
const ACCENT_PALETTES = {
  'gov-blue':   { label: 'Devlet Mavisi', accent: '#1f4e8c', deep: '#0f2a52', soft: '#e3ebf5', soft2: '#f3f6fb' },
  'navy':       { label: 'Lacivert',      accent: '#1b3a6b', deep: '#0a1d3b', soft: '#dee5f0', soft2: '#f0f3f8' },
  'forest':     { label: 'Orman Yeşili',  accent: '#1e5a3c', deep: '#0e3823', soft: '#dce9e1', soft2: '#eef4f0' },
  'maroon':     { label: 'Bordo',         accent: '#7a2530', deep: '#4d1219', soft: '#ecdcdf', soft2: '#f5ecef' },
  'teal':       { label: 'Petrol',        accent: '#0e5a6e', deep: '#073945', soft: '#d9e7eb', soft2: '#eef4f6' }
};

const FONT_PAIRS = {
  'plex-source':       { sans:'IBM Plex Sans',  serif:'Source Serif 4',     label:'IBM Plex + Source Serif' },
  'inter-source':      { sans:'Inter',          serif:'Source Serif 4',     label:'Inter + Source Serif' },
  'figtree-merriweather': { sans:'Figtree',     serif:'Merriweather',       label:'Figtree + Merriweather' },
  'helvetica-georgia': { sans:'Helvetica Neue', serif:'Georgia',            label:'Helvetica + Georgia' }
};

// ============ Live content overlay (Cloudflare D1 via /api/state) ============
function fmtDate(iso, lng) {
  try {
    const d = new Date(iso + 'T00:00:00');
    const loc = lng === 'tr' ? 'tr-TR' : lng === 'de' ? 'de-DE' : 'en-GB';
    const s = new Intl.DateTimeFormat(loc, { day: 'numeric', month: 'long', year: 'numeric' }).format(d);
    return lng === 'tr' ? s.toLocaleUpperCase('tr-TR') : s.toUpperCase();
  } catch (e) { return iso || ''; }
}

// Overlay published CMS content onto the (hardcoded) I18N defaults, in place.
function applyCmsOverlay(state) {
  if (!state || !window.I18N) return;
  const I = window.I18N;
  const langs = ['tr', 'en', 'de'];
  const pub = (state.news || []).filter(n => n.status === 'published');

  langs.forEach(lng => {
    if (!I[lng]) return;
    if (pub.length && I[lng].news) {
      I[lng].news.items = pub.map(n => ({
        tag: n['tag_' + lng] || n.tag_tr || '',
        date: fmtDate(n.date, lng),
        title: n['title_' + lng] || n.title_tr || '',
        excerpt: n['excerpt_' + lng] || n.excerpt_tr || '',
        img: n.cover || n.img || ''
      }));
    }
    if (state.settings && I[lng].topbar) {
      if (state.settings.phone) I[lng].topbar.phone = state.settings.phone;
      const addr = state.settings['address_' + lng] || state.settings.address_tr;
      if (addr) I[lng].topbar.address = addr;
    }
    if (state.hero && state.hero[lng] && I[lng].hero) {
      const h = state.hero[lng];
      ['eyebrow', 'titleA', 'titleB', 'titleC'].forEach(k => { if (h[k] != null) I[lng].hero[k] = h[k]; });
    }
    if (state.hero && Array.isArray(state.hero.meta) && I[lng].hero && I[lng].hero.meta) {
      state.hero.meta.forEach((m, i) => { if (I[lng].hero.meta[i] && m.value != null) I[lng].hero.meta[i].value = m.value; });
    }
  });

  if (pub.length) {
    window.ULA_DUYURU = pub.map(n => ({
      cat: n.tag_tr || 'HABER',
      d: { tr: fmtDate(n.date, 'tr'), en: fmtDate(n.date, 'en'), de: fmtDate(n.date, 'de') },
      t: { tr: n.title_tr || '', en: n.title_en || n.title_tr || '', de: n.title_de || n.title_tr || '' }
    }));
  }
}

function App() {
  const [route, setRoute] = useStateA(() => window.location.hash.replace('#','') || 'home');
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Pull live CMS content once; overlay onto defaults and re-render.
  useEffectA(() => {
    let alive = true;
    fetch('/api/state', { headers: { accept: 'application/json' } })
      .then(r => (r.ok ? r.json() : null))
      .then(j => {
        if (!alive || !j || !j.state) return;
        applyCmsOverlay(j.state);
        if (typeof LangStore !== 'undefined') LangStore.set(LangStore.get()); // notify subscribers
      })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  useEffectA(() => {
    window.location.hash = route;
    window.scrollTo({ top: 0, behavior: 'instant' });
    const t = setTimeout(() => window.initReveals && window.initReveals(), 80);
    return () => clearTimeout(t);
  }, [route]);

  useEffectA(() => {
    const onHash = () => setRoute(window.location.hash.replace('#','') || 'home');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Apply tweaks
  useEffectA(() => {
    const root = document.documentElement;
    const p = ACCENT_PALETTES[tweaks.accentPalette] || ACCENT_PALETTES['gov-blue'];
    root.style.setProperty('--gov-500', p.accent);
    root.style.setProperty('--gov-700', p.deep);
    root.style.setProperty('--gov-100', p.soft);
    root.style.setProperty('--gov-50', p.soft2);
    root.style.setProperty('--accent', p.accent);
    root.style.setProperty('--accent-deep', p.deep);
    root.style.setProperty('--accent-soft', p.soft);
    const pair = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS['plex-source'];
    root.style.setProperty('--sans', `'${pair.sans}', 'Helvetica Neue', Arial, sans-serif`);
    root.style.setProperty('--serif', `'${pair.serif}', Georgia, serif`);
    document.body.dataset.density = tweaks.density;
  }, [tweaks]);

  let page;
  if (route === 'home') page = <HomePage setRoute={setRoute} />;
  else if (route === 'services') page = <ServicesPage setRoute={setRoute} />;
  else if (route === 'discover') page = <DiscoverPage setRoute={setRoute} />;
  else if (route === 'mayor') page = <MayorPage setRoute={setRoute} />;
  else if (route === 'news') page = <NewsPage setRoute={setRoute} />;
  else if (route === 'contact') page = <ContactPage setRoute={setRoute} />;
  else if (route === 'events') page = <EventsPage setRoute={setRoute} />;
  else if (route === 'council') page = <CouncilPage setRoute={setRoute} />;
  // Kurumsal
  else if (route === 'baskan') page = <BaskanPage setRoute={setRoute} />;
  else if (route === 'baskan-mesaj') page = <BaskanMesajPage setRoute={setRoute} />;
  else if (route === 'meclis-uyeleri') page = <MeclisUyeleriPage setRoute={setRoute} />;
  else if (route === 'organizasyon') page = <OrganizasyonPage setRoute={setRoute} />;
  else if (route === 'yonergeler') page = <YonergelerPage setRoute={setRoute} />;
  else if (route === 'faaliyet') page = <FaaliyetPage setRoute={setRoute} />;
  else if (route === 'ic-kontrol') page = <IcKontrolPage setRoute={setRoute} />;
  else if (route === 'mali-tablolar') page = <MaliTablolarPage setRoute={setRoute} />;
  else if (route === 'etik') page = <EtikPage setRoute={setRoute} />;
  else if (route === 'muhtarliklar') page = <MuhtarliklarPage setRoute={setRoute} />;
  else if (route === 'tarihce') page = <TarihcePage setRoute={setRoute} />;
  // Hizmetler & diğer
  else if (route === 'nikah') page = <NikahPage setRoute={setRoute} />;
  else if (route === 'ruhsat') page = <RuhsatPage setRoute={setRoute} />;
  else if (route === 'tarife') page = <TarifePage setRoute={setRoute} />;
  else if (route === 'duyurular') page = <DuyurularPage setRoute={setRoute} />;
  else if (route.startsWith('place/')) page = <DetailPage slug={route.split('/')[1]} setRoute={setRoute} />;
  else page = <HomePage setRoute={setRoute} />;

  return (
    <>
      <a href="#main" className="skip-link">İçeriğe atla</a>
      <GovStrip />
      <TopBar />
      <Nav route={route} setRoute={setRoute} />
      <div id="main" key={route} className="fade-up">{page}</div>
      <Footer />
      <UlaTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function UlaTweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakSelect, TweakRadio } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Kurumsal renk">
        <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
          {Object.entries(ACCENT_PALETTES).map(([k,p]) => (
            <button
              key={k}
              onClick={()=>setTweak('accentPalette', k)}
              title={p.label}
              style={{
                padding: 0,
                width: 56,
                height: 56,
                border: tweaks.accentPalette === k ? '2px solid #0a1224' : '1px solid #ddd',
                borderRadius: 2,
                background: p.accent,
                color: 'white',
                fontSize: 10,
                fontWeight: 600,
                cursor: 'pointer',
                display: 'grid',
                placeItems: 'end center',
                paddingBottom: 4
              }}>{p.label.split(' ')[0]}</button>
          ))}
        </div>
      </TweakSection>
      <TweakSection title="Tipografi">
        <TweakSelect label="Yazı tipi çifti" value={tweaks.fontPair}
          options={Object.entries(FONT_PAIRS).map(([k,v]) => ({value:k, label:v.label}))}
          onChange={v=>setTweak('fontPair', v)} />
      </TweakSection>
      <TweakSection title="Yoğunluk">
        <TweakRadio value={tweaks.density}
          options={[{value:'compact',label:'Sıkı'},{value:'default',label:'Standart'},{value:'spacious',label:'Geniş'}]}
          onChange={v=>setTweak('density', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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