import { ImageIcon } from "@/components/core/Icon";
import RoomCalenderView from "@/components/core/RoomCalenderView";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { SearchRoom } from "@/types/home/client-side";
import { Facility } from "@/types/home/home-sections";
import { Addon, RoomCategoryType, RoomType } from "@/types/home/room";
import { Users, BedDouble, Bath, Maximize } from "lucide-react";
import ReserveCard from "./ReserveCard";
import { MealPackageType } from "@/types/home/meal-package";
import { RoomSelected } from "@/types/home/bookings";
import RoomImageCarousel from "./RoomImageCarousel";
import MobilleRoomHero from "./MobilleRoomHero";
import RichTextRender from "@/components/core/RichTextEditor/RichTextRender";


interface RoomProps {
    category: RoomCategoryType;
    allRoomFacilities: Facility[];
    allRoomMealPackages: MealPackageType[];
    allRoomAddons: Addon[];
    room: RoomType;
    search: SearchRoom;
    reserved?: RoomSelected
}


export default function Room({ category, allRoomFacilities, allRoomMealPackages, allRoomAddons, room, search, reserved }: RoomProps) {


    const details = [
        {
            id: 1,
            label: "Guests",
            value: category.max_adults + category.max_children,
            icon: Users,
        },
        {
            id: 2,
            label: "Beds",
            value: category.default_bed_count,
            icon: BedDouble,
        },
        {
            id: 3,
            label: "Bath Rooms",
            value: category.default_bathroom_count,
            icon: Bath,
        },
        {
            id: 4,
            label: "Size",
            value: `${category.default_size} m²`,
            icon: Maximize,
        },
    ];

    const mealPackages = [...allRoomMealPackages, ...category.meal_packages, ...room.meal_packages]
    const addOns = [...allRoomAddons, ...category.add_ons, ...room.add_ons]
    const facilities = [...allRoomFacilities, ...category.facilities, ...room.facilities]

    // const adults = reserved?.adults ?? search.adults;
    // const children = reserved?.children ?? search.children;

    return <div className=' flex flex-col sm:flex-row gap-6 items-start'>

        {/* Left Side - Room Details */}
        <div className='flex-2 space-y-2 sm:space-y-4'>

            <RoomImageCarousel images={room.images} />
            <MobilleRoomHero images={room.images} short_name={category.short_name} name={category.name} />

            {/* <div className=" sm:hidden px-4 sm:px-0">
                <SearchSideCard adults={adults} children={children} searchBtn />
            </div> */}

            <div className="hidden sm:block px-4 sm:px-0">
                <p className='text-main font-medium font-gilda'>{category.short_name?.toLocaleUpperCase()}</p>
                <h1 className='text-4xl font-bold font-gilda'>{category.name}  {room.view ? ' • ' + room.view : ''}</h1>
            </div>

            <div className="hidden sm:grid grid-cols-2 md:grid-cols-4 gap-4 px-4 sm:px-0">
                {details.map((item) => {
                    const Icon = item.icon;

                    return (
                        <div key={item.id} className="flex items-center gap-3 p-2 rounded-sm border bg-white  transition" >
                            <div className="p-2 rounded-lg bg-main/5"> <Icon className="w-5 h-5 text-main" /> </div>

                            <div className='flex justify-start items-center gap-2 font-semibold text-muted-foreground'>
                                <span > {item.value} </span>
                                <span > {item.label} </span>
                            </div>
                        </div>
                    );
                })}
            </div>

            <div className=" sm:hidden grid grid-cols-4 gap-2 px-3 sm:px-0">
                {details.map((item) => {
                    const Icon = item.icon;

                    return (
                        <div key={item.id} className="flex flex-col gap-1.5 items-center justify-center text-center  bg-white "   >
                            {/* Icon */}
                            <div className="p-3 rounded-full bg-main/10">
                                <Icon className="w-5 h-5 text-main" />
                            </div>

                            <span className="text-sm font-semibold leading-none">
                                {item.value}
                            </span>

                            <span className="text-xs text-muted-foreground leading-none">
                                {item.label}
                            </span>

                        </div>
                    );
                })}
            </div>

            <Tabs defaultValue='description' className=" px-4 sm:px-0">
                <TabsList variant="line" className='gap-6 px-0'>
                    <TabsTrigger value='description'>Room Details</TabsTrigger>
                    <TabsTrigger value='policies'>Policies</TabsTrigger>
                </TabsList>

                <TabsContent value='description' className='py-4 space-y-6'>
                    <div>
                        <h3 className="text-base font-semibold text-neutral-900 mb-2">  Overview </h3>
                        <p className='text-sm'>{category.description}</p>
                    </div>

                    <RichTextRender content={category.details} />

                    {room.description && <div>
                        <h3 className="text-base font-semibold text-neutral-900 mb-2">   Room Specific  </h3>
                        <p className=' text-sm'>{room.description}</p>
                    </div>}

                    <RichTextRender content={room.details} />

                    <div className="space-y-2">
                        <h2 className="text-base font-semibold text-neutral-900 ">What this place offers?</h2>
                        <div className="grid gap-3 grid-cols-2 md:grid-cols-3">
                            {facilities.map((item, index) => {
                                return (
                                    <div key={index} className="flex items-center gap-3 p-2 rounded-md hover:bg-neutral-100 transition" >
                                        {/* <Icon icon={item.icon || ''} className="w-5 h-5 text-neutral-800" /> */}
                                        <ImageIcon is_icon={item.is_icon} value={item.icon_value} className="w-5 h-5 text-neutral-800" />
                                        <p className="text-sm text-neutral-800">{item.name}</p>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </TabsContent>

                <TabsContent value='policies'>
                    <div className="space-y-2">

                        <RichTextRender content={category.policies} />

                        <RichTextRender content={room.policies} />

                    </div>
                </TabsContent>
            </Tabs>

            <h3 className="text-lg font-semibold text-neutral-900 px-4 sm:px-0"> Room Availability & Prices Calender</h3>
            <RoomCalenderView prices={room.calendar_prices} search={search} />
        </div>

        {/* Right Side */}
        <ReserveCard search={search} mealPackages={mealPackages} addOns={addOns} room={room} base_price={category.base_price} title={category.name} slug={category.slug} reserved={reserved} />
    </div>
}