import PageLayout from "@/layouts/home/page-layout";
import { Link } from "@inertiajs/react";
import { CheckCircle2, CalendarDays, Users, BedDouble, Mail, Phone, Globe, CreditCard, Sparkles } from "lucide-react";

export default function Success({ bookingSave }: { bookingSave: any }) {

    const bookingSaveLink = `/booking/view?reference=${bookingSave.reference}&email=${bookingSave.guest.email}`;

    return (
        <PageLayout title="Reservation Successful" className="">
            <div className="relative overflow-hidden bg-linear-to-b from-white via-[#faf7f2] to-[#f8f5ef] min-h-screen">

                {/* Luxury Background Glow */}
                <div className="absolute top-10 left-1/2 -translate-x-1/2 h-125 w-125 rounded-full bg-main/10 blur-3xl animate-pulse" />

                <div className="relative max-w-300 2xl:max-w-340 mx-auto px-4 py-14">

                    {/* Success Hero */}
                    <div className="text-center mb-12 animate-in fade-in slide-in-from-bottom-5 duration-700">
                        <div className="inline-flex items-center justify-center h-24 w-24 rounded-full bg-main/10 border border-main/20 mb-6 shadow-[0_0_50px_rgba(212,175,55,0.15)]">
                            <CheckCircle2 className="h-12 w-12 text-main" />
                        </div>

                        <div className="flex justify-center items-center gap-2 mb-3">
                            <Sparkles className="h-5 w-5 text-main animate-pulse" />
                            <p className="uppercase tracking-[0.35em] text-main text-xs font-semibold">
                                Reservation Confirmed
                            </p>
                        </div>

                        <h1 className="text-4xl md:text-6xl font-light tracking-tight text-gray-900">
                            Your Stay is Reserved
                        </h1>

                        <p className="mt-5 text-gray-500 max-w-2xl mx-auto leading-relaxed">
                            Thank you for choosing our luxury hospitality experience.
                            Your reservation has been successfully confirmed and is now awaiting arrival.
                        </p>

                        <div className="mt-8 inline-flex items-center gap-3 rounded-full border border-main/20 bg-white px-6 py-3 shadow-lg shadow-black/5">
                            <span className="text-xs uppercase tracking-[0.25em] text-gray-400">
                                Booking Reference Id
                            </span>

                            <span className="font-semibold text-main tracking-widest">
                                {bookingSave.reference}
                            </span>
                        </div>
                    </div>

                    <div className="grid lg:grid-cols-3 gap-6">

                        {/* Left */}
                        <div className="lg:col-span-2 space-y-6">

                            {/* Guest */}
                            <div className="rounded-xl border border-white/40 bg-white/80 backdrop-blur-xl p-8 shadow-sm shadow-black/5 animate-in fade-in slide-in-from-bottom-5 duration-700">
                                <div className="flex items-center gap-3 mb-6">
                                    <Users className="h-5 w-5 text-main" />
                                    <h2 className="text-xl font-semibold text-gray-900">
                                        Guest Information
                                    </h2>
                                </div>

                                <div className="grid md:grid-cols-2 gap-5">
                                    <div>
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-1">
                                            Full Name
                                        </p>

                                        <p className="text-gray-900 font-medium">
                                            {bookingSave.guest.first_name} {bookingSave.guest.last_name}
                                        </p>
                                    </div>

                                    <div>
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-1">
                                            Country
                                        </p>

                                        <div className="flex items-center gap-2 text-gray-900 font-medium">
                                            <Globe className="h-4 w-4 text-main" />
                                            {bookingSave.guest.country}
                                        </div>
                                    </div>

                                    <div>
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-1">
                                            Email
                                        </p>

                                        <div className="flex items-center gap-2 text-gray-900 font-medium">
                                            <Mail className="h-4 w-4 text-main" />
                                            {bookingSave.guest.email}
                                        </div>
                                    </div>

                                    <div>
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-1">
                                            Phone
                                        </p>

                                        <div className="flex items-center gap-2 text-gray-900 font-medium">
                                            <Phone className="h-4 w-4 text-main" />
                                            {bookingSave.guest.phone}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Stay */}
                            <div className="rounded-xl border border-white/40 bg-white/80 backdrop-blur-xl p-8 shadow-sm shadow-black/5 animate-in fade-in slide-in-from-bottom-5 duration-700 delay-100">
                                <div className="flex items-center gap-3 mb-6">
                                    <CalendarDays className="h-5 w-5 text-main" />
                                    <h2 className="text-xl font-semibold text-gray-900">
                                        Stay Details
                                    </h2>
                                </div>

                                <div className="grid md:grid-cols-2 gap-5">
                                    <div className="rounded-2xl bg-[#faf7f2] p-5 border border-main/10">
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-2">
                                            Check In
                                        </p>

                                        <p className="text-2xl font-semibold text-gray-900">
                                            {bookingSave.check_in}
                                        </p>
                                    </div>

                                    <div className="rounded-2xl bg-[#faf7f2] p-5 border border-main/10">
                                        <p className="text-xs uppercase tracking-widest text-gray-400 mb-2">
                                            Check Out
                                        </p>

                                        <p className="text-2xl font-semibold text-gray-900">
                                            {bookingSave.check_out}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Rooms */}
                            <div className="rounded-xl border border-white/40 bg-white/80 backdrop-blur-xl p-8 shadow-sm shadow-black/5 animate-in fade-in slide-in-from-bottom-5 duration-700 delay-200">
                                <div className="flex items-center justify-between mb-8">
                                    <div className="flex items-center gap-3">
                                        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-main/10 border border-main/20">
                                            <BedDouble className="h-5 w-5 text-main" />
                                        </div>

                                        <div>
                                            <h2 className="text-xl font-semibold text-gray-900">
                                                Reserved Rooms
                                            </h2>

                                            <p className="text-sm text-gray-500">
                                                Your selected luxury accommodations
                                            </p>
                                        </div>
                                    </div>

                                    <div className="hidden md:flex items-center gap-2 rounded-full border border-main/10 bg-main/5 px-4 py-2">
                                        <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />

                                        <span className="text-sm font-medium text-gray-700">
                                            {bookingSave.rooms.length} Room{bookingSave.rooms.length > 1 && "s"} Reserved
                                        </span>
                                    </div>
                                </div>

                                <div className="space-y-6">
                                    {bookingSave.rooms.map((room: any, index: number) => (
                                        <div
                                            key={room.id}
                                            className="group relative overflow-hidden rounded-3xl border border-main/10 bg-linear-to-br from-[#faf7f2] to-white p-7 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-main/10"
                                        >

                                            {/* Glow */}
                                            <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-main/5 blur-3xl opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

                                            {/* Header */}
                                            <div className="relative flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">

                                                <div className="flex gap-5">

                                                    {/* Room Number */}
                                                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm bg-black text-white  font-semibold">
                                                        {index + 1}
                                                    </div>

                                                    <div>
                                                        <div className="flex flex-wrap items-center gap-3 mb-2">
                                                            <h3 className="text-2xl font-semibold tracking-tight text-gray-900">
                                                                {room.room_title}
                                                            </h3>

                                                            <div className="rounded-full border border-main/20 bg-main/10 px-3 py-1 text-xs font-medium uppercase tracking-wider text-main">
                                                                Room #{room.room_number}
                                                            </div>
                                                        </div>

                                                        <p className="text-gray-500 leading-relaxed max-w-xl">
                                                            Elegant interiors, premium comfort, and a refined hospitality experience designed for a relaxing and memorable stay.
                                                        </p>

                                                        {/* Guests */}
                                                        <div className="mt-5 flex flex-wrap items-center gap-3">

                                                            <div className="flex items-center gap-2 rounded-full bg-white px-4 py-2 border border-gray-200 text-sm font-medium text-gray-700">
                                                                <Users className="h-4 w-4 text-main" />
                                                                {room.adults} Adults
                                                            </div>

                                                            <div className="flex items-center gap-2 rounded-full bg-white px-4 py-2 border border-gray-200 text-sm font-medium text-gray-700">
                                                                <Users className="h-4 w-4 text-main" />
                                                                {room.children} Children
                                                            </div>

                                                            {/* {room.meal_package && (
                                                                <div className="flex items-center gap-2 rounded-full bg-main/10 px-4 py-2 border border-main/10 text-sm font-medium text-main">
                                                                    🍽 {room.meal_package.title}
                                                                </div>
                                                            )} */}

                                                        </div>
                                                    </div>
                                                </div>

                                                {/* Price */}
                                                <div className="lg:text-right">
                                                    <p className="text-xs uppercase tracking-[0.25em] text-gray-400 mb-2">
                                                        Room Total
                                                    </p>

                                                    <h3 className="text-3xl font-light tracking-tight text-gray-900">
                                                        {bookingSave.base_currency} {Number(room.grand_total).toLocaleString()}
                                                    </h3>

                                                    <p className="text-sm text-gray-500 mt-1">
                                                        Including meals & selected services
                                                    </p>
                                                </div>
                                            </div>

                                            {/* Bottom Details */}
                                            <div className="relative mt-7  gap-4">



                                                {/* Meal */}
                                                <div className="rounded-xl border border-white bg-white/90 p-5 ">
                                                    <p className="text-xs uppercase tracking-widest text-gray-400 mb-3">
                                                        Dining Package
                                                    </p>

                                                    {room.meal_package ? (
                                                        <div>
                                                            <h4 className="font-semibold text-gray-900">
                                                                {room.meal_package.title}
                                                            </h4>

                                                            <p className="text-sm text-gray-500 mt-1">
                                                                Carefully prepared dining experience throughout your stay.
                                                            </p>

                                                            <div className="mt-4 inline-flex rounded-full bg-main/10 px-3 py-1 text-sm font-medium text-main">
                                                                {bookingSave.base_currency} {Number(room.meal_total).toLocaleString()}
                                                            </div>
                                                        </div>
                                                    ) : (
                                                        <p className="text-sm text-gray-500">
                                                            No meal package selected
                                                        </p>
                                                    )}
                                                </div>


                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>

                        {/* Right */}
                        <div className="space-y-6">

                            <div className="rounded-xl border border-white/40 bg-white/80 backdrop-blur-xl p-8 shadow-sm shadow-black/5 animate-in fade-in slide-in-from-right-5 duration-700 delay-200">
                                <div className="flex items-center gap-3 mb-7">
                                    <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-main/10 border border-main/20">
                                        <CreditCard className="h-5 w-5 text-main" />
                                    </div>

                                    <div>
                                        <h2 className="text-xl font-semibold text-gray-900">
                                            Pricing Breakdown
                                        </h2>

                                        <p className="text-sm text-gray-500">
                                            Taxes, discounts, and reservation totals
                                        </p>
                                    </div>
                                </div>

                                <div className="space-y-4">

                                    {/* Room Total */}
                                    <div className="flex items-center justify-between rounded-2xl border border-gray-100 bg-[#faf7f2] px-5 py-4">
                                        <div>
                                            <p className="font-medium text-gray-900">
                                                Room & Services Total
                                            </p>

                                            <p className="text-sm text-gray-500">
                                                Before taxes and discounts
                                            </p>
                                        </div>

                                        <p className="text-lg font-semibold text-gray-900">
                                            {bookingSave.display_currency} {bookingSave.total_price}
                                        </p>
                                    </div>

                                    {/* Dynamic Price Data */}
                                    {bookingSave.price_data?.map((item: any) => {

                                        const isDiscount = item.direction === "subtract";

                                        return (
                                            <div
                                                key={item.id}
                                                className={`
                        flex items-center justify-between rounded-xl px-5 py-4 border transition-all duration-300
                        ${isDiscount
                                                        ? "bg-red-50 border-red-100"
                                                        : "bg-emerald-50 border-emerald-100"
                                                    }
                    `}
                                            >
                                                <div className="flex items-center gap-3">

                                                    <div className={`
                            flex h-10 w-10 items-center justify-center rounded-xl text-lg
                            ${isDiscount
                                                            ? "bg-red-100 text-red-500"
                                                            : "bg-emerald-100 text-emerald-600"
                                                        }
                        `}>
                                                        {isDiscount ? "−" : "+"}
                                                    </div>

                                                    <div>
                                                        <p className="font-medium text-gray-900">
                                                            {item.name}
                                                        </p>

                                                        <p className="text-sm text-gray-500 capitalize">
                                                            {item.type} • {item.value_type}
                                                        </p>
                                                    </div>
                                                </div>

                                                <p className={`
                        text-lg font-semibold tracking-tight
                        ${isDiscount
                                                        ? "text-red-500"
                                                        : "text-emerald-600"
                                                    }
                    `}>
                                                    {isDiscount ? "-" : "+"}
                                                    {bookingSave.display_currency} {item.value}
                                                </p>
                                            </div>
                                        );
                                    })}


                                </div>
                            </div>

                            {/* Payment */}
                            <div className="rounded-xl border border-main/10 bg-main text-white p-8 shadow-sm shadow-main/20 animate-in fade-in slide-in-from-right-5 duration-700">
                                <div className="flex items-center gap-3 mb-6">
                                    <CreditCard className="h-5 w-5" />
                                    <h2 className="text-xl font-semibold">
                                        Payment Summary
                                    </h2>
                                </div>

                                <div className="space-y-5">

                                    <div className="flex items-center justify-between">
                                        <span className="text-white/70">
                                            Payment Method
                                        </span>

                                        <span className="font-medium capitalize">
                                            {bookingSave.payment_option.replaceAll("_", " ")}
                                        </span>
                                    </div>

                                    <div className="flex items-center justify-between">
                                        <span className="text-white/70">
                                            Booking Status
                                        </span>

                                        <span className="rounded-full bg-white/15 px-3 py-1 text-sm uppercase">
                                            {bookingSave.status}
                                        </span>
                                    </div>

                                    <div className="border-t border-white/10 pt-5">
                                        <p className="text-sm text-white/70 mb-2">  Total Amount  </p>

                                        <h3 className="text-4xl font-light tracking-tight">
                                            {bookingSave.base_currency} {Number(bookingSave.display_total_price).toLocaleString()}
                                        </h3>
                                    </div>
                                </div>
                            </div>

                            {/* Access Booking */}
                            <div className="rounded-xl border border-white/40 bg-white/80 backdrop-blur-xl p-8 shadow-sm shadow-black/5 animate-in fade-in slide-in-from-right-5 duration-700 delay-100">
                                <h2 className="text-xl font-semibold text-gray-900 mb-3">
                                    Access Your Booking Later
                                </h2>

                                <p className="text-gray-500 text-sm leading-relaxed mb-6">
                                    You can revisit and manage your reservation anytime using your booking reference and email address.
                                </p>

                                <Link
                                    href={bookingSaveLink}
                                    target="_blank"
                                    className="group inline-flex items-center justify-center w-full rounded-2xl bg-black px-6 py-4 text-white font-medium transition-all duration-300 hover:bg-main hover:shadow-xl hover:shadow-main/20"
                                >
                                    View Reservation Details

                                    <span className="ml-2 transition-transform duration-300 group-hover:translate-x-1">
                                        →
                                    </span>
                                </Link>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </PageLayout>
    );
}