import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";

import { Providers } from "@/components/providers";
import { SiteShell } from "@/components/layout/site-shell";
import { GoogleAnalytics } from "@/components/analytics/google-analytics";
import { siteConfig } from "@/lib/constants";
import {
  buildMetadata,
  organizationLd,
  softwareApplicationLd,
  websiteLd,
} from "@/lib/seo";

const fontSans = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
  preload: true,
});

const fontMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap",
  preload: false,
});

export const metadata: Metadata = {
  ...buildMetadata({
    title: `${siteConfig.name} — Online Markdown Editor with Live Preview`,
    description: siteConfig.description,
    path: "/",
  }),
  applicationName: siteConfig.name,
  generator: "Next.js",
  manifest: "/manifest.webmanifest",
  appleWebApp: {
    capable: true,
    title: siteConfig.shortName,
    statusBarStyle: "default",
  },
  icons: {
    icon: [{ url: "/icon.svg", type: "image/svg+xml" }],
    shortcut: ["/icon.svg"],
  },
  verification: {
    google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
    other: process.env.NEXT_PUBLIC_BING_SITE_VERIFICATION
      ? { "msvalidate.01": process.env.NEXT_PUBLIC_BING_SITE_VERIFICATION }
      : undefined,
  },
  category: "developer-tools",
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0f172a" },
  ],
  colorScheme: "light dark",
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${fontSans.variable} ${fontMono.variable}`}
    >
      <head>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          rel="alternate"
          type="application/rss+xml"
          title={`${siteConfig.name} Blog RSS`}
          href="/feed.xml"
        />
      </head>
      <body className="min-h-dvh bg-background font-sans text-foreground">
        {/* Global structured data — emitted server-side for SEO crawlers. */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: websiteLd() }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: organizationLd() }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: softwareApplicationLd() }}
        />

        <a
          href="#main"
          className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-3 focus:py-2 focus:text-primary-foreground"
        >
          Skip to content
        </a>

        <Providers>
          <SiteShell>{children}</SiteShell>
        </Providers>

        <GoogleAnalytics />
      </body>
    </html>
  );
}
