/* ============================================================
   Considered · App — History API router
   Uses pushState so browser back/forward works correctly and
   every page gets a real URL. Quiz runs entirely under /quiz.
   ============================================================ */
const { useState: useSA, useEffect: useEA, useCallback } = React;
const { NavContext, TopNav } = window.GGComp;

/* ---- URL helpers ---- */

// Category name → URL slug  e.g. "Spirits & wine" → "spirits-wine"
function catSlug(name) {
  return (name || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}

// URL slug → category name  (reverse lookup against live data)
function slugToCat(slug) {
  return (window.GG.CATEGORIES || []).find(function(c) { return catSlug(c) === slug; }) || null;
}

function routeToPath(name, params) {
  params = params || {};
  switch (name) {
    case 'home':        return '/considered/';
    case 'browse':      return '/considered/browse';
    case 'about':       return '/considered/about';
    case 'quiz':
    case 'quizresults': return '/considered/quiz';
    case 'brand':       return '/considered/brand/' + (params.slug || '');
    case 'category':    return '/considered/category/' + catSlug(params.cat || '');
    case 'cluster':     return '/considered/cluster/' + (params.id || '');
    case 'search':      return '/considered/search' + (params.q ? '?q=' + encodeURIComponent(params.q) : '');
    default:            return '/considered/';
  }
}

function pathToRoute(pathname, search) {
  var p = (pathname || '').replace(/\/considered/, '').replace(/\/$/, '') || '';
  if (!p) return { name: 'home', params: {} };
  if (p === '/browse')  return { name: 'browse', params: {} };
  if (p === '/about')   return { name: 'about', params: {} };
  if (p === '/quiz')    return { name: 'quiz', params: {} };

  var brandM = p.match(/^\/brand\/(.+)$/);
  if (brandM) return { name: 'brand', params: { slug: brandM[1] } };

  var catM = p.match(/^\/category\/(.+)$/);
  if (catM) {
    var cat = slugToCat(catM[1]);
    return cat ? { name: 'category', params: { cat: cat } } : { name: 'browse', params: {} };
  }

  var clusterM = p.match(/^\/cluster\/(.+)$/);
  if (clusterM) return { name: 'cluster', params: { id: clusterM[1] } };

  if (p === '/search') {
    var q = new URLSearchParams(search || '').get('q') || '';
    return { name: 'search', params: { q: q } };
  }

  return { name: 'home', params: {} };
}

function routeTitle(name, params) {
  params = params || {};
  switch (name) {
    case 'home':        return 'Considered · gifts worth giving';
    case 'browse':      return 'Browse · Considered';
    case 'about':       return 'About · Considered';
    case 'quiz':
    case 'quizresults': return 'Find a gift · Considered';
    case 'brand': {
      var b = window.GG.BY_SLUG && window.GG.BY_SLUG[params.slug];
      return b ? b.name + ' · Considered' : 'Considered';
    }
    case 'category':    return (params.cat || 'Browse') + ' · Considered';
    case 'cluster': {
      var cl = (window.GG.CLUSTERS || []).find(function(c) { return c.id === params.id; });
      return cl ? cl.title + ' · Considered' : 'Browse · Considered';
    }
    case 'search':      return 'Search · Considered';
    default:            return 'Considered · gifts worth giving';
  }
}

/* ---- App ---- */

function App() {
  // Initialise route from the URL the user actually landed on
  const [route, setRoute] = useSA(function() {
    return pathToRoute(window.location.pathname, window.location.search);
  });
  const [stack, setStack] = useSA([]);

  const go = useCallback(function(name, params) {
    params = params || {};
    setStack(function(s) { return [...s, route]; });
    var newRoute = { name: name, params: params };
    setRoute(newRoute);
    var path = routeToPath(name, params);
    window.history.pushState({ name: name, params: params }, '', path);
    document.title = routeTitle(name, params);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
    // Virtual pageview for GA via GTM
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'pageview', page_path: path, page_title: routeTitle(name, params) });
  }, [route]);

  const back = useCallback(function() {
    window.history.back(); // popstate handler below updates route state
  }, []);

  // Listen for browser back/forward
  useEA(function() {
    // Stamp the current entry so popstate can restore it
    window.history.replaceState(
      { name: route.name, params: route.params },
      '',
      routeToPath(route.name, route.params)
    );
    document.title = routeTitle(route.name, route.params);
    // Fire initial pageview
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'pageview', page_path: routeToPath(route.name, route.params), page_title: routeTitle(route.name, route.params) });

    function onPopState(e) {
      var r = e.state
        ? { name: e.state.name, params: e.state.params }
        : pathToRoute(window.location.pathname, window.location.search);
      setRoute(r);
      setStack(function(s) { return s.length > 0 ? s.slice(0, -1) : s; });
      document.title = routeTitle(r.name, r.params);
      window.scrollTo({ top: 0 });
      // Virtual pageview for back/forward navigation
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: 'pageview', page_path: window.location.pathname + window.location.search, page_title: routeTitle(r.name, r.params) });
    }

    window.addEventListener('popstate', onPopState);
    return function() { window.removeEventListener('popstate', onPopState); };
  }, []); // once on mount

  const nav = { route, go, back, canBack: stack.length > 0 };

  const H = window.GGHome, Q = window.GGQuiz, B = window.GGBrand;
  const SCREENS = {
    home:        H.HomeScreen,
    browse:      H.BrowseScreen,
    about:       H.AboutScreen,
    quiz:        Q.QuizScreen,
    quizresults: Q.QuizResults,
    brand:       B.BrandDetailScreen,
    category:    B.CategoryScreen,
    cluster:     B.ClusterScreen,
    search:      B.SearchScreen,
  };
  const Screen = SCREENS[route.name] || H.HomeScreen;

  return (
    <NavContext.Provider value={nav}>
      <TopNav />
      <main key={route.name + JSON.stringify(route.params)} style={{ flex: 1 }}>
        <Screen params={route.params} t={{ cardStyle: 'classic', imagery: 'text' }} />
      </main>
    </NavContext.Provider>
  );
}

// Wait for Supabase data, then mount
window._GGReadyPromise.then(function() {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  var loading = document.getElementById('gg-loading');
  if (loading) loading.remove();
});