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, 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"
import Header from '@/components/app-mobile/Header';

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 Summery({
    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="Summery">
                <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 ================= */}
                <Header title='Booking Summery' />

                <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 - 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">
                                    Summary
                                </span>
                            </div>

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

                            {/* Step 3 */}
                            <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">
                                    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>

                    {/* ================= Selected Rooms ================= */}

                    <div className="px-4 py-4 space-y-2">

                        <div className="rounded-xl border bg-white p-3 flex gap-3">
                            <img
                                src="/images/rooms/room.webp"
                                alt=""
                                className="h-20 w-24 rounded-lg object-cover"
                            />

                            <div className="flex-1">
                                <h3 className="font-medium text-neutral-900">Serene Villa</h3>
                                <p className="text-xs text-neutral-500">Deluxe · Pool View</p>

                                <div className="mt-1 text-xs text-neutral-600">
                                    2 Adults · 1 Child
                                </div>

                            </div>
                            <div className="flex flex-col justify-between items-end">
                                <button className="text-xs text-red-500 border p-1.5 rounded-full"> <Trash2 size={16} /> </button>
                                <span className="font-semibold text-neutral-900">
                                    LKR 12,000 <span className="text-xs text-neutral-500">/ night</span>
                                </span>

                            </div>
                        </div>
                        <div className="rounded-xl border bg-white p-3 flex gap-3">
                            <img
                                src="/images/rooms/room2.jpg"
                                alt=""
                                className="h-20 w-24 rounded-lg object-cover"
                            />

                            <div className="flex-1">
                                <h3 className="font-medium text-neutral-900">Deluxe Paddy</h3>
                                <p className="text-xs text-neutral-500">Deluxe · Pool View</p>

                                <div className="mt-1 text-xs text-neutral-600">
                                    2 Adults · 1 Child
                                </div>

                            </div>
                            <div className="flex flex-col justify-between items-end">
                                <button className="text-xs text-red-500 border p-1.5 rounded-full"> <Trash2 size={16} /> </button>
                                <span className="font-semibold text-neutral-900">
                                    LKR 16,400 <span className="text-xs text-neutral-500">/ night</span>
                                </span>

                            </div>
                        </div>


                    </div>

                    {/* ================= Price Breakdown ================= */}
                    <div className="px-6 py-4 bg-white border-t space-y-2 text-sm">
                        <div className="flex justify-between">
                            <span className="text-neutral-600">Room total (2 nights)</span>
                            <span>LKR 24,000</span>
                        </div>

                        <div className="flex justify-between">
                            <span className="text-neutral-600">Taxes & fees</span>
                            <span>LKR 1,200</span>
                        </div>

                        <div className="flex justify-between text-green-600">
                            <span>Discount</span>
                            <span>- LKR 2,000</span>
                        </div>

                        <div className="border-t pt-2 flex justify-between font-semibold text-base">
                            <span>Total</span>
                            <span>LKR 23,200</span>
                        </div>
                    </div>

                    {/* ================= Special Requests ================= */}
                    <div className="px-6 py-4">
                        <label className="text-sm font-medium text-neutral-700">
                            Special requests (optional)
                        </label>
                        <textarea
                            rows={3}
                            placeholder="Any special requests for your stay?"
                            className="mt-2 w-full rounded-xl border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-main/30"
                        />
                    </div>



                </div>

                {/* ================= Sticky Bottom CTA ================= */}
                <div className="fixed bottom-0 left-0 right-0 z-50 ">
                    <div className=" h-20 bg-linear-to-r  border-t from-white/95 via-white to-white/95 rounded-t-2xl backdrop-blur-sm  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='/details' 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 >
        </>
    );
}



// <div className=' w-full bg-white pb-4'>

//     <div className='relative  w-full h-[15vh] '>
//         <img src="/images/sunlight.jpg" alt="" className='w-full h-[30vh] pb-0.5 object-cover object-no-repeat object-top' />
//         <div className='bg-white rounded-t-2xl w-full h-4 absolute bottom-0' />

