import type { Metadata } from "next";
import { LANGS, SITE, UI, type Lang } from "@/lib/config";
import "../globals.css";
import LayoutContent from "@/components/LayoutContent";
import { WebVitals } from "@/components/WebVitals";
import { getContentSection } from "@/lib/site-content/fetchers";
import { buildThemeCssVars } from "@/lib/site-content/theme";
import type { CSSProperties } from "react";

export async function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Metadata {
  const isAr = params.lang === "ar";
  const title = isAr
    ? "موعدي — مساعد واتساب ذكي للعيادات والتجميل"
    : "Mawidi — GCC AI receptionist";

  const description = isAr
    ? "حوّل رسائل الواتساب الضائعة إلى مواعيد مدفوعة بالعربية والإنجليزية."
    : "Turn missed WhatsApps into booked, prepaid appointments in Arabic & English.";

  const alternates = {
    languages: {
      "x-default": `https://${SITE.domain}/en`,
      en: `https://${SITE.domain}/en`,
      ar: `https://${SITE.domain}/ar`,
    },
    canonical: `https://${SITE.domain}/${params.lang}`,
  };

  const keywords = isAr
    ? [
        "استقبال ذكي",
        "أتمتة واتساب",
        "حجز مواعيد عيادات",
        "بوت واتساب طبي",
        "موعدي",
        "سداد عربون",
      ]
    : [
        "AI receptionist",
        "WhatsApp automation",
        "Clinic booking bot",
        "Medical appointments",
        "Mawidi",
        "Deposit collection",
      ];

  return {
    title,
    description,
    keywords,
    alternates,
    metadataBase: new URL(`https://${SITE.domain}`),
    openGraph: {
      title,
      description,
      url: `https://${SITE.domain}/${params.lang}`,
      siteName: "Mawidi",
      locale: isAr ? "ar" : "en",
      type: "website",
      images: [
        {
          url: `https://${SITE.domain}/images/og/mawidi-og-1200x630.png`,
          width: 1200,
          height: 630,
          alt: isAr
            ? "موعدي - مساعد واتساب ذكي"
            : "Mawidi - AI WhatsApp Receptionist",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [`https://${SITE.domain}/images/og/mawidi-og-1200x630.png`],
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
  };
}

export default async function LangLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: Lang };
}) {
  const currentLang = LANGS.includes(params.lang)
    ? params.lang
    : SITE.defaultLang;
  const dir = UI[currentLang].dir;
  const isRTL = dir === "rtl";
  const themeSettings = await getContentSection("theme", { lang: currentLang });
  const cssVars = buildThemeCssVars(themeSettings as any) as CSSProperties;

  return (
    <div
      dir={dir}
      className={isRTL ? "rtl text-right" : "ltr text-left"}
      style={cssVars}
    >
      <WebVitals />
      <LayoutContent lang={params.lang}>{children}</LayoutContent>
    </div>
  );
}