import { Head, Link, usePage } from '@inertiajs/react';
import { dashboard, login, register } from '@/routes';
import type { SharedData } from '@/types';
import { ArrowLeft, ArrowRight, ArrowRightCircle, Bath, Bed, BedDouble, Bell, Building, Bus, Cake, Calculator, CalendarCheck, CalendarDays, CalendarIcon, CalendarX, Car, CarFront, ChevronDown, ChevronLeft, CircleCheck, ClipboardList, Coffee, Contact, CreditCard, Facebook, Globe, HandCoins, Heart, Home, Info, Instagram, Key, Leaf, Mail, MapPin, Menu, ParkingMeter, ParkingSquare, PersonStanding, Phone, Plane, ShoppingBasket, Snowflake, Sparkle, Sparkles, Star, Sun, Trash, Trash2, Tv, Twitter, Users, UsersRound, Utensils, WashingMachine, Waves, Wifi, Youtube } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from "@/components/ui/drawer"
import { Calendar } from "@/components/ui/calendar"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { useState, useRef, useEffect } from 'react';
import RatingStars from '@/components/core/RatingStars';
import { Progress } from "@/components/ui/progress"
import CounterBar from '@/components/core/CounterBar';
import {
    Field,
    FieldContent,
    FieldDescription,
    FieldLabel,
    FieldLegend,
    FieldTitle,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from '@/components/ui/separator';
import { addDays } from "date-fns"
import { type DateRange } from "react-day-picker"

const GuestRow = ({ label, hint, value = 2 }: { label: string, hint: string, value?: number }) => (
    <div className="flex items-center justify-between px-4">
        <div>
            <p className="font-medium">{label}</p>
            <p className="text-xs text-neutral-500">{hint}</p>
        </div>

        <div className="flex items-center gap-3">
            <button className="w-8 h-8 rounded-full border text-lg">−</button>
            <span className="w-5 text-center font-medium">{value}</span>
            <button className="w-8 h-8 rounded-full border text-lg">+</button>
        </div>
    </div>
);


export default function Confirm({
    canRegister = true,
}: {
    canRegister?: boolean;
}) {
    const { auth } = usePage<SharedData>().props;

    const [date, setDate] = useState<Date | undefined>(
        new Date(new Date().getFullYear(), 1, 3)
    )


    return (
        <>
            <Head title="Confirm">
                <link rel="preconnect" href="https://fonts.bunny.net" />
                <link
                    href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
                    rel="stylesheet"
                />
            </Head>
            <div className="flex min-h-screen flex-col items-center bg-linear-to-br bg-main-bg text-[#1b1b18] lg:justify-center lg:p-8 overflow-y-auto pb-20">


                {/* ================= Header Image ================= */}
                <div className="relative  w-full h-[15vh] ">
                    <img src="/images/sunlight.jpg" alt="Resort" className="w-full h-[15vh] pb-0.5 object-cover object-top" />

                    <div className='bg-linear-to-b from-black/20 to-transparent -2xl w-full absolute top-0 h-20' />

                    <div className="absolute inset-x-4 top-0 bottom-4 flex items-center justify-between">
                        <Link href="/summery" className="rounded-full bg-white/90 backdrop-blur p-2 text-gray-700"  >  <ChevronLeft size={20} />  </Link>
                        <span className="text-xl font-medium text-white">  Booking Confirm  </span>
                        {/* <button className="rounded-full bg-white/90 backdrop-blur p-2 "> <Key size={20} className="text-main" /></button> */}
                        <Link href="/summery" className="relative rounded-full bg-white/90 backdrop-blur p-2">
                            <Key size={20} className="text-main" />
                            {/* Badge */}
                            <span className="absolute -top-1 -left-1 min-w-4.5 h-4.5   rounded-full bg-main text-white text-[10px]    flex items-center justify-center font-semibold   ring-2 ring-white"> 2 </span>
                        </Link>

                    </div>

                    {/* Rounded bottom */}
                    <div className="absolute bottom-0 h-4 w-full bg-white rounded-t-2xl" />

                </div >

                <div className=" w-full  bg-linear-to-b from-white  to-main-bg">

                    {/* ================= Step Tracker ================= */}
                    <div className="px-4 pt-1 pb-3 bg-white border-b rounded-2xl">
                        <div className="flex items-center justify-between">

                            {/* Step 1 */}
                            <div className="flex flex-col items-center flex-1">
                                <div className="h-3 w-3 rounded-full bg-main" />
                                <span className="mt-1 text-[11px] font-medium text-main">
                                    Rooms
                                </span>
                            </div>

                            <div className="flex-1 h-0.5 bg-main/30" />

                            {/* Step 2 */}
                            <div className="flex flex-col items-center flex-1">
                                <div className="h-3 w-3 rounded-full bg-main" />
                                <span className="mt-1 text-[11px] font-medium text-main">
                                    Summer
                                </span>
                            </div>


                            <div className="flex-1 h-0.5 bg-main/30" />

                            {/* Step 2 */}
                            <div className="flex flex-col items-center flex-1">
                                <div className="h-3 w-3 rounded-full bg-main" />
                                <span className="mt-1 text-[11px] font-medium text-main">
                                    Details
                                </span>
                            </div>

                            <div className="flex-1 h-0.5 bg-main/30" />

                            {/* Step 3 - Active */}
                            <div className="flex flex-col items-center flex-1">
                                <div className="h-4 w-4 rounded-full bg-main ring-4 ring-light-main" />
                                <span className="mt-1 text-[11px] font-semibold text-main">
                                    Confirm
                                </span>
                            </div>
                        </div>
                    </div>

                    <div className="flex bg-white items-center justify-between gap-3 px-4 mt-4 mb-2">
                        {/* Date + Guests */}
                        <div className="flex-1 flex items-center gap-3">
                            {/* Info */}
                            <div className="flex flex-col">
                                {/* Dates */}
                                <div className="flex items-baseline gap-1 text-neutral-900 text-2xl">
                                    <span className="font-semibold">12 Feb</span>
                                    <span className="font-semibold">–</span>
                                    <span className="font-semibold">14 Feb</span>
                                    <span className="text-sm text-neutral-500 ml-1">/ 2026</span>
                                </div>

                                {/* Guests */}
                                <div className="flex items-center gap-2 text-sm text-neutral-600 mt-0.5">
                                    <Users size={16} className="text-main" />
                                    <span>2 Adults · 1 Child</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='px-4'>
                        {/* Rooms Details */}
                        <div className="space-y-3">
                            {[1, 2].map((room, idx) => (
                                <div key={idx} className="rounded-xl bg-white p-3 shadow-sm flex gap-3">
                                    <img
                                        src={`/images/rooms/room.webp`}
                                        alt="Room"
                                        className="h-20 w-24 rounded-lg object-cover"
                                    />
                                    <div className="flex-1 space-y-1">
                                        <h3 className="font-medium text-neutral-900">Serene Villa</h3>
                                        <p className="text-xs text-neutral-500">Deluxe · Pool View</p>
                                        <div className="text-xs text-neutral-600">
                                            2 Adults · 1 Child
                                        </div>
                                        <div className="flex flex-wrap gap-2 mt-1 text-xs text-neutral-600">
                                            <span className="flex items-center gap-1.5"><BedDouble size={14} />2 Beds</span>
                                            <span className="flex items-center gap-1.5"><Wifi size={14} />Wi-Fi</span>
                                            <span className="flex items-center gap-1.5"><Bath size={14} />Bath</span>
                                        </div>
                                    </div>
                                    <div className="flex flex-col justify-between items-end">
                                        <span className="font-semibold text-neutral-900">
                                            LKR {room === 1 ? "12,000" : "16,400"} <span className="text-xs text-neutral-500">/ night</span>
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Guest Info */}
                        <div className="px-4 mt-4 rounded-xl bg-white p-4 shadow-sm space-y-2">
                            <h4 className="font-semibold text-neutral-900">Guest Info</h4>
                            <div className="text-sm text-neutral-600 space-y-1">
                                <p>John Doe</p>
                                <p>john@email.com</p>
                                <p>Sri Lanka</p>
                                <p>Passport: N1234567</p>
                            </div>
                        </div>

                        {/* Price Breakdown */}
                        <div className="px-4 mt-4 rounded-xl bg-white p-4 shadow-sm space-y-2">
                            <h4 className="font-semibold text-neutral-900">Price Breakdown</h4>
                            <div className="flex justify-between text-sm text-neutral-600">
                                <span>Room total (2 nights)</span>
                                <span>LKR 24,000</span>
                            </div>
                            <div className="flex justify-between text-sm text-neutral-600">
                                <span>Taxes & fees</span>
                                <span>LKR 1,200</span>
                            </div>
                            <div className="flex justify-between text-sm text-green-600">
                                <span>Discount</span>
                                <span>- LKR 2,000</span>
                            </div>
                            <div className="flex justify-between text-base font-semibold border-t pt-2">
                                <span>Total</span>
                                <span>LKR 23,200</span>
                            </div>
                        </div>

                        {/* Special Requests */}
                        <div className="px-4 mt-4 rounded-xl bg-white p-4 shadow-sm">
                            <label className="text-sm font-medium text-neutral-700">
                                Special requests
                            </label>
                            <p className="text-xs text-neutral-500 mt-1">
                                Any special requests entered on Details page
                            </p>
                        </div>
                    </div>

                    <div className="min-h-screen bg-gray-50 pb-32 px-4">

                        {/* Header */}
                        <h2 className="text-lg font-semibold text-neutral-900 mt-4">Select Payment Method</h2>
                        <p className="text-sm text-neutral-500 mt-1">Choose how you want to pay for your stay.</p>

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

                            {[
                                {
                                    id: 'card',
                                    label: 'Credit / Debit Card',
                                    desc: 'Pay now securely',
                                    icon: <span className="text-main"><CreditCard size={20} /></span>
                                },
                                {
                                    id: 'arrival',
                                    label: 'Pay at Check-in',
                                    desc: 'Pay directly at the hotel',
                                    icon: <span className="text-main"><Key size={20} /></span>
                                },
                                {
                                    id: 'bank',
                                    label: 'Bank Transfer',
                                    desc: 'Transfer to hotel account',
                                    icon: <span className="text-main"><Building size={20} /></span>
                                }
                            ].map((method) => (
                                <button
                                    key={method.id}
                                    className={`w-full flex items-center justify-between gap-3 p-4 rounded-xl border ${'card' === method.id
                                        ? 'border-main bg-main/5'
                                        : 'border-gray-200 bg-white'
                                        }`}

                                >
                                    <div className="flex items-center gap-3">
                                        {method.icon}
                                        <div className="flex flex-col text-left">
                                            <span className="font-medium text-neutral-900">{method.label}</span>
                                            <span className="text-xs text-neutral-500">{method.desc}</span>
                                        </div>
                                    </div>
                                    {/* Radio */}
                                    <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${'card' === method.id ? 'border-main bg-main' : 'border-gray-300'
                                        }`}>
                                        {'card' === method.id && <span className="w-2 h-2 rounded-full bg-white"></span>}
                                    </div>
                                </button>
                            ))}
                        </div>

                    </div>

                </div>


                {/* ================= Sticky Bottom CTA ================= */}
                <div className="fixed  bottom-0 left-0 right-0 z-50">
                    <div className=" h-20 bg-linear-to-r  rounded-t-2xl  shadow-lg flex items-center justify-between px-6">
                        <Link href='/confirm' className=" w-full  flex items-center justify-center gap-2 py-2 px-6 bg-main ring-4 ring-main/20 text-white text-lg font-semibold rounded-full active:scale-95 transition " > Confirm Booking </Link>
                    </div>

                </div>

            </div >
        </>
    );
}