//         <div className=' absolute right-6 left-6 top-8 flex items-center justify-between '>
//             <Link href='/rooms' className='rounded-full bg-white/60 flex items-center justify-center w-fit font-bold backdrop-blur-xs p-2 text-gray-700' ><ChevronLeft size={20} /></Link>
//             <span className='text-xl font-medium text-white'>Available Rooms</span>
//             <Link href='/rooms' className='rounded-full bg-white/60 flex items-center justify-center w-fit font-bold backdrop-blur-xs p-2 text-red-600' ><Heart fill='red' size={20} /></Link>
//         </div>

//         {/* Counter */}
//         {/* <CounterBar length={4} active={1} className='absolute left-0 right-0 bottom-8' /> */}
//     </div>


//     {/* ================= Sticky Search Bar ================= */}
//     {
//         //                     <div className="sticky top-0 z-30 bg-white border-b">
//         //                         <div className="px-4 pt-1 space-y-3">

//         //                             {/* Dates */}
//         //                             <div className="grid grid-cols-2 gap-2">
//         //                                 {/* Check-in */}
//         //                                 <button className="rounded-xl border px-3 py-1.5 flex items-center gap-2 text-left hover:border-main/40 active:scale-98 transition
//         // ">
//         //                                     <CalendarCheck size={18} className="text-main self-start mt-0.5" />

//         //                                     <div className="flex-1">
//         //                                         <p className="text-xs text-neutral-500">Check-in</p>
//         //                                         <p className="font-medium">12 Feb 2026</p>
//         //                                     </div>

//         //                                     <ChevronDown size={16} className="text-neutral-400" />
//         //                                 </button>

//         //                                 {/* Check-out */}
//         //                                 <button className="rounded-xl border px-3 py-1.5 flex items-center gap-2 text-left hover:border-main/40 active:scale-98 transition
//         // ">
//         //                                     <CalendarX size={18} className="text-main self-start mt-0.5" />

//         //                                     <div className="flex-1">
//         //                                         <p className="text-xs text-neutral-500">Check-out</p>
//         //                                         <p className="font-medium">14 Feb 2026</p>
//         //                                     </div>

//         //                                     <ChevronDown size={16} className="text-neutral-400" />
//         //                                 </button>
//         //                             </div>

//         //                             {/* Guests */}
//         //                             {/* Guests */}
//         //                             <button className="w-full rounded-xl border px-3 py-1.5 flex items-center gap-2 text-left hover:border-main/40 active:scale-98 transition
//         // ">
//         //                                 <Users size={18} className="text-main " />

//         //                                 <div className="flex-1">
//         //                                     <p className="text-xs text-neutral-500">Guests</p>
//         //                                     <p className="font-medium">2 Adults · 1 Child</p>
//         //                                 </div>

//         //                                 <ChevronDown size={16} className="text-neutral-400" />
//         //                             </button>


//         //                             {/* Search */}
//         //                             <button className="w-full rounded-full bg-main text-white py-3 font-semibold">
//         //                                 Search Rooms
//         //                             </button>
//         //                         </div>
//         //                     </div>
//     }
//     <div className="px-4 py-2 text-xs text-neutral-500 border-b">
//         Showing 3 rooms for your selected dates
//     </div>

//     {/* ================= Search Summary ================= */}
//     <div className="sticky top-0 z-30 bg-white border-b">
//         <div className="px-4 py-3 flex items-center justify-between gap-3">

//             {/* Selected Details */}
//             <div className="flex items-start gap-2">
//                 <CalendarCheck size={18} className="text-main mt-0.5" />

//                 <div className="text-xs leading-snug">
//                     <p className="font-medium text-neutral-900">
//                         12 – 14 Feb 2026
//                     </p>
//                     <p className="text-neutral-500">
//                         2 Adults · 1 Child
//                     </p>
//                 </div>
//             </div>

//             {/* Change Dates */}
//             <button className="shrink-0 rounded-full border border-main/40 px-3 py-1.5 text-xs font-medium text-main hover:bg-main/5 transition">
//                 Change
//             </button>
//         </div>
//     </div>

//     {/* ================= Selected Search Summary ================= */}
//     <div className="sticky top-0 z-30 bg-white border-b">
//         <div className="px-4 py-3 space-y-2">

