import type { ReactNode } from 'react'

import { Inter, Source_Serif_4, 
  IBM_Plex_Mono, 
  Gabriela, 
  Geist,
  Geist_Mono,
  JetBrains_Mono,
  Merriweather,
  Lato,
  Roboto_Mono,
  Nunito,
  Lora,
  Fira_Code,
  Source_Code_Pro,
  Outfit,
  Barlow,
  PT_Serif,
  Montserrat,
  DM_Sans,
  Space_Mono,
  Playfair_Display,
  Ubuntu_Mono,
  Delius_Swash_Caps
 } from 'next/font/google'
import type { Metadata } from 'next'

import { ThemeProvider } from '@/components/theme-provider'
import { TooltipProvider } from '@/components/ui/tooltip'

import { cn } from '@/lib/utils'
import { headers } from 'next/headers'

import './globals.css'
// import './rollerblindjakarta-globals.css'
// import './rollerblindbekasi-globals.css'

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

const sourceSerif4 = Source_Serif_4({
  variable: '--font-source-serif-4',
  subsets: ['latin']
})

const ibmPlexMono = IBM_Plex_Mono({
  variable: '--font-ibm-plex-mono',
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700']
})

const gabriela = Gabriela({
  variable: '--font-gabriela',
  subsets: ['latin'],
  weight: ['400']
})

const deliusSwashCaps = Delius_Swash_Caps({
  variable: '--font-delius-swash-caps',
  subsets: ['latin'],
  weight: ['400']
})

const geist = Geist({
  variable: '--font-geist',
  subsets: ['latin'],
  weight: ['400']
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700']
})

const jetBrainsMono = JetBrains_Mono({
  variable: '--font-jet-brains-mono',
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700']
})

const merriweather = Merriweather({
  variable: '--font-merriweather',
  subsets: ['latin']
})

const lato = Lato({
  variable: '--font-lato',
  subsets: ['latin'],
  weight: ['100','300', '400', '700', '900'],
})

const robotoMono = Roboto_Mono({
  variable: '--font-roboto-mono',
  subsets: ['latin'],
  weight: ['100','300', '400', '700'],
})

const nunito = Nunito({
  variable: '--font-nunito',
  subsets: ['latin'],
  weight: ['400'],
})

const lora = Lora({
  variable: '--font-lora',
  subsets: ['latin'],
  weight: ['400','600','700'],
})

const firaCode = Fira_Code({
  variable: '--font-fira-code',
  subsets: ['latin'],
  weight: ['300','400','500','600','700'],
})

const sourceCodePro = Source_Code_Pro({
  variable: '--font-source-code-pro',
  subsets: ['latin'],
  weight: ['300','400','500','600','700'],
})

const outfit = Outfit({
  variable: '--font-outfit',
  subsets: ['latin'],
  weight: ['300','400','500','600','700'],
})

// const barlow = Barlow({
//   variable: '--font-barlow',
//   subsets: ['latin'],
//   weight:['300', '400', '500', '600', '700']
// })

// const ptSerif = PT_Serif({
//   variable: '--font-pt-serif',
//   subsets: ['latin'],
//   weight:['400','700']
// })

// const montserrat = Montserrat({
//   variable: '--font-montserrat',
//   subsets: ['latin'],
//   weight: ['300','400','500','600','700'],
// })

const dmSans = DM_Sans({
  variable: '--font-dm-sans',
  subsets: ['latin'],
  weight: ['300','400','500','600','700'],
})

const spaceMono = Space_Mono({
  variable: '--font-space-mono',
  subsets: ['latin'],
  weight:['400','700']
})

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

const ubuntuMono = Ubuntu_Mono({
  variable: '--font-ubuntu-mono',
  subsets: ['latin'],
  weight:['400','700']
})

import { fetchHomepageData, getMediaUrl } from '@/lib/api'
import { WhatsAppButton } from '@/components/layout/whatsapp-button'
import { TrackingScripts } from '@/components/layout/tracking-scripts'
import Head from 'next/head'

export async function generateMetadata(): Promise<Metadata> {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  
  const data = await fetchHomepageData(host);
  const domain = data?.domain;

  const title = domain?.meta_title || domain?.name || 'Home'
  const description = domain?.meta_description || domain?.short_description || 'Website'
  
  // Setting custom favicon and apple icon based on domain logo
  const icons: any = {}
  if (domain?.favicon) {
    icons.icon = getMediaUrl(domain.favicon)
    icons.apple = getMediaUrl(domain.favicon)
  } else if (domain?.logo) {
    icons.icon = getMediaUrl(domain.logo)
    icons.apple = getMediaUrl(domain.logo)
  }
  console.log(host)

  const proto = headersList.get('x-forwarded-proto') || 'https'
  const uri = headersList.get('x-forwarded-uri') || ''

  const fullUrl = `${proto}://${host}${uri}`

  const metadatabaseUrl = host ? `https://${host}` : 'http://localhost:3000';

  return {
    title: {
      template: `%s`,
      default: title
    },
    description: description,
    robots: 'index,follow',
    keywords: domain?.meta_keyword ? [domain.meta_keyword] : [],
    icons: icons,
    // metadataBase: new URL(`${metadatabaseUrl ?? 'http://localhost:3000'}`),
    openGraph: {
      title: title,
      description: description,
      type: 'website',
      siteName: domain?.name,
      url: `${metadatabaseUrl ?? 'http://localhost:3000'}`,
      images: domain?.logo ? [
        {
          url: getMediaUrl(domain.logo),
          alt: title
        }
      ] : []
    },
    twitter: {
      card: 'summary_large_image',
      title: title,
      description: description
    },
    alternates: {
      canonical: `${proto}://${host}${uri}`,
    },
  }
}

const RootLayout = async ({ children }: Readonly<{ children: ReactNode }>) => {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  const data = await fetchHomepageData(host);
  const domain = data?.domain;

  return (
    <html
      lang='en'
      className={cn(
        inter.variable,
        sourceSerif4.variable,
        ibmPlexMono.variable,
        gabriela.variable,
        deliusSwashCaps.variable,
        geist.variable,
        geistMono.variable,
        jetBrainsMono.variable,
        merriweather.variable,
        lato.variable,
        robotoMono.variable,
        nunito.variable,
        lora.variable,
        firaCode.variable,
        sourceCodePro.variable,
        outfit.variable,
        // barlow.variable,
        // ptSerif.variable,
        // montserrat.variable,
        dmSans.variable,
        spaceMono.variable,
        playfairDisplay.variable,
        ubuntuMono.variable,
        'flex min-h-full w-full scroll-smooth'
      )}
      data-domain={domain?.theme}
      suppressHydrationWarning
    >
     
      <body className='flex min-h-full w-full flex-auto flex-col'>
        <TrackingScripts googleTag={domain?.google_tag} facebookPixel={domain?.facebook_pixel} />
        <ThemeProvider attribute='class' enableSystem={false} disableTransitionOnChange>
          <TooltipProvider>
            {children}
            <WhatsAppButton whatsapp={domain?.whatsapp} />
          </TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

export default RootLayout