import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import "./globals.css";
import { iranYekan } from "./fonts";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import TopBar from "@/components/TopBar";
import MobileBottomNav from "@/components/MobileBottomNav";
import { getCategories, safe } from "@/lib/api";
import { buildCategoryTree, carouselCategories } from "@/lib/categoryTree";
import { getSession } from "@/lib/auth";
import { SITE_NAME } from "@/data/site";
import { SITE_URL } from "@/lib/config";

// Montserrat is the Latin face the live moalem.shop theme pairs with IRANYekan.
const montserrat = Montserrat({
  variable: "--font-en",
  subsets: ["latin"],
  weight: ["500", "700"],
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: `${SITE_NAME} | خرید موبایل، لپ‌تاپ و لوازم جانبی`,
    template: `%s | ${SITE_NAME}`,
  },
  description:
    "خرید اینترنتی گوشی موبایل، لپ‌تاپ، تبلت، کنسول بازی و لوازم جانبی با ضمانت اصالت کالا از فروشگاه موبایل معلم.",
  icons: [{ url: "/favicon.png", type: "image/png" }],
  openGraph: {
    type: "website",
    locale: "fa_IR",
    siteName: SITE_NAME,
    title: `${SITE_NAME} | خرید موبایل، لپ‌تاپ و لوازم جانبی`,
    description:
      "خرید اینترنتی گوشی موبایل، لپ‌تاپ، تبلت، کنسول بازی و لوازم جانبی با ضمانت اصالت کالا از فروشگاه موبایل معلم.",
    url: SITE_URL,
    images: [{ url: "/images/logo.png", width: 130, height: 36, alt: SITE_NAME }],
  },
};

export default async function RootLayout({ children }: LayoutProps<"/">) {
  const [categories, user] = await Promise.all([
    safe(getCategories().then(buildCategoryTree), []),
    getSession(),
  ]);
  const menu = carouselCategories(categories);

  return (
    <html lang="fa" dir="rtl" className={`${iranYekan.variable} ${montserrat.variable} h-full antialiased`}>
      <body className="flex min-h-full flex-col">
        <TopBar />
        <Header menu={menu} user={user} />
        <main className="flex-1 pb-6">{children}</main>
        <Footer categories={menu} />
        {/* Spacer so the fixed mobile bar never covers the end of the footer. */}
        <div className="h-[68px] lg:hidden" />
        <MobileBottomNav categories={menu} user={user} />
      </body>
    </html>
  );
}