// App shell, routing + tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#6ba6cf",
  "density": "comfortable",
  "showVerse": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#6ba6cf', // light blue (default)
  '#4a90c8', // steel blue
  '#f4a526', // amber
  '#ff5b1f', // industrial rust
  '#7a8a3e', // olive
];

// Per-page <title>. Home uses the full brand + tagline; inner pages lead with
// the page name for clearer tabs/history and SEO.
const SITE_TITLE = 'Chambliss Steel Buildings | Custom Steel Structures in FL';
const ROUTE_TITLES = {
  home: SITE_TITLE,
  services: 'Services | Chambliss Steel Buildings',
  specs: 'Building Specs | Chambliss Steel Buildings',
  configurator: '3D Configurator | Chambliss Steel Buildings',
  portfolio: 'Portfolio | Chambliss Steel Buildings',
  store: 'Store | Chambliss Steel Buildings',
  about: 'About | Chambliss Steel Buildings',
  subcontractor: 'Subcontractors | Chambliss Steel Buildings',
  quote: 'Get a Quote | Chambliss Steel Buildings',
};

const App = () => {
  // Initial screen comes from the URL, so deep links (/services, /store, …) land
  // on the right page.
  const [route, setRouteState] = React.useState(() => window.pathToRoute(window.location.pathname));
  const tweaks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { t: TWEAK_DEFAULTS, setTweak: () => {} };
  const t = tweaks.t || TWEAK_DEFAULTS;

  // Navigate + reflect the screen in a real URL via history.pushState. This is
  // passed to every screen as `setRoute`, so all in-app navigation (nav links,
  // buttons, footer) updates the address bar.
  const setRoute = React.useCallback((r) => {
    setRouteState(r);
    const path = window.routeToPath(r);
    try {
      if (window.location.pathname !== path) {
        window.history.pushState({ route: r }, '', path);
      }
    } catch (e) { /* pushState can be blocked in some sandboxes; nav still works */ }
  }, []);

  // Apply theme + accent to :root
  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme === 'paper' ? 'paper' : '';
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.theme, t.accent]);

  // Back / forward buttons: sync the route from the URL without pushing a new
  // history entry.
  React.useEffect(() => {
    const onPop = () => setRouteState(window.pathToRoute(window.location.pathname));
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // Listen for nav events from inside components (footer/quote)
  React.useEffect(() => {
    const handler = (e) => setRoute(e.detail);
    window.addEventListener('nav', handler);
    return () => window.removeEventListener('nav', handler);
  }, [setRoute]);

  // Bridge from the FabTrk configurator iframe: when the visitor clicks
  // "Get this quoted", the embed postMessages its configuration up here. Stash it
  // (so the quote form can prefill / reference it) and route to the quote page.
  // Origin-gated: only same-origin or a known FabTrk embed origin is trusted ,
  // a third-party frame can't drive navigation or inject a spec.
  React.useEffect(() => {
    const fabtrkOrigins = () => {
      const set = new Set(['http://localhost:5173', 'http://127.0.0.1:5173']);
      // Only origins that actually host an embedded iframe belong here. The
      // REST API origin is deliberately not trusted, it never posts messages.
      ['FABTRK_DESIGNER_URL'].forEach((k) => {
        try { if (window[k]) set.add(new URL(window[k]).origin); } catch (e) {}
      });
      return set;
    };
    const onMessage = (e) => {
      const d = e.data;
      if (!d || d.type !== 'fabtrk:configurator:quote') return;
      if (e.origin !== window.location.origin && !fabtrkOrigins().has(e.origin)) return; // ignore unknown senders
      window.__configuratorSpec = d.config;
      window.dispatchEvent(new CustomEvent('configurator-spec', { detail: d.config }));
      setRoute('quote');
    };
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);

  // Keep the document title in sync with the current page
  React.useEffect(() => {
    document.title = ROUTE_TITLES[route] || SITE_TITLE;
  }, [route]);

  // GA4 page_view on every route change. gtag is configured with
  // send_page_view:false in index.html, because client-side routing fires no
  // navigation, so without this only the first load would ever be counted.
  React.useEffect(() => {
    if (!window.GA_ENABLED || typeof window.gtag !== 'function') return;
    window.gtag('event', 'page_view', {
      page_title: ROUTE_TITLES[route] || SITE_TITLE,
      page_location: window.location.origin + window.routeToPath(route),
      page_path: window.routeToPath(route),
    });
  }, [route]);

  // Scroll to top on route change
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  return (
    <>
      <Nav route={route} setRoute={setRoute} />
      <main id="main" tabIndex={-1} key={route} data-screen-label={`${{home:'01 Home',services:'02 Services',specs:'02.A Specs',configurator:'03 Configurator',portfolio:'04 Portfolio',store:'05 Store',about:'06 About',subcontractor:'07 Subcontractor',quote:'08 Quote'}[route]}`}>
        {route === 'home' && <Home setRoute={setRoute} />}
        {route === 'services' && <Services setRoute={setRoute} />}
        {route === 'specs' && <Specs setRoute={setRoute} />}
        {route === 'configurator' && <ConfiguratorPage setRoute={setRoute} />}
        {route === 'portfolio' && <Portfolio setRoute={setRoute} />}
        {route === 'store' && <Store setRoute={setRoute} />}
        {route === 'about' && <About showVerse={t.showVerse} />}
        {route === 'subcontractor' && <Subcontractor />}
        {route === 'quote' && <Quote setRoute={setRoute} />}
      </main>
      <Footer setRoute={setRoute} />

      {/* Tweaks Panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Theme">
            <window.TweakRadio
              label="Mode"
              value={t.theme}
              onChange={(v) => tweaks.setTweak('theme', v)}
              options={[
                { value: 'dark', label: 'Dark' },
                { value: 'paper', label: 'Paper' },
              ]}
            />
            <window.TweakColor
              label="Accent"
              value={t.accent}
              onChange={(v) => tweaks.setTweak('accent', v)}
              options={ACCENT_OPTIONS}
            />
          </window.TweakSection>
          <window.TweakSection label="Content">
            <window.TweakToggle
              label="Show John 3:16 section"
              value={t.showVerse}
              onChange={(v) => tweaks.setTweak('showVerse', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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