import type {Metadata} from 'next';
import localFont from 'next/font/local';
import {hasLocale, NextIntlClientProvider} from 'next-intl';
import {getMessages, setRequestLocale} from 'next-intl/server';
import {notFound} from 'next/navigation';

import {QueryProvider} from '@/app/providers/query-provider';
import {ThemeProvider} from '@/components/theme-provider';
import {Toaster} from '@/components/ui/sonner';
import {TooltipProvider} from '@/components/ui/tooltip';
import {routing} from '@/i18n/routing';

// CSS lives at app/globals.css — one level up from app/[locale]/
import '../globals.css';

const abeeZee = localFont({
  src: '../fonts/ABeeZee-Regular.ttf',
  variable: '--font-abeezee',
  display: 'swap',
  preload: true
});

const droidArabic = localFont({
  src: '../fonts/Droid-Arabic-Kufi.ttf',
  variable: '--font-droid-arabic',
  display: 'swap',
  preload: true
});

export const metadata: Metadata = {
  title: {
    template: '%s | Super Admin',
    default: 'Super Admin',
  },
  description: 'Super admin dashboard',
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
      { url: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
    ],
    apple: { url: '/apple-touch-icon.png' },
  },
};

export default async function LocaleLayout({
  children,
  params
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{locale: string}>;
}>) {
  const {locale} = await params;
  if (!hasLocale(routing.locales, locale)) notFound();

  setRequestLocale(locale);

  const messages = await getMessages();
  const dir = locale === 'ar' ? 'rtl' : 'ltr';
  const font = locale === 'ar' ? droidArabic : abeeZee;

  return (
    <html
      lang={locale}
      dir={dir}
      className={`${font.variable} ${font.className} h-full antialiased`}
      suppressHydrationWarning
    >
      <body className="flex flex-col min-h-full">
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <NextIntlClientProvider messages={messages}>
            <QueryProvider>
              <TooltipProvider>
                {children}
                <Toaster richColors closeButton position="top-center" />
              </TooltipProvider>
            </QueryProvider>
          </NextIntlClientProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
