import {
  createRootRoute,
  HeadContent,
  Outlet,
  Scripts,
} from "@tanstack/react-router";
import "./globals.css";
import Providers from "./-providers";
import { ConsentGate, PageViewTracker, WebVitalsReporter } from "./-analytics";
import {
  consentDefaultsSnippet,
  ga4HeadScripts,
  PLAUSIBLE_DOMAIN,
} from "@/lib/analytics";
import { getAnnouncement } from "@/lib/content";

export const Route = createRootRoute({
  loader: async () => ({ announcement: await getAnnouncement() }),
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1, maximum-scale=5",
      },
      {
        title:
          "Mozimo - India's Premier European Style Bean to Bar Chocolate Experience",
      },
      {
        name: "description",
        content:
          "Mozimo's journey is a passionate pursuit of crafting exceptional chocolate that celebrates the origin of each cocoa bean. Experience the epitome of indulgence with our perfectly tempered chocolate.",
      },
      {
        name: "keywords",
        content:
          "chocolate, bean to bar, artisanal chocolate, premium chocolate, Indian chocolate, European style chocolate, cocoa beans, chocolate tempering",
      },
      { name: "author", content: "Mozimo Chocolate" },
      { name: "creator", content: "Mozimo Chocolate" },
      { name: "publisher", content: "Mozimo Chocolate" },
      { name: "format-detection", content: "email=no,address=no,telephone=no" },
      { name: "theme-color", content: "#342314" },
      { property: "og:title", content: "Mozimo - Premium Artisanal Chocolate" },
      {
        property: "og:description",
        content:
          "India's Premier European Style Bean to Bar Chocolate Experience",
      },
      { property: "og:url", content: "https://mozimo.in" },
      { property: "og:site_name", content: "Mozimo Chocolate" },
      { property: "og:locale", content: "en_US" },
      { property: "og:type", content: "website" },
      { property: "og:image", content: "https://mozimo.in/og-image.jpg" },
      { property: "og:image:width", content: "1200" },
      { property: "og:image:height", content: "630" },
      {
        property: "og:image:alt",
        content: "Mozimo Chocolate - Premium Artisanal Chocolate",
      },
      { name: "twitter:card", content: "summary_large_image" },
      {
        name: "twitter:title",
        content: "Mozimo - Premium Artisanal Chocolate",
      },
      {
        name: "twitter:description",
        content:
          "India's Premier European Style Bean to Bar Chocolate Experience",
      },
      {
        name: "twitter:image",
        content: "https://mozimo.in/og-image.jpg",
      },
      { name: "robots", content: "index, follow" },
      {
        name: "googlebot",
        content:
          "index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1",
      },
      {
        name: "google-site-verification",
        content: "vV-fEo3yXs8m0NUhB6JWhYI4pSH0uYVkbT8pgUWuU1I",
      },
    ],
    links: [
      { rel: "icon", href: "/favicon.ico" },
      {
        rel: "preload",
        as: "font",
        type: "font/woff2",
        href: "/fonts/fraunces-latin-normal.woff2",
        crossOrigin: "anonymous" as const,
      },
      {
        rel: "preload",
        as: "font",
        type: "font/woff2",
        href: "/fonts/fraunces-latin-italic.woff2",
        crossOrigin: "anonymous" as const,
      },
      { rel: "preload", as: "image", href: "/banners/banner-1.jpg" },
      { rel: "preload", as: "image", href: "/logo/logo-white.svg" },
    ],
    scripts: analyticsHeadScripts(),
  }),
  component: RootDocument,
});

/**
 * Analytics tags, production-only (nothing loads in `npm run dev` or when the
 * corresponding env var is unset). Order matters:
 *   1. Consent Mode v2 regional defaults (must precede the gtag loader),
 *   2. GA4 gtag loader + config (cross-domain linked with shop.mozimo.in),
 *   3. first-party Vince/Plausible-protocol script, proxied at /stats.
 */
function analyticsHeadScripts() {
  if (!import.meta.env.PROD) return [];
  return [
    ...(ga4HeadScripts().length
      ? [{ children: consentDefaultsSnippet() }, ...ga4HeadScripts()]
      : []),
    ...(PLAUSIBLE_DOMAIN
      ? [
          {
            src: "/stats/js/script.js",
            defer: true,
            "data-domain": PLAUSIBLE_DOMAIN,
            // the tracker derives its event endpoint from the script origin
            // by default; point it at the proxied path explicitly
            "data-api": "/stats/api/event",
          },
        ]
      : []),
  ];
}

function RootDocument() {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Providers>
          <Outlet />
        </Providers>
        {/* analytics — client-only, render nothing */}
        <PageViewTracker />
        <WebVitalsReporter />
        <ConsentGate />
        <Scripts />
      </body>
    </html>
  );
}