// App shell with routing + top chrome + tweaks
const { useState, useEffect } = React;

const PAGES = [
  { k: "home", l: "Home" },
  { k: "composer", l: "Composer" },
  { k: "studio", l: "Studio" },
  { k: "quote", l: "Get a quote", target: "studio", anchor: "estimator", cta: true },
  { k: "faq", l: "FAQ" },
  { k: "submit", l: "Submit" },
];

function Chrome({ page, go }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const navTo = (k) => { setMenuOpen(false); go(k); };
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return (
    <div className={`chrome-top ${menuOpen ? "menu-open" : ""}`}>
      <button className="chrome-mark" onClick={() => navTo("home")}>
        Romanowski<span className="dot"></span>Studio
      </button>
      <nav className="chrome-nav">
        {PAGES.map(p => (
          <button
            key={p.k}
            className={`chrome-nav-btn ${!p.cta && page === (p.target || p.k) ? "active" : ""} ${p.cta ? "chrome-nav-cta" : ""}`}
            onClick={() => go(p.target || p.k, p.anchor)}
          >{p.l}</button>
        ))}
      </nav>
      <button
        className="chrome-burger"
        aria-label={menuOpen ? "Close menu" : "Open menu"}
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen(o => !o)}
      >
        <span></span><span></span><span></span>
      </button>
      {menuOpen && <div className="chrome-scrim" onClick={() => setMenuOpen(false)}></div>}
      <nav className={`chrome-menu ${menuOpen ? "show" : ""}`}>
        {PAGES.map(p => (
          <button
            key={p.k}
            className={`chrome-menu-btn ${!p.cta && page === (p.target || p.k) ? "active" : ""} ${p.cta ? "chrome-menu-cta" : ""}`}
            onClick={() => { setMenuOpen(false); go(p.target || p.k, p.anchor); }}
          >{p.l}</button>
        ))}
      </nav>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sage",
  "splitStyle": "widen",
  "invert": false
}/*EDITMODE-END*/;

