/* Caballo Natural – Root app + simple hash-router + Tweaks */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Logo Teal & Sand",
  "typo": "Cormorant + Manrope",
  "density": "luftig",
  "megaTrigger": "hover",
  "headerLayout": "klassisch"
}/*EDITMODE-END*/;

const PALETTES = {
  "Logo Teal & Sand": {
    "--bg": "#F4EFE4", "--bg-deep": "#E6DECA", "--bg-paper": "#FBF7EC",
    "--green-deep": "#2A6A60", "--green": "#3C827A", "--green-mid": "#5DA095",
    "--green-soft": "#B5D2CC", "--green-tint": "#DAE9E5",
    "--gold": "#B98A3C", "--gold-soft": "#E5C98C", "--gold-tint": "#F1E4C4",
    "--line": "#D6D0BC", "--line-soft": "#E8E1CE",
  },
  "Klinisch hell": {
    "--bg": "#FAFAF7", "--bg-deep": "#F0EFE9", "--bg-paper": "#FFFFFF",
    "--green-deep": "#1F3A2B", "--green": "#3D5A40", "--green-mid": "#638265",
    "--green-soft": "#D2DDC6", "--green-tint": "#EDF2E5",
    "--gold": "#967D43", "--gold-soft": "#D9C589", "--gold-tint": "#EFE6C9",
    "--line": "#E5E3D9", "--line-soft": "#EFEEE6",
  },
  "Magazin warm": {
    "--bg": "#F1EAD8", "--bg-deep": "#E2D7BA", "--bg-paper": "#F9F2DF",
    "--green-deep": "#3B442E", "--green": "#566249", "--green-mid": "#7E8A6C",
    "--green-soft": "#BFC8A8", "--green-tint": "#DDE3CB",
    "--gold": "#A85C2C", "--gold-soft": "#D89968", "--gold-tint": "#EAC591",
    "--line": "#D4C9AA", "--line-soft": "#E5DCBE",
  },
};

const TYPO = {
  "Cormorant + Manrope": {
    families: ["Cormorant+Garamond:wght@400;500;600", "Manrope:wght@400;500;600;700"],
    display: '"Cormorant Garamond", "Cormorant", Georgia, serif',
    body: '"Manrope", "Inter", system-ui, sans-serif',
  },
  "Playfair + Work Sans": {
    families: ["Playfair+Display:wght@400;500;600;700&italic", "Work+Sans:wght@400;500;600;700"],
    display: '"Playfair Display", Georgia, serif',
    body: '"Work Sans", system-ui, sans-serif',
  },
  "Libre Caslon + DM Sans": {
    families: ["Libre+Caslon+Text:wght@400;700&italic", "DM+Sans:wght@400;500;700"],
    display: '"Libre Caslon Text", Georgia, serif',
    body: '"DM Sans", system-ui, sans-serif',
  },
};

function applyTweaks(t) {
  const palette = PALETTES[t.palette] || PALETTES["Salbei & Sand"];
  for (const [k, v] of Object.entries(palette)) {
    document.documentElement.style.setProperty(k, v);
  }
  const typo = TYPO[t.typo] || TYPO["Cormorant + Manrope"];
  document.documentElement.style.setProperty("--ff-display", typo.display);
  document.documentElement.style.setProperty("--ff-body", typo.body);

  // ensure fonts loaded
  const linkId = "cn-fonts-" + t.typo.replace(/\W/g, "");
  if (!document.getElementById(linkId)) {
    const l = document.createElement("link");
    l.id = linkId;
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?" + typo.families.map(f => "family=" + f).join("&") + "&display=swap";
    document.head.appendChild(l);
  }

  // density
  document.documentElement.classList.toggle("density-compact", t.density === "kompakt");
}

