
import { RoomCalendarPrices } from "@/types/price-modifire";
import { SearchRoom } from "@/types/home/client-side";
import Price from "../(public)/Price";

interface CalendarProps {
    prices: RoomCalendarPrices;
    search: SearchRoom
}

export default function RoomeCalendarView({ prices, search }: CalendarProps) {
    const checkIn = new Date(search.check_in)
    const checkOut = new Date(search.check_out)

    // Start calendar from check-in month
    const months = [
        new Date(checkIn.getFullYear(), checkIn.getMonth(), 1),           // First month: check-in month
        new Date(checkIn.getFullYear(), checkIn.getMonth() + 1, 1)        // Second month: next month
    ];

    const daysInMonth = (date: Date) => {
        const days = [];
        const end = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
        for (let d = 1; d <= end; d++) {
            days.push(new Date(date.getFullYear(), date.getMonth(), d));
        }
        return days;
    };

    const normalize = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());

    const isInRange = (date: Date, start: Date, end: Date) => {
        const d = normalize(date).getTime();
        const s = normalize(start).getTime();
        const e = normalize(end).getTime();
        return d >= s && d < e;
    };

    const formatDate = (date: Date) =>
        `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;

    const isSameDay = (d1: Date, d2: Date) =>
        d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate();

    return (
        <div className="flex gap-4 px-4 py-4 sm:bg-gray-50/60 sm:border border-neutral-200 max-w-5xl mx-auto overflow-x-auto snap-x snap-mandatory scroll-px-4">
            {months.map((month, mIndex) => (
                <div key={mIndex} className="shrink-0  w-full sm:flex-1 snap-start">
                    <h3 className="font-semibold mb-2 text-center text-sm">
                        {month.toLocaleString("default", { month: "long", year: "numeric" })}
                    </h3>

                    <div className="grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-600 mb-1">
                        {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => <div key={d}>{d}</div>)}
                    </div>

                    <div className="grid grid-cols-7 gap-1">
                        {/* Empty cells for first week alignment */}
                        {Array(month.getDay()).fill("").map((_, i) => <div key={"empty-" + i} />)}

                        {daysInMonth(month).map((date) => {
                            const dateStr = formatDate(date);
                            const price = prices[dateStr];
                            const isAvailable = price !== undefined;

                            const isCheckIn = isSameDay(checkIn, date);
                            const isCheckOut = isSameDay(checkOut, date);
                            const isBetween = isInRange(date, checkIn, checkOut);


                            return (

                                <div key={dateStr} className={`relative h-14 flex flex-col items-center justify-center text-sm text-center select-none border ${isAvailable ? (isCheckIn || isBetween ? 'bg-diagonal-client-check border-main bg-main/90 text-white' : "bg-white dark:bg-white") : (isCheckIn || isBetween ? "text-gray-600 bg-diagonal-client-check border-main/60" : "bg-gray-50 text-gray-600 bg-diagonal")}`} >
                                    {/* Check-in / Check-out half highlights */}
                                    {/* {isCheckIn && <div className="absolute top-0 bottom-0 right-0 w-1/2 bg-main " />} */}
                                    {/* {isCheckOut && <div className="absolute top-0 bottom-0 left-0 w-1/2 bg-main" />} */}

                                    {/* Date */}
                                    <span className="relative z-10">{date.getDate()}</span>

                                    {/* Price */}
                                    {isAvailable && (
                                        <span className="text-[10px] -rotate-25 mt-1 relative z-10"><Price noCurrency value={price} /></span>
                                    )}

                                    {/* Not available text */}
                                    {!isAvailable && <span className="text-[8px] mt-1 relative z-10 leading-none">Not Available</span>}
                                </div>
                            );
                        })}
                    </div>
                </div>
            ))}
        </div>
    );
}