// Named editorial palettes — each restyles bg, warm, ink, rule, accent.
const PALETTES = {
  ivory: {
    label: "Ivory", sub: "Warm paper · terracotta",
    vars: { "--bg":"#faf9f6", "--bg-warm":"#f4f1e8", "--fg":"#1a1a1a", "--fg-muted":"#5a5a55", "--fg-faint":"#8a8780", "--rule":"#d9d6ce", "--rule-soft":"#e8e5dc", "--accent":"#c65d3a", "--accent-soft":"#e8d3c8" }
  },
  bone: {
    label: "Bone", sub: "Neutral · charcoal",
    vars: { "--bg":"#f5f3ee", "--bg-warm":"#ece8df", "--fg":"#181715", "--fg-muted":"#565452", "--fg-faint":"#8a8884", "--rule":"#cfcbc0", "--rule-soft":"#e0dcd2", "--accent":"#2a2825", "--accent-soft":"#d4d0c4" }
  },
  linen: {
    label: "Linen", sub: "Ecru · ochre",
    vars: { "--bg":"#f1ede3", "--bg-warm":"#e5dfd0", "--fg":"#211d15", "--fg-muted":"#5c554a", "--fg-faint":"#8a8377", "--rule":"#c8c0ae", "--rule-soft":"#dad2bf", "--accent":"#b47b2b", "--accent-soft":"#e3d1a8" }
  },
  chalk: {
    label: "Chalk", sub: "Cool white · ink",
    vars: { "--bg":"#f6f7f9", "--bg-warm":"#eaecf0", "--fg":"#131619", "--fg-muted":"#4e5460", "--fg-faint":"#808793", "--rule":"#d3d7de", "--rule-soft":"#e4e7ec", "--accent":"#2e4a7a", "--accent-soft":"#c8d3e4" }
  },
  sage: {
    label: "Sage", sub: "Faded sage · forest",
    vars: { "--bg":"#eef0e7", "--bg-warm":"#e2e6d6", "--fg":"#22271f", "--fg-muted":"#5a6356", "--fg-faint":"#8a9182", "--rule":"#cdd2c0", "--rule-soft":"#dfe2d2", "--accent":"#5b7a5e", "--accent-soft":"#cad7c4" }
  },
  fog: {
    label: "Fog", sub: "Stone · plum",
    vars: { "--bg":"#f1eff0", "--bg-warm":"#e3e0e2", "--fg":"#1a1619", "--fg-muted":"#575155", "--fg-faint":"#8a8288", "--rule":"#d0ccce", "--rule-soft":"#e1dddf", "--accent":"#7a4a72", "--accent-soft":"#d9c8d4" }
  },
  noir: {
    label: "Noir", sub: "Inverted · amber",
    vars: { "--bg":"#131311", "--bg-warm":"#1d1d1a", "--fg":"#f2efe6", "--fg-muted":"#a8a499", "--fg-faint":"#6e6a60", "--rule":"#2a2a25", "--rule-soft":"#1f1f1c", "--accent":"#d98a3f", "--accent-soft":"#3a2b1b" }
  },
  ink: {
    label: "Ink", sub: "Midnight · paper",
    vars: { "--bg":"#121821", "--bg-warm":"#1a2130", "--fg":"#e8e9ec", "--fg-muted":"#9ca3b0", "--fg-faint":"#5e6573", "--rule":"#273042", "--rule-soft":"#1d2533", "--accent":"#e8c572", "--accent-soft":"#2d2a1e" }
  },
  oxblood: {
    label: "Oxblood", sub: "Deep red · cream",
    vars: { "--bg":"#1f0f0f", "--bg-warm":"#2a1616", "--fg":"#f2ebe0", "--fg-muted":"#b5a89a", "--fg-faint":"#7a6e62", "--rule":"#3a2323", "--rule-soft":"#281818", "--accent":"#e0b76c", "--accent-soft":"#3a2818" }
  },
};

function applyTweaks(t) {
  const r = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.ivory;
  Object.entries(p.vars).forEach(([k, v]) => r.style.setProperty(k, v));
  r.setAttribute("data-palette", t.palette);
}

