import type { Metadata, Viewport } from "next";
import localFont from "next/font/local";
import { defaultSEOConfig } from "@/config/seoConfig";
import { getSiteSeoMeta, getSeoPage } from "@/lib/i18n/seo";
import { getLanguageDefinition } from "@/lib/i18n/registry";
import { getServerLanguage } from "@/lib/i18n/server";
import SiteJsonLd from "@/components/seo/SiteJsonLd";
import Script from 'next/script';
import "./globals.css";
import Layout from "@/components/Layout";
import RegisterSW from "@/components/RegisterSW";
import ClientErrorBoundary from "@/components/ClientErrorBoundary";

const iranSansFont = localFont({
  src: "../../public/fonts/IRANSansX-Regular.woff",
  display: "swap",
  fallback: ["Tahoma", "Arial", "sans-serif"],
});

export async function generateMetadata(): Promise<Metadata> {
  const lang = await getServerLanguage();
  const site = getSiteSeoMeta(lang);
  const home = getSeoPage("home", lang);

  return {
    title: {
      default: home.title || site.name,
      template: `%s | ${site.titleSuffix}`,
    },
    description: home.description,
    metadataBase: new URL("https://modstagram.com"),
    keywords: site.keywords,
    authors: [{ name: "Modstagram", url: "https://modstagram.com" }],
    creator: "Modstagram",
    manifest: "/manifest.webmanifest",
    icons: {
      icon: [
        { url: "/favicon.png", type: "image/png", sizes: "32x32" },
        { url: "/images/icons/192x192.png", type: "image/png", sizes: "192x192" },
      ],
      shortcut: ["/favicon.png"],
      apple: [
        { url: "/images/icons/apple-touch-icon.png", sizes: "180x180" },
        { url: "/images/icons/192x192.png", sizes: "192x192" },
      ],
    },
    appleWebApp: {
      capable: true,
      statusBarStyle: "default",
      title: site.name,
    },
    openGraph: {
      siteName: site.name,
      locale: lang === "fa" ? "fa_IR" : "en_US",
      type: "website",
      images: defaultSEOConfig.openGraph?.images || [],
    },
    robots: "index, follow",
    twitter: {
      card: "summary_large_image",
      creator: "@modstagram",
      site: "@modstagram",
      images: defaultSEOConfig.openGraph?.images?.map((img) => img.url) || [],
    },
    verification: {
      google: "yVjB5yKPchPUtxl33GWVyMvjH6wCEInqEvaH7ZsXXMo",
    },
    other: {
      "theme-color": "#FF107D",
      "mobile-web-app-capable": "yes",
      "msapplication-TileColor": "#FF107D",
      samandehi: "522190795",
    },
  };
}

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  viewportFit: "cover",
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
  ],
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const lang = await getServerLanguage();
  const def = getLanguageDefinition(lang);

  return (
    <html lang={def.htmlLang} dir={def.direction} suppressHydrationWarning>
      <body className={`${iranSansFont.className} antialiased`}>
        <SiteJsonLd />
        <RegisterSW />
        <ClientErrorBoundary>
          <Layout>{children}</Layout>
        </ClientErrorBoundary>
        {/* ====================== گوگل آنالیتیکس ====================== */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-GT0QQX6F97"
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-GT0QQX6F97');
          `}
        </Script>
        {/* ======================================================== */}      </body>
    </html>
  );
}
