import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '@/styles/globals.css'
import { ldJson } from '@/lib/format'
import { Providers } from '@/components/Providers'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { AuthModal } from '@/components/AuthModal'
import { LocationModal } from '@/components/LocationModal'
import { PromoPopup } from '@/components/PromoPopup'
import { AccountDrawer } from '@/components/AccountDrawer'
import { serverGet } from '@/lib/api'
import type { Category } from '@/lib/types'

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

const SITE = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'

export const metadata: Metadata = {
  title: { default: 'Fitorza — Health, Fitness & Wellness Marketplace', template: '%s · Fitorza' },
  description: 'Shop authentic medicines, supplements, personal care and wellness products. Discover gyms, doctors, dietitians and lab tests — Pakistan’s all-in-one health & fitness marketplace.',
  metadataBase: new URL(SITE),
  applicationName: 'Fitorza',
  icons: {
    icon: [{ url: '/favicon.png', type: 'image/png' }, { url: '/icon.png', type: 'image/png', sizes: '64x64' }],
    apple: [{ url: '/brand/fitorza-mark.png' }],
  },
  keywords: ['online pharmacy', 'supplements', 'gyms', 'doctors', 'dietitians', 'lab tests', 'personal care', 'wellness', 'Pakistan', 'health', 'fitness', 'Fitorza'],
  alternates: { canonical: '/' },
  openGraph: {
    type: 'website',
    siteName: 'Fitorza',
    title: 'Fitorza — Health, Fitness & Wellness Marketplace',
    description: 'Authentic medicines, supplements and wellness products. Plus gyms, doctors, dietitians and lab tests — all in one place.',
    url: SITE,
    locale: 'en_PK',
    images: [{ url: '/brand/fitorza-mark.png', width: 512, height: 512, alt: 'Fitorza' }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Fitorza — Health, Fitness & Wellness Marketplace',
    description: 'Authentic medicines, supplements and wellness products. Plus gyms, doctors, dietitians and lab tests — all in one place.',
    images: ['/brand/fitorza-mark.png'],
  },
  robots: { index: true, follow: true, googleBot: { index: true, follow: true, 'max-image-preview': 'large', 'max-snippet': -1 } },
  formatDetection: { telephone: false },
}

async function getCategories(): Promise<Category[]> {
  try {
    const r = await serverGet<{ data: Category[] } | Category[]>('/categories', 3600)
    return (r as { data?: Category[] }).data ?? (r as Category[])
  } catch {
    return []
  }
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const categories = await getCategories()
  const orgLd = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'Fitorza',
    url: SITE,
    logo: `${SITE}/brand/fitorza-mark.png`,
  }
  const siteLd = {
    '@context': 'https://schema.org',
    '@type': 'WebSite',
    name: 'Fitorza',
    url: SITE,
    potentialAction: {
      '@type': 'SearchAction',
      target: `${SITE}/search?q={search_term_string}`,
      'query-input': 'required name=search_term_string',
    },
  }
  return (
    <html lang="en" className={inter.variable}>
      <body>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(orgLd) }} />
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(siteLd) }} />
        <Providers>
          <Header categories={categories} />
          <main className="min-h-[60vh]">{children}</main>
          <Footer />
          <AuthModal />
          <LocationModal />
          <PromoPopup />
          <AccountDrawer />
        </Providers>
      </body>
    </html>
  )
}
