"use client";

import { useState } from "react";
import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/date-picker";
import Icon from "@/components/ui/icon";
import { GuestPicker } from "@/components/form/guest-picker";
import Link from "next/link";

export default function Hero() {
    const [adults, setAdults] = useState<number>(0);
    const [children, setChildren] = useState<number>(0);
    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
    const [departureTime, setDepartureTime] = useState<string>("12:00");
    const [arrivalTime, setArrivalTime] = useState<string>("13:00");
    return (
        <section className="relative h-[600px] rounded-[24px] mx-[16px] overflow-hidden flex text-white">
            <Image
                src="/images/hero-bg.jpg"
                alt="Море"
                fill
                className="object-cover"
                priority
            />
            <div className="absolute inset-0 bg-black/40" />

            <div className="relative z-10 w-full max-w-6xl mx-auto px-4 flex flex-col justify-between h-full py-8 pt-24">
                {/* Заголовок и подзаголовок */}
                <div className="text-center md:text-left text-center">
                    <h1 className="text-5xl font-bold mb-2">
                        Аренда яхт и катеров в Балаклаве
                    </h1>
                    <p className="text-white/90">
                        Насладись морем и Крымом с Travel Marine
                    </p>
                </div>

                {/* Кнопка для мобильных устройств */}
                <Link href="/catalog">
                    <div className="md:hidden flex  justify-center">
                        <Button variant="gradient" className="font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
                            Выберите яхту
                        </Button>
                    </div>
                </Link>

                {/* Поисковая форма - скрыта на мобильных устройствах */}
                <Card className="bg-white shadow-lg s hidden md:block rounded-full">
                    <CardContent className="p-2">
                        {/* Основные поля поиска */}
                        <div className="flex flex-col md:flex-row gap-4">
                            {/* Локация */}
                            <div className="flex-1">
                                <Button variant="outline" className="w-full h-[64px] px-4 justify-start">
                                    <div className="flex items-center">
                                        <Icon
                                            name="map"
                                            className="w-5 h-5 text-brand mr-3"
                                        />
                                        <span className="font-normal">Балаклава</span>
                                    </div>
                                </Button>
                            </div>

                            {/* Дата и время */}
                            <div className="flex-1">
                                <DatePicker
                                    value={selectedDate || undefined}
                                    departureTime={departureTime}
                                    arrivalTime={arrivalTime}
                                    onDateChange={(date) => setSelectedDate(date || null)}
                                    onDepartureTimeChange={setDepartureTime}
                                    onArrivalTimeChange={setArrivalTime}
                                />
                            </div>

                            {/* Количество гостей */}
                            <div className="flex-1">
                                <GuestPicker
                                    adults={adults}
                                    childrenCount={children}
                                    onChange={(adults, children) => {
                                        setAdults(adults);
                                        setChildren(children);
                                    }}
                                />
                            </div>

                            {/* Кнопка поиска */}
                            <Link href={(() => {
                                const params = new URLSearchParams();
                                if (adults > 0) params.append('adults', adults.toString());
                                if (children > 0) params.append('children', children.toString());
                                if (selectedDate) params.append('date', selectedDate.toString());
                                if (departureTime && departureTime !== "12:00") params.append('departureTime', departureTime);
                                if (arrivalTime && arrivalTime !== "13:00") params.append('arrivalTime', arrivalTime);
                                const queryString = params.toString();
                                return queryString ? `/catalog?${queryString}` : '/catalog';
                            })()}>
                                <Button variant="gradient" className="font-bold text-white h-[64px] w-[176px] px-8">
                                    Найти
                                </Button>
                            </Link>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </section>
    );
}
