"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
import { User, Clock, MoveHorizontal, Users } from "lucide-react";

interface Reservation {
    id: string;
    yachtName: string;
    yachtImage: string;
    ownerName: string;
    ownerAvatar?: string;
    length: number;
    capacity: number;
    departureDate: string;
    departureTime: string;
    arrivalDate: string;
    arrivalTime: string;
    guests: number;
    paymentType: string;
    totalPrice: number;
    paymentStatus: "pending" | "paid" | "confirmed";
}

// Моковые данные для демонстрации
const mockReservations: Record<string, Reservation[]> = {
    new: [
        {
            id: "1",
            yachtName: "KALLISTE",
            yachtImage: "/images/yachts/yacht1.jpg",
            ownerName: "Денис",
            length: 14,
            capacity: 10,
            departureDate: "9 Авг, 2025",
            departureTime: "00:00",
            arrivalDate: "9 Авг, 2025",
            arrivalTime: "02:00",
            guests: 1,
            paymentType: "Полная оплата",
            totalPrice: 52800,
            paymentStatus: "pending",
        },
        {
            id: "2",
            yachtName: "Señorita",
            yachtImage: "/images/yachts/yacht2.jpg",
            ownerName: "Денис",
            length: 14,
            capacity: 10,
            departureDate: "17 Авг, 2025",
            departureTime: "00:00",
            arrivalDate: "17 Авг, 2025",
            arrivalTime: "03:00",
            guests: 1,
            paymentType: "Полная оплата",
            totalPrice: 75240,
            paymentStatus: "pending",
        },
    ],
    active: [],
    confirmed: [],
    archive: [],
};