//             {/* Summary row */}
//             <div className="flex items-center justify-between gap-3">
//                 <div className="flex items-start gap-2">
//                     <CalendarCheck size={18} className="text-main mt-0.5" />

//                     <div>
//                         <p className="text-sm font-medium text-neutral-900">
//                             12 – 14 Feb 2026
//                         </p>
//                         <p className="text-xs text-neutral-500">
//                             2 Adults · 1 Child
//                         </p>
//                     </div>
//                 </div>

//                 {/* Change dates */}
//                 <button className="text-xs font-medium text-main border border-main/30 px-3 py-1.5 rounded-lg">
//                     Change Dates
//                 </button>
//             </div>
//         </div>
//     </div>

//     {/* Results info */}
//     <div className="px-4 py-2 text-xs text-neutral-500 border-b">
//         Showing 3 available rooms
//     </div>


//     {/* ================= Results Info ================= */}
//     <div className="px-4 py-3">
//         <div className="rounded-xl border bg-white p-3 text-sm">
//             <p className="font-medium text-neutral-800">
//                 3 rooms available
//             </p>
//             <p className="text-xs text-neutral-500">
//                 For 12–14 Feb · 2 Adults · 1 Child
//             </p>
//         </div>
//     </div>



//     {/* ================= Room Results ================= */}
//     <div className="space-y-4 px-4 pb-28">

//         {/* Room Card */}
//         <div className="rounded-2xl overflow-hidden border bg-white">
//             {/* Image */}
//             <img
//                 src="/images/rooms/room.webp"
//                 alt="Serene Villa"
//                 className="h-44 w-full object-cover"
//             />

//             {/* Content */}
//             <div className="p-4 space-y-2">
//                 <div className="flex justify-between items-start">
//                     <h3 className="font-semibold text-base">
//                         Serene Villa
//                     </h3>
//                     <span className="text-sm font-semibold text-main">
//                         LKR 12,000
//                     </span>
//                 </div>

//                 <p className="text-xs text-neutral-600 line-clamp-2">
//                     Private villa surrounded by rice fields with peaceful
//                     jungle views and modern comforts.
//                 </p>

//                 {/* Facilities */}
//                 <div className="flex gap-4 text-xs text-neutral-600">
//                     <span className="flex items-center gap-1">
//                         <BedDouble size={14} /> 2 Beds
//                     </span>
//                     <span className="flex items-center gap-1">
//                         <Wifi size={14} /> Wi-Fi
//                     </span>
//                     <span className="flex items-center gap-1">
//                         <Bath size={14} /> Bath
//                     </span>
//                 </div>

//                 {/* CTA */}
//                 <Link
//                     href="/rooms/serene-villa"
//                     className="mt-2 block text-center rounded-xl border border-main text-main py-2 font-medium"
//                 >
//                     View Details
//                 </Link>
//             </div>
//         </div>

//         {/* Second Room */}
//         <div className="rounded-2xl overflow-hidden border bg-white">
//             <img
//                 src="/images/rooms/room2.jpg"
//                 alt="Jungle Villa"
//                 className="h-44 w-full object-cover"
//             />

//             <div className="p-4 space-y-2">
//                 <div className="flex justify-between items-start">
//                     <h3 className="font-semibold text-base">
//                         Jungle Villa
//                     </h3>
//                     <span className="text-sm font-semibold text-main">
//                         LKR 15,500
//                     </span>
//                 </div>

//                 <p className="text-xs text-neutral-600 line-clamp-2">
//                     Secluded villa ideal for couples, offering privacy,
//                     calm mornings, and lush surroundings.
//                 </p>

//                 <div className="flex gap-4 text-xs text-neutral-600">
//                     <span className="flex items-center gap-1">
//                         <BedDouble size={14} /> King Bed
//                     </span>
//                     <span className="flex items-center gap-1">
//                         <Wifi size={14} /> Wi-Fi
//                     </span>
//                 </div>

//                 <Link
//                     href="/rooms/jungle-villa"
//                     className="mt-2 block text-center rounded-xl border border-main text-main py-2 font-medium"
//                 >
//                     View Details
//                 </Link>
//             </div>
//         </div>

//     </div>

// </div>