function TweaksPanel({ tweaks, set, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <div className="tweaks-title">Tweaks</div>
        <div className="mono-sm">Live</div>
      </div>
      <div className="tweaks-group">
        <div className="mono-sm">Palette — {PALETTES[tweaks.palette]?.label}</div>
        <div className="palette-grid">
          {Object.entries(PALETTES).map(([k, p]) => (
            <button key={k}
              className={`palette-card ${tweaks.palette === k ? "on" : ""}`}
              onClick={() => set({ palette: k })}
              title={p.label + " — " + p.sub}>
              <div className="palette-swatches">
                <span style={{ background: p.vars["--bg"] }} />
                <span style={{ background: p.vars["--bg-warm"] }} />
                <span style={{ background: p.vars["--fg"] }} />
                <span style={{ background: p.vars["--accent"] }} />
              </div>
              <div className="palette-name">{p.label}</div>
            </button>
          ))}
        </div>
      </div>
      <div className="tweaks-group">
        <div className="mono-sm">Split interaction</div>
        <div className="tweaks-row">
          {[["widen","Widen"],["dim","Dim other"],["static","Static"]].map(([k,l]) => (
            <button key={k}
              className={`tweaks-chip ${tweaks.splitStyle === k ? "on" : ""}`}
              onClick={() => set({ splitStyle: k })}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-group">
        <div className="mono-sm">Quick-cycle</div>
        <div className="tweaks-row">
          <button className="tweaks-chip" onClick={() => {
            const keys = Object.keys(PALETTES);
            const i = keys.indexOf(tweaks.palette);
            set({ palette: keys[(i - 1 + keys.length) % keys.length] });
          }}>← Prev</button>
          <button className="tweaks-chip" onClick={() => {
            const keys = Object.keys(PALETTES);
            const i = keys.indexOf(tweaks.palette);
            set({ palette: keys[(i + 1) % keys.length] });
          }}>Next →</button>
        </div>
      </div>
    </div>
  );
}

// ─── Hash-based routing ──────────────────────────────────────────────────
// Reads the current page key from the URL hash (e.g. #composer, #service:notation).
function pageFromHash() {
  const h = (location.hash || "").replace(/^#\/?/, "").trim();
  return h || null;
}

function App() {
  const [page, setPage] = useState(() => {
    const fromHash = pageFromHash();
    if (fromHash) return fromHash;
    try { return localStorage.getItem("rs_page") || "home"; } catch { return "home"; }
  });
  const scrollTargetRef = React.useRef(null);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    applyTweaks(tweaks);
    document.documentElement.setAttribute("data-split", tweaks.splitStyle);
  }, [tweaks]);

  useEffect(() => {
    try { localStorage.setItem("rs_page", page); } catch {}
    if (window.PageTracker) window.PageTracker.pageview(page);
    const target = scrollTargetRef.current;
    scrollTargetRef.current = null;
    if (target) {
      // Wait for the destination page to mount, then scroll to the section.
      const tryScroll = (attempts = 0) => {
        const el = document.getElementById(target);
        if (el) {
          const y = el.getBoundingClientRect().top + window.scrollY - 24;
          window.scrollTo({ top: y, behavior: "smooth" });
        } else if (attempts < 10) {
          requestAnimationFrame(() => tryScroll(attempts + 1));
        } else {
          window.scrollTo({ top: 0 });
        }
      };
      requestAnimationFrame(() => tryScroll());
    } else {
      window.scrollTo({ top: 0 });
    }
  }, [page]);

  // Keep the URL hash in sync, and make the browser back/forward buttons work.
  useEffect(() => {
    // Ensure the first history entry carries the current page (without adding one).
    if (pageFromHash() !== page) {
      history.replaceState({ page }, "", "#" + page);
    } else if (!history.state || !history.state.page) {
      history.replaceState({ page }, "", location.hash || ("#" + page));
    }
    const onPop = (e) => {
      const next = (e.state && e.state.page) || pageFromHash() || "home";
      setPage(next);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
    // eslint-disable-next-line
  }, []);

  const go = (k, anchor) => {
    if (anchor) scrollTargetRef.current = anchor;
    // Push a new history entry when the page actually changes, so the browser
    // back button steps through the pages the visitor has viewed.
    if (k !== page) {
      history.pushState({ page: k, anchor: anchor || null }, "", "#" + k);
    }
    setPage(k);
    // If we're already on the target page, the effect won't fire — scroll directly.
    if (anchor && page === k) {
      const el = document.getElementById(anchor);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 24;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
      scrollTargetRef.current = null;
    }
  };
  window.__go = go;

  // Edit mode wiring
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setTweaksVisible(true);
      if (d.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setT = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };

  return (
    <div className="app" data-screen-label={
      page === "home" ? "01 Home — Split"
      : page === "composer" ? "02 Composer"
      : page === "studio" ? "03 Studio + Estimator"
      : page === "submit" ? "04 Submit"
      : page === "faq" ? "06 FAQ"
      : page.startsWith("service:") ? `05 Service ${page.split(":")[1]}`
      : page
    }>
      <Chrome page={page} go={go} />
      {page === "home" && <SplitHome go={go} />}
      {page === "composer" && <ComposerPage go={go} />}
      {page === "studio" && <StudioPage go={go} />}
      {page === "faq" && <FAQPage go={go} />}
      {page === "submit" && <SubmitPage go={go} />}
      {page.startsWith("service:") && <ServicePage id={page.split(":")[1]} go={go} />}
      <TweaksPanel tweaks={tweaks} set={setT} visible={tweaksVisible} />
    </div>
  );
}

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