import PreferenceWrapper from '@/components/wrapper/PreferenceWrapper'
import React from 'react'
import type { Metadata, Viewport } from 'next'
import { getRestaurant } from './lib/getRestaurant'
import { notFound } from 'next/navigation'
import CartChecker from '@/components/CartChecker'

export const dynamic = 'force-dynamic'
export const revalidate = 0

type LayoutParams = { name: string }

export async function generateMetadata({
  params
}: {
  params: Promise<LayoutParams>
}): Promise<Metadata> {
  const { name } = await params
  try {
    const restaurant = await getRestaurant(name)

    const favicon = restaurant.logo || "/icons/web-app-manifest-192x192.png"
    const title = restaurant.seoTitle || restaurant.name

    const defaultIcon = "/icons/web-app-manifest-192x192.png"
    const iconUrl = favicon || defaultIcon

    return {
      title,
      description: restaurant.seoDescription || restaurant.description || `منوی ${restaurant.name}`,
      manifest: `/${name}/manifest.webmanifest`,
      icons: {
        icon: [
          { url: iconUrl },
          { url: iconUrl, sizes: "192x192", type: "image/png" },
          { url: iconUrl, sizes: "512x512", type: "image/png" },
        ],
        shortcut: iconUrl,
        apple: iconUrl,
      },
    }
  } catch {
    return {
      title: `${name} - Dashboard`,
      description: `PWA dashboard for ${name}`,
      manifest: `/${name}/manifest.webmanifest`,
      icons: {
        icon: [
          { url: "/icons/web-app-manifest-192x192.png" },
          { url: "/icons/web-app-manifest-192x192.png", sizes: "192x192", type: "image/png" },
          { url: "/icons/web-app-manifest-512x512.png", sizes: "512x512", type: "image/png" },
        ],
        shortcut: "/icons/web-app-manifest-192x192.png",
        apple: "/icons/web-app-manifest-192x192.png",
      },
    }
  }
}

export async function generateViewport({
  params
}: {
  params: Promise<LayoutParams>
}): Promise<Viewport> {
  try {
    const { name } = await params
    const restaurant = await getRestaurant(name)

    return {
      themeColor: restaurant.menuColor || '#F4F5F9'
    }
  } catch {
    return {
      themeColor: '#F4F5F9'
    }
  }
}

export default async function Layout({
  children,
  params
}: {
  children: React.ReactNode
  params: Promise<LayoutParams>
}): Promise<React.ReactNode> {
  try {
    const { name } = await params
    await getRestaurant(name)
    return <>
      <PreferenceWrapper>{children}</PreferenceWrapper>
      <CartChecker />
    </>
  } catch (error) {
    if (error instanceof Error && error.message === 'RESTAURANT_NOT_FOUND') {
      notFound()
    }
    throw error
  }
}