import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
    DialogDescription,
} from "@/components/ui/dialog"

import { Button } from "@/components/ui/button"
import { useForm } from "@inertiajs/react"
import { toast } from "sonner"
import { CheckoutBookingInput } from "@/types/home/bookings"
import { Spinner } from "../ui/spinner"
import { calAdultTotal, calChildrenTotal } from "@/utils/client/calBooking"
import { useEffect } from "react"
import Price from "./Price"

type Props = {
    open: boolean
    setOpen: (value: boolean) => void
    booking: CheckoutBookingInput
}

export default function ConfirmBooking({ open, setOpen, booking }: Props) {

    console.log('Confirm Booking data', booking);


    // Initialize form with your booking object
    const { setData, post, processing } = useForm<CheckoutBookingInput>({ ...booking });

    const confirmBooking = () => {
        post('/booking/store', {
            onSuccess: () => {
                toast.success('Booking confirmed!');
                // setOpen(false);
            },
            onError: (errors) => {
                toast.error('Failed to confirm booking.');
            },
        });
    };

    useEffect(() => {
        setData(booking)
    }, [booking])

    return (
        <Dialog open={open} onOpenChange={setOpen} >
            <DialogContent className="min-w-2xl w-full">

                <DialogHeader className="gap-0">
                    <p className="text-xs uppercase tracking-[0.35em] text-main font-semibold "> Reservation Summary    </p>
                    <h2 className="text-2xl font-semibold tracking-tight text-gray-900 ">     Confirm Your Stay    </h2>
                    <p className="text-xs text-gray-500  max-w-md">  Please review your reservation details before completing your booking. </p>
                </DialogHeader>

                <div className="space-y-6 animate-in fade-in slide-in-from-bottom-3 duration-500">

                    {/* ================= GUEST SECTION ================= */}
                    <div className="space-y-5">

                        {/* Guest Header */}
                        <div className="space-y-1">

                            <p className="text-[10px] uppercase tracking-[0.4em] text-gray-400">
                                Guest
                            </p>

                            <div className="flex items-center gap-3">

                                {/* Avatar */}
                                {/* <div className="h-9 w-9 rounded-xl bg-gradient-to-br from-main via-main/90 to-main/70 text-white flex items-center justify-center font-semibold shadow-sm">
                                    {booking.guest.first_name?.charAt(0)}
                                    {booking.guest.last_name?.charAt(0)}
                                </div> */}

                                {/* Name Block */}
                                <div className="leading-tight">
                                    <p className="text-sm font-semibold text-gray-900 tracking-tight">
                                        {booking.guest.first_name} {booking.guest.last_name}
                                    </p>
                                    <p className="text-xs text-gray-500">
                                        Reservation holder
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Soft Divider */}
                        <div className="h-px w-full bg-linear-to-r from-transparent via-gray-200 to-transparent" />

                        {/* Contact Grid */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs">

                            <div className="space-y-1">
                                <p className="uppercase tracking-[0.35em] text-gray-400 text-[10px]">
                                    Email
                                </p>
                                <p className="text-gray-900 font-medium break-all">
                                    {booking.guest.email}
                                </p>
                            </div>

                            <div className="space-y-1">
                                <p className="uppercase tracking-[0.35em] text-gray-400 text-[10px]">
                                    Phone
                                </p>
                                <p className="text-gray-900 font-medium">
                                    {booking.guest.phone}
                                </p>
                            </div>

                            <div className="space-y-1">
                                <p className="uppercase tracking-[0.35em] text-gray-400 text-[10px]">
                                    Country
                                </p>
                                <p className="text-gray-900 font-medium">
                                    {booking.guest.country}
                                </p>
                            </div>
                        </div>

                        {/* Special Requests */}
                        {booking.guest.special_requests && (
                            <div className="pt-2 animate-in fade-in duration-700">

                                <p className="text-[10px] uppercase tracking-[0.4em] text-main mb-2">
                                    Special Requests
                                </p>

                                <div className="relative pl-3 border-l-2 border-main/10">
                                    <p className="text-xs text-gray-700 leading-relaxed">
                                        {booking.guest.special_requests}
                                    </p>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* ================= DIVIDER ================= */}
                    <div className="h-px w-full bg-linear-to-r from-transparent via-gray-200 to-transparent" />

                    {/* ================= STAY + PAYMENT ================= */}
                    <div className="grid md:grid-cols-2 gap-10 text-xs text-gray-600 animate-in fade-in slide-in-from-bottom-2 duration-700">

                        {/* Stay */}
                        <div className="space-y-3">

                            {[
                                ["Check-in", booking.check_in],
                                ["Check-out", booking.check_out],
                                ["Guests", `${calAdultTotal(booking.rooms)} Adults · ${calChildrenTotal(booking.rooms)} Children`],
                                ["Rooms", booking.rooms.length],
                            ].map(([label, value], i) => (
                                <div
                                    key={i}
                                    className="flex justify-between items-center"
                                >
                                    <span className="text-gray-500">{label}</span>
                                    <span className="text-gray-900 font-medium">
                                        {value}
                                    </span>
                                </div>
                            ))}

                        </div>

                        {/* Payment */}
                        <div className="space-y-3">

                            <div className="flex justify-between items-center">
                                <span className="text-gray-500">Payment</span>
                                <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${booking.payment_option === "pay_now"
                                    ? "bg-emerald-100 text-emerald-700"
                                    : "bg-amber-100 text-amber-700"
                                    }`}>
                                    {booking.payment_option === "pay_now" ? "Pay Now" : "Pay at Hotel"}
                                </span>
                            </div>

                            <div className="flex justify-between items-center">
                                <span className="text-gray-500">Status</span>
                                <span className="text-blue-600 font-medium">Pending</span>
                            </div>

                            <div className="flex justify-between items-center">
                                <span className="text-gray-500">Currency</span>
                                <span className="text-gray-900 font-medium">
                                    {booking.display_currency}
                                </span>
                            </div>

                            <div className="pt-3 border-t border-dashed border-gray-200 flex justify-between items-center font-semibold text-gray-900">
                                <span>Total</span>
                                <span className="text-base">
                                    <Price value={booking.total_price || 0} />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <DialogFooter className="mt-4">

                    <Button disabled={processing} variant="outline" onClick={() => setOpen(false)} >  Cancel    </Button>

                    <Button disabled={processing} onClick={confirmBooking}  > {processing ? <><Spinner />  Confirming...</> : <> Confirm Booking</>}  </Button>

                </DialogFooter>

            </DialogContent>
        </Dialog>
    )
}