import PageLayout from "@/layouts/home/page-layout";
import { CheckoutBookingInput } from "@/types/home/bookings";
import { SearchRoom } from "@/types/home/client-side";
import { router } from "@inertiajs/react";
import { BedDouble } from "lucide-react";
import { useState } from "react";

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Facility } from "@/types/home/home-sections";
import { RoomCategoryType, Addon } from "@/types/home/room";
import Room from "./Room";
import { MealPackageType } from "@/types/home/meal-package";


interface RoomPageProps {
    category: RoomCategoryType;
    allRoomFacilities: Facility[];
    allRoomMealPackages: MealPackageType[];
    allRoomAddons: Addon[];
    search: SearchRoom;
    activeRoom?: string;
    booking?: CheckoutBookingInput
}



export default function Index({
    category,
    allRoomFacilities,
    allRoomMealPackages,
    allRoomAddons,
    search,
    activeRoom,
    booking
}: RoomPageProps) {

    const [activeRoomTab, setActiveRoomTab] = useState<string | undefined>(activeRoom);


    const bookedRooms = booking !== null ? booking?.rooms ?? [] : [];

    function isRoomReserved(roomNumber: string) {
        return bookedRooms.some(r => r.room_number === roomNumber);
    }

    return <PageLayout title='Room' className="mb-20 sm:mb-0 ">
        <div className='min-h-[60vh] sm:py-6 mb-10 w-full max-w-300 2xl:max-w-340 mx-auto  sm:px-4 '>

            {
                (!category.rooms || category.rooms.length === 0) ? <div className='flex flex-col items-center'>
                    <div className="bg-main/10 p-6 rounded-full mb-6 w-fit">
                        <BedDouble className="w-10 h-10 text-main" />
                    </div>

                    <h2 className="text-2xl font-semibold text-neutral-900">
                        No Rooms Available
                    </h2>

                    <p className="text-neutral-500 mt-2 max-w-md">
                        We couldn't find available rooms for the selected dates.
                        Try adjusting your dates or check another room category.
                    </p>

                    <button
                        onClick={() => router.visit('/')}
                        className="mt-6 px-6 py-3 bg-main text-white rounded-full ring-4 ring-main/20 hover:scale-105 transition w-fit"
                    >
                        Back to Rooms
                    </button></div>

                    :
                    <Tabs value={activeRoomTab || category.rooms[0].room_number.toString()} onValueChange={setActiveRoomTab} className='space-y-4'>
                        <TabsList variant="line" className='hidden sm:block gap-6 px-0' defaultValue={0}>
                            {
                                category.rooms.map((room, index) => <TabsTrigger key={index} value={room.room_number.toString()}>
                                    Room 0{index + 1} ({room.room_number})
                                    {isRoomReserved(room.room_number) && (
                                        <span className="text-sm  text-green-700">
                                            [ Reserved ]
                                        </span>
                                    )}
                                    {room.isAvailable !== undefined && <>
                                        {room.isAvailable
                                            ? !isRoomReserved(room.room_number) && <span className="text-sm  text-green-700"> [ Available ] </span>
                                            : <span className="text-sm  text-red-700">   [ Not Available ]   </span>
                                        }
                                    </>}
                                </TabsTrigger>
                                )
                            }
                        </TabsList>

                        {
                            category.rooms.map((room, index) => {

                                const reservedRoom = booking?.rooms?.find(
                                    r => r.room_number === room.room_number
                                );

                                return <TabsContent key={index} value={room.room_number.toString()}>
                                    <Room room={room} category={category} allRoomFacilities={allRoomFacilities} allRoomMealPackages={allRoomMealPackages} allRoomAddons={allRoomAddons} search={search} reserved={reservedRoom} />
                                </TabsContent>
                            })
                        }

                    </Tabs>
            }


        </div>
        {/* <OtherRoomsSection /> */}
    </PageLayout>

}