"use client";

import { Suspense } from "react";

import Link from "next/link";
import { useSearchParams } from "next/navigation";

import { CheckCircle2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ReservationStatusBadge } from "@/app/_components/reservation-status-badge";
import { useReservationById, useVenue } from "@/stores/platform/use-platform-selectors";

function ConfirmationContent() {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  const reservation = useReservationById(id);
  const venue = useVenue(reservation?.venueId ?? "");
  const venueName = venue?.name;

  return (
    <div className="mx-auto max-w-lg px-6 py-16 text-center">
      <div className="mx-auto mb-6 flex size-16 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600">
        <CheckCircle2 className="size-8" />
      </div>
      <h1 className="text-2xl font-bold">Reservation received</h1>
      <p className="mt-2 text-muted-foreground">
        Thank you! Your booking request has been submitted. Our team will confirm shortly.
      </p>

      {reservation && (
        <Card className="mt-8 text-left">
          <CardContent className="space-y-3 p-6">
            <div className="flex items-center justify-between">
              <span className="font-semibold">{reservation.guestName}</span>
              <ReservationStatusBadge status={reservation.status} />
            </div>
            {venueName && (
              <p className="text-sm font-medium">{venueName}</p>
            )}
            <p className="text-sm text-muted-foreground">
              {reservation.date} at {reservation.time} · Party of {reservation.partySize}
            </p>
            <p className="font-mono text-xs text-muted-foreground">Ref: {reservation.id}</p>
          </CardContent>
        </Card>
      )}

      <Button asChild className="mt-8" variant="outline">
        <Link href="/book">Book another table</Link>
      </Button>
    </div>
  );
}

export default function BookConfirmationPage() {
  return (
    <Suspense fallback={<div className="p-16 text-center text-muted-foreground">Loading…</div>}>
      <ConfirmationContent />
    </Suspense>
  );
}