import type { Metadata } from "next";
import { ArrowRight, Phone } from "lucide-react";
import { PageHero, Reveal, SiteFooter, SiteNav } from "../components";
import { bannerImages, hotel, imageLibrary } from "../data";
import { featuredMenu, menuSlug } from "../menu-data";
import { getMenu } from "@/lib/menu";
import { TableServiceActions } from "../table/TableServiceActions";
import { isWaiterCallEnabled } from "@/lib/settings";
import { MenuCategoryNav } from "./MenuCategoryNav";
import { pageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export const metadata: Metadata = pageMetadata({
  title: "Restaurant Menu in Bhaktapur",
  description:
    "Browse the live Bass Resort restaurant menu with breakfast, momo, thakali sets, Newari dishes, snacks, drinks, sizzlers, and current NPR prices.",
  path: "/menu",
  image: "/images/generated-dining.png",
  keywords: [
    "restaurant menu Bhaktapur",
    "Bass Resort menu",
    "Newari food Bhaktapur",
    "momo restaurant Bhaktapur",
    "thakali set Bhaktapur",
  ],
});

export default async function MenuPage({
  searchParams,
}: {
  searchParams: Promise<{ table?: string }>;
}) {
  const { table } = await searchParams;
  const menuItems = await getMenu();
  const waiterEnabled = table ? await isWaiterCallEnabled() : false;
  const featuredItems = featuredMenu
    .map((name) => menuItems.flatMap((group) => group.items).find((item) => item.name === name))
    .filter((item) => item !== undefined);

  return (
    <>
      <Reveal />
      <SiteNav />
      <main>
        <PageHero
          title="Restaurant Menu"
          copy="Browse food, drinks, snacks, specials, and prices directly from your table."
          image={bannerImages.menu}
          imagePosition="center 48%"
        />

        <section className="section menu-section qr-menu-section readable-menu">
          <div className="container">
            <div className="menu-feature">
              <div className="menu-content reveal">
                <span className="eyebrow">Bass Resort Dining</span>
                <h2>Order-ready menu for guests at the table.</h2>
                <p>
                  Choose from breakfast, thakali sets, momo, noodles, snacks,
                  chicken, mutton, fish, cold drinks, beer, spirits, and house
                  specials. Prices are listed in NPR.
                </p>
                <div className="menu-highlights">
                  {featuredItems.map((item) => (
                    <span key={item.id}>
                      <strong>{item.price}</strong>
                      {item.name}
                    </span>
                  ))}
                </div>
                <div className="hero-actions menu-actions">
                  <a className="primary-button dark" href={`tel:${hotel.phone}`}>
                    <Phone size={18} /> Call Staff
                  </a>
                  <a className="secondary-button menu-secondary" href="/booking">
                    Book Stay <ArrowRight size={18} />
                  </a>
                </div>
              </div>
              <div className="menu-visual reveal">
                <img src={imageLibrary[10]} alt="Bass Resort dining detail" />
                <div className="menu-visual-badge">
                  <span>Open Daily</span>
                  <strong>7 AM - 10 PM</strong>
                </div>
              </div>
            </div>

            <div className="menu-summary-bar reveal">
              <span>{menuItems.length} categories</span>
              <span>{menuItems.reduce((total, group) => total + group.items.length, 0)} menu items</span>
              <span>Prices in NPR</span>
            </div>

            <MenuCategoryNav
              categories={menuItems.map((group) => ({
                name: group.category,
                slug: menuSlug(group.category),
              }))}
            />

            <div className="menu-board">
              {menuItems.map((group, groupIndex) => (
                <article
                  className="menu-group reveal"
                  id={`menu-${menuSlug(group.category)}`}
                  key={group.category}
                  style={{ transitionDelay: `${Math.min(groupIndex, 8) * 45}ms` }}
                >
                  <div className="menu-group-head">
                    <h3>{group.category}</h3>
                    <span>{group.items.length} items</span>
                  </div>
                  {group.items.map((item) => (
                    <div className="menu-item" key={item.id}>
                      <div>
                        <h4>{item.name}</h4>
                        {item.description ? <p>{item.description}</p> : null}
                      </div>
                      <strong>{item.price}</strong>
                    </div>
                  ))}
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>
      {table ? <TableServiceActions token={table} compact waiterEnabled={waiterEnabled} /> : null}
      <SiteFooter />
    </>
  );
}