import { SearchSideCard } from "@/components/(public)/home/SearchRoom";
import UiSideDetailsCard from "@/components/(public)/UiSideDetailsCard";
import UiCardFooter from "@/components/(public)/UiCardFooter";
import { RoomSelected, AddonSelected, MealPackageSelected } from "@/types/home/bookings";
import { SearchRoom } from "@/types/home/client-side";
import { Addon, RoomType } from "@/types/home/room";
import { calculateRoomPrice } from "@/utils/client/calculatePricing";
import { router } from "@inertiajs/react";
import { useEffect, useState } from "react";
import UiSidePriceTable from "@/components/(public)/UiSidePriceTable";
import { MealPackageType } from "@/types/home/meal-package";
import MealPackageSelectorCard from "@/components/(public)/meal-package/MealPackageSelectorCard";

// export const sampleAddons = [
//     {
//         id: 1,
//         title: "Airport Pickup",
//         description: "Private transfer from airport to hotel",
//         tag: "Popular",
//         price: 2500,
//         is_icon: true,
//         icon_value: 'Car',
//         calculation_type: "fixed",
//         unit: "booking",
//     },
//     {
//         id: 2,
//         title: "Room Decoration",
//         description: "Special romantic or birthday room setup",
//         tag: "Special",
//         price: 1500,
//         is_icon: true,
//         icon_value: 'Sparkles',
//         calculation_type: "fixed",
//         unit: "room",
//     },
//     {
//         id: 3,
//         title: "Late Check-out",
//         description: "Extend your stay until 4:00 PM",
//         tag: "Flexible",
//         price: 500,
//         is_icon: true,
//         icon_value: 'Plane',
//         calculation_type: "fixed",
//         unit: "room",
//     },
// ];

// function AddOnCard({ item, selected, onSelect }: { item: Addon, selected: AddonSelected[], onSelect: (value: AddonSelected[]) => void }) {

//     const { title, description, tag, price, is_icon, icon_value, calculation_type, unit } = item

//     console.log(title, is_icon, icon_value);


//     const isChecked = selected.some(a => a.id === item.id);

//     const toggleSelect = () => {
//         if (isChecked) {
//             // remove from selection
//             onSelect(selected.filter(a => a.id !== item.id));
//         } else {
//             // add to selection
//             onSelect([...selected, { id: item.id, title, price: Number(price), calculation_type, unit, is_icon, icon_value }]);
//         }
//     };

//     return <label className="flex items-center justify-between rounded-sm bg-white border border-neutral-200 p-3">
//         <div className="flex items-start gap-3">
//             <div className="h-10 w-10 rounded-lg bg-main/10 flex items-center justify-center">
//                 <UiImageIcon is_icon={is_icon} value={icon_value} className="text-main w-6 h-6" />
//             </div>
//             <div className="flex-1 space-y-0.5">
//                 <div className="flex items-center gap-2">
//                     <p className="font-semibold text-sm text-neutral-900">{title} </p>
//                     {tag && <span className="text-[10px] px-2 py-0.5 rounded-full bg-main text-white">{tag}</span>}
//                 </div>
//                 <p className="text-xs text-neutral-500">{description}</p>
//             </div>
//         </div>
//         <div className="flex flex-col items-end justify-between gap-2">
//             <Checkbox className="accent-main" checked={isChecked} onCheckedChange={toggleSelect} />
//             <span className="text-sm font-medium whitespace-nowrap"><Price value={price} /></span>
//             {/* <span className="text-[10px] text-neutral-500">  / person / night     </span> */}
//         </div>
//     </label>
// }


export default function ReserveCard({ search, mealPackages, addOns, room, title, slug, reserved }: { search: SearchRoom, mealPackages: MealPackageType[], addOns: Addon[], room: RoomType, base_price: number, title: string, slug: string, reserved?: RoomSelected }) {

    console.log(room);


    const [selectedMealPackage, setSelectedMealPackage] = useState<MealPackageSelected | null>(null);
    const [selectedAddons, setSelectedAddons] = useState<AddonSelected[]>([]);

    const nights = search.nights

    const adults = reserved?.adults ?? search.adults;
    const children = reserved?.children ?? search.children;
    const { room_avg_price, room_only_total, meal_total, addons_total, grand_total } = calculateRoomPrice({ nights, adults, children, room_daily_prices: room.room_daily_prices, selectedMealPackage, selectedAddons })


    function clearMealPackage() {
        setSelectedMealPackage(null)
    }

    function reserveRoom() {

        const data: any = {
            room_id: room.id,
            room_number: room.room_number,

            title,
            slug,
            image_url: room.images[0]?.url || '',

            adults,
            children,

            meal_package: selectedMealPackage,
            addons: selectedAddons,

            room_daily_prices: room.room_daily_prices

        }
        router.post('/booking/add-room', data);
    }

    useEffect(() => {

        // meal package
        if (!reserved?.meal_package) return

        if (mealPackages.some(p => p.id === reserved.meal_package?.id)) {
            setSelectedMealPackage(reserved.meal_package);
        }


    }, [reserved])


    return <UiSideDetailsCard className="shadow-none sm:shadow-sm">
        <SearchSideCard adults={adults} children={children} searchBtn className="hidden sm:flex shadow-none" onClick={() => router.visit('/rooms')} />

        {mealPackages.length > 0 &&
            <div className="space-y-2">
                <div className="flex justify-between items-baseline-last">
                    <h2 className="text-sm font-semibold text-neutral-900">Meal Packages</h2>
                    <p className="underline text-sm text-neutral-400 hover:text-neutral-800 cursor-pointer" onClick={clearMealPackage}>clear</p>
                </div>
                {
                    mealPackages.map(item => <MealPackageSelectorCard key={item.id} meal_package={item} selectedMealPackage={selectedMealPackage} onSelect={setSelectedMealPackage} adults={adults} children={children} nights={nights} />)
                }
            </div>
        }

        {/* {sampleAddons.length > 0 &&
            <div className='space-y-2  mt-2'>
                <h2 className='text-sm font-semibold text-black'>Enhance Your Stay</h2>

                <div className="space-y-2">

                    {
                        sampleAddons.map((item, index) => <AddOnCard key={index} item={item} selected={selectedAddons} onSelect={setSelectedAddons} />)
                    }

                    <div className='flex my-4 justify-center items-center'>
                        <Separator className='flex-1' />
                        <span className='w-fit px-4 py-1 border rounded-full text-sm bg-white'>Show All Add-Ons</span>
                        <Separator className='flex-1' />
                    </div>
                </div>
            </div>
        } */}

        <UiSidePriceTable prices={{ room_only_total, room_avg_price, meal_total, addons_total, grand_total, nights }} />
        <UiCardFooter hide={!room.isAvailable} price={grand_total} subTitle="Room" buttonTitle="Reserve Now" onClick={reserveRoom} className='hidden sm:flex' />

        < nav className="sm:hidden fixed bottom-0 left-0 right-0 z-30" >
            <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">

                <UiCardFooter hide={!room.isAvailable} price={grand_total} subTitle="Room" buttonTitle="Reserve Now" onClick={reserveRoom} className='border-0 pt-0' />

            </div>
        </ nav>
    </UiSideDetailsCard>

}

