---
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import CookieBanner from "@components/CookieBanner.astro";
import "@/styles/global.css";
import type { Locale } from "@/types";
import { getLocaleFromUrl, getAlternateLocales, t } from "@/i18n";

interface Props {
  title: string;
  description: string;
  locale?: Locale;
  canonical?: string;
  ogImage?: string;
  noindex?: boolean;
  jsonLd?: Record<string, unknown>;
}

const {
  title,
  description,
  canonical,
  ogImage = "/og-default.png",
  noindex = false,
  jsonLd,
} = Astro.props;

const locale = Astro.props.locale ?? getLocaleFromUrl(Astro.url);
const i = t(locale);
const siteUrl = "https://missioflow.fr";
const fullTitle = title === "Missioflow" ? title : `${title} | Missioflow`;
const canonicalUrl = canonical ?? new URL(Astro.url.pathname, siteUrl).href;
const ogImageUrl = ogImage.startsWith("http") ? ogImage : new URL(ogImage, siteUrl).href;
const ogLocale = locale === "fr" ? "fr_FR" : "en_US";
const alternates = getAlternateLocales(Astro.url.pathname, locale);
---

<!doctype html>
<html lang={locale} dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>{fullTitle}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalUrl} />

    {noindex && <meta name="robots" content="noindex, nofollow" />}

    <!-- Hreflang -->
    {alternates.map((alt) => (
      <link rel="alternate" hreflang={alt.locale} href={new URL(alt.href, siteUrl).href} />
    ))}
    <link rel="alternate" hreflang="x-default" href={new URL(alternates.find((a) => a.locale === "fr")?.href ?? "/", siteUrl).href} />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonicalUrl} />
    <meta property="og:image" content={ogImageUrl} />
    <meta property="og:locale" content={ogLocale} />
    <meta property="og:site_name" content="Missioflow" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImageUrl} />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="theme-color" content="#16a34a" />

    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- JSON-LD -->
    {jsonLd && (
      <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
    )}

    <slot name="head" />
  </head>
  <body class="min-h-screen flex flex-col">
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary-600 focus:text-white focus:rounded-lg">
      {i.nav.skipToContent}
    </a>

    <Header locale={locale} />

    <main id="main-content" class="flex-1 pt-16" role="main">
      <slot />
    </main>

    <Footer locale={locale} />
    <CookieBanner locale={locale} />
  </body>
</html>