const App = () => {
  const [ready, setReady] = useStateA(false);
  const [route, setRoute] = useStateA({ name: "home", param: null });
  const [quizState, setQuizState] = useStateA(null); // { categorySlug?, symptom? } or null
  const [tweaks, setTweaks] = useStateA(TWEAK_DEFAULTS);

  // Apply tweaks initially + on change
  useEffectA(() => { applyTweaks(tweaks); }, [tweaks]);

  // Setup tweaks panel hook – returns [values, setTweak]
  const tweakHook = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : null;
  const tweakValues = tweakHook ? tweakHook[0] : TWEAK_DEFAULTS;
  const setTweak = tweakHook ? tweakHook[1] : (() => {});
  useEffectA(() => { setTweaks(tweakValues); }, [tweakValues]);

  // Load data
  useEffectA(() => {
    window.__CN.ready.then(() => setReady(true));
  }, []);

  // Hash routing
  useEffectA(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#\/?/, "");
      const parts = h.split("/");
      const name = parts[0] || "home";
      const param = parts[1] || null;
      setRoute({ name, param });
      window.scrollTo(0, 0);
    };
    onHash();
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const onNav = (name, param) => {
    const url = "#/" + name + (param ? "/" + param : "");
    if (window.location.hash !== url) window.location.hash = url;
    else { setRoute({ name, param }); window.scrollTo(0, 0); }
  };

  const openQuiz = (categorySlug, symptom) => {
    setQuizState({ categorySlug: categorySlug || null, symptom: symptom || null });
  };
  const closeQuiz = () => setQuizState(null);

  // Auto-open quiz when route is /quiz (must be before early return)
  useEffectA(() => {
    if (route.name === "quiz" && !quizState) {
      setQuizState({ categorySlug: null, symptom: null });
    }
  }, [route.name]);

  if (!ready) {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 16, color: "var(--green-deep)", fontFamily: "var(--ff-display)" }}>
        <div style={{ width: 48, height: 48, border: "2px solid var(--green-soft)", borderTop: "2px solid var(--green-deep)", borderRadius: "50%", animation: "spin 1s linear infinite" }}/>
        <div style={{ fontStyle: "italic", fontSize: 24 }}>Caballo Natural lädt …</div>
        <style>{`@keyframes spin { to { transform: rotate(360deg) }}`}</style>
      </div>
    );
  }

  let view;
  switch (route.name) {
    case "home": view = <Home onNav={onNav} openQuiz={() => openQuiz()} />; break;
    case "category": view = <CategoryView slug={route.param} onNav={onNav} openQuiz={openQuiz} />; break;
    case "products": view = <ProductsView onNav={onNav} openQuiz={() => openQuiz()} />; break;
    case "wholesale": view = <WholesaleView onNav={onNav} />; break;
    case "wholesale-shop": view = <ProductsView onNav={onNav} openQuiz={() => openQuiz()} wholesale={true} />; break;
    case "wholesale-quiz": view = <WholesaleQuiz onNav={onNav} />; break;
    case "consultation": view = <ConsultationView onNav={onNav} />; break;
    case "consultation-quiz": view = <ConsultationQuiz initialPlan={route.param} onNav={onNav} />; break;
    case "about": view = <AboutView onNav={onNav} openQuiz={() => openQuiz()} />; break;
    case "philosophy": view = <AboutView onNav={onNav} openQuiz={() => openQuiz()} />; break;
    case "herbs": view = <HerbsView onNav={onNav}/>; break;
    case "herb": view = <HerbDetailView slug={route.param} onNav={onNav}/>; break;
    case "glossary": view = <GlossaryView onNav={onNav}/>; break;
    case "symptoms-guide": view = <SymptomsGuideView onNav={onNav}/>; break;
    case "blog": view = <BlogView onNav={onNav} />; break;
    case "contact": view = <ContactView />; break;
    case "faq": view = <FAQView />; break;
    case "imprint": view = <ImprintView />; break;
    case "privacy": view = <PrivacyView />; break;
    case "quiz": view = (<Home onNav={onNav} openQuiz={() => openQuiz()} />); break;
    default: view = <Home onNav={onNav} openQuiz={() => openQuiz()} />;
  }

  return (
    <>
      <Header
        route={route}
        onNav={onNav}
        openQuiz={() => openQuiz()}
        megaTrigger={tweaks.megaTrigger}
        layout={tweaks.headerLayout}
      />
      <main>{view}</main>
      <Footer onNav={onNav} />
      {quizState && <QuizModal initialCategorySlug={quizState.categorySlug} initialSymptom={quizState.symptom} onClose={closeQuiz} onNav={onNav} />}

      {/* Tweaks Panel */}
      {window.TweaksPanel && tweakHook && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Farbpalette">
            <TweakRadio
              label="Stimmung"
              value={tweakValues.palette}
              options={["Logo Teal & Sand", "Klinisch hell", "Magazin warm"]}
              onChange={(v) => setTweak("palette", v)}
            />
          </TweakSection>
          <TweakSection label="Typografie">
            <TweakSelect
              label="Schrift-Pairing"
              value={tweakValues.typo}
              options={Object.keys(TYPO)}
              onChange={(v) => setTweak("typo", v)}
            />
          </TweakSection>
          <TweakSection label="Header">
            <TweakRadio
              label="Layout"
              value={tweakValues.headerLayout}
              options={["klassisch", "zentriert"]}
              onChange={(v) => setTweak("headerLayout", v)}
            />
            <TweakRadio
              label="Mega-Menü"
              value={tweakValues.megaTrigger}
              options={["hover", "click"]}
              onChange={(v) => setTweak("megaTrigger", v)}
            />
          </TweakSection>
          <TweakSection label="Dichte">
            <TweakRadio
              label="Abstände"
              value={tweakValues.density}
              options={["luftig", "kompakt"]}
              onChange={(v) => setTweak("density", v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
};

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