import './globals.css';
import type { Metadata } from 'next';
import { Inter, Playfair_Display } from 'next/font/google';
import { Providers } from '@/components/providers';
import { Toaster } from '@/components/ui/toaster';
import { ErrorBoundary } from '@/components/error-boundary';
import { Navbar } from '@/components/navbar';
import { query } from '@/lib/db';
import { unstable_cache } from 'next/cache';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
});

const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-playfair',
  display: 'swap',
  weight: ['400', '500', '600', '700', '800'],
});

const defaultMetadata: Metadata = {
  title: 'Wild Dubai | Dubai Real Estate Marketplace',
  description:
    "Dubai's premier real estate marketplace. Find properties for sale and rent, connect with verified agents, and explore new developments. DLD & RERA compliant.",
  keywords:
    'Dubai real estate, property for sale Dubai, apartments Dubai, villas Dubai, off-plan properties, RERA compliant',
  openGraph: {
    title: 'Wild Dubai | Dubai Real Estate Marketplace',
    description:
      "Dubai's premier real estate marketplace. Find your wild sanctuary — verified villas, penthouses & off-plan developments.",
    type: 'website',
    locale: 'en_AE',
  },
};

async function _fetchBranding() {
  try {
    const rows = await query<Record<string, any>>(
      'SELECT site_name, tagline, favicon_url FROM branding_settings WHERE id = 1 LIMIT 1'
    );
    return rows[0] ?? {
      site_name: 'Wild Dubai',
      tagline: "Dubai's Premier Real Estate Marketplace",
      favicon_url: null,
    };
  } catch {
    return {
      site_name: 'Wild Dubai',
      tagline: "Dubai's Premier Real Estate Marketplace",
      favicon_url: null,
    };
  }
}

// Cache for 60 seconds — prevents DB flood on every page render
const getServerBranding = unstable_cache(_fetchBranding, ['branding'], { revalidate: 60 });

export async function generateMetadata(): Promise<Metadata> {
  const branding = await getServerBranding();
  return {
    title: branding.site_name,
    description: branding.tagline ?? defaultMetadata.description,
    keywords: defaultMetadata.keywords,
    openGraph: {
      title: branding.site_name,
      description: branding.tagline ?? defaultMetadata.description,
      type: 'website',
      locale: 'en_AE',
    },
    icons: branding.favicon_url ? { icon: branding.favicon_url } : undefined,
  };
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <body
        className={`${inter.variable} ${playfair.variable} font-sans bg-surface text-on-surface font-body-md antialiased`}
        suppressHydrationWarning
      >
        <ErrorBoundary>
          <Providers>
            <Toaster>
              <Navbar />
              {children}
            </Toaster>
          </Providers>
        </ErrorBoundary>
      </body>
    </html>
  );
}
