"use client"

import Image from "next/image"
import { useState } from "react"
import { Heart, ShoppingCart, Minus, Plus } from 'lucide-react'
import { Button } from "./ui/button"
import { useCart } from "@/contexts/cart-context"
import { useFavorites } from "@/contexts/favorites-context"
import { Product } from "@/types/product"
import { ReviewList } from "./review-list"
import { ReviewForm } from "./review-form"
import { useAuth } from "@/contexts/auth-context"
import Link from "next/link"

interface ProductDetailProps {
  product: Product
}

export function ProductDetail({ product }: ProductDetailProps) {
  const [quantity, setQuantity] = useState(1)
  const { addToCart, items } = useCart()
  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
  const { isLoggedIn } = useAuth()

  const isInCart = items.some(item => item.id === product.id)

  const handleAddToCart = () => {
    if (!isInCart) {
      addToCart({
        id: product.id,
        title: product.title,
        price: product.price,
      }, quantity)
    }
  }

  const handleToggleFavorite = () => {
    if (isFavorite(product.id)) {
      removeFromFavorites(product.id)
    } else {
      addToFavorites({
        id: product.id,
        title: product.title,
        price: product.price,
      })
    }
  }

  return (
    <div className="space-y-8">
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-1/2">
          <Image
            src={product.image}
            alt={product.title}
            width={500}
            height={500}
            className="w-full h-auto object-cover rounded-lg"
          />
        </div>
        <div className="md:w-1/2 space-y-4">
          <h1 className="text-3xl font-bold">{product.title}</h1>
          {product.category === 'software' && (
            <div className="text-sm text-muted-foreground">
              Тип лицензии: {product.licenseType === 'perpetual' ? 'Бессрочная' : 'Подписка'}
            </div>
          )}
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold">{product.price} ₽</span>
          </div>
          <div className="flex items-center gap-4">
            {!isInCart && (
              <>
                <div className="flex items-center gap-2">
                  <Button 
                    variant="outline" 
                    size="icon"
                    onClick={() => setQuantity(prev => Math.max(1, prev - 1))}
                  >
                    <Minus className="h-4 w-4" />
                  </Button>
                  <span className="w-8 text-center">{quantity}</span>
                  <Button 
                    variant="outline" 
                    size="icon"
                    onClick={() => setQuantity(prev => prev + 1)}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
                <Button onClick={handleAddToCart} className="flex-1">
                  <ShoppingCart className="mr-2 h-4 w-4" /> Добавить в корзину
                </Button>
              </>
            )}
            {isInCart && (
              <Button disabled className="flex-1">
                Товар уже в корзине
              </Button>
            )}
            <Button variant="outline" size="icon" onClick={handleToggleFavorite}>
              <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
            </Button>
          </div>
          <div className="border-t pt-4">
            <h2 className="text-xl font-semibold mb-2">Описание</h2>
            <p className="text-gray-600">
              {product.description || 'Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта.'}
            </p>
          </div>
        </div>
      </div>
      <div className="border-t pt-8">
        <h2 className="text-2xl font-bold mb-4">Отзывы</h2>
        {isLoggedIn ? (
          <>
            <ReviewList reviews={product.reviews} />
            <div className="mt-8">
              <h3 className="text-xl font-semibold mb-4">Оставить отзыв</h3>
              <ReviewForm productId={product.id} />
            </div>
          </>
        ) : (
          <p className="text-gray-600">Чтобы просматривать и оставлять отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
        )}
      </div>
    </div>
  )
}