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 Details({
    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="Details">
                <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 Details  </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 pb-4  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 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">
                                    Details
                                </span>
                            </div>


                            <div className="flex-1 h-0.5 bg-neutral-200" />

                            {/* Step 4 */}
                            <div className="flex flex-col items-center flex-1">
                                <div className="h-3 w-3 rounded-full bg-neutral-300" />
                                <span className="mt-1 text-[11px] text-neutral-400">
                                    Confirm
                                </span>
                            </div>

                        </div>
                    </div>


                    <div className="flex bg-white items-center justify-between gap-3 mx-4 border-l-4 border-l-main/40 pl-3 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>

                        {/* Change Button */}
                        <button className="shrink-0 text-sm font-medium bg-main text-white ring-4 ring-light-main  px-3 py-2 rounded-full hover:bg-main/5 active:scale-95 transition duration-300"> Change Date  </button>
                    </div>

                    <div className="px-4 mt-4">
                        <div className="bg-white rounded-2xl p-4 border">
                            <h2 className="text-base font-semibold text-neutral-900">
                                Guest details
                            </h2>
                            <p className="text-xs text-neutral-500 mt-1">
                                Please enter the primary guest information
                            </p>

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

                                {/* First & Last name */}
                                <div className="grid grid-cols-2 gap-3">
                                    <div>
                                        <label className="text-xs text-neutral-500">
                                            First name
                                        </label>
                                        <input
                                            type="text"
                                            placeholder="John"
                                            className="mt-1 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm focus:border-main focus:ring-main"
                                        />
                                    </div>

                                    <div>
                                        <label className="text-xs text-neutral-500">
                                            Last name
                                        </label>
                                        <input
                                            type="text"
                                            placeholder="Doe"
                                            className="mt-1 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm focus:border-main focus:ring-main"
                                        />
                                    </div>
                                </div>

                                {/* Email */}
                                <div>
                                    <label className="text-xs text-neutral-500">
                                        Email address
                                    </label>
                                    <input
                                        type="email"
                                        placeholder="john@email.com"
                                        className="mt-1 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm focus:border-main focus:ring-main"
                                    />
                                </div>

                                {/* Country */}
                                <div>
                                    <label className="text-xs text-neutral-500">
                                        Country / Nationality
                                    </label>
                                    <select
                                        className="mt-1 w-full rounded-xl border border-neutral-200 bg-white px-4 py-3 text-sm focus:border-main focus:ring-main"
                                    >
                                        <option>Select country</option>
                                        <option>Sri Lanka</option>
                                        <option>India</option>
                                        <option>United Kingdom</option>
                                        <option>Australia</option>
                                    </select>
                                </div>

                                {/* Passport / ID */}
                                <div>
                                    <label className="text-xs text-neutral-500">
                                        Passport or ID number
                                    </label>
                                    <input
                                        type="text"
                                        placeholder="N1234567 / 200012345678"
                                        className="mt-1 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm focus:border-main focus:ring-main"
                                    />
                                    <p className="mt-1 text-[11px] text-neutral-400">
                                        Required by the hotel for check-in
                                    </p>
                                </div>

                            </div>


                        </div>
                    </div>


                    <div className="px-4 mt-4">
                        <div className="bg-white rounded-2xl p-4 border">
                            <h3 className="text-sm font-medium text-neutral-900">
                                Special requests
                            </h3>
                            <p className="text-xs text-neutral-500 mt-1">
                                Optional. Subject to availability.
                            </p>

                            <textarea
                                placeholder="Late check-in, baby cot, high floor..."
                                rows={3}
                                className="mt-3 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm focus:border-main focus:ring-main resize-none"
                            />
                            <div className="px-6 mt-4 text-center">
                                <p className="text-[11px] text-neutral-400">
                                    🔒 Your information is secure and will only be used for your reservation
                                </p>
                            </div>
                        </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 from-white/95 via-white to-white/95 rounded-t-2xl backdrop-blur-sm border-t shadow-lg flex items-center justify-between px-6">

                        <div>
                            <p className='text-sm text-gray-600 font-normal'>Total</p>
                            <h2 className='text-xl font-bold text-black'>LKR 23,200 <span className='text-sm text-gray-600 font-normal'></span></h2>
                        </div>
                        <Link href='/confirm' className=" w-1/2   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 " > Continue  </Link>

                    </div>

                </div>



            </div >
        </>
    );
}
