"use client";

import React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "lucide-react";
import DashboardLayout from "@/components/layout/DashboardLayout";

const BookingConfirmation: React.FC = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

  // Read booking details from URL query
  const restaurantName = searchParams.get("restaurantName") || "Restaurant";
  const date = searchParams.get("date") || "";
  const time = searchParams.get("time") || "";

  return (
    <div className="min-h-[75vh] flex items-center justify-center px-4 py-12">
      <div className="w-full max-w-md bg-white border border-gray-100 rounded-3xl p-8 shadow-[0_12px_40px_rgba(0,0,0,0.06)] flex flex-col items-center text-center transition-all duration-300 hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
        {/* Animated Success Badge Container */}
        <div className="relative mb-6">
          <div className="absolute inset-0 bg-green-100 rounded-full scale-125 animate-ping opacity-25" style={{ animationDuration: '3s' }} />
          <div className="relative bg-green-50 p-4 rounded-full text-green-500 shadow-inner">
            <CheckCircle className="w-16 h-16 animate-bounce" style={{ animationDuration: '2s' }} />
          </div>
        </div>

        {/* Celebratory Heading */}
        <h1 className="text-2xl font-bold text-gray-900 mb-2 tracking-tight">
          Congratulations!
        </h1>
        <p className="text-lg font-semibold text-primary mb-6">
          Your Table is Booked 🎉
        </p>

        {/* Card Details Block */}
        <div className="w-full bg-gray-50 rounded-2xl p-5 mb-6 text-left border border-gray-100">
          <div className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Vendor</div>
          <div className="font-bold text-gray-800 text-base mb-4 truncate">
            {restaurantName}
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <div className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Date</div>
              <div className="font-semibold text-gray-800 text-sm">
                {date}
              </div>
            </div>
            <div>
              <div className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Time</div>
              <div className="font-semibold text-gray-800 text-sm">
                {time}
              </div>
            </div>
          </div>
        </div>

        <p className="text-gray-500 text-sm mb-8 leading-relaxed">
          Your reservation is confirmed. We look forward to serving you!
        </p>

        {/* Go to Home Button */}
        <Button
          className="bg-primary hover:bg-primary/95 text-white font-semibold rounded-xl py-6 text-base transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 w-full shadow-lg shadow-primary/20"
          onClick={() => router.push("/home")}
        >
          Go To Home
        </Button>
      </div>
    </div>
  );
};

export default function BookingConfirmationPageWrapper() {
  return (
    <DashboardLayout>
      <BookingConfirmation />
    </DashboardLayout>
  );
}