"use client";

import { useRouter } from "next/navigation";
import Link from "next/link";
import { useState } from "react";
import { ArrowLeft, Heart } from "lucide-react";
import Icon from "@/components/ui/icon";
import { YachtGallery } from "./components/YachtGallery";
import { YachtAvailability } from "./components/YachtAvailability";
import { BookingWidget } from "./components/BookingWidget";
import { YachtCharacteristics } from "./components/YachtCharacteristics";
import { ContactInfo } from "./components/ContactInfo";
import { YACHT } from "./const";

export default function YachtDetailPage() {
    // const params = useParams();
    const router = useRouter();
    const [activeTab, setActiveTab] = useState<
        | "availability"
        | "description"
        | "characteristics"
        | "contact"
        | "requisites"
        | "reviews"
    >("availability");

    return (
        <main className="bg-[#f4f4f4] min-h-screen ">
            {/* Мобильная фиксированная верхняя панель навигации */}
            <div className="lg:hidden fixed top-[73px] left-0 right-0 z-[50] bg-white border-b border-gray-200">
                <div className="flex items-center justify-between px-4 h-14">
                    <button
                        onClick={() => router.back()}
                        className="flex items-center justify-center"
                    >
                        <ArrowLeft size={24} className="text-[#333333]" />
                    </button>
                    <h2 className="text-base font-medium text-[#333333]">
                        Яхта
                    </h2>
                    <button className="flex items-center justify-center">
                        <Heart size={24} className="text-[#333333]" />
                    </button>
                </div>
            </div>

            {/* Десктопная версия - Breadcrumbs */}
            <div className="hidden lg:block container max-w-6xl mx-auto px-4 py-4">
                <div className="text-sm text-[#999999] flex items-center gap-4">
                    <Link href="/">
                        <span className="cursor-pointer hover:text-[#333333] transition-colors">
                            Аренда яхты
                        </span>
                    </Link>
                    <span>&gt;</span>
                    <Link href="/catalog">
                        <span className="cursor-pointer hover:text-[#333333] transition-colors">
                            Моторные яхты
                        </span>
                    </Link>
                    <span>&gt;</span>
                    <span className="text-[#333333]">{YACHT.name}</span>
                </div>
            </div>

            {/* Main Content Container */}
            <div className="lg:container lg:max-w-6xl lg:mx-auto lg:px-4 lg:pb-6">
                <div className="bg-white lg:rounded-[16px] lg:p-6">
                    {/* Мобильная версия - без отступов сверху, с отступом для фиксированной панели */}
                    <div className="lg:hidden pt-[50px]">
                        {/* Gallery */}
                        <YachtGallery
                            images={YACHT.images}
                            badge={YACHT.badge}
                        />

                        {/* Yacht Title */}
                        <div className="px-4 pt-4">
                            <h1 className="text-xl font-bold text-[#333333] mb-4">
                                {YACHT.name}
                            </h1>
                        </div>

                        {/* Tabs */}
                        <div className="px-4 border-b border-gray-200 overflow-x-auto">
                            <div className="flex gap-6 min-w-max">
                                <button
                                    onClick={() => setActiveTab("availability")}
                                    className={`pb-3 text-base font-medium transition-colors whitespace-nowrap ${
                                        activeTab === "availability"
                                            ? "text-[#008299] border-b-2 border-[#008299]"
                                            : "text-[#999999]"
                                    }`}
                                >
                                    Свободные даты
                                </button>
                                <button
                                    onClick={() => setActiveTab("description")}
                                    className={`pb-3 text-base font-medium transition-colors whitespace-nowrap ${
                                        activeTab === "description"
                                            ? "text-[#008299] border-b-2 border-[#008299]"
                                            : "text-[#999999]"
                                    }`}
                                >
                                    Описание
                                </button>
                                <button
                                    onClick={() =>
                                        setActiveTab("characteristics")
                                    }
                                    className={`pb-3 text-base font-medium transition-colors whitespace-nowrap ${
                                        activeTab === "characteristics"
                                            ? "text-[#008299] border-b-2 border-[#008299]"
                                            : "text-[#999999]"
                                    }`}
                                >
                                    Характеристики
                                </button>
                                <button
                                    onClick={() => setActiveTab("contact")}
                                    className={`pb-3 text-base font-medium transition-colors whitespace-nowrap ${
                                        activeTab === "contact"
                                            ? "text-[#008299] border-b-2 border-[#008299]"
                                            : "text-[#999999]"
                                    }`}
                                >
                                    Контактное лицо и реквизиты
                                </button>
                                <button
                                    onClick={() => setActiveTab("reviews")}
                                    className={`pb-3 text-base font-medium transition-colors whitespace-nowrap ${
                                        activeTab === "reviews"
                                            ? "text-[#008299] border-b-2 border-[#008299]"
                                            : "text-[#999999]"
                                    }`}
                                >
                                    Отзывы
                                </button>
                            </div>
                        </div>

                        {/* Tab Content */}
                        <div className="px-4 py-6">
                            {activeTab === "availability" && (
                                <YachtAvailability
                                    price={YACHT.price}
                                    mobile={true}
                                />
                            )}
                            {activeTab === "description" && (
                                <div>
                                    <p className="text-base text-[#666666] leading-relaxed">
                                        {YACHT.description}
                                    </p>
                                </div>
                            )}
                            {activeTab === "characteristics" && (
                                <YachtCharacteristics yacht={YACHT} />
                            )}
                            {activeTab === "contact" && (
                                <ContactInfo
                                    contactPerson={YACHT.contactPerson}
                                    requisites={YACHT.requisites}
                                />
                            )}
                            {activeTab === "reviews" && (
                                <div>
                                    <div className="flex items-center gap-2 mb-4">
                                        <Icon name="reviewStar" size={16} />
                                        <h2 className="text-base font-bold text-[#333333]">
                                            Отзывы
                                        </h2>
                                    </div>
                                    <div className="border border-[#DFDFDF] rounded-[12px] flex items-center justify-center py-18">
                                        <p className="text-lg text-[#999999]">
                                            У этой яхты пока нет отзывов
                                        </p>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Десктопная версия */}
                    <div className="hidden lg:block">
                        {/* Yacht Title and Actions */}
                        <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <h1 className="text-xl md:text-2xl font-bold text-[#333333]">
                                {YACHT.name}
                            </h1>
                            <div className="flex items-center gap-6">
                                <div className="flex items-center gap-2 text-[#333333]">
                                    <Icon name="pin" size={32} />
                                    <span className="text-base">
                                        {YACHT.location}
                                    </span>
                                </div>
                                <button className="flex items-center gap-2 cursor-pointer text-[#333333] hover:text-[#008299] transition-colors">
                                    <Icon name="share" size={32} />
                                    <span className="text-base">
                                        Поделиться
                                    </span>
                                </button>
                                <button className="flex items-center gap-2 cursor-pointer text-[#333333] hover:text-[#008299] transition-colors">
                                    <Icon name="heart" size={32} />
                                    <span className="text-base">Избранное</span>
                                </button>
                            </div>
                        </div>

                        {/* Main Content */}
                        <div className="space-y-6">
                            {/* Gallery */}
                            <YachtGallery
                                images={YACHT.images}
                                badge={YACHT.badge}
                            />

                            {/* Content with Booking Widget on the right */}
                            <div className="flex flex-col lg:flex-row gap-6 items-start">
                                {/* Left column - all content below gallery */}
                                <div className="flex-1 space-y-6">
                                    {/* Availability */}
                                    <YachtAvailability price={YACHT.price} />

                                    {/* Characteristics */}
                                    <YachtCharacteristics yacht={YACHT} />

                                    {/* Description */}
                                    <div>
                                        <h2 className="text-base font-bold text-[#333333] mb-4">
                                            Описание
                                        </h2>
                                        <p className="text-base text-[#666666] leading-relaxed">
                                            {YACHT.description}
                                        </p>
                                    </div>

                                    {/* Contact and Requisites */}
                                    <ContactInfo
                                        contactPerson={YACHT.contactPerson}
                                        requisites={YACHT.requisites}
                                    />

                                    {/* Reviews */}
                                    <div>
                                        <div className="flex items-center gap-2 mb-4">
                                            <Icon name="reviewStar" size={16} />
                                            <h2 className="text-base font-bold text-[#333333]">
                                                Отзывы
                                            </h2>
                                        </div>
                                        <div className="border border-[#DFDFDF] rounded-[12px] flex items-center justify-center py-18">
                                            <p className="text-lg text-[#999999]">
                                                У этой яхты пока нет отзывов
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                {/* Right column - Booking Widget (sticky) */}
                                <div className="lg:w-74 flex-shrink-0 lg:sticky lg:top-24 self-start">
                                    <BookingWidget price={YACHT.price} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Мобильная фиксированная нижняя панель бронирования */}
            <div className="lg:hidden sticky bottom-0 left-0 right-0 z-[10] bg-white border-t border-gray-200 px-4 py-3">
                <div className="flex items-center justify-between">
                    <div>
                        <span className="text-lg font-bold text-[#333333]">
                            {YACHT.price} ₽
                        </span>
                        <span className="text-sm text-[#999999] ml-1">
                            / час
                        </span>
                    </div>
                    <button
                        onClick={() => router.push("/confirm")}
                        className="bg-[#008299] text-white px-6 py-3 rounded-lg font-bold text-base hover:bg-[#006d7a] transition-colors"
                    >
                        Забронировать
                    </button>
                </div>
            </div>
        </main>
    );
}
