// Main App — routing, tweaks state, SEO/JSON-LD injection

const { useState: useStateApp, useEffect: useEffectApp } = React;

// TWEAK_DEFAULTS lives in the root HTML (inline EDITMODE block) — read from window
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {
  accent: "warm-gold",
  fontPair: "cormorant-inter",
  heroLayout: "centered",
  mode: "light",
  cardStyle: "tall"
};

const ACCENTS = {
  "warm-gold": { accent: "#8a6d3b", accent2: "#c9a876", gold: "#b8954a" },
  "olive": { accent: "#5a6b3a", accent2: "#a8b88a", gold: "#7a8a4a" },
  "deep-bronze": { accent: "#6b3f1f", accent2: "#b88a5a", gold: "#8a5a2a" },
  "cordoba-red": { accent: "#7a3a2a", accent2: "#c98a6a", gold: "#9a4a3a" }
};

const FONT_PAIRS = {
  "cormorant-inter": { serif: '"Cormorant Garamond", Georgia, serif', sans: '"Inter", system-ui, sans-serif' },
  "playfair-lato": { serif: '"Playfair Display", Georgia, serif', sans: '"Lato", system-ui, sans-serif' },
  "ebgaramond-montserrat": { serif: '"EB Garamond", Georgia, serif', sans: '"Montserrat", system-ui, sans-serif' }
};

