/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor */
const { useState, useEffect } = React;

const PALETTES = {
  forest: { '--green': '#2f4a3a', '--green-deep': '#1f3225', '--gold': '#a8895a', '--gold-warm': '#d4b170', '--paper': '#f7f2e8', '--paper-warm': '#efe7d4', '--paper-deep': '#e6dbc2', '--ink': '#1a1a14', '--ink-soft': '#5b574c', '--line': '#d8cfb9' },
  oxblood: { '--green': '#7a2e2a', '--green-deep': '#5a1e1a', '--gold': '#b08c54', '--gold-warm': '#e0bd80', '--paper': '#faf3e6', '--paper-warm': '#f1e6cf', '--paper-deep': '#e8d9ba', '--ink': '#1c1410', '--ink-soft': '#5e524a', '--line': '#dccfb1' },
  navy:    { '--green': '#1f3a5f', '--green-deep': '#142640', '--gold': '#a8895a', '--gold-warm': '#d4b170', '--paper': '#f6f1e6', '--paper-warm': '#ece5d2', '--paper-deep': '#dfd5be', '--ink': '#13181e', '--ink-soft': '#525a66', '--line': '#d4cab4' },
};

function App() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "forest",
    "heroMode": "slideshow",
    "showCountdown": true,
    "stickyCta": true,
    "serif": "Cormorant Garamond"
  }/*EDITMODE-END*/);

  // CMS-Inhalte aus Supabase laden (Admin-Bereich: admin.html)
  const [news, setNews] = useState(null);
  const [events, setEvents] = useState(null);
  useEffect(() => {
    // News laden
    window._sb.from('news').select('*').order('created_at', { ascending: false })
      .then(({ data }) => {
        if (data && data.length) {
          // Spaltenname is_lead → lead (erwartet von sections.jsx)
          setNews(data.map(n => ({ ...n, lead: n.is_lead })));
        }
      }).catch(() => {});

    // Events laden
    window._sb.from('events').select('*').order('date', { ascending: true })
      .then(({ data }) => {
        if (!data || !data.length) return;
        // Spalten mappen: description → desc, is_primary → primary
        const items = data.map(e => ({ ...e, desc: e.description, primary: e.is_primary }));
        const today = new Date(); today.setHours(0, 0, 0, 0);
        const upcoming = items.filter(e => new Date(e.date) >= today);
        setEvents(upcoming.length ? upcoming : items);
      }).catch(() => {});
  }, []);

  // Apply palette
  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.forest;
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.palette]);

  // Apply serif
  useEffect(() => {
    document.documentElement.style.setProperty('--serif', `'${tweaks.serif}', 'Cormorant Garamond', Georgia, serif`);
  }, [tweaks.serif]);

  return (
    <>
      <Header sticky={tweaks.stickyCta} />
      <main>
        <Hero heroMode={tweaks.heroMode} />
        <About />
        <Founders />
        <Kiepe showCountdown={tweaks.showCountdown} />
        <Ausbildung />
        <Calendar events={events} />
        <News news={news} />
        <Membership />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks · HOGA-MS">
        <TweakSection title="Farbwelt">
          <TweakRadio label="Palette" value={tweaks.palette} onChange={v => setTweak('palette', v)}
            options={[['forest','Wald-Gold'],['oxblood','Ochsenblut'],['navy','Marine-Gold']]} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio label="Hintergrund" value={tweaks.heroMode} onChange={v => setTweak('heroMode', v)}
            options={[['slideshow','Slideshow'],['still','Standbild']]} />
        </TweakSection>
        <TweakSection title="Silberne Kiepe">
          <TweakToggle label="Countdown anzeigen" value={tweaks.showCountdown} onChange={v => setTweak('showCountdown', v)} />
        </TweakSection>
        <TweakSection title="Navigation">
          <TweakToggle label="Sticky-CTA oben rechts" value={tweaks.stickyCta} onChange={v => setTweak('stickyCta', v)} />
        </TweakSection>
        <TweakSection title="Typografie">
          <TweakRadio label="Headline-Serif" value={tweaks.serif} onChange={v => setTweak('serif', v)}
            options={[['Cormorant Garamond','Cormorant'],['Playfair Display','Playfair'],['EB Garamond','Garamond']]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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