import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { Suspense } from "react";
import Link from "next/link";
import { site } from "@/content/site";
import { ticketTiers } from "@/content/tickets";
import { Section } from "@/components/layout/Section";
import { PaymentForm } from "@/components/payment/PaymentForm";
import { AddToCalendar } from "@/components/event/AddToCalendar";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = createPageMetadata(pageSeo.payment);

export default function PaymentPage() {
  return (
    <>
      <Section className="pt-24">
        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
              {site.dates.label}
            </p>
            <h1 className="mt-2 text-4xl font-bold">Tickets & payment</h1>
            <p className="mt-3 max-w-2xl text-muted-foreground">
              Secure your place at {site.venue.name}, {site.venue.address}. Choose a pass and
              complete checkout below.
            </p>
          </div>
          <AddToCalendar />
        </div>

        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {ticketTiers.map((tier) => (
            <Card key={tier.id} className="flex flex-col">
              <CardHeader>
                <CardTitle>{tier.name}</CardTitle>
                <CardDescription>{tier.description}</CardDescription>
              </CardHeader>
              <CardContent className="flex-1">
                <p className="text-3xl font-bold text-[#1f3d7e]">${tier.priceUsd}</p>
                <p className="text-sm text-muted-foreground">per ticket · USD</p>
                <ul className="mt-4 space-y-1 text-sm text-muted-foreground">
                  {tier.features.slice(0, 3).map((f) => (
                    <li key={f}>· {f}</li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full rounded-full" asChild>
                  <Link href={`/payment?ticket=${tier.id}`}>Select</Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </Section>

      <Section variant="muted" id="checkout">
        <h2 className="text-2xl font-bold">Checkout</h2>
        <p className="mt-2 text-muted-foreground">Complete your registration in a few steps.</p>
        <div className="mt-8">
          <Suspense fallback={<p className="text-muted-foreground">Loading checkout…</p>}>
            <PaymentForm />
          </Suspense>
        </div>
      </Section>
    </>
  );
}