"use client";

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";
import useAuthStore from "@/stores/useAuthStore";
import { useEffect, useState } from "react";
import useApiClient from "@/hooks/useApiClient";
import { CatalogItemShortDto } from "@/api/types";

export default function YachtsPage() {
    const [yachts, setYachts] = useState<CatalogItemShortDto[]>([]);
    const apiClient = useApiClient();
    const { getUserId } = useAuthStore();
    const userId = getUserId();

    useEffect(() => {
        if (userId) {
            apiClient
                .get<CatalogItemShortDto[]>(`/catalog/user/${userId}`)
                .then((response) => {
                    setYachts(response.data);
                })
                .catch((error) => {
                    console.error("Ошибка при загрузке яхт:", error);
                });
        }
    }, [userId]);

    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.mainImageUrl
                                                        )}
                                                        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>
                                                                    -
                                                                </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>
                                                                        -
                                                                    </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">
                                                                {yacht.id && (
                                                                    <>
                                                                        <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>
    );
}
