// LUXOMES — App root

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "sage",
  "typo": "default",
  "hero": "split",
  "cards": "classic"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────────
// CLEAN URLs — translate between URL and page state
// Routes:
//   /                          ↔ "home"
//   /management                ↔ "management"
//   /realestate                ↔ "realestate"
//   /about                     ↔ "about"
//   /contact                   ↔ "contact"
//   /blog                      ↔ "blog"
//   /blog/<slug>               ↔ "blog-<slug>"
//   /standorte/<key>           ↔ "location-<key>"
//   /impressum, /datenschutz, /agb  ↔ legal-*
//
// Falls back to the legacy `?page=<slug>` query for any pre-existing
// links or shared URLs.
// ─────────────────────────────────────────────────────────────────────
function pathToPage(pathname, search) {
  // Legacy ?page=... support (sitemap.xml + old links)
  const params = new URLSearchParams(search || "");
  const q = params.get("page");
  if (q) return q;

  const p = (pathname || "/").replace(/\/+$/, "");
  if (p === "" || p === "/") return "home";
  if (p === "/management") return "management";
  if (p === "/realestate") return "realestate";
  if (p === "/about") return "about";
  if (p === "/contact") return "contact";
  if (p === "/blog") return "blog";
  if (p.startsWith("/blog/")) return "blog-" + p.slice(6);
  if (p.startsWith("/standorte/")) {
    // /standorte/<city>/<aptId>   → "location-<city>:<aptId>"
    // /standorte/<city>           → "location-<city>"
    const sub = p.slice(11);
    if (sub.includes("/")) {
      const [city, aptId] = sub.split("/", 2);
      return "location-" + city + ":" + aptId;
    }
    return "location-" + sub;
  }
  if (p === "/impressum") return "legal-impressum";
  if (p === "/datenschutz") return "legal-privacy";
  if (p === "/agb") return "legal-agb";
  // unknown — default to home
  return "home";
}
function pageToPath(page) {
  if (page === "home") return "/";
  if (page === "management") return "/management";
  if (page === "realestate") return "/realestate";
  if (page === "about") return "/about";
  if (page === "contact") return "/contact";
  if (page === "blog") return "/blog";
  if (page.startsWith("blog-")) return "/blog/" + page.slice(5);
  if (page.startsWith("location-")) {
    const rest = page.slice(9);
    if (rest.includes(":")) {
      const [city, aptId] = rest.split(":", 2);
      return "/standorte/" + city + "/" + aptId;
    }
    return "/standorte/" + rest;
  }
  if (page === "legal-impressum") return "/impressum";
  if (page === "legal-privacy") return "/datenschutz";
  if (page === "legal-agb") return "/agb";
  return "/";
}

function App() {
  const [page, setPage] = useState(() => pathToPage(window.location.pathname, window.location.search));
  const [lang, setLang] = useState(() => localStorage.getItem("lux_lang") || "de");
  const [tweaks, setTweaks] = useState(DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [editMode, setEditMode] = useState(false);

  // Reflect page → URL bar (pushState). Browser back/forward → state update.
  useEffect(() => {
    const target = pageToPath(page);
    if (window.location.pathname !== target) {
      window.history.pushState({ page }, "", target);
    }
    localStorage.setItem("lux_page", page);
  }, [page]);
  useEffect(() => {
    const onPop = () => setPage(pathToPage(window.location.pathname, window.location.search));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  useEffect(() => { localStorage.setItem("lux_lang", lang); }, [lang]);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.accent = tweaks.accent;
    document.documentElement.dataset.typo = tweaks.typo;
  }, [tweaks]);

  // Apply per-page SEO (title, meta, JSON-LD) on every route or language change
  useEffect(() => {
    if (window.applyPageSEO) window.applyPageSEO(page, lang);
  }, [page, lang]);

  // expose setPage globally so deep components can navigate
  useEffect(() => { window.__setPage = setPage; }, []);

  // Tweaks / edit-mode host integration
  useEffect(() => {
    const handler = (e) => {
      if (!e || !e.data) return;
      if (e.data.type === "__activate_edit_mode") setEditMode(true);
      if (e.data.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const updateTweaks = (next) => {
    setTweaks(next);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
    } catch (e) {}
  };

  const t = COPY[lang];

  let PageComp = null;
  if (page === "home") PageComp = <HomePage t={t} lang={lang} tweaks={tweaks} setPage={setPage}/>;
  else if (page === "management") PageComp = <ManagementPage t={t} lang={lang} tweaks={tweaks} setPage={setPage}/>;
  else if (page === "realestate") PageComp = <RealEstatePage lang={lang} setPage={setPage}/>;
  else if (page.startsWith("location-")) {
    const rest = page.slice("location-".length);
    const [key, aptId] = rest.includes(":") ? rest.split(":", 2) : [rest, null];
    PageComp = <LocationDetailPage locationKey={key} aptId={aptId} lang={lang} setPage={setPage}/>;
  }
  else if (page === "about") PageComp = <AboutPage t={t} lang={lang}/>;
  else if (page === "contact") PageComp = <ContactPage t={t} lang={lang}/>;
  else if (page === "legal-impressum") PageComp = <ImpressumPage lang={lang}/>;
  else if (page === "legal-privacy") PageComp = <DatenschutzPage lang={lang}/>;
  else if (page === "legal-agb") PageComp = <AGBPage lang={lang} setPage={setPage}/>;
  else if (page === "blog") PageComp = <BlogIndexPage lang={lang} setPage={setPage}/>;
  else if (page.startsWith("blog-")) {
    const slug = page.replace("blog-", "");
    PageComp = <BlogPostPage slug={slug} lang={lang} setPage={setPage}/>;
  }

  return (
    <div data-screen-label={"Page: " + page}>
      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} t={t}/>
      {PageComp}
      <Footer setPage={setPage} t={t} lang={lang}/>
      {editMode && <>
        <button className="tweaks-fab" onClick={() => setTweaksOpen(!tweaksOpen)} aria-label="Tweaks">
          <Icon name={tweaksOpen ? "close" : "adjust"} size={20}/>
        </button>
        <TweaksPanel tweaks={tweaks} setTweaks={updateTweaks} visible={tweaksOpen}/>
      </>}
    </div>
  );
}

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