"use client";

import React, { useState } from "react";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import Icon from "../ui/icon";
import { Counter } from "../ui/counter";
import { ChevronUp, ChevronDown } from "lucide-react";

interface GuestPickerProps {
    adults?: number;
    childrenCount?: number;
    onChange?: (adults: number, children: number) => void;
    onApply?: (adults: number, children: number) => void;
    className?: string;
    showIcon?: boolean;
    variant?: "default" | "small";
    placeholder?: string;
}

export const GuestPicker: React.FC<GuestPickerProps> = ({ 
    adults = 0, 
    childrenCount = 0, 
    onChange,
    showIcon = true, 
    variant = "default", 
    placeholder = "Сколько гостей?" 
}) => {
    const [isOpen, setIsOpen] = useState<boolean>(false);

    const handleAdultsChange = (value: number) => {
        onChange?.(value, childrenCount);
    };

    const handleChildrenChange = (value: number) => {
        onChange?.(adults, value);
    };

    const handleApply = () => {
        onChange?.(adults, childrenCount);
        setIsOpen(false);
    };

    const getDisplayText = () => {
        const total = adults + childrenCount;
        if (total === 0) return placeholder;
        if (total === 1) return "1 гость";
        if (childrenCount === 0)
            return `${adults} ${adults === 1 ? "гость" : "гостей"}`;
        return `${total} ${total === 1 ? "гость" : "гостей"}`;
    };

    return (
        <div>
            <Popover
                open={isOpen}
                onOpenChange={setIsOpen}
            >
                <PopoverTrigger asChild>
                    <Button
                        variant="outline"
                        className={`${variant === "small" ? "h-[48px]" : "h-[64px]"} px-4 w-full justify-between`}
                    >
                        <div className="flex items-center">
                            {showIcon && (
                                <Icon
                                    name="people"
                                    className="mr-3"
                                />
                            )}
                            <span className="font-normal">{getDisplayText()}</span>
                        </div>
                        {isOpen ? (
                            <ChevronUp className="h-4 w-4" />
                        ) : (
                            <ChevronDown className="h-4 w-4" />
                        )}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="rounded-[20px] p-6 pb-4 w-56">
                    <div className="mb-4">
                        <Counter
                            label="Взрослые"
                            value={adults}
                            onChange={handleAdultsChange}
                            min={0}
                            max={10}
                        />
                    </div>
                    <div className="mb-4">
                        <Counter
                            label="Дети"
                            value={childrenCount}
                            onChange={handleChildrenChange}
                            min={0}
                            max={10}
                        />
                    </div>
                    <Button
                        onClick={handleApply}
                        variant="gradient"
                        className="font-bold text-white h-[44px] w-full px-8"
                    >
                        Применить
                    </Button>
                </PopoverContent>
            </Popover>
        </div>
    );
};
