"use client"

import { useState } from "react"
import { ShoppingBag, Heart, Check, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Product } from "@/lib/api"

interface ProductDetailsProps {
  product: Product
}

export function ProductDetails({ product }: ProductDetailsProps) {
  const [selectedSize, setSelectedSize] = useState("")
  const [quantity, setQuantity] = useState(1)
  
  console.log("Детали товара:", product)
  console.log("Варианты товара:", product.variants)
  
  // Форматирование цены
  const formatPrice = (price: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(price)
  }
  
  // Увеличение количества
  const increaseQuantity = () => {
    setQuantity(prev => prev + 1)
  }
  
  // Уменьшение количества
  const decreaseQuantity = () => {
    setQuantity(prev => (prev > 1 ? prev - 1 : 1))
  }
  
  // Проверка наличия размера
  const getSizeStockInfo = (sizeId: string | number) => {
    if (!product.variants) return { inStock: false, stock: 0 }
    
    const variant = product.variants.find(v => v.size?.id === Number(sizeId))
    
    // Проверка на is_active если это поле есть
    if (variant && 'is_active' in variant) {
      return {
        inStock: variant.stock > 0 && variant.is_active,
        stock: variant.stock || 0
      }
    }
    
    return {
      inStock: variant ? variant.stock > 0 : false,
      stock: variant?.stock || 0
    }
  }
  
  // Добавление в корзину
  const addToCart = () => {
    // Здесь будет логика добавления в корзину
    console.log("Добавление в корзину:", {
      productId: product.id,
      name: product.name,
      price: product.discount_price || product.price,
      selectedSize,
      quantity
    })
  }
  
  // Добавление в избранное
  const addToWishlist = () => {
    // Здесь будет логика добавления в избранное
    console.log("Добавление в избранное:", {
      productId: product.id,
      name: product.name
    })
  }

  return (
    <div className="space-y-4 sm:space-y-6">
      {/* Категория */}
      {product.category && (
        <div className="text-xs sm:text-sm text-gray-500">{product.category.name}</div>
      )}
      
      {/* Название товара */}
      <h1 className="text-xl sm:text-2xl md:text-3xl font-semibold">{product.name}</h1>
      
      {/* Цена */}
      <div className="flex flex-wrap items-center gap-2">
        {product.discount_price ? (
          <>
            <span className="text-lg sm:text-xl md:text-2xl font-semibold text-primary">
              {formatPrice(product.discount_price)}
            </span>
            <span className="text-base sm:text-lg text-gray-500 line-through">
              {formatPrice(product.price)}
            </span>
            <span className="bg-red-100 text-red-600 text-xs sm:text-sm px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-md">
              {Math.round((1 - product.discount_price / product.price) * 100)}% скидка
            </span>
          </>
        ) : (
          <span className="text-lg sm:text-xl md:text-2xl font-semibold">
            {formatPrice(product.price)}
          </span>
        )}
      </div>
      
      {/* Размеры */}
      {product.variants && product.variants.length > 0 && (
        <div className="pt-3 sm:pt-4">
          <h3 className="text-xs sm:text-sm font-medium mb-2 sm:mb-3">Размер:</h3>
          <div className="flex flex-wrap gap-2">
            {product.variants.map((variant) => {
              const isSelected = selectedSize === variant.size?.id.toString()
              const { inStock, stock } = getSizeStockInfo(variant.size?.id || 0)
              
              return (
                <Button
                  key={variant.id}
                  variant={isSelected ? "default" : "outline"}
                  className={`h-8 sm:h-10 min-w-[40px] sm:min-w-16 text-xs sm:text-sm ${!inStock ? 'opacity-50 cursor-not-allowed' : ''}`}
                  disabled={!inStock}
                  onClick={() => setSelectedSize(variant.size?.id.toString() || "")}
                >
                  {variant.size?.name}
                </Button>
              )
            })}
          </div>
          
          {/* Информация о наличии выбранного размера */}
          {selectedSize && (
            <div className="mt-2 flex items-center text-xs sm:text-sm">
              {getSizeStockInfo(selectedSize).inStock ? (
                <div className="flex items-center text-green-600">
                  <Check className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                  <span>В наличии</span>
                </div>
              ) : (
                <div className="flex items-center text-red-600">
                  <AlertCircle className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                  <span>Нет в наличии</span>
                </div>
              )}
            </div>
          )}
        </div>
      )}
      
      <Separator className="my-3 sm:my-4" />
      
      {/* Количество */}
      <div>
        <h3 className="text-xs sm:text-sm font-medium mb-2 sm:mb-3">Количество:</h3>
        <div className="flex items-center">
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8 sm:h-10 sm:w-10 rounded-r-none"
            onClick={decreaseQuantity}
            disabled={quantity <= 1}
          >
            -
          </Button>
          <div className="h-8 w-10 sm:h-10 sm:w-14 flex items-center justify-center border-y text-sm sm:text-base">
            {quantity}
          </div>
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8 sm:h-10 sm:w-10 rounded-l-none"
            onClick={increaseQuantity}
          >
            +
          </Button>
        </div>
      </div>
      
      {/* Кнопки действий */}
      <div className="flex flex-col gap-2 sm:gap-3 pt-2 sm:pt-3">
        <Button 
          size="lg" 
          className="w-full h-10 sm:h-12 text-sm sm:text-base"
          onClick={addToCart}
          disabled={!selectedSize && (product.variants?.length || 0) > 0}
        >
          <ShoppingBag className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
          Добавить в корзину
        </Button>
        
        <Button 
          variant="outline" 
          size="lg" 
          className="w-full h-10 sm:h-12 text-sm sm:text-base"
          onClick={addToWishlist}
        >
          <Heart className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
          В избранное
        </Button>
      </div>
      
      {/* Информация о товаре на вкладках */}
      <Tabs defaultValue="description" className="pt-4 sm:pt-6">
        <TabsList className="grid w-full grid-cols-3 h-9 sm:h-10">
          <TabsTrigger value="description" className="text-xs sm:text-sm">Описание</TabsTrigger>
          <TabsTrigger value="details" className="text-xs sm:text-sm">Детали</TabsTrigger>
          <TabsTrigger value="delivery" className="text-xs sm:text-sm">Доставка</TabsTrigger>
        </TabsList>
        
        <TabsContent value="description" className="pt-3 sm:pt-4 text-sm sm:text-base">
          <div className="text-gray-700">
            {product.description || "Описание товара не добавлено."}
          </div>
        </TabsContent>
        
        <TabsContent value="details" className="pt-3 sm:pt-4 text-sm sm:text-base">
          <div className="text-gray-700">
            {product.care_instructions ? (
              typeof product.care_instructions === 'string' ? (
                <p>{product.care_instructions}</p>
              ) : (
                <ul className="list-disc pl-5 space-y-1.5 sm:space-y-2">
                  {Object.entries(product.care_instructions).map(([key, value]) => (
                    <li key={key}>
                      <span className="font-medium">{key}: </span>
                      {value}
                    </li>
                  ))}
                </ul>
              )
            ) : (
              <p>Дополнительная информация о товаре не добавлена.</p>
            )}
          </div>
        </TabsContent>
        
        <TabsContent value="delivery" className="pt-3 sm:pt-4 text-sm sm:text-base">
          <div className="text-gray-700">
            <p>Стандартная доставка: 2-4 рабочих дня.</p>
            <p className="mt-1.5 sm:mt-2">Экспресс-доставка: 1-2 рабочих дня.</p>
            <p className="mt-1.5 sm:mt-2">Бесплатная доставка при заказе от 5,000 ₽.</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
} 