import { Head, Link, usePage } from '@inertiajs/react';
import { dashboard, login, register } from '@/routes';
import type { SharedData } from '@/types';
import { AirVentIcon, ArrowRight, ArrowRightCircle, Bed, BedDouble, Bell, Calculator, CalendarDays, CalendarIcon, Car, CarFront, Clock, Coffee, Coins, Contact, CreditCard, DoorOpen, Facebook, Globe, HandCoins, Heart, Home, Instagram, Leaf, Lightbulb, Mail, MapPin, Menu, Mountain, ParkingCircle, Phone, PhoneCall, Plane, ShieldCheck, Snowflake, Sparkles, Star, Sun, Tv, Tv2, Twitter, Users, Utensils, 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, 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 Hero from '@/components/(public)/home/Hero';
import Footer from '../components/(public)/Footer';
import SectionTitle from '@/components/(public)/SectionTitle';
import ImageIconPoint from '@/components/(public)/ImageIconPoint';
import Features from '@/components/(public)/home/sections/Features';
import ButtonUi from '@/components/(public)/ButtonUI';
import Rooms from '@/components/(public)/home/sections/Rooms';
import Testimonial from '@/components/(public)/home/sections/Testimonial';
import Facilities from '@/components/(public)/home/sections/Facilities';
import AboutUs from '@/components/(public)/home/sections/AboutUs';
import OfferBanner from '@/components/(public)/home/sections/OfferBanner';
import Gallery from '@/components/(public)/home/sections/Gallery';


type ImageProps = {
    images: string[];
};

function StackedImageSlider({ images }: ImageProps) {
    const [active, setActive] = useState(0);
    const startX = useRef<number | null>(null);
    const autoPlayRef = useRef<NodeJS.Timeout | null>(null);

    const prevIndex = (active - 1 + images.length) % images.length;
    const nextIndex = (active + 1) % images.length;

    const goNext = () => {
        setActive(nextIndex);
        resetAutoPlay();
    };

    const goPrev = () => {
        setActive(prevIndex);
        resetAutoPlay();
    };

    // --------------------
    // Auto Play
    // --------------------
    const startAutoPlay = () => {
        autoPlayRef.current = setInterval(() => {
            setActive((prev) => (prev + 1) % images.length);
        }, 4000);
    };

    const resetAutoPlay = () => {
        if (autoPlayRef.current) {
            clearInterval(autoPlayRef.current);
        }
        startAutoPlay();
    };

    useEffect(() => {
        startAutoPlay();
        return () => {
            if (autoPlayRef.current) clearInterval(autoPlayRef.current);
        };
    }, []);

    // --------------------
    // Touch handlers
    // --------------------
    const onTouchStart = (e: React.TouchEvent) => {
        startX.current = e.touches[0].clientX;
    };

    const onTouchEnd = (e: React.TouchEvent) => {
        if (startX.current === null) return;

        const diff = startX.current - e.changedTouches[0].clientX;

        if (diff > 50) goNext();
        if (diff < -50) goPrev();

        startX.current = null;
    };

    return (
        <div className='space-y-3'>
            <div
                className="relative w-full h-80 overflow-hidden touch-pan-y"
                onTouchStart={onTouchStart}
                onTouchEnd={onTouchEnd}
            >
                {images.map((src, index) => {
                    const isActive = index === active;
                    const isPrev = index === prevIndex;
                    const isNext = index === nextIndex;

                    return (
                        <img
                            key={index}
                            src={src}
                            className={`
                                absolute inset-0 w-4/5 h-full mx-auto object-cover rounded-xl
                                transition-all duration-500 ease-in-out
                                ${isActive && "z-30 scale-100 opacity-100"}
                                ${isPrev && " scale-90 -translate-x-10"}
                                ${isNext && " scale-90 translate-x-10 "}
                                ${!isActive && !isPrev && !isNext && "opacity-0"}
                                `}
                        />
                    );
                })}

                {/* Tap Zones */}
                <button
                    className="absolute inset-y-0 left-0 w-1/2 z-40"
                    onClick={goPrev}
                    aria-label="Previous image"
                />
                <button
                    className="absolute inset-y-0 right-0 w-1/2 z-40"
                    onClick={goNext}
                    aria-label="Next image"
                />
            </div>

            {/* Counter */}
            <CounterBar length={images.length} active={active} />
        </div>
    );
}


type RatingRowProps = {
    stars: number;
    value: number;
    count: number;
};

const RatingRow = ({ stars, value, count }: RatingRowProps) => (
    <div className="flex items-center gap-2 text-xs">
        <div className="">
            <RatingStars rating={stars} size={14} />
        </div>

        <Progress value={value} className="h-2 flex-1 [&>div]:bg-yellow-400" />

        <span className="w-8 text-right text-neutral-500">
            {count}
        </span>
    </div>
);


const amenities = [
    { label: "Free Wi-Fi", icon: Wifi },
    { label: "Swimming Pool", icon: Waves },
    { label: "Restaurant", icon: Utensils },
    { label: "Spa", icon: Sparkles },
    { label: "Parking", icon: Car },
    { label: "AC Rooms", icon: Snowflake },
    { label: "Room Service", icon: Bell },
    { label: "Nature View", icon: Leaf },
    { label: "Airport Pickup", icon: Plane },
];


type AmenityRowProps = {
    items: typeof amenities;
    direction?: "left" | "right";
};

const AmenityRow = ({ items, direction = "left" }: AmenityRowProps) => {
    const animation =
        direction === "left"
            ? "animate-marquee-left"
            : "animate-marquee-right";

    return (
        <div className="relative w-full overflow-hidden">

            <div className={`flex gap-3 w-max ${animation}`}>
                {[...items, ...items].map((item, index) => (
                    // <div
                    //     key={index}
                    //     className="flex items-center gap-2 px-4 py-2 rounded-full bg-neutral-100 text-sm whitespace-nowrap"
                    // >
                    //     <item.icon size={16} className="text-main" />
                    //     {item.label}
                    // </div>
                    <div
                        key={index}
                        className="flex flex-col min-w-24 items-center gap-1 px-2 py-2 rounded-lg bg-white text-sm whitespace-nowrap"
                    >
                        <item.icon size={28} className="text-main" />
                        {item.label}
                    </div>
                ))}
            </div>

        </div>
    );
};



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

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


    return (
        <>
            <Head title="Welcome">
                <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-white  text-[#1b1b18] lg:justify-center overflow-y-auto font-gilda ">

                <div className='space-y-16 w-full'>

                    <Hero />

                    {/* Room Facilities */}
                    <Features />

                    {/* About US */}
                    <AboutUs />

                    {/* Rooms */}
                    <Rooms data={roomCategories} />


                    {/* Features Section */}
                    <div className=' md:hidden  absolute -bottom-12 left-4 right-4 flex justify-around '>

                        <div className='  flex justify-center items-center flex-col gap-1.5'>
                            {/* <img src="/images/icons/car.jpg" alt="Pick Up" className='w-14 h-14 p-1  border-2 border-main bg-white rounded-full' /> */}
                            <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <CarFront size={36} /> </div>
                            <p className='text-xs font-semibold'>Pick Up</p>
                        </div>
                        <div className='  flex justify-center items-center flex-col gap-1.5'>
                            {/* <img src="/images/icons/bed.jpg" alt="Pick Up" className='w-14 h-14 p-1  border-2 border-main bg-white rounded-full' /> */}
                            <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20  '> <BedDouble size={34} /> </div>
                            <p className='text-xs font-semibold'>Rooms</p>
                        </div>
                        <div className='  flex justify-center items-center flex-col gap-1.5'>
                            {/* <img src="/images/icons/wifi.jpg" alt="Pick Up" className='w-14 h-14 p-1 border-2 border-main  bg-white rounded-full' /> */}
                            <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <HandCoins size={36} /> </div>
                            <p className='text-xs font-semibold'>Payment</p>
                        </div>
                        <div className='  flex justify-center items-center flex-col gap-1.5'>
                            {/* <img src="/images/icons/food.jpg" alt="Pick Up" className='w-14 h-14 p-1 border-2 border-main  bg-white rounded-full' /> */}
                            <div className='text-white bg-main w-14 h-14 p-2.5 rounded-full flex items-center justify-center ring-4 ring-main/20 '> <Utensils size={32} /> </div>
                            <p className='text-xs font-semibold'>Foods</p>
                        </div>

                    </div>

                    {/* Why You’ll Love This */}
                    <div className=" md:hidden  p-4 space-y-3">
                        <h2 className="font-semibold text-base ">Why You’ll Love This</h2>

                        <div className="grid grid-cols-5 grid-rows-3 gap-3">
                            {/* Large card with image */}
                            <div className="relative col-span-3 row-span-2 rounded-xl overflow-hidden ">
                                <img
                                    src="/images/exterior.png"
                                    alt="Nature Immersion"
                                    className="w-full h-full object-cover"
                                />
                                <div className="absolute inset-0 bg-linear-to-tr from-black/40 via-black/20 to-black/0 flex flex-col justify-end p-4 space-y-1">
                                    <h3 className="text-white font-semibold text-sm">Nature Immersion</h3>
                                    <p className="text-xs text-white/90 ">
                                        Wake up surrounded by lush rice fields and jungle views.
                                    </p>
                                </div>
                            </div>

                            {/* Smaller icon-based cards */}
                            <div className="px-2 py-3 col-span-2 rounded-xl flex flex-col items-center justify-center text-center bg-white space-y-1.5 ">
                                <Sparkles size={32} className="text-orange-400" />
                                <h3 className="font-medium text-sm">Peace & Privacy</h3>
                                {/* <p className="text-xs text-neutral-600 leading-relaxed">
                                    Quiet villas designed for deep rest and privacy.
                                </p> */}
                            </div>

                            {/* Another image card */}
                            <div className="relative col-span-2 row-span-2 rounded-xl overflow-hidden ">
                                <img
                                    src="/images/exterior.webp"
                                    alt="Relaxed Atmosphere"
                                    className="w-full h-full object-cover"
                                />
                                <div className="absolute inset-0 bg-linear-to-tr from-black/25 via-black/5 to-black/0 flex flex-col justify-end p-4 space-y-1">
                                    <h3 className="text-white font-semibold text-sm">Relaxed Atmosphere</h3>
                                </div>
                            </div>

                            <div className="px-2 py-3 col-span-3 rounded-xl flex flex-col items-center justify-center text-center bg-main space-y-1.52 ">
                                <Heart size={32} className="text-white" />
                                <h3 className="font-medium text-sm text-white">Perfect for Couples</h3>
                                <p className="text-xs text-neutral-200 ">
                                    Romantic setting ideal for getaways and special moments.
                                </p>
                            </div>

                        </div>
                    </div>

                    {/* Rooms & Suites */}
                    <div className='md:hidden p-4 space-y-2'>
                        <div className='flex justify-between items-center'>
                            <h2 className='font-semibold'>Rooms & Suites</h2>
                            {/* <Link className='text-sm text-main font-medium'>See More</Link> */}
                            {/* Counter */}
                            <CounterBar length={3} active={0} />
                        </div>
                        <div className='flex gap-3 w-full overflow-x-auto snap-x snap-mandatory no-scrollbar '>

                            <div className='w-4/5 shrink-0  snap-start scroll-ml-0 aspect-5/3 bg-[url(/images/rooms/room2.jpg)] bg-cover bg-no-repeat bg-center rounded-lg bg-white'>
                                <div className='p-2 flex flex-col h-full bg-linear-to-tr from-black/60 via-black/10 to-black/0 items-start justify-end rounded-lg text-white'>
                                    <h1 className=' font-bold'>Serene Villa</h1>
                                    <div>
                                        <p className='text-sm'>LKR 12000 <span className='text-xs'>/night</span></p>
                                    </div>
                                </div>
                            </div>
                            <div className='w-4/5 shrink-0 snap-start scroll-ml-0  aspect-5/3 bg-[url(/images/rooms/room3.webp)] bg-cover bg-no-repeat bg-center rounded-lg bg-white'>
                                <div className='p-2 flex flex-col h-full bg-linear-to-tr from-black/60 via-black/10 to-black/0 items-start justify-end rounded-lg text-white'>
                                    <h1 className=' font-bold'>Serene Villa</h1>
                                    <div>
                                        <p className='text-sm'>LKR 12000 <span className='text-xs'>/night</span></p>
                                    </div>
                                </div>
                            </div>
                            <div className='w-4/5 snap-start scroll-ml-0 shrink-0 aspect-5/3 bg-[url(/images/rooms/room.webp)] bg-cover bg-no-repeat bg-center rounded-lg bg-white'>
                                <div className='p-2 flex flex-col h-full bg-linear-to-tr from-black/60 via-black/10 to-black/0 items-start justify-end rounded-lg text-white'>
                                    <h1 className=' font-bold'>Serene Villa</h1>
                                    <div>
                                        <p className='text-sm'>LKR 12000 <span className='text-xs'>/night</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Amenities */}
                    <div className='md:hidden p-4 space-y-3'>
                        <div className='flex justify-between items-end'>
                            <h2 className='font-semibold'>Amenities</h2>
                            <Link className='text-sm text-main font-medium'>See All</Link>
                        </div>

                        <div className='relative space-y-3 px-0.5'>

                            <AmenityRow items={amenities.slice(0, 4)} direction="left" />
                            <AmenityRow items={amenities.slice(3, 7)} direction="right" />
                            <AmenityRow items={amenities.slice(5, 9)} direction="left" />

                            {/* Left fade */}
                            <div className="pointer-events-none absolute inset-y-0 left-0 w-6 h-full bg-linear-to-r from-main-bg to-transparent " />

                            {/* Right fade */}
                            <div className="pointer-events-none absolute inset-y-0 right-0 w-6 h-full  bg-linear-to-l from-main-bg to-transparent " />
                        </div>


                    </div>

                    {/* Our Visula Diary */}
                    <div className=' md:hidden p-4 space-y-3'>
                        <div className='flex justify-between items-end'>
                            <h2 className='font-semibold'>Our Visula Diary</h2>
                            {/* <Link className='text-sm text-main font-medium'>See All</Link> */}
                        </div>

                        <StackedImageSlider
                            images={[
                                "/images/rooms/room.webp",
                                "/images/rooms/room2.jpg",
                                "/images/rooms/room3.webp",
                                "/images/exterior.png",
                            ]}
                        />

                    </div>

                    {/* Customer Reviews */}
                    <div className=" md:hidden  space-y-5 relative">


                        {/* <div className='w-30 h-30 rotate-5  left-3 blur-3xl  absolute bg-yellow-400/20 rounded-full' /> */}

                        {/* Content */}
                        <div className="px-4 space-y-5 py-8  mask-y-from-85% mask-y-to-100% bg-white">
                            {/* Header */}
                            <div className="flex items-center justify-between">
                                <h2 className="text-base font-semibold">Customer Reviews</h2>
                                <Link className="text-sm text-main font-medium">
                                    See All
                                </Link>
                            </div>

                            <div className='flex gap-4'>
                                {/* Rating summary */}
                                <div className="flex flex-col items-center justify-center min-w-27.5 space-y-1">
                                    <div className="text-4xl font-bold leading-none">
                                        4.7
                                        <span className="text-lg font-semibold text-neutral-500"> /5</span>
                                    </div>

                                    <RatingStars rating={4.7} size={16} />

                                    <p className="text-xs text-neutral-500">
                                        547 reviews
                                    </p>
                                </div>

                                {/* Rating breakdown */}
                                <div className="flex-1 space-y-2">
                                    <RatingRow stars={5} value={80} count={240} />
                                    <RatingRow stars={4} value={70} count={201} />
                                    <RatingRow stars={3} value={30} count={120} />
                                    <RatingRow stars={2} value={5} count={5} />
                                    <RatingRow stars={1} value={0} count={0} />
                                </div>
                            </div>
                        </div>

                        {/* <div className='text-sm flex items-center justify-between px-4'>
                            <div className='border-2 w-fit bg-white p-0.5 px-4 rounded-full  text-main border-main/80'>All</div>
                            <div className='flex gap-1.5 items-center  w-fit bg-white p-0.5 px-3 rounded-full'>5 <Star size={14} /></div>
                            <div className='flex gap-1.5 items-center  w-fit bg-white p-0.5 px-3 rounded-full'>4 <Star size={14} /></div>
                            <div className='flex gap-1.5 items-center  w-fit bg-white p-0.5 px-3 rounded-full'>3 <Star size={14} /></div>
                            <div className='flex gap-1.5 items-center  w-fit bg-white p-0.5 px-3 rounded-full'>2 <Star size={14} /></div>
                            <div className='flex gap-1.5 items-center  w-fit bg-white p-0.5 px-3 rounded-full'>1 <Star size={14} /></div>
                        </div>

                        <div className='space-y-1.5 px-4'>
                            <Card className='p-4 shadow-none gap-2 border-none'>
                                <div className='flex items-start justify-between'>
                                    <div className='flex gap-2 items-center'>
                                        <div className='w-9 h-9 bg-red-400 text-white font-bold rounded-full flex items-center justify-center'>JD</div>
                                        <div>
                                            <h2 className='text-sm font-semibold'>John Doe</h2>
                                            <p className='text-xs italic'>1 week ago</p>
                                        </div>
                                    </div>
                                    <RatingStars rating={4.7} size={12} />
                                </div>

                                <div>
                                    <p className='text-sm'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi recusandae !</p>
                                </div>

                            </Card>
                            <Card className='p-4 shadow-none gap-2 border-none'>
                                <div className='flex items-start justify-between'>
                                    <div className='flex gap-2 items-center'>
                                        <div className='w-9 h-9 bg-green-400 text-white font-bold rounded-full flex items-center justify-center'>JD</div>
                                        <div>
                                            <h2 className='text-sm font-semibold'>Hesha Jone</h2>
                                            <p className='text-xs italic'>2 week ago</p>
                                        </div>
                                    </div>
                                    <RatingStars rating={4.3} size={12} />
                                </div>

                                <div>
                                    <p className='text-sm'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab magni dolor omnis cum ea commodi recusandae !</p>
                                </div>

                            </Card>
                            <Card className='p-4 shadow-none gap-2 border-none'>
                                <div className='flex items-start justify-between'>
                                    <div className='flex gap-2 items-center'>
                                        <div className='w-9 h-9 bg-blue-400 text-white font-bold rounded-full flex items-center justify-center'>JD</div>
                                        <div>
                                            <h2 className='text-sm font-semibold'>Nixto Flow</h2>
                                            <p className='text-xs italic'>1 month ago</p>
                                        </div>
                                    </div>
                                    <RatingStars rating={5} size={12} />
                                </div>

                                <div>
                                    <p className='text-sm'>Lorem ipsum dolor sit aomnis cum ea commodi recusandae !</p>
                                </div>

                            </Card>
                        </div> */}
                    </div>

                    {/* Contact Details */}
                    {/* <div className='p-4 mask-y-from-95% mask-y-to-100% py-8 bg-white space-y-6'> */}
                    <div className=' md:hidden p-4 space-y-0'>

                        <div className="flex w-full justify-evenly items-center gap-4 p-4 rounded-2xl bg-white border-main/50 border-b ">
                            {[
                                { icon: Facebook },
                                { icon: Instagram },
                                { icon: Twitter },
                                { icon: Youtube },
                                { icon: Globe },
                            ].map(({ icon: Icon }, i) => (
                                <Link key={i} href="#" className=" h-11 w-11 flex items-center justify-center rounded-xl bg-main ring-main/20  ring-4  transition-all duration-200  hover:ring-main hover:bg-neutral-700  active:scale-95 "  >
                                    <Icon size={20} className="text-white" />
                                </Link>
                            ))}
                        </div>



                        {/* Contact Actions */}
                        <div className="flex items-center gap-4 bg-white py-2 pt-4 px-4 rounded-t-xl">
                            <Phone size={20} className="text-main" />
                            <div>
                                <p className="text-xs ">Phone Number</p>
                                <p className="text-sm font-semibold leading-snug">
                                    +94 77 123 4567
                                </p>
                            </div>
                        </div>
                        <div className="flex items-center gap-4 bg-white py-2 px-4">
                            <Mail size={20} className="text-main " />
                            <div>
                                <p className="text-xs text-neutral-500">Email</p>
                                <p className="text-sm font-semibold leading-snug">
                                    hello@havenresort.com
                                </p>
                            </div>
                        </div>

                        {/* Location */}
                        <div className='bg-white rounded-b-xl space-y-2'>

                            <div className=" backdrop-blur rounded-xl flex items-center justify-between  py-2 px-4 ">
                                <div className="flex items-center gap-4">
                                    <MapPin size={20} className="text-main " />
                                    <div>
                                        <p className="text-xs text-neutral-500">Address</p>
                                        <p className="text-sm font-semibold leading-snug">
                                            45 / Hello Road, Colombo
                                        </p>
                                    </div>
                                </div>

                                <button className="text-xs font-medium text-main border border-main/30 px-3 py-1.5 rounded-xl">
                                    Open Map
                                </button>
                            </div>

                            <iframe className='bg-gray-50 w-full h-80 rounded-xl ' src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11202.346198187799!2d79.84857359902558!3d6.935019338288796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2slk!4v1769651585038!5m2!1sen!2slk" allowFullScreen={false} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>


                    {/* Gallery */}
                    <Gallery />


                    <OfferBanner />



                    <Facilities />


                    {/* Testimonial */}
                    <Testimonial />

                    <Footer />


                </div >



            </div >
        </>
    );
}
