/* ============================================================
   FlowSpace Finder, app orchestrator + tweaks (mounts #root)
   ============================================================ */
(function () {
  "use strict";
  const React = window.React;
  const { useState, useEffect, useRef } = React;
  const FD = window.FinderData;
  const UI = window.FinderUI;
  const SC = window.FinderScreens;
  const { Analysing, StepDots, Logo, Icon } = UI;
  const { Hero, CompanyRead, Results } = SC;
  const { analyzeCompany, scoreMatches, pickTeaser, ALL_AREAS } = FD;
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "heroBg": "dusk",
    "heroHeadline": "c",
    "revealStack": true,
    "emoji": true
  }/*EDITMODE-END*/;

  // Map a free-text refine to a scoring refine + a friendly label
  function parseRefine(text) {
    const t = text.toLowerCase();
    const refine = {};
    let label = text;
    if (/cheap|budget|afford|lower|less expensive|save/.test(t)) { refine.cheaper = true; }
    if (/big|grow|larger|more room|more space|expand/.test(t)) { refine.bigger = true; }
    for (const tag of ["creative", "premium", "value", "quiet", "warehouse", "riverside", "wellness"]) {
      if (t.includes(tag)) { refine.tag = tag; break; }
    }
    if (/members.?club/.test(t)) refine.tag = "members-club";
    if (/green|plants|nature/.test(t)) refine.tag = "greenery";
    const area = ALL_AREAS.find((a) => t.includes(a.toLowerCase()));
    if (area) { refine.area = area; }
    return { refine, label };
  }

  const CHIP_LABELS = { cheaper: "cheaper options", bigger: "more room to grow", creative: "more creative spaces", premium: "more premium spaces", value: "best value" };

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [stage, setStage] = useState("hero");
    const [company, setCompany] = useState("");
    const [analysis, setAnalysis] = useState(null);
    const [ranked, setRanked] = useState([]);
    const [teaser, setTeaser] = useState(null);
    const [unlocked, setUnlocked] = useState(false);
    const [reactions, setReactions] = useState({});
    const [refineState, setRefineState] = useState(null);
    const [booked, setBooked] = useState(false);
    const scrollTopRef = useRef(null);

    useEffect(() => { if (stage !== "hero") window.scrollTo({ top: 0 }); }, [stage]);

    // ----- flow handlers -----
    function onFind(input) {
      window.__pendingInput = input;
      setCompany(analyzeCompany(input).companyName);
      setAnalysis(null);
      setUnlocked(false); setReactions({}); setRefineState(null); setBooked(false);
      setStage("analysing");
    }
    function onAnalyseDone() {
      const input = window.__pendingInput || company;
      const a = analyzeCompany(input);
      setAnalysis(a);
      setCompany(a.companyName);
      setStage("read");
    }
    function onReadContinue(brief) {
      const input = window.__pendingInput || company;
      const a = analyzeCompany(input, brief);
      setAnalysis(a);
      const r = scoreMatches(a, {});
      setRanked(r);
      setTeaser(pickTeaser(r, a));
      setStage("results");
    }
    function onUnlock() { setUnlocked(true); window.scrollTo({ top: 0, behavior: "smooth" }); }

    function recompute(refineObj) {
      const r = scoreMatches(analysis, { refine: refineObj || {} });
      setRanked(r);
    }
    function onRefine(req) {
      if (!req) { setRefineState(null); recompute(null); return; }
      if (req.text) {
        const { refine, label } = parseRefine(req.text);
        setRefineState({ text: label, refine });
        recompute(refine);
      } else {
        const refine = req.key === "cheaper" ? { cheaper: true } : req.key === "bigger" ? { bigger: true } : { tag: req.tag };
        setRefineState({ key: req.key, label: CHIP_LABELS[req.key] || req.key, refine });
        recompute(refine);
      }
    }
    function onReact(id, r) {
      setReactions((prev) => {
        const next = { ...prev, [id]: r };
        if (r == null) delete next[id];
        return next;
      });
      if (r === "spenny" && !refineState) {
        const refine = { cheaper: true };
        setRefineState({ key: "cheaper", label: "cheaper options", refine });
        setTimeout(() => recompute(refine), 250);
      }
    }

    const likedSpaces = ranked.filter((s) => reactions[s.id] === "like");

    // ----- render stage -----
    let body;
    if (stage === "hero") {
      body = React.createElement(Hero, { onFind, heroBg: t.heroBg, heroHeadline: t.heroHeadline });
    } else {
      let inner;
      if (stage === "analysing") {
        inner = React.createElement(Analysing, { company: analysis ? analysis.companyName : company, onDone: onAnalyseDone });
      } else if (stage === "read") {
        inner = React.createElement(CompanyRead, { analysis, onContinue: onReadContinue });
      } else if (stage === "results") {
        inner = React.createElement(Results, {
          analysis, ranked, teaser, unlocked,
          gateLayout: t.gateLayout, revealStack: t.revealStack, emoji: t.emoji,
          onUnlock, reactions, onReact, onRefine, refineState, likedSpaces,
          onBook: () => setBooked(true), booked,
        });
      }
      const stepIndex = stage === "analysing" ? 1 : stage === "read" ? 2 : 3;
      body = React.createElement("div", { className: "f-shell" },
        React.createElement("header", { className: "f-topbar" },
          React.createElement("button", { className: "f-topbar-home", onClick: () => setStage("hero") }, React.createElement(Logo, null)),
          React.createElement(StepDots, { index: stepIndex }),
          React.createElement("button", { className: "f-restart", onClick: () => { setStage("hero"); } },
            React.createElement(Icon, { name: "refresh", size: 15 }), React.createElement("span", { className: "f-restart-t" }, "Start over"))),
        React.createElement("main", { className: "f-main" }, inner),
        React.createElement("footer", { className: "f-foot" },
          React.createElement("span", null, "FlowSpace · whole-of-market London office finder"),
          React.createElement("span", { className: "f-foot-dot" }, "·"),
          React.createElement("span", null, "Free, we're paid by the building, not by you")));
    }

    return React.createElement(React.Fragment, null, body);
  }

  ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
})();