---
import { Font } from 'astro:assets';
import type { ImageMetadata } from 'astro';

import { PRODUCTION_URL, SEO_SUFFIX, SITE_TITLE } from '@/consts';

import '@/styles/globals.css';

import BannerInit from '@/components/BannerInit.astro';
import { PreferenceSync } from '@/components/docs/PreferenceSync';
import LegacyBanner from '@/components/LegacyBanner.astro';
import Posthog from '@/components/Posthog.astro';
import PrereleaseBanner from '@/components/PrereleaseBanner.astro';
import ThemeInit from '@/components/ThemeInit.astro';

interface Props {
  title: string | string[];
  description: string;
  image?: ImageMetadata | string;
  twitterImage?: ImageMetadata | string;
  canonical?: string;
  suffix?: string;
  withCompact?: boolean;
}
const { canonical, suffix } = Astro.props;
const canonicalURL = canonical || new URL(Astro.url.pathname, PRODUCTION_URL).href;

const { title, description, image, twitterImage, withCompact } = Astro.props;

function resolveImageUrl(img: ImageMetadata | string): string {
  if (typeof img === 'string') return img;
  return new URL(img.src, Astro.url).toString();
}

// Auto-derive OG image URLs from the page pathname.
// Each prop is independent — `twitterImage` can override the Twitter card
// without requiring `image` to also be set.
const slug = Astro.url.pathname.replace(/^\//, '').replace(/\/$/, '') || 'index';
const autoOgImage = new URL(`/og/${slug}.png`, Astro.site).toString();
const autoTwitterImage = new URL(`/og/twitter/${slug}.png`, Astro.site).toString();

const resolvedOgImage = image ? resolveImageUrl(image) : autoOgImage;
const resolvedTwitterImage = twitterImage
  ? resolveImageUrl(twitterImage)
  : image
    ? resolveImageUrl(image)
    : autoTwitterImage;

const seoSuffix = suffix ?? SEO_SUFFIX;
const pageTitle = Array.isArray(title) ? title.join(' | ') : title;
const fullTitle =
  pageTitle === SITE_TITLE ? `${SITE_TITLE} | ${seoSuffix}` : `${pageTitle} | ${SITE_TITLE} | ${seoSuffix}`;
---

<html lang="en">
  <head>
    {/* Global Metadata */}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#ebe4c1" />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title={SITE_TITLE}
      href={new URL("rss.xml", Astro.site)}
    />
    <meta name="generator" content={Astro.generator} />
    <meta name="algolia-site-verification" content="9CE2D1D6448256D3" />
    {
      Astro.site?.origin !== PRODUCTION_URL.origin && (
        <meta name="robots" content="noindex" />
      )
    }

    {/* Analytics (production only) */}
    {import.meta.env.PROD && <Posthog />}

    {/* Important stuff */}
    <slot name="priority-head" />

    {/* Preconnect to Mux for faster video/image loading */}
    <link rel="preconnect" href="https://image.mux.com" crossorigin />
    <link rel="preconnect" href="https://stream.mux.com" crossorigin />

    {/* Font preloads */}
    <Font cssVariable="--font-instrument-sans" preload />
    <Font cssVariable="--font-ibm-plex-mono" preload />
    {
      withCompact && (
        <link
          rel="preload"
          href="https://static.mux.com/fonts/EurostileLTProBold/font.woff2"
          as="font"
          type="font/woff2"
          crossorigin
        />
      )
    }
    <link
      rel="preload"
      href="https://static.mux.com/fonts/EurostileLTProExtended2/font.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />

    {/* Canonical URL */}
    <link rel="canonical" href={canonicalURL} />

    {/* Primary Meta Tags */}
    <title>{fullTitle}</title>
    <meta name="title" content={fullTitle} />
    <meta name="description" content={description} />

    {/* Open Graph / Facebook */}
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content={new URL(Astro.url.pathname, PRODUCTION_URL)}
    />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={resolvedOgImage} />

    {/* Twitter */}
    <meta property="twitter:card" content="summary_large_image" />
    <meta
      property="twitter:url"
      content={new URL(Astro.url.pathname, PRODUCTION_URL)}
    />
    <meta property="twitter:title" content={fullTitle} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={resolvedTwitterImage} />

    {/* Whatever else */}
    <slot name="head" />

    <ThemeInit />
    <BannerInit />
  </head>
  <body
    class:list={[
      "relative",
      "font-sans text-p2 text-pretty antialiased",
      "bg-manila-light text-faded-black dark:bg-faded-black dark:text-manila-light",
      "min-w-80",
      "selection:bg-gold selection:text-faded-black",
    ]}
  >
    <div
      class:list={[
        // BaseUI requires body.relative and div.isolate
        "isolate",
        // background colors are applied here for a more consistent FilmGrain blending
      ]}
    >
      <a
        href="#main-content"
        class="sr-only bg-manila-light font-display text-h3 text-faded-black uppercase focus:not-sr-only focus:fixed focus:top-0 focus:left-0 focus:z-50 focus:px-4 focus:py-2 dark:bg-faded-black dark:text-manila-light"
      >
        Skip to content
      </a>
      <PreferenceSync client:idle />

      <PrereleaseBanner />
      <LegacyBanner />
      <slot />
    </div>
  </body>
</html>
