import { get } from "lodash";
import type { Metadata } from "next";

import MenuItems from "@/components/MenuItems/MenuItems";

import { apiEndpoints } from "@/lib/api";
import { canonicalUrls } from "@/lib/canonical";
import { Product } from "@/types";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  try {
    const { slug } = await params;
    const { data: menu } = await apiEndpoints.menus(slug);

    const title = get(menu, ["name"], `Menu - ${slug}`);
    const description = `Explore our ${title} collection at La Tarte Patisserie. Fresh baked goods crafted with love.`;
    const thumbnailUrl = get(menu, ["thumbnail", "url"], "");

    return {
      title,
      description,
      alternates: {
        canonical: canonicalUrls.menu(slug),
      },
      openGraph: {
        title: `${title} | La Tarte Patisserie`,
        description,
        images: thumbnailUrl ? [{ url: thumbnailUrl }] : undefined,
        type: "website",
        url: canonicalUrls.menu(slug),
      },
    };
  } catch (error) {
    console.error("Failed to fetch menu metadata:", error);

    const { slug } = await params;
    return {
      title: `Menu - ${slug} | La Tarte Patisserie`,
      description: "Explore our delicious menu items at La Tarte Patisserie.",
      alternates: {
        canonical: canonicalUrls.menu(slug),
      },
    };
  }
}

const MenuItemPage = async ({
  params,
}: {
  params: Promise<{ slug: string }>;
}) => {
  const { slug } = await params;
  const { data: menu } = await apiEndpoints.menus(slug);
  const products = get(menu, ["products"], []);

  if (products.length === 0) {
    return <div>No menu found</div>;
  }

  return <MenuItems products={products as Array<Product>} />;
};

export default MenuItemPage;