export default function ReservationsPage() {
    const [activeTab, setActiveTab] = useState<"new" | "active" | "confirmed" | "archive">("new");
    const reservations = mockReservations[activeTab];

    const formatPrice = (price: number): string => {
        return new Intl.NumberFormat("ru-RU").format(price) + " Р";
    };

    return (
        <main className="bg-[#f4f4f4]">
            <div className="container max-w-6xl mx-auto px-4 py-6">
                {/* Breadcrumbs */}
                <div className="hidden lg:flex mb-4 text-sm text-[#999999] items-center gap-[16px]">
                    <Link href="/">
                        <span className="cursor-pointer hover:text-[#333333] transition-colors">
                            Аренда яхты
                        </span>
                    </Link>
                    <span>&gt;</span>
                    <Link href="/profile">
                        <span className="cursor-pointer hover:text-[#333333] transition-colors">
                            Личный кабинет
                        </span>
                    </Link>
                    <span>&gt;</span>
                    <span className="text-[#333333]">Мои брони</span>
                </div>

                <div className="flex gap-6">
                    {/* Sidebar */}
                    <ProfileSidebar />

                    {/* Main Content */}
                    <div className="flex-1 bg-white rounded-[16px] p-8">
                        {/* Tabs */}
                        <div className="flex gap-2 mb-6">
                            <button
                                onClick={() => setActiveTab("new")}
                                className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "new"
                                    ? "border-[#333333] bg-white text-[#333333] font-bold"
                                    : "border-transparent text-[#999999] hover:text-[#333333]"
                                    }`}
                            >
                                Новые брони ({mockReservations.new.length})
                            </button>
                            <button
                                onClick={() => setActiveTab("active")}
                                className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "active"
                                    ? "border-[#333333] bg-white text-[#333333] font-bold"
                                    : "border-transparent text-[#999999] hover:text-[#333333]"
                                    }`}
                            >
                                Активные
                            </button>
                            <button
                                onClick={() => setActiveTab("confirmed")}
                                className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "confirmed"
                                    ? "border-[#333333] bg-white text-[#333333] font-bold"
                                    : "border-transparent text-[#999999] hover:text-[#333333]"
                                    }`}
                            >
                                Подтвержденные
                            </button>
                            <button
                                onClick={() => setActiveTab("archive")}
                                className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "archive"
                                    ? "border-[#333333] bg-white text-[#333333] font-bold"
                                    : "border-transparent text-[#999999] hover:text-[#333333]"
                                    }`}
                            >
                                Архив
                            </button>
                        </div>

                        {/* Reservations List */}
                        <div className="space-y-8">
                            {reservations.length === 0 ? (
                                <div className="text-center py-12 text-[#999999]">
                                    Нет бронирований в этой категории
                                </div>
                            ) : (
                                reservations.map((reservation, index) => (
                                    <div
                                        key={reservation.id}
                                        className={`overflow-hidden bg-white ${index !== reservations.length - 1 ? 'pb-8 border-b border-gray-200' : ''}`}
                                    >
                                        <div>
                                            <div className="flex flex-col lg:flex-row">
                                                {/* Image Section */}
                                                <div className="relative rounded-[12px] overflow-hidden w-90 h-90 flex-shrink-0">
                                                    <Image
                                                        src={reservation.yachtImage}
                                                        alt={reservation.yachtName}
                                                        fill
                                                        className="object-cover"
                                                    />
                                                    {/* Owner Info Overlay */}
                                                    <div className="absolute top-2 left-2">
                                                        <div className="bg-white p-2 rounded-[8px] flex items-center gap-2">
                                                            <User
                                                                size={20}
                                                                className="text-[#999999]"
                                                            />
                                                            <div className="flex flex-col">
                                                                <span className="text-xs text-[#999999]">
                                                                    Владелец
                                                                </span>
                                                                <span className="text-sm text-[#333333] font-bold">
                                                                    {reservation.ownerName}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {/* Yacht Details Overlay */}
                                                    <div className="absolute bottom-2 left-2 flex gap-2">
                                                        <div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
                                                            <div className="flex items-center gap-1">
                                                                <MoveHorizontal
                                                                    size={16}
                                                                    className="text-white"
                                                                />
                                                                <span>
                                                                    {reservation.length} метров
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
                                                            <div className="flex items-center gap-1">
                                                                <Users
                                                                    size={16}
                                                                    className="text-white"
                                                                />
                                                                <span>{reservation.capacity}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                {/* Details Section */}
                                                <div className="flex-1 px-6">
                                                    <div className="space-y-3">
                                                        <div className="flex items-start justify-between">
                                                            <div className="space-y-3 w-full">
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Выход:
                                                                    </div>
                                                                    <div>
                                                                        {reservation.departureDate} -{" "}
                                                                        {reservation.departureTime}
                                                                    </div>
                                                                </div>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Заход:
                                                                    </div>
                                                                    <div>
                                                                        {reservation.arrivalDate} -{" "}
                                                                        {reservation.arrivalTime}
                                                                    </div>
                                                                </div>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Гости:
                                                                    </div>
                                                                    <div>
                                                                        {reservation.guests}
                                                                    </div>
                                                                </div>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Тип оплаты:
                                                                    </div>
                                                                    <div>
                                                                        {reservation.paymentType}
                                                                    </div>
                                                                </div>
                                                                <div className="flex items-center gap-2 text-sm text-[#333333]">
                                                                    <Clock
                                                                        size={16}
                                                                        className="text-[#999999]"
                                                                    />
                                                                    <span>
                                                                        По местному времени яхты
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="pt-3 border-t border-[#DFDFDF]">
                                                            <div className="flex items-center justify-between">
                                                                <span className="text-base font-bold text-[#333333]">
                                                                    Итого:{" "}
                                                                    {formatPrice(
                                                                        reservation.totalPrice
                                                                    )}{" "}{reservation.paymentStatus ===
                                                                        "pending" && (
                                                                            <span className="text-base font-bold text-red-500">
                                                                                (в ожидании оплаты)
                                                                            </span>
                                                                        )}
                                                                </span>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}
