

import { Link, usePage } from '@inertiajs/react'
import { BedDouble, Calendar, CalendarDays, ChevronLeft, Grid2X2, Home, Key, Menu, Phone, PhoneCall } from 'lucide-react'
import React, { useState } from 'react'
import { Button } from '../ui/button'
import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '../ui/drawer'
import { setDate } from 'date-fns'
import { Card, CardContent } from '../ui/card'
import BookingKeyCart from '../(public)/home/BookingKeyCart'

const NavItem = ({ href, label }: { href: string, label: string }) => {
    const { url } = usePage();

    const active = url === href;

    return <Link href={href} className={`transition-all duration-300 border-b-2 px-1 rounded-b-sm  ${active ? 'border-main font-bold ' : 'border-transparent font-semibold hover:border-white/40'}`}  > {label} </Link>

};

export default function Header({ home, back = '/rooms', title }: { home?: boolean, back?: string, title: string }) {


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


    // Mobile
    // return <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={back} 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"> {title}  </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 >

    return <>
        <header className={`hidden sm:block z-10 ${home ? 'absolute top-0 left-0 right-0 ' : 'bg-black border-b border-neutral-600'}`}>
            <div className=" mx-auto max-w-300 2xl:max-w-340 px-4  py-4 flex justify-between items-center relative text-sm font-p">


                <div className='flex gap-4 items-center justify-start'>
                    <img src='/images/hotel/logo-text-c.png' className=' h-14' />
                </div>

                <div className="hidden md:flex text-white gap-8 items-center">
                    <NavItem href="/" label="Home" />
                    <NavItem href="/rooms" label="Rooms & Suites" />
                    <NavItem href="/hotel" label="Our Hotel" />
                    <NavItem href="/gallery" label="Gallery" />
                </div>


                {/* Center (true center, unaffected by sides) */}
                {/* {home
                    ? <div className="absolute left-1/2 top-10 -translate-x-1/2  text-center">
                        <h1 className="text-3xl lg:text-5xl tracking-wider font-black font-serif text-main "> Heaven </h1>
                        <p className="lg:text-2xl font-marck tracking-wider text-white/80">  Welcome to Heaven Resort!  </p>
                    </div>
                    : <h1 className="text-4xl tracking-wider font-black font-serif text-main absolute left-1/2 -translate-x-1/2  text-center"> Heaven </h1>
                } */}

                {/* Right */}
                <div className="hidden md:flex gap-8 items-center">
                    {/* <Button className="rounded-sm  font-bold px-6 text-white bg-main uppercase  ring-4 ring-main/30">Contact Us</Button> */}
                    <div className='flex gap-2 justify-center items-center'>
                        <div className='rounded-full border backdrop-blur pt-2 pb-1.5 pl-1.5 pr-2 border-main/40 bg-black/60'>
                            <PhoneCall className='text-main w-5 h-5' />

                        </div>
                        <div className='text-white text-sm'>
                            <p className='text-neutral-400 text-xs'>Contact Us</p>
                            <p>07X XXXX XXX</p>
                        </div>
                    </div>
                    <BookingKeyCart />
                    <Link href="/dashboard" className="relative rounded-full border backdrop-blur p-2 border-main/40 bg-black/60">
                        <Grid2X2 size={20} className="text-main" />
                    </Link>
                </div>

            </div>
        </header>

        < nav className="sm:hidden fixed bottom-0 left-0 right-0 z-20" >
            <div className="relative border h-20 bg-linear-to-r from-white/95 via-white to-white/95 rounded-t-2xl backdrop-blur-sm flex items-center justify-between px-6">

                {/* Home */}
                <Link href='/' className="flex flex-col items-center text-xs gap-1 justify-center text-main font-semibold"> <Home size={24} />  Home  </Link>

                {/* Rooms */}
                <Link href='/rooms' className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500">  <BedDouble size={24} />  Rooms  </Link>

                <div className='w-22' />

                {/* CHECK AVAILABILITY CTA */}
                <div className="absolute left-1/2 -top-7 -translate-x-1/2 flex items-center justify-center flex-col gap-0.5">
                    {/* <button className="  flex items-center gap-3  p-4   bg-main ring-4 ring-main/20    text-white text-xs font-semibold   rounded-full active:scale-95  transition   "  >
                                <Calendar size={24} />
                            </button> */}
                    <Drawer>
                        <DrawerTrigger asChild>
                            <div className='bg-white p-2 rounded-full border-t border-neutral-200  '>
                                <div className="  flex items-center gap-2 p-3 bg-main ring-4 ring-main/20 text-white text-xs font-semibold rounded-full active:scale-95 transition " >
                                    <CalendarDays size={32} />
                                </div>
                            </div>
                        </DrawerTrigger>
                        <DrawerContent className=''>
                            <DrawerHeader>
                                <DrawerTitle>Are you absolutely sure?</DrawerTitle>
                                <DrawerDescription>This action cannot be undone.</DrawerDescription>
                            </DrawerHeader>

                            <div>
                                <Card className="mx-auto w-fit p-0 mb-6">
                                    <CardContent className="p-0">
                                        <Calendar
                                            mode="single"
                                        // defaultMonth={date}
                                        // selected={date}
                                        // onSelect={setDate}
                                        // showWeekNumber
                                        />
                                    </CardContent>
                                </Card>
                            </div>
                            {/* <DrawerFooter>
                                        <Button>Submit</Button>
                                        <DrawerClose>
                                            <Button variant="outline">Cancel</Button>
                                        </DrawerClose>
                                    </DrawerFooter> */}
                        </DrawerContent>
                    </Drawer>
                    <span className='text-start text-xs text-neutral-600'>Check  Availability</span>
                </div>

                {/* Contact */}
                <div className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500">  <Phone size={24} />   Contact </div>

                {/* More */}
                <div className="flex flex-col items-center text-xs gap-1 justify-center text-neutral-500"> <Menu size={24} />   More   </div>

            </div>
        </ nav>
    </>
}
