// EUMORPH — app router

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "day",
  "arrival": "cold",
  "memberView": "guest"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home");
  const [routeParams, setRouteParams] = useState({});
  const [bag, setBag] = useState([]);
  const [arrivalDismissed, setArrivalDismissed] = useState(false);
  const cecileInputRef = useRef(null);

  // Apply theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme-v2", tweaks.theme);
  }, [tweaks.theme]);

  // Reset arrival dismissed when state changes
  useEffect(() => { setArrivalDismissed(false); }, [tweaks.arrival]);

  const go = (r, params = {}) => {
    // Aliases — keep callers honest, normalize at the router
    const ALIASES = {
      "membership": "the-circle",
      "circle": "the-circle",
      "pro": "the-circle",        // pro tier lives inside The Circle
      "account": "the-file",       // account is The File
    };
    const dest = ALIASES[r] || r;
    setRoute(dest);
    setRouteParams(params);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const onTalkCecile = () => {
    // Cécile lives in the floating popover; open it directly so the
    // user can chat from any route without a page-scroll detour.
    if (window.__openCecile) {
      window.__openCecile();
      return;
    }
    // Fallback: if the popover hasn't mounted yet (e.g. another route),
    // hop home, then open it once it's there.
    go("home");
    setTimeout(() => { window.__openCecile && window.__openCecile(); }, 200);
  };

  const addToBag = (p) => {
    setBag(b => {
      const ex = b.find(x => x.id === p.id);
      if (ex) return b.map(x => x.id === p.id ? { ...x, qty: x.qty + 1 } : x);
      return [...b, { id: p.id, qty: 1 }];
    });
  };

  const bagCount = bag.reduce((s, x) => s + x.qty, 0);

  // Arrival
  const arrival = useMemo(() => {
    if (tweaks.arrival === "warm") return { kind: "warm", via: "Claude", time: "47s ago", query: "smoky vanilla, but quieter" };
    if (tweaks.arrival === "agent") return { kind: "agent", via: "agent.k18-research", query: "structured catalog · 12 SKUs · provenance + INCI" };
    return { kind: "cold" };
  }, [tweaks.arrival]);

  // Warm arrival should *do something*: seed Cécile with the query
  // ~1.4s after the page settles, so the user lands and then the
  // conversation opens already pointed at what they asked for.
  useEffect(() => {
    if (tweaks.arrival !== "warm") return;
    const t = setTimeout(() => {
      if (window.__openCecile) window.__openCecile("smoky vanilla, but quieter");
    }, 1400);
    return () => clearTimeout(t);
  }, [tweaks.arrival]);

  return (
    <>
      <ArrivalRibbon arrival={arrivalDismissed ? null : arrival} onDismiss={() => setArrivalDismissed(true)} />
      <TopBar route={route} go={go} bagCount={bagCount} onTalkCecile={onTalkCecile} />

      <main>
        {route === "home" && (
          <>
            <HeroV2 go={go} openCecile={onTalkCecile} />
            <WeekRail go={go} />
            <HouseGrid go={go} />
            <ClimateRow go={go} />
            <OpeningStory go={go} />
            <CecileSection inputRef={cecileInputRef} addToBag={addToBag} go={go} />
            <BeautyIndex go={go} />
            <ResidenceSection go={go} />
          </>
        )}
        {route === "the-circle" && <MemberSection go={go} />}
        {route === "this-week" && (
          <>
            <WeekRail go={go} />
            <CecileSection inputRef={cecileInputRef} addToBag={addToBag} go={go} />
          </>
        )}
        {route === "her-shelf" && <HerShelf go={go} />}
        {route === "in-residence" && <ResidenceSection go={go} />}
        {route === "the-file" && <TheFile go={go} />}
        {route === "account" && <TheFile go={go} />}
        {route === "pdp" && <PDP id={routeParams.id} go={go} addToBag={addToBag} />}
        {route === "cart" && <Cart bag={bag} setBag={setBag} go={go} />}
        {route === "order-confirmed" && <OrderConfirmed num={routeParams.num} total={routeParams.total} go={go} />}
      </main>

      <Footer go={go} />

      {/* Floating Cécile — always mounted so the global open handle works
          from every route (TopBar, inline launcher, deep-links, etc.) */}
      <FloatingCecile onOpen={onTalkCecile} addToBag={addToBag} go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{ value: "day", label: "Day" }, { value: "night", label: "Night" }]}
          />
        </TweakSection>
        <TweakSection label="Arrival">
          <TweakRadio
            label="How they got here"
            value={tweaks.arrival}
            onChange={(v) => setTweak("arrival", v)}
            options={[
              { value: "cold", label: "Cold" },
              { value: "warm", label: "Warm" },
              { value: "agent", label: "Agent" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Jump to a screen">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <TweakButton label="Home" onClick={() => go("home")} />
            <TweakButton label="The week" onClick={() => go("this-week")} />
            <TweakButton label="Her shelf" onClick={() => go("her-shelf")} />
            <TweakButton label="PDP · P50" onClick={() => go("pdp", { id: "biologique-p50" })} />
            <TweakButton label="PDP · Baccarat" onClick={() => go("pdp", { id: "mfk-baccarat" })} />
            <TweakButton label="Bag" onClick={() => go("cart")} />
            <TweakButton label="The file" onClick={() => go("the-file")} />
            <TweakButton label="Cécile" onClick={onTalkCecile} />
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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