"use client"

import Image from "next/image"
import Link from "next/link"
import { Heart, ShoppingBag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

interface ProductCardProps {
  id: number
  name: string
  price: number
  image: string | { id: number; image_url: string; is_primary?: boolean; }
  isNew?: boolean
  isOnSale?: boolean
  salePrice?: number
  category?: {
    id: number
    name: string
  }
  slug?: string
}

// Функция для корректного отображения URL изображения
export function getProperImageUrl(image: string | { id: number; image_url: string; is_primary?: boolean; }): string {
  console.log('getProperImageUrl получил:', image);
  
  // Если передана строка
  if (typeof image === 'string') {
    console.log('Обрабатываем строку:', image);
    // Если URL абсолютный, возвращаем как есть
    if (image.startsWith('http')) {
      console.log('URL абсолютный, возвращаем как есть:', image);
      return image;
    }
    // Иначе добавляем базовый URL
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:8000';
    const result = `${baseUrl}${image}`;
    console.log('Добавляем базовый URL:', baseUrl);
    console.log('Результат:', result);
    return result;
  }
  
  // Если передан объект
  console.log('Обрабатываем объект с image_url:', image.image_url);
  const imageUrl = image.image_url;
  if (imageUrl.startsWith('http')) {
    console.log('URL абсолютный, возвращаем как есть:', imageUrl);
    return imageUrl;
  }
  
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:8000';
  const result = `${baseUrl}${imageUrl}`;
  console.log('Добавляем базовый URL:', baseUrl);
  console.log('Результат:', result);
  return result;
}

export function ProductCard({ 
  id, 
  name, 
  price, 
  image, 
  isNew = false, 
  isOnSale = false, 
  salePrice, 
  category,
  slug
}: ProductCardProps) {
  // Определяем URL продукта: если есть slug, используем его, иначе используем id
  const productUrl = slug ? `/catalog/${slug}` : `/catalog/${id}`;
  
  // Получаем URL изображения
  const imageUrl = getProperImageUrl(image);
  
  // Форматируем цену
  const formatPrice = (price: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(price);
  };

  return (
    <div className="group relative">
      {/* Значки "Новинка" и "Скидка" */}
      <div className="absolute top-3 left-3 z-10 flex flex-col gap-2">
        {isNew && (
          <Badge className="bg-primary text-white text-xs px-2 py-1">Новинка</Badge>
        )}
        {isOnSale && salePrice && (
          <Badge variant="destructive" className="text-xs px-2 py-1">
            -{Math.round((1 - salePrice/price) * 100)}%
          </Badge>
        )}
      </div>
      
      {/* Кнопки действий */}
      <div className="relative overflow-hidden rounded-lg">
        <div className="absolute top-3 right-3 z-10 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <Button 
            size="icon" 
            variant="secondary" 
            className="rounded-full bg-white text-primary hover:bg-white/90 shadow-md w-8 h-8"
          >
            <Heart className="h-4 w-4" />
            <span className="sr-only">Добавить в избранное</span>
          </Button>
          <Button 
            size="icon" 
            variant="secondary" 
            className="rounded-full bg-white text-primary hover:bg-white/90 shadow-md w-8 h-8"
          >
            <ShoppingBag className="h-4 w-4" />
            <span className="sr-only">Добавить в корзину</span>
          </Button>
        </div>
        
        {/* Изображение */}
        <div className="aspect-[3/4] relative overflow-hidden bg-tertiary/10">
          <Image
            src={imageUrl}
            alt={name}
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-105"
          />
        </div>
        
        {/* Кнопка быстрого добавления в корзину */}
        <div className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm py-3 px-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
          <Button 
            className="w-full bg-primary hover:bg-primary/90 text-white text-sm py-1"
          >
            ДОБАВИТЬ В КОРЗИНУ
          </Button>
        </div>
      </div>
      
      {/* Информация о товаре */}
      <div className="mt-4">
        <Link href={productUrl} className="block group-hover:text-primary transition-colors">
          <h3 className="text-base font-medium line-clamp-2 min-h-[50px]">{name}</h3>
        </Link>
        
        <div className="mt-2 flex items-center gap-2">
          {isOnSale && salePrice ? (
            <>
              <span className="font-semibold text-primary">{formatPrice(salePrice)}</span>
              <span className="text-gray-500 line-through text-sm">{formatPrice(price)}</span>
            </>
          ) : (
            <span className="font-semibold">{formatPrice(price)}</span>
          )}
        </div>
        
        {category && (
          <div className="mt-1 text-sm text-gray-500">{category.name}</div>
        )}
      </div>
    </div>
  )
} 