// App.jsx — Top-level shell: view router + quiz modal + event modal + city state + tweaks.

const TG_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EA21A2",
  "heroGradient": "01",
  "showTicker": true
}/*EDITMODE-END*/;

function App() {
  const [view, setView] = React.useState("home");
  const [city, setCity] = React.useState("mumbai");
  const [openCityPicker, setOpenCityPicker] = React.useState(false);
  const [quiz, setQuiz] = React.useState(false);
  const [activeEvent, setActiveEvent] = React.useState(null);
  const [archetype, setArchetype] = React.useState(null); // saved after quiz completion

  // Tweaks (returns [values, setter])
  const [tweaks, setTweak] = useTweaks(TG_TWEAK_DEFAULTS);

  // accent override
  React.useEffect(() => {
    document.documentElement.style.setProperty("--tg-magenta", tweaks.accent);
  }, [tweaks.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--ticker-display", tweaks.showTicker ? "block" : "none");
    const tk = document.querySelector(".tg-hero__ticker");
    if (tk) tk.style.display = tweaks.showTicker ? "block" : "none";
  }, [tweaks.showTicker]);

  // Scroll to top on view change
  React.useEffect(() => {
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  }, [view, quiz]);

  function openEvent(e) { setActiveEvent(e); }
  function closeEvent() { setActiveEvent(null); }

  function onQuizComplete(archetypeId, profile) {
    setArchetype(archetypeId);
    if (profile && profile.city) setCity(profile.city);
  }

  // hero gradient map
  const heroBg = `assets/gradients/gradient-${tweaks.heroGradient || "01"}.jpg`;

  return (
    <React.Fragment>
      {!quiz && (
        <React.Fragment>
          <TgNav
            view={view}
            setView={setView}
            city={city}
            setCity={setCity}
            onOpenQuiz={() => setQuiz(true)}
            openCityPicker={openCityPicker}
            setOpenCityPicker={setOpenCityPicker}
          />

          {view === "home" && (
            <TgHome
              setView={setView}
              onOpenQuiz={() => setQuiz(true)}
              city={city}
              setCity={setCity}
              setOpenCityPicker={setOpenCityPicker}
              openEvent={openEvent}
              heroBg={heroBg}
              showTicker={tweaks.showTicker}
            />
          )}
          {view === "about" && (
            <TgAbout setView={setView} onOpenQuiz={() => setQuiz(true)} />
          )}
          {view === "events" && (
            <TgEvents city={city} setCity={setCity} setOpenCityPicker={setOpenCityPicker} openEvent={openEvent} />
          )}
          {view === "community" && (
            <TgCommunity setView={setView} />
          )}
          {view === "merch" && (
            <TgMerch setView={setView} onOpenQuiz={() => setQuiz(true)} archetype={archetype} />
          )}

          <TgFooter setView={setView} onOpenQuiz={() => setQuiz(true)} />

          {activeEvent && <TgEventModal event={activeEvent} onClose={closeEvent} />}
        </React.Fragment>
      )}

      {quiz && (
        <TgQuiz
          onClose={() => setQuiz(false)}
          onComplete={onQuizComplete}
          onSeeEvent={(e) => { setQuiz(false); setView("events"); setActiveEvent(e); }}
          onSeeMerch={() => { setQuiz(false); setView("merch"); }}
          setView={setView}
          city={city}
        />
      )}

      {/* TWEAKS PANEL */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand accent">
          <TweakColor
            label="Primary pop"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#EA21A2", "#EF512C", "#FFA161", "#F3C8F3"]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakSelect
            label="Gradient"
            value={tweaks.heroGradient}
            onChange={(v) => setTweak("heroGradient", v)}
            options={[
              { value: "01", label: "Sunset (magenta → cream)" },
              { value: "02", label: "Bubblegum (rose → cream)" },
              { value: "04", label: "Dawn (lilac → peach)" },
              { value: "05", label: "Flare (orange → magenta)" },
              { value: "07", label: "Heat (red → pink)" },
            ]}
          />
          <TweakToggle label="Show marquee ticker" value={tweaks.showTicker} onChange={(v) => setTweak("showTicker", v)} />
        </TweakSection>
        <TweakSection title="Quick links">
          <TweakButton label="Open quiz" onClick={() => setQuiz(true)} />
          <TweakButton label="Reset archetype" onClick={() => setArchetype(null)} secondary={true} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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