function App() {
  const [tweaks, setTweaksState] = useStateApp(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateApp(() => {
    try {
      const stored = localStorage.getItem('ce_lang');
      if (stored && window.I18N && window.I18N[stored]) return stored;
    } catch (e) {}
    return 'de';
  });
  const [route, setRoute] = useStateApp('home');
  const [activeHorse, setActiveHorse] = useStateApp(null);
  const [activeBreed, setActiveBreed] = useStateApp(null);
  const [prefillHorse, setPrefillHorse] = useStateApp(null);
  const [breedPreset, setBreedPreset] = useStateApp(null);

  const t = window.I18N[lang];

  // Persist language across pages
  useEffectApp(() => {
    try { localStorage.setItem('ce_lang', lang); } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);

  // Hash routing: #breed/<id>
  useEffectApp(() => {
    const parseHash = () => {
      const h = (location.hash || '').replace(/^#/, '');
      if (h.startsWith('breed/')) {
        const id = h.slice(6);
        const b = (window.BREEDS || []).find(x => x.id === id);
        if (b) {
          setActiveBreed(b);
          setRoute('breed');
          window.scrollTo({ top: 0, behavior: 'instant' });
          return;
        }
      }
      if (route === 'breed') {
        setRoute('home');
        setActiveBreed(null);
      }
    };
    parseHash();
    window.addEventListener('hashchange', parseHash);
    return () => window.removeEventListener('hashchange', parseHash);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Apply tweaks to CSS vars
  useEffectApp(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS["warm-gold"];
    root.style.setProperty('--ce-accent', a.accent);
    root.style.setProperty('--ce-accent-2', a.accent2);
    root.style.setProperty('--ce-gold', a.gold);
    const f = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS["cormorant-inter"];
    root.style.setProperty('--serif', f.serif);
    root.style.setProperty('--sans', f.sans);
    root.setAttribute('data-mode', tweaks.mode);
  }, [tweaks]);

  const setTweak = (k, v) => {
    const next = typeof k === 'object' ? { ...tweaks, ...k } : { ...tweaks, [k]: v };
    setTweaksState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: typeof k === 'object' ? k : { [k]: v } }, '*');
  };

  // Tweak protocol
  useEffectApp(() => {
    const [editMode, setEditMode] = [{ value: false }, () => {}];
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') window.__setTweaksOpen?.(true);
      if (e.data?.type === '__deactivate_edit_mode') window.__setTweaksOpen?.(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const goTo = (anchor) => {
    if (route !== 'home') {
      setRoute('home');
      setTimeout(() => {
        const el = document.getElementById(anchor);
        if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
      }, 100);
    } else {
      const el = document.getElementById(anchor);
      if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
    }
  };

  const openHorse = (h) => {
    setActiveHorse(h);
    setRoute('detail');
    window.scrollTo({ top: 0, behavior: 'instant' });
    if (window.ceTrack) window.ceTrack('view_horse', { horse_id: h.id, horse_name: h.name, breed: h.breed });
  };

  const openBreed = (b) => {
    setActiveBreed(b);
    setRoute('breed');
    history.pushState(null, '', `#breed/${b.id}`);
    window.scrollTo({ top: 0, behavior: 'instant' });
    if (window.ceTrack) window.ceTrack('view_breed', { breed_id: b.id, breed_name: b.short });
  };

  const goBackBreed = () => {
    setActiveBreed(null);
    setRoute('home');
    history.pushState(null, '', location.pathname);
    setTimeout(() => goTo('breeds'), 50);
  };

  const goBack = () => { setRoute('home'); setActiveHorse(null); setTimeout(() => goTo('horses'), 50); };

  const goToContact = () => {
    if (activeHorse) setPrefillHorse(activeHorse);
    setRoute('home');
    setTimeout(() => goTo('contact'), 100);
  };

  // Make FAQ data globally accessible (alias since "FAQ" component conflicts)
  window.FAQ_DATA = window.FAQ;

  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} route={route} setRoute={setRoute} />

      {route === 'home' && (
        <>
          <Hero t={t} layout={tweaks.heroLayout} accent={tweaks.accent} goTo={goTo} />
          <About t={t} />
          <Process t={t} />
          <HorsesSection t={t} lang={lang} cardStyle={tweaks.cardStyle} openHorse={openHorse} breedPreset={breedPreset} />
          <window.BreedsSection t={t} lang={lang} openHorse={openHorse} goTo={goTo} setBreedFilter={setBreedPreset} openBreed={openBreed} />
          <Trust t={t} goTo={goTo} />
          <Reviews t={t} />
          <Journal t={t} />
          <FAQSection t={t} />
          <ContactForm t={t} lang={lang} prefillHorse={prefillHorse} />
        </>
      )}

      {route === 'detail' && activeHorse && (
        <HorseDetail horse={activeHorse} t={t} lang={lang} onBack={goBack} goToContact={goToContact} />
      )}

      {route === 'breed' && activeBreed && (
        <window.BreedDetail breed={activeBreed} t={t} lang={lang} onBack={goBackBreed} openHorse={openHorse} goTo={goTo} setBreedFilter={setBreedPreset} />
      )}

      <Footer t={t} lang={lang} setLang={setLang} />

      <a href="https://wa.me/34722340308" target="_blank" className="ce-wa" title="WhatsApp"
         onClick={() => window.ceTrack && window.ceTrack('whatsapp_click', { source: 'float_button' })}>✆</a>

      <window.CookieBanner lang={lang} />

      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

// FAQ section (renamed to avoid collision)
function FAQSection({ t }) {
  const [open, setOpen] = useStateApp(0);
  const [cat, setCat] = useStateApp('all');
  const all = window.FAQ;
  const cats = [
    { id: 'all', label: t.faq.catAll },
    { id: 'kauf', label: t.faq.catKauf },
    { id: 'transport', label: t.faq.catTransport },
    { id: 'rassen', label: t.faq.catRassen },
    { id: 'preise', label: t.faq.catPreise },
    { id: 'gesundheit', label: t.faq.catGesundheit },
    { id: 'service', label: t.faq.catService }
  ];
  const counts = cats.reduce((acc, c) => {
    acc[c.id] = c.id === 'all' ? all.length : all.filter(f => f.cat === c.id).length;
    return acc;
  }, {});
  const filtered = cat === 'all' ? all : all.filter(f => f.cat === cat);
  return (
    <section id="faq" className="ce-faq">
      <div className="ce-section-head">
        <div className="ce-eyebrow">{t.faq.eyebrow}</div>
        <h2 className="ce-h2">{t.faq.title}</h2>
        <p className="ce-section-sub">{t.faq.sub}</p>
      </div>
      <div className="ce-faq-tabs" role="tablist">
        {cats.map(c => (
          <button
            key={c.id}
            type="button"
            role="tab"
            aria-selected={cat === c.id}
            className={`ce-faq-tab ${cat === c.id ? 'is-active' : ''}`}
            onClick={() => { setCat(c.id); setOpen(-1); }}
          >
            <span>{c.label}</span>
            <span className="ce-faq-tab-count">{counts[c.id]}</span>
          </button>
        ))}
      </div>
      <div className="ce-faq-list" itemScope itemType="https://schema.org/FAQPage">
        {filtered.map((f, i) => {
          const isOpen = open === i;
          return (
            <div
              key={i}
              className={`ce-faq-item ${isOpen ? 'is-open' : ''}`}
              itemScope
              itemProp="mainEntity"
              itemType="https://schema.org/Question"
            >
              <button
                type="button"
                className="ce-faq-q"
                onClick={() => setOpen(isOpen ? -1 : i)}
                aria-expanded={isOpen}
                aria-controls={`faq-a-${i}`}
              >
                <span className="ce-faq-q-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="ce-faq-q-text" itemProp="name">{f.q}</span>
                <span className="ce-faq-q-icon" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M6 9l6 6 6-6"/>
                  </svg>
                </span>
              </button>
              <div
                id={`faq-a-${i}`}
                className="ce-faq-a-wrap"
                itemScope
                itemProp="acceptedAnswer"
                itemType="https://schema.org/Answer"
                hidden={!isOpen}
              >
                <div className="ce-faq-a">
                  <p itemProp="text" dangerouslySetInnerHTML={{ __html: f.a }}></p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Tweaks UI — uses TweaksPanel starter
function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Erscheinungsbild">
        <TweakRadio label="Modus" value={tweaks.mode} options={[{value:"light",label:"Hell"},{value:"dark",label:"Dunkel"}]} onChange={v => setTweak('mode', v)} />
        <TweakSelect label="Akzentfarbe" value={tweaks.accent}
          options={[
            {value:"warm-gold",label:"Warm Gold (Standard)"},
            {value:"olive",label:"Olive"},
            {value:"deep-bronze",label:"Tiefes Bronze"},
            {value:"cordoba-red",label:"Córdoba Rot"}
          ]} onChange={v => setTweak('accent', v)} />
        <TweakSelect label="Schrift-Pairing" value={tweaks.fontPair}
          options={[
            {value:"cormorant-inter",label:"Cormorant + Inter"},
            {value:"playfair-lato",label:"Playfair + Lato"},
            {value:"ebgaramond-montserrat",label:"EB Garamond + Montserrat"}
          ]} onChange={v => setTweak('fontPair', v)} />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio label="Hero" value={tweaks.heroLayout}
          options={[{value:"centered",label:"Mittig"},{value:"split",label:"Geteilt"},{value:"minimal",label:"Minimal"}]}
          onChange={v => setTweak('heroLayout', v)} />
        <TweakRadio label="Pferde-Karten" value={tweaks.cardStyle}
          options={[{value:"tall",label:"Hoch"},{value:"minimal",label:"Minimal"},{value:"wide",label:"Breit"}]}
          onChange={v => setTweak('cardStyle', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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