import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { Logo } from "@/app/components";
import { bannerImages } from "@/app/data";
import { db } from "@/lib/db";
import { isWaiterCallEnabled } from "@/lib/settings";
import { TableServiceActions } from "../TableServiceActions";
import { siteUrl } from "@/lib/seo";

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ token: string }>;
}): Promise<Metadata> {
  const { token } = await params;
  return {
    title: "Table Service",
    alternates: { canonical: `${siteUrl}/table/${token}` },
    robots: { index: false, follow: false, nocache: true },
    openGraph: {
      title: "Bass Resort Table Service",
      description: "Private table menu and waiter service page.",
      url: `${siteUrl}/table/${token}`,
    },
  };
}

type TableRow = {
  table_number: string;
  table_type: string;
  capacity: number;
  location_note: string | null;
  is_active: number;
};

export default async function TablePage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = await params;
  const database = await db();
  const table = await database.collection<TableRow>("restaurant_tables").findOne({ qr_token: token });
  if (!table || !table.is_active) notFound();
  const waiterEnabled = await isWaiterCallEnabled();

  return (
    <main className="table-service-page">
      <img className="table-service-background" src={bannerImages.table} alt="" />
      <div className="table-service-shade" />
      <section className="table-service-card">
        <Logo />
        <span className="table-service-label">{table.table_type}</span>
        <h1>Table {table.table_number}</h1>
        <p>
          Welcome to Bass Resort. Browse the menu or notify our service team when
          you need a waiter.
        </p>
        <div className="table-service-meta">
          <span>Up to {table.capacity} guests</span>
          {table.location_note ? <span>{table.location_note}</span> : null}
        </div>
        <TableServiceActions token={token} waiterEnabled={waiterEnabled} />
        <small>
          {waiterEnabled
            ? "This service does not place an order. A waiter will assist you at the table."
            : "Waiter calling is currently paused. You can still browse the restaurant menu."}
        </small>
      </section>
    </main>
  );
}