import Link from "next/link";
import Image from "next/image";
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
import { MoveHorizontal, Users } from "lucide-react";
import { getImageUrl, formatMinCost } from "@/lib/utils";
import { Button } from "@/components/ui/button";

interface Yacht {
    id: string;
    name: string;
    image: string;
    length: number;
    capacity: number;
    minCost: number;
    status: "active" | "moderation" | "archive";
}

// Моковые данные для демонстрации
const mockYachts: Yacht[] = [
    {
        id: "1",
        name: "KALLISTE",
        image: "/images/yachts/yacht1.jpg",
        length: 14,
        capacity: 10,
        minCost: 26400,
        status: "active",
    },
    {
        id: "2",
        name: "Señorita",
        image: "/images/yachts/yacht2.jpg",
        length: 14,
        capacity: 10,
        minCost: 37620,
        status: "active",
    },
];

export default function YachtsPage() {
    const yachts = mockYachts;

    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">
                        {/* Header with Add Button */}
                        <div className="flex items-center justify-between mb-6">
                            <h2 className="text-2xl font-bold text-[#333333]">Мои яхты</h2>
                            <Link href="/profile/yachts/add">
                                <Button variant="gradient" size="default">
                                    Добавить
                                </Button>
                            </Link>
                        </div>

                        {/* Yachts List */}
                        <div className="space-y-8">
                            {yachts.length === 0 ? (
                                <div className="text-center py-12 text-[#999999]">
                                    Нет яхт в этой категории
                                </div>
                            ) : (
                                yachts.map((yacht, index) => (
                                    <div
                                        key={yacht.id}
                                        className={`overflow-hidden bg-white ${
                                            index !== yachts.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={getImageUrl(
                                                            yacht.image
                                                        )}
                                                        alt={yacht.name}
                                                        fill
                                                        className="object-cover"
                                                        unoptimized
                                                    />
                                                    {/* 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>
                                                                    {
                                                                        yacht.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>
                                                                    {
                                                                        yacht.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">
                                                                <h3 className="text-xl font-bold text-[#333333]">
                                                                    {yacht.name}
                                                                </h3>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Длина:
                                                                    </div>
                                                                    <div>
                                                                        {
                                                                            yacht.length
                                                                        }{" "}
                                                                        метров
                                                                    </div>
                                                                </div>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Вместимость:
                                                                    </div>
                                                                    <div>
                                                                        {
                                                                            yacht.capacity
                                                                        }{" "}
                                                                        человек
                                                                    </div>
                                                                </div>
                                                                <div className="text-[#333333] w-full flex justify-between">
                                                                    <div>
                                                                        Стоимость:
                                                                    </div>
                                                                    <div className="font-bold">
                                                                        {formatMinCost(
                                                                            yacht.minCost
                                                                        )}{" "}
                                                                        / час
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="pt-3 border-t border-[#DFDFDF]">
                                                            <div className="flex items-center justify-between">
                                                                <Link
                                                                    href={`/catalog/${yacht.id}`}
                                                                    className="text-sm text-[#2D908D] hover:underline"
                                                                >
                                                                    Посмотреть
                                                                    объявление
                                                                </Link>
                                                                <Link
                                                                    href={`/profile/yachts/${yacht.id}/edit`}
                                                                    className="text-sm text-[#2D908D] hover:underline"
                                                                >
                                                                    Редактировать
                                                                </Link>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}