import { BASE_URL } from "@/lib/constants";
import type { Metadata } from "next";
import { getLocale, getTranslations } from "next-intl/server";
import { cookies } from "next/headers";
import type React from "react";
import GlobalLayout from "../_comps/globalLayout";
import {
  getAllWebsiteData,
  getSocialMedia,
  getLivestream,
  getPolls,
  getWidgetType,
  getCookiesMessage,
} from "./_api/query";
import {
  WebsiteGlobalDataProvider,
  type WebsiteGlobalData,
} from "./_comps/layout/websiteGlobalDataProvider";
import LayoutWebsite from "./_comps/layout";
import ChunkReloadHandler from "./_comps/chunk-reload-handler";  // Handles chunk loading errors
import DeferredGlobalWidgets from "./_comps/layout/deferredGlobalWidgets";

const BRAND_NAME_AR = "صحيفة مال";
const BRAND_NAME_EN = "Maaal";

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations();
  const locale = await getLocale();
  const allWebsiteData = await getAllWebsiteData({ params: { type: locale } });

  console.log("🚀 ~ allWebsiteData:", allWebsiteData);

  const localizedSiteName =
    locale === "ar" ? BRAND_NAME_AR : `${BRAND_NAME_AR} | ${BRAND_NAME_EN}`;
  const title = localizedSiteName || t("common.metaTitle");
  const description =
    "صحيفه مال - منصة الأخبار الاقتصادية الرائدة في السعودية. تابع آخر أخبار المال والأعمال، الأسواق المالية، العقارات، والاستثمار مع تحليلات متعمقة وتقارير حصرية من خبراء الاقتصاد.";

  // Get dynamic favicon from website settings (CMS) - REQUIRED
  const favicon = allWebsiteData?.website_settings?.favicon;

  // Use main_logo for Open Graph/Twitter, fallback to logo
  const logo =
    allWebsiteData?.website_settings?.main_logo ||
    allWebsiteData?.website_settings?.logo ||
    "/logo.png";

  // Convert to absolute URLs
  const logoUrl = logo?.startsWith("http") ? logo : `${BASE_URL}${logo}`;
  const faviconUrl = favicon?.startsWith("http")
    ? favicon
    : favicon
    ? `${BASE_URL}${favicon}`
    : null;
  const socialImageUrl = logoUrl || `${BASE_URL}/og-image.png`;

  // 🔍 DETAILED DEBUGGING LOGS
  console.log("═══════════════════════════════════════════════");
  console.log("📋 METADATA DEBUG INFO:");
  console.log("═══════════════════════════════════════════════");
  console.log("🌐 BASE_URL:", BASE_URL);
  console.log("🌍 Locale:", locale);
  console.log("───────────────────────────────────────────────");
  console.log("🖼️ FAVICON:");
  console.log("  - Original favicon from backend:", favicon);
  console.log("  - Full faviconUrl:", faviconUrl);
  console.log("  - Is absolute?:", favicon?.startsWith("http"));
  console.log("───────────────────────────────────────────────");
  console.log("🎨 LOGO:");
  console.log("  - main_logo:", allWebsiteData?.website_settings?.main_logo);
  console.log("  - logo:", allWebsiteData?.website_settings?.logo);
  console.log("  - Selected logo:", logo);
  console.log("  - Full logoUrl:", logoUrl);
  console.log("  - Is absolute?:", logo?.startsWith("http"));
  console.log("───────────────────────────────────────────────");
  console.log(
    "📦 All website_settings:",
    JSON.stringify(allWebsiteData?.website_settings, null, 2)
  );
  console.log("═══════════════════════════════════════════════");

  // ✅ Arabic (default) uses root path, English uses /en prefix
  // Note: Next.js trailingSlash:true will add the slash automatically
  const canonicalUrl = locale === "ar" ? `${BASE_URL}` : `${BASE_URL}/en`;

  // ✅ Hreflang URLs must match actual routing (ar = no prefix, en = /en/)
  const languages: Record<string, string> = {
    ar: `${BASE_URL}`,
    en: `${BASE_URL}/en`,
    "x-default": `${BASE_URL}`,
  };

  const metadata: Metadata = {
    title,
    description,
    applicationName: BRAND_NAME_AR,
    appleWebApp: {
      title: BRAND_NAME_AR,
      statusBarStyle: "default",
      capable: true,
    },
    other: {
      "site_name:ar": BRAND_NAME_AR,
      "site_name:en": BRAND_NAME_EN,
    },
    manifest: "/manifest.json",
    alternates: {
      canonical: canonicalUrl,
      languages,
    },
    // icons:  {
    //   // Fallback to local favicon if CMS favicon not available
    //   icon: [
    //     { url: '/favicon-512.png', sizes: 'any', type: 'image/png' },
    //     { url: '/favicon-192.png', sizes: '192x192', type: 'image/png' },
    //     { url: '/favicon.png', type: 'image/png' },
    //   ],
    //   shortcut: '/favicon.ico',
    //   apple: '/favicon-192.png',
    // },
    openGraph: {
      title,
      description,
      type: "website" as const,
      url: canonicalUrl,
      siteName: BRAND_NAME_AR,
      countryName: "المملكة العربية السعودية",
      emails: "info@maaal.com",
      phoneNumbers: "966551443666",
      alternateLocale: ["ar", "en"],
      locale: locale === "ar" ? "ar_SA" : "en_US",
      images: [
        {
          url: socialImageUrl,
          width: 1200,
          height: 630,
          alt: title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: socialImageUrl,
      site: "@maaal",
    },
  };

  // 🔍 LOG THE FINAL METADATA OBJECT
  console.log("───────────────────────────────────────────────");
  console.log("📤 FINAL METADATA OUTPUT:");
  // console.log("  - faviconUrl used:", faviconUrl);
  // console.log("  - logoUrl used:", logoUrl);
  console.log("═══════════════════════════════════════════════");

  return metadata;
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const theme = (await cookies()).get("theme")?.value;
  const locale = await getLocale();
  const [
    allWebsiteDataResult,
    socialMediaResult,
    livestreamResult,
    pollsResult,
    widgetsResult,
    cookiesMessageResult,
  ] = await Promise.allSettled([
    getAllWebsiteData({ params: { type: locale } }),
    getSocialMedia(),
    getLivestream(),
    getPolls(),
    getWidgetType({ params: { type: locale } }),
    getCookiesMessage(),
  ]);

  const allWebsiteData =
    allWebsiteDataResult.status === "fulfilled"
      ? allWebsiteDataResult.value
      : null;

  const websiteGlobalData: WebsiteGlobalData = {
    socialMedia:
      socialMediaResult.status === "fulfilled" ? socialMediaResult.value ?? [] : [],
    livestream:
      livestreamResult.status === "fulfilled" ? livestreamResult.value ?? null : null,
    polls: pollsResult.status === "fulfilled" ? pollsResult.value ?? [] : [],
    widgets: widgetsResult.status === "fulfilled" ? widgetsResult.value ?? [] : [],
    cookiesMessage:
      cookiesMessageResult.status === "fulfilled"
        ? cookiesMessageResult.value ?? null
        : null,
  };

  const websiteSettings = allWebsiteData?.website_settings;
  const logoAsset =
    websiteSettings?.main_logo || websiteSettings?.logo || "/logo.png";
  const logoUrl = logoAsset.startsWith("http")
    ? logoAsset
    : `${BASE_URL}${logoAsset}`;

  const structuredData = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": `${BASE_URL}/#website`,
        url: BASE_URL,
        name: BRAND_NAME_AR,
        alternateName: BRAND_NAME_EN,
        inLanguage: locale === "ar" ? "ar" : "en",
        potentialAction: {
          "@type": "SearchAction",
          target: `${BASE_URL}/search?query={search_term_string}`,
          "query-input": "required name=search_term_string",
        },
      },
      {
        "@type": "Organization",
        "@id": `${BASE_URL}/#organization`,
        name: BRAND_NAME_AR,
        alternateName: BRAND_NAME_EN,
        url: BASE_URL,
        logo: logoUrl,
      },
    ],
  };

  return (
    <GlobalLayout
      params={{ locale }}
      providerType="website"
      siteTracking={allWebsiteData?.site_tracking}
      // analysis={analysis}
    >
      {/* Auto-reload page when chunk loading fails after deployment */}
      <ChunkReloadHandler />

      <WebsiteGlobalDataProvider value={websiteGlobalData}>
        <LayoutWebsite
          theme={theme}
          websiteSetting={allWebsiteData?.website_settings}
          GAStatus={allWebsiteData?.analysis_setting?.google_analysis_status}
          fonts={allWebsiteData?.fonts}
          maintenance={allWebsiteData?.maintenance_mode}
          menus={allWebsiteData?.menus}
        >
          <script
            type="application/ld+json"
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(structuredData),
            }}
          />
          <DeferredGlobalWidgets />
          {children}
        </LayoutWebsite>
      </WebsiteGlobalDataProvider>
    </GlobalLayout>
  );
}