"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { Heart, ShoppingBag, Trash2, AlertCircle } from "lucide-react"

export default function WishlistPage() {
  // Mock wishlist items
  const [wishlistItems, setWishlistItems] = useState([
    {
      id: 1,
      name: "ПЛАТЬЕ С ЦВЕТОЧНЫМ ПРИНТОМ",
      price: 5990,
      oldPrice: 7990,
      image: "/placeholder.svg?height=600&width=400",
      inStock: true,
    },
    {
      id: 2,
      name: "БЛУЗА ИЗ НАТУРАЛЬНОГО ШЕЛКА",
      price: 4990,
      image: "/placeholder.svg?height=600&width=400",
      inStock: true,
    },
    {
      id: 3,
      name: "БРЮКИ С ВЫСОКОЙ ПОСАДКОЙ",
      price: 3990,
      image: "/placeholder.svg?height=600&width=400",
      inStock: false,
    },
    {
      id: 4,
      name: "ЖАКЕТ В КЛЕТКУ",
      price: 6990,
      oldPrice: 8990,
      image: "/placeholder.svg?height=600&width=400",
      inStock: true,
    },
  ])

  const removeFromWishlist = (id: number) => {
    setWishlistItems(wishlistItems.filter((item) => item.id !== id))
  }

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[40vh] min-h-[300px] bg-gray-900">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=800&width=1920')" }}
        >
          <div className="absolute inset-0 bg-black/70"></div>
        </div>

        <div className="relative h-full container mx-auto px-4 flex flex-col justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl text-white"
          >
            <h1 className="text-4xl md:text-5xl font-arimo font-bold mb-4 uppercase tracking-tight">ИЗБРАННОЕ</h1>
            <p className="text-xl opacity-90 font-arimo">Ваша персональная коллекция любимых товаров</p>
          </motion.div>
        </div>
      </section>

      <section className="py-20">
        <div className="container mx-auto px-4">
          {wishlistItems.length === 0 ? (
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center py-16">
              <div className="inline-flex items-center justify-center w-24 h-24 bg-gray-100 mb-6">
                <Heart className="h-12 w-12 text-black" />
              </div>
              <h2 className="text-2xl font-arimo font-medium text-black mb-4 uppercase">Ваш список избранного пуст</h2>
              <p className="text-gray-600 mb-8 max-w-md mx-auto font-arimo">
                Добавляйте понравившиеся товары в избранное, чтобы не потерять их и быстро вернуться к ним позже.
              </p>
              <Button asChild className="bg-black hover:bg-gray-800 text-white px-8 font-arimo">
                <Link href="/catalog">ПЕРЕЙТИ В КАТАЛОГ</Link>
              </Button>
            </motion.div>
          ) : (
            <div>
              <div className="flex justify-between items-center mb-8">
                <h2 className="text-2xl font-arimo font-bold text-black uppercase tracking-tight">
                  ТОВАРЫ В ИЗБРАННОМ ({wishlistItems.length})
                </h2>
                <Button
                  variant="outline"
                  className="border-black text-black hover:bg-black hover:text-white font-arimo"
                  onClick={() => setWishlistItems([])}
                >
                  ОЧИСТИТЬ СПИСОК
                </Button>
              </div>

              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {wishlistItems.map((item) => (
                  <motion.div
                    key={item.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4 }}
                    className="bg-white border border-gray-200 overflow-hidden"
                  >
                    <div className="relative">
                      <div className="relative aspect-[3/4] overflow-hidden">
                        <Image
                          src={item.image || "/placeholder.svg"}
                          alt={item.name}
                          fill
                          className="object-cover transition-transform duration-700 group-hover:scale-105"
                        />
                      </div>

                      <button
                        className="absolute top-4 right-4 bg-white p-2 shadow-md hover:bg-gray-100 transition-colors"
                        onClick={() => removeFromWishlist(item.id)}
                      >
                        <Trash2 className="h-5 w-5 text-black" />
                        <span className="sr-only">Удалить из избранного</span>
                      </button>

                      {!item.inStock && (
                        <div className="absolute inset-0 bg-white/80 flex flex-col items-center justify-center p-4">
                          <AlertCircle className="h-8 w-8 text-gray-500 mb-2" />
                          <p className="font-arimo font-medium text-black text-center">НЕТ В НАЛИЧИИ</p>
                          <p className="text-sm text-gray-600 text-center mt-1 font-arimo">Сообщить, когда появится</p>
                        </div>
                      )}
                    </div>

                    <div className="p-4">
                      <Link href={`/product/${item.id}`} className="block">
                        <h3 className="text-lg font-arimo font-medium text-black mb-2 hover:underline uppercase">
                          {item.name}
                        </h3>
                      </Link>

                      <div className="flex items-center gap-2 mb-4">
                        <span className="font-arimo font-bold text-black">{item.price.toLocaleString()} ₽</span>
                        {item.oldPrice && (
                          <span className="text-gray-500 line-through text-sm font-arimo">
                            {item.oldPrice.toLocaleString()} ₽
                          </span>
                        )}
                      </div>

                      <div className="flex gap-2">
                        {item.inStock ? (
                          <>
                            <Button asChild className="flex-1 bg-black hover:bg-gray-800 text-white font-arimo">
                              <Link href={`/product/${item.id}`}>ПОДРОБНЕЕ</Link>
                            </Button>
                            <Button className="flex-1 bg-gray-100 text-black hover:bg-gray-200 font-arimo">
                              <ShoppingBag className="h-4 w-4 mr-2" />В КОРЗИНУ
                            </Button>
                          </>
                        ) : (
                          <Button
                            asChild
                            className="w-full bg-gray-200 text-gray-700 hover:bg-gray-300 cursor-default font-arimo"
                          >
                            <Link href={`/product/${item.id}`}>ПОДРОБНЕЕ</Link>
                          </Button>
                        )}
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Recommended Products */}
      <section className="py-12 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-arimo font-bold text-black mb-8 uppercase tracking-tight">РЕКОМЕНДУЕМ ВАМ</h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                id: 5,
                name: "ЮБКА МИДИ ПЛИССЕ",
                price: 3490,
                image: "/placeholder.svg?height=600&width=400",
              },
              {
                id: 6,
                name: "ПАЛЬТО ИЗ ШЕРСТИ",
                price: 12990,
                image: "/placeholder.svg?height=600&width=400",
              },
              {
                id: 7,
                name: "ДЖЕМПЕР ИЗ КАШЕМИРА",
                price: 7990,
                oldPrice: 9990,
                image: "/placeholder.svg?height=600&width=400",
              },
              {
                id: 8,
                name: "РУБАШКА ОВЕРСАЙЗ",
                price: 4490,
                image: "/placeholder.svg?height=600&width=400",
              },
            ].map((item) => (
              <div key={item.id} className="bg-white border border-gray-200 overflow-hidden group">
                <div className="relative aspect-[3/4] overflow-hidden">
                  <Image
                    src={item.image || "/placeholder.svg"}
                    alt={item.name}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />

                  <button className="absolute top-4 right-4 bg-white p-2 shadow-md opacity-0 group-hover:opacity-100 transition-opacity">
                    <Heart className="h-5 w-5 text-black" />
                    <span className="sr-only">Добавить в избранное</span>
                  </button>
                </div>

                <div className="p-4">
                  <Link href={`/product/${item.id}`} className="block">
                    <h3 className="text-lg font-arimo font-medium text-black mb-2 group-hover:underline uppercase">
                      {item.name}
                    </h3>
                  </Link>

                  <div className="flex items-center gap-2 mb-4">
                    <span className="font-arimo font-bold text-black">{item.price.toLocaleString()} ₽</span>
                    {item.oldPrice && (
                      <span className="text-gray-500 line-through text-sm font-arimo">
                        {item.oldPrice.toLocaleString()} ₽
                      </span>
                    )}
                  </div>

                  <Button className="w-full bg-gray-100 text-black hover:bg-gray-200 font-arimo">
                    <ShoppingBag className="h-4 w-4 mr-2" />В КОРЗИНУ
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}

