"use client";

import { useState } from "react";
import Link from "next/link";
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Info, X, Plus, Minus } from "lucide-react";

interface Cabin {
    id: string;
    name: string;
    count: number;
    type: string;
}

export default function AddYachtPage() {
    const [cabins, setCabins] = useState<Cabin[]>([
        { id: "1", name: "Мастер Каюта", count: 1, type: "Односпальная" },
        { id: "2", name: "Гостевая каюта 1", count: 1, type: "" },
    ]);

    const addCabin = () => {
        const newCabin: Cabin = {
            id: Date.now().toString(),
            name: `Гостевая каюта ${cabins.length}`,
            count: 1,
            type: "",
        };
        setCabins([...cabins, newCabin]);
    };

    const removeCabin = (id: string) => {
        setCabins(cabins.filter((cabin) => cabin.id !== id));
    };

    const updateCabinCount = (id: string, delta: number) => {
        setCabins(
            cabins.map((cabin) =>
                cabin.id === id
                    ? { ...cabin, count: Math.max(1, cabin.count + delta) }
                    : cabin
            )
        );
    };

    const updateCabinType = (id: string, type: string) => {
        setCabins(
            cabins.map((cabin) =>
                cabin.id === id ? { ...cabin, type } : cabin
            )
        );
    };

    return (
        <main className="bg-[#f4f4f4] min-h-screen">
            <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>
                    <Link href="/profile/yachts">
                        <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-lg p-8">
                        <h1 className="text-2xl font-bold text-[#333333] mb-8">
                            Добавление яхты
                        </h1>

                        {/* Выберите тип судна */}
                        <div className="mb-6">
                            <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                Выберите тип судна*
                            </Label>
                            <Select>
                                <SelectTrigger className="w-full h-12 rounded-lg">
                                    <SelectValue placeholder="Выберите тип судна" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="motor">Моторная яхта</SelectItem>
                                    <SelectItem value="sail">Парусная яхта</SelectItem>
                                    <SelectItem value="catamaran">Катамаран</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {/* Основная информация */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Основная информация*
                            </h2>
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Название судна*
                                    </Label>
                                    <Input
                                        placeholder="Название судна"
                                        className="h-12"
                                    />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Верфь*
                                    </Label>
                                    <Input placeholder="Верфь" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Модель*
                                    </Label>
                                    <Select>
                                        <SelectTrigger className="w-full h-12 rounded-lg">
                                            <SelectValue placeholder="Модель" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="model1">Модель 1</SelectItem>
                                            <SelectItem value="model2">Модель 2</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                            <div>
                                <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                    Выберите марину*
                                </Label>
                                <Select>
                                    <SelectTrigger className="w-full h-12 rounded-lg">
                                        <SelectValue placeholder="Выберите марину" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="marina1">Марина 1</SelectItem>
                                        <SelectItem value="marina2">Марина 2</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Прибыль и время аренды */}
                        <div className="mb-8">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Прибыль (за час)*
                                    </Label>
                                    <div className="relative">
                                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-[#333333]">
                                            $
                                        </span>
                                        <Input
                                            placeholder="Прибыль (за час)"
                                            className="h-12 pl-8 pr-10"
                                        />
                                        <Info className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#999999]" />
                                    </div>
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Минимальное время аренды (в часах)*
                                    </Label>
                                    <Input
                                        placeholder="Минимальное время (в часах)"
                                        className="h-12"
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Тип оплаты */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Тип оплаты
                            </h2>
                            <div className="space-y-3">
                                <div className="flex items-center gap-3">
                                    <Checkbox id="yookassa" />
                                    <Label
                                        htmlFor="yookassa"
                                        className="flex-1 cursor-pointer flex items-center justify-between"
                                    >
                                        <span>Оплата через Yookassa</span>
                                        <Info className="h-4 w-4 text-[#999999]" />
                                    </Label>
                                </div>
                                <div className="flex items-center gap-3">
                                    <Checkbox id="prepayment" defaultChecked />
                                    <Label
                                        htmlFor="prepayment"
                                        className="flex-1 cursor-pointer flex items-center justify-between"
                                    >
                                        <span>Предоплата</span>
                                        <Info className="h-4 w-4 text-[#999999]" />
                                    </Label>
                                </div>
                            </div>
                        </div>

                        {/* Промоцены */}
                        <div className="mb-8">
                            <div className="flex items-center justify-between mb-4">
                                <h2 className="text-lg font-bold text-[#333333]">
                                    Промоцены
                                </h2>
                                <Button variant="outline" size="sm">
                                    Добавить промоцену
                                </Button>
                            </div>
                        </div>

                        {/* Синхронизация Google Календаря */}
                        <div className="mb-8">
                            <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                ID Google Календаря для синхронизации
                            </Label>
                            <Input
                                placeholder="ID Google Календаря"
                                className="h-12"
                            />
                        </div>

                        {/* Загрузка изображений */}
                        <div className="mb-8">
                            <div className="flex items-center justify-between mb-4">
                                <Label className="text-sm font-medium text-[#333333]">
                                    Загрузите изображения судна (в высоком разрешении)*
                                </Label>
                                <Button variant="outline" size="sm">
                                    Загрузить
                                </Button>
                            </div>
                            <div className="border-2 border-dashed border-[#999999] rounded-lg p-12 text-center">
                                <div className="flex flex-col items-center gap-4">
                                    <div className="w-16 h-16 bg-[#f4f4f4] rounded-lg flex items-center justify-center">
                                        <svg
                                            width="32"
                                            height="32"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            strokeWidth="2"
                                        >
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                            <polyline points="17 8 12 3 7 8" />
                                            <line x1="12" y1="3" x2="12" y2="15" />
                                        </svg>
                                    </div>
                                    <p className="text-sm text-[#333333]">
                                        Загрузите изображения судна (в высоком разрешении)*
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Характеристики */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Характеристики*
                            </h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Год*
                                    </Label>
                                    <Input placeholder="Год" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Мощность (л/с)
                                    </Label>
                                    <Input placeholder="Мощность (л/с)" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Длина (м)*
                                    </Label>
                                    <Input placeholder="Длина (м)" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Ширина (м)
                                    </Label>
                                    <Input placeholder="Ширина (м)" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Макс. вместимость (без экипажа)*
                                    </Label>
                                    <Input
                                        placeholder="Макс. вместимость (без экипажа)"
                                        className="h-12"
                                    />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Комфортная вместимость (человек)*
                                    </Label>
                                    <Input
                                        placeholder="Комфортная вместимость (человек)"
                                        className="h-12"
                                    />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Каюты
                                    </Label>
                                    <Input placeholder="Каюты" className="h-12" />
                                </div>
                                <div>
                                    <Label className="text-sm font-medium text-[#333333] mb-2 block">
                                        Материал
                                    </Label>
                                    <Select>
                                        <SelectTrigger className="w-full h-12 rounded-lg">
                                            <SelectValue placeholder="Материал" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="fiberglass">Стеклопластик</SelectItem>
                                            <SelectItem value="aluminum">Алюминий</SelectItem>
                                            <SelectItem value="steel">Сталь</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                        </div>

                        {/* Удобства */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Удобства
                            </h2>
                            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                                {/* Здесь будут чекбоксы для удобств */}
                                <div className="flex items-center gap-2">
                                    <Checkbox id="wifi" />
                                    <Label htmlFor="wifi" className="cursor-pointer">
                                        Wi-Fi
                                    </Label>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox id="aircon" />
                                    <Label htmlFor="aircon" className="cursor-pointer">
                                        Кондиционер
                                    </Label>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox id="kitchen" />
                                    <Label htmlFor="kitchen" className="cursor-pointer">
                                        Кухня
                                    </Label>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox id="toilet" />
                                    <Label htmlFor="toilet" className="cursor-pointer">
                                        Туалет
                                    </Label>
                                </div>
                            </div>
                        </div>

                        {/* Описание */}
                        <div className="mb-8">
                            <div className="flex items-center gap-2 mb-4">
                                <h2 className="text-lg font-bold text-[#333333]">
                                    Описание (5000)
                                </h2>
                                <Info className="h-4 w-4 text-[#999999]" />
                            </div>
                            <textarea
                                placeholder="Введите описание"
                                className="w-full h-32 p-4 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[#008299]"
                            />
                        </div>

                        {/* Добавить каюты */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Добавить каюты
                            </h2>
                            <div className="space-y-3 mb-4">
                                {cabins.map((cabin) => (
                                    <div
                                        key={cabin.id}
                                        className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg"
                                    >
                                        <button
                                            onClick={() => removeCabin(cabin.id)}
                                            className="text-[#999999] hover:text-[#333333]"
                                        >
                                            <X className="h-5 w-5" />
                                        </button>
                                        <div className="flex items-center gap-2">
                                            <button
                                                onClick={() =>
                                                    updateCabinCount(cabin.id, -1)
                                                }
                                                className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded"
                                            >
                                                <Minus className="h-4 w-4" />
                                            </button>
                                            <span className="w-8 text-center">
                                                {cabin.count}
                                            </span>
                                            <button
                                                onClick={() =>
                                                    updateCabinCount(cabin.id, 1)
                                                }
                                                className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded"
                                            >
                                                <Plus className="h-4 w-4" />
                                            </button>
                                        </div>
                                        <span className="flex-1 font-medium">
                                            {cabin.name}
                                        </span>
                                        <Select
                                            value={cabin.type}
                                            onValueChange={(value) =>
                                                updateCabinType(cabin.id, value)
                                            }
                                        >
                                            <SelectTrigger className="w-48 rounded-lg">
                                                <SelectValue
                                                    placeholder="Выберите..."
                                                />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="Односпальная">
                                                    Односпальная
                                                </SelectItem>
                                                <SelectItem value="Двуспальная">
                                                    Двуспальная
                                                </SelectItem>
                                                <SelectItem value="Двухъярусная">
                                                    Двухъярусная
                                                </SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                ))}
                            </div>
                            <Button
                                variant="outline"
                                onClick={addCabin}
                                className="bg-[#333333] text-white hover:bg-[#444444] border-[#333333]"
                            >
                                Добавить каюту
                            </Button>
                        </div>

                        {/* Услуги на яхте */}
                        <div className="mb-8">
                            <h2 className="text-lg font-bold text-[#333333] mb-4">
                                Какие есть услуги на вашей яхте?
                            </h2>
                            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                                <div className="flex items-center gap-2">
                                    <Checkbox id="service1" />
                                    <Label htmlFor="service1" className="cursor-pointer">
                                        Капитан
                                    </Label>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox id="service2" />
                                    <Label htmlFor="service2" className="cursor-pointer">
                                        Повар
                                    </Label>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox id="service3" />
                                    <Label htmlFor="service3" className="cursor-pointer">
                                        Стюард
                                    </Label>
                                </div>
                            </div>
                        </div>

                        {/* Кнопки внизу */}
                        <div className="flex items-center justify-between pt-6 border-t border-gray-200">
                            <Button variant="outline" size="lg">
                                Режим предпросмотра
                            </Button>
                            <Button
                                variant="gradient"
                                size="lg"
                                className="bg-[#008299] hover:bg-[#006d7a] text-white"
                            >
                                Добавить судно
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}