"use client";

import { Slider } from "@/components/ui/slider";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/date-picker";
import { GuestPicker } from "@/components/form/guest-picker";
import Icon from "@/components/ui/icon";
import { CatalogFilters, defaultFilters } from "@/app/catalog/page";

interface CatalogSidebarProps {
    filters: CatalogFilters;
    setFilters: (filters: CatalogFilters | ((prev: CatalogFilters) => CatalogFilters)) => void;
    onApply?: () => void;
    onReset?: () => void;
}

export default function CatalogSidebar({
    filters,
    setFilters,
    onApply,
    onReset,
}: CatalogSidebarProps) {
    const formatPrice = (value: number) => {
        return new Intl.NumberFormat("ru-RU").format(value) + " Р";
    };

    const activeFiltersCount = [
        filters.lengthRange[0] !== defaultFilters.lengthRange[0] || filters.lengthRange[1] !== defaultFilters.lengthRange[1],
        filters.priceRange[0] !== defaultFilters.priceRange[0] || filters.priceRange[1] !== defaultFilters.priceRange[1],
        filters.yearRange[0] !== defaultFilters.yearRange[0] || filters.yearRange[1] !== defaultFilters.yearRange[1],
        filters.adults !== 0 || filters.children !== 0,
        filters.paymentType !== defaultFilters.paymentType,
        filters.quickBooking,
        filters.hasToilet,
        filters.search !== "",
        filters.date !== null,
        filters.departureTime !== defaultFilters.departureTime,
        filters.arrivalTime !== defaultFilters.arrivalTime,
    ].filter(Boolean).length;

    return (
        <aside className="w-full md:w-[260px] bg-white p-6 rounded-[16px]">
            <div className="flex items-center justify-between mb-4">
                <h2 className="text-md font-bold text-[#333333]">Искать</h2>
                <button
                    onClick={onReset}
                    className="text-xs text-[#333333] hover:text-gray-900"
                >
                    Сбросить все{" "}
                    <span className="text-[#999999]">
                        ({activeFiltersCount})
                    </span>
                </button>
            </div>

            <div className="space-y-4">
                {/* Тип судна */}
                <div>
                    <Label className="text-md font-bold text-[#333333] mb-4 block">
                        Тип судна
                    </Label>
                    <input
                        type="text"
                        placeholder="Искать"
                        value={filters.search}
                        onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                        className="w-full h-12 px-3 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#008299]"
                    />
                </div>

                {/* Длина катеров/яхт */}
                <div>
                    <Label className="text-md font-bold text-[#333333] mb-5 block">
                        Длина катеров/яхт
                    </Label>
                    <div className="px-0">
                        <Slider
                            value={filters.lengthRange}
                            onValueChange={(value) => setFilters({ ...filters, lengthRange: value as [number, number] })}
                            min={7}
                            max={50}
                            step={1}
                            className="mb-2 [&_[role=slider]]:bg-[#008299] [&_[role=slider]]:border-[#008299] [&>div>div]:bg-[#008299]"
                        />
                        <div className="flex justify-between text-xs text-[#333333]">
                            <div className="flex items-center gap-1">
                                <Icon name="lengthMin" size={20} />
                                {filters.lengthRange[0]} m
                            </div>
                            <div className="flex items-center gap-1">
                                {filters.lengthRange[1]} m
                                <Icon name="lengthMax" size={20} />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Дата */}
                <div>
                    <DatePicker 
                        variant="small" 
                        placeholder="Дата"
                        value={filters.date}
                        departureTime={filters.departureTime}
                        arrivalTime={filters.arrivalTime}
                        onDateChange={(newDate) => setFilters({ ...filters, date: newDate || null })}
                        onDepartureTimeChange={(time) => setFilters({ ...filters, departureTime: time })}
                        onArrivalTimeChange={(time) => setFilters({ ...filters, arrivalTime: time })}
                    />
                </div>

                {/* Гостей */}
                <div>
                    <GuestPicker
                        variant="small"
                        adults={filters.adults}
                        childrenCount={filters.children}
                        onChange={(adults, children) => {
                            setFilters({ ...filters, adults, children });
                        }}
                    />
                </div>

                {/* Быстрая бронь */}
                <div className="flex items-center space-x-2">
                    <Checkbox
                        id="quick-booking"
                        variant="large"
                        checked={filters.quickBooking}
                        onCheckedChange={(checked) =>
                            setFilters({ ...filters, quickBooking: checked === true })
                        }
                    />
                    <Label
                        htmlFor="quick-booking"
                        className="text-sm font-medium text-[#333333] cursor-pointer flex items-center gap-1"
                    >
                        Быстрая бронь
                    </Label>
                </div>

                {/* Цена за 1 час */}
                <div>
                    <Label className="text-md font-bold text-[#333333] mb-4 block">
                        Цена за 1 час
                    </Label>
                    <div>
                        <Slider
                            value={filters.priceRange}
                            onValueChange={(value) => setFilters({ ...filters, priceRange: value as [number, number] })}
                            min={3000}
                            max={200000}
                            step={1000}
                            className="mb-2 [&_[role=slider]]:bg-[#008299] [&_[role=slider]]:border-[#008299] [&>div>div]:bg-[#008299]"
                        />
                        <div className="flex justify-between text-xs text-[#333333]">
                            <div className="flex items-center gap-1">
                                <Icon name="priceMin" size={20} />
                                {formatPrice(filters.priceRange[0])}
                            </div>
                            <div className="flex items-center gap-1">
                                {formatPrice(filters.priceRange[1])}
                                <Icon name="priceMax" size={20} />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Тип оплаты */}
                <div>
                    <Label className="text-md font-bold text-[#333333] mb-4 block">
                        Тип оплаты
                    </Label>
                    <RadioGroup
                        value={filters.paymentType}
                        onValueChange={(value) => setFilters({ ...filters, paymentType: value })}
                        className="space-y-2"
                    >
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="all" id="all" />
                            <Label
                                htmlFor="all"
                                className="text-sm font-normal text-black cursor-pointer"
                            >
                                Все типы оплаты
                            </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="partial" id="partial" />
                            <Label
                                htmlFor="partial"
                                className="text-sm font-normal text-black cursor-pointer"
                            >
                                Частичная оплата
                            </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="full" id="full" />
                            <Label
                                htmlFor="full"
                                className="text-sm font-normal text-black cursor-pointer"
                            >
                                Полная оплата
                            </Label>
                        </div>
                    </RadioGroup>
                </div>

                {/* Год */}
                <div>
                    <Label className="text-md font-bold text-[#333333] mb-4 block">
                        Год
                    </Label>
                    <div>
                        <Slider
                            value={filters.yearRange}
                            onValueChange={(value) => setFilters({ ...filters, yearRange: value as [number, number] })}
                            min={1991}
                            max={2025}
                            step={1}
                            className="mb-2 [&_[role=slider]]:bg-[#008299] [&_[role=slider]]:border-[#008299] [&>div>div]:bg-[#008299]"
                        />
                        <div className="flex justify-between text-xs text-[#333333]">
                            <div className="text-s  flex items-center gap-1">
                                <Icon name="boatYearMin" size={20} />
                                {filters.yearRange[0]}
                            </div>
                            <div className="flex items-center gap-1">
                                {filters.yearRange[1]}
                                <Icon name="boatYearMax" size={20} />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Гальюн */}
                <div className="flex items-center space-x-2">
                    <Checkbox
                        id="toilet"
                        variant="large"
                        checked={filters.hasToilet}
                        onCheckedChange={(checked) =>
                            setFilters({ ...filters, hasToilet: checked === true })
                        }
                    />
                    <Label
                        htmlFor="toilet"
                        className="text-sm font-medium text-[#333333] cursor-pointer"
                    >
                        Гальюн
                    </Label>
                </div>

                {/* Кнопка Применить */}
                <Button
                    onClick={onApply}
                    className="w-full bg-[#008299] hover:bg-[#006d7f] text-white font-bold h-12 mt-2"
                >
                    Применить
                </Button>
            </div>
        </aside>
    );
}
