"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/date-picker";
import { GuestPicker } from "@/components/form/guest-picker";

interface BookingWidgetProps {
    price: string;
}

export function BookingWidget({ price }: BookingWidgetProps) {
    const router = useRouter();
    const [departureDate] = useState<Date | undefined>();
    const [arrivalDate] = useState<Date | undefined>();
    const [guests, setGuests] = useState({ adults: 1, children: 0 });
    const [total] = useState(0);

    const handleGuestsChange = (adults: number, children: number) => {
        setGuests({ adults, children });
    };

    const handleBook = () => {
        // Логика бронирования
        console.log("Booking:", {
            departureDate,
            arrivalDate,
            guests,
        });
        router.push("/confirm");
    };

    return (
        <div className="bg-white border border-gray-200 rounded-lg p-6">
            <div className="mb-6">
                <p className="text-2xl font-bold text-[#333333] mb-2">
                    от {price} ₽{" "}
                    <span className="text-base font-normal text-[#999999]">
                        /час
                    </span>
                </p>
            </div>

            <div className="space-y-4 mb-6">
                <div>
                    <label className="block text-sm font-medium text-[#333333] mb-2">
                        Выход
                    </label>
                    <DatePicker
                        variant="small"
                        placeholder="Выберите дату и время"
                        showIcon={false}
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-[#333333] mb-2">
                        Заход
                    </label>
                    <DatePicker
                        variant="small"
                        placeholder="Выберите дату и время"
                        showIcon={false}
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-[#333333] mb-2">
                        Гостей
                    </label>
                    <GuestPicker
                        adults={guests.adults}
                        childrenCount={guests.children}
                        onChange={handleGuestsChange}
                        variant="small"
                        showIcon={false}
                        placeholder="1 гость"
                    />
                </div>
            </div>

            <Button
                onClick={handleBook}
                variant="gradient"
                className="w-full h-12 font-bold text-white mb-4"
            >
                Забронировать
            </Button>

            <div className="pt-4 border-t border-gray-200">
                <div className="flex justify-between items-center">
                    <span className="text-base text-[#333333]">Итого:</span>
                    <span className="text-base font-bold text-[#333333]">
                        {total} ₽
                    </span>
                </div>
            </div>
        </div>
    );
}
