/* ============ APP ENTRY ============ */

function parseRoute(route) {
  // route like "/services/office-cleaning" or "/contact?type=walkthrough"
  const [path, queryStr] = route.split('?');
  const parts = path.split('/').filter(Boolean);
  const query = {};
  if (queryStr) {
    queryStr.split('&').forEach(kv => {
      const [k, v] = kv.split('=');
      query[decodeURIComponent(k)] = decodeURIComponent(v || '');
    });
  }
  return { parts, query };
}

function App() {
  const route = useRoute();
  const { parts, query } = parseRoute(route);
  const [tweaks, setTweaks] = useState(() => {
    try {
      const saved = localStorage.getItem('lamj-tweaks');
      if (saved) return { ...TWEAK_DEFAULTS, ...JSON.parse(saved) };
    } catch (e) {}
    return TWEAK_DEFAULTS;
  });
  const [editMode, setEditMode] = useState(false);
  const [quoteOpen, setQuoteOpen] = useState(false);

  // Expose modal openers globally so any deep-link / button can trigger.
  useEffect(() => {
    window.__openQuoteModal = () => setQuoteOpen(true);
    window.__closeQuoteModal = () => setQuoteOpen(false);
    return () => {
      delete window.__openQuoteModal;
      delete window.__closeQuoteModal;
    };
  }, []);

  // Intercept ANY click on a link to /quote (#/quote) and open the modal instead.
  // This covers all the existing CTA buttons across the site without changes.
  useEffect(() => {
    const onClick = (e) => {
      // Allow modifier-clicks (open in new tab, etc.) to behave normally
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
      const a = e.target.closest && e.target.closest('a');
      if (!a) return;
      const href = a.getAttribute('href') || '';
      if (href === '/quote' || href === '/calculator' || href === '#/quote' || href === '#/calculator') {
        e.preventDefault();
        setQuoteOpen(true);
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  // Apply accent color as CSS variable
  useEffect(() => {
    const opt = ACCENT_OPTIONS[tweaks.accent] || ACCENT_OPTIONS.indigo;
    document.documentElement.style.setProperty('--accent', opt.accent);
    document.documentElement.style.setProperty('--accent-ink', opt.ink);
    document.documentElement.style.setProperty('--accent-soft', opt.soft);
    try { localStorage.setItem('lamj-tweaks', JSON.stringify(tweaks)); } catch (e) {}

    // notify host
    try {
      window.parent.postMessage({
        type: '__edit_mode_set_keys',
        edits: tweaks
      }, '*');
    } catch (e) {}
  }, [tweaks]);

  // Edit-mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Route -> page component
  let page;
  const [a, b] = parts;
  if (!a) page = <HomePage/>;
  else if (a === 'services' && b) page = <ServicePage slug={b}/>;
  else if (a === 'services') page = <ServicesIndex/>;
  else if (a === 'locations' && b) page = <LocationPage slug={b}/>;
  else if (a === 'locations') page = <LocationsIndex/>;
  else if (a === 'about') page = <AboutPage/>;
  else if (a === 'contact') page = <ContactPage type={query.type}/>;
  else if (a === 'calculator' || a === 'quote') page = <QuotePage/>;
  else if (a === 'blog' && b) page = <BlogPost slug={b}/>;
  else if (a === 'blog') page = <BlogHub/>;
  else page = <NotFound/>;

  // Hide the floating launcher on the dedicated /quote page (it has its own CTA)
  // and while the modal is open.
  const fabHidden = quoteOpen || parts[0] === 'quote' || parts[0] === 'calculator';

  return (
    <div data-screen-label={`Route: ${route}`}>
      <SkipLink/>
      <Nav route={route}/>
      <main id="main" tabIndex="-1">
        {page}
      </main>
      <Footer/>
      <QuoteFab onClick={() => setQuoteOpen(true)} hidden={fabHidden}/>
      <QuoteModal open={quoteOpen} onClose={() => setQuoteOpen(false)}/>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode}/>
    </div>
  );
}

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