---
interface Props {
  title?: string;
  description?: string;
  image?: string;
  hideFooter?: boolean;
}

import { ClientRouter } from "astro:transitions";

import BaseHead from "../components/BaseHead.astro";
import { metaData } from "../config";
import Nav from "./Nav.astro";
import SubNav from "./SubNav.astro";
import Footer from "../components/Footer.astro";

import "@fontsource/ibm-plex-sans/500.css";
import "@fontsource/ibm-plex-sans/600.css";
import "@fontsource/geist-sans/400.css";
import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-mono/400.css";
import "@fontsource/geist-mono/600.css";
import "@styles/global.css";
import "@fonts/fonts.css";

const { title, description, image, hideFooter = false } = Astro.props;
const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];

import { getSubsiteByHost, getSubsiteFromSignal } from '../utils/subsites.js';

// Determine if this request maps to a subsite (either via host or path)
// support legacy detection if path starts with /subsites/req — default host should match SUBSITES
// also support path-layout detection (e.g. /subsites/req)
import { getSubsiteByPath } from '../utils/subsites.js';
const detectedSubsite = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detectedSubsite?.short === 'req';
const isReqSubdomain = host?.startsWith('req.');

import { WHITELABELS } from "../config";

// Accept forced whitelabel via query param, headers or request locals (set by middleware)
const forcedParam = Astro.url.searchParams.get('whitelabel') || Astro.request?.headers?.get('x-whitelabel') || (Astro.request as any)?.locals?.whitelabel || null;

let whitelabel: any = null;
if (forcedParam) {
  const forced = getSubsiteFromSignal(forcedParam);
  if (forced) whitelabel = WHITELABELS[forced.host] ?? null;
}

// fallback: by host mapping or legacy /subsites/req detection
if (!whitelabel) {
  whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detectedSubsite.host] : null);
}

// Determine whether we consider this request a subsite. Middleware will set
// request locals.isSubsite, which we trust here, but as a fallback also use
// the presence of a whitelabel mapping or a detected subsite path.
const isSubsite = (Astro.request as any)?.locals?.isSubsite ?? Boolean(whitelabel || detectedSubsite);

// Debug logging
if (import.meta.env.DEV) {
  console.log(`[Base.astro] host: ${host}, forcedParam: ${forcedParam}, isReq: ${isReq}, whitelabel: ${JSON.stringify(whitelabel)}`);
}
---

<html lang="en" class="scrollbar-hide lenis lenis-smooth" data-subsite={isSubsite ? 'true' : 'false'}>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    
    <style is:inline>
      html { visibility: hidden; }
      html.ready { visibility: visible; }
      html { background: #fff; }
      html.dark { background: #121212; }
    </style>
    <script src="/scripts/theme-init.js" is:inline></script>
    <ClientRouter />
    <BaseHead title={whitelabel?.siteTitle ?? title} description={description} image={image ?? metaData.ogImage} isWhitelabel={!!whitelabel} whitelabel={whitelabel} subsite={detectedSubsite} />
    <script>
      import "@scripts/lenisSmoothScroll.js";
      import "@scripts/main.jsx";
    </script>
  </head>
  <body
    class="antialiased flex flex-col items-center mx-auto min-h-screen
    scrollbar-hide"
    style={`--brand-color: ${whitelabel?.brandColor ?? '#111827'}`}>
    
    <!-- Nav is outside main to allow full-width, sticky wrapper -->
    <div class="w-full sticky top-0 z-50">
      {whitelabel ? <SubNav whitelabel={whitelabel} subsite={detectedSubsite} /> : <Nav />}
    </div>
    
    <main
      class="flex-auto min-w-0 mt-6 md:mt-8 flex flex-col px-4 sm:px-6 md:px-0 max-w-3xl w-full pb-8">
      <noscript>
  <div style="background: #f44336; color: white; padding: 1em; text-align: center;">
    This site requires JavaScript to function. Please enable JavaScript in your browser.
  </div>
</noscript>
      <slot />
      {!hideFooter && <Footer />}
    </main>
    <style>
      /* CSS rules for the page scrollbar */
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }

      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
  </body>
</html>
