/**
 * БЛОК КАРТОЧЕК ТОВАРОВ (МИНИ-ПРЕВЬЮ)
 *
 * Выделен из create-suppliers-supply-page.tsx
 * Горизонтальный скролл мини-карточек товаров поставщика
 */

'use client'

import { Package, Plus } from 'lucide-react'
import Image from 'next/image'
import React from 'react'

import { Badge } from '@/components/ui/badge'

import type { ProductCardsBlockProps } from '../types/supply-creation.types'

export const ProductCardsBlock = React.memo(function ProductCardsBlock({
  products,
  selectedSupplier,
  selectedProducts,
  onProductAdd,
}: ProductCardsBlockProps) {
  // Функция для проверки выбран ли товар
  const isProductSelected = (productId: string) => {
    return selectedProducts.some(item => item.id === productId)
  }
  if (!selectedSupplier) {
    return (
      <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl px-4 h-full flex flex-col">
        {/* ОТКАТ: вернули h-full flex flex-col */}
        <div className="text-center py-8">
          <div className="bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full p-4 w-fit mx-auto mb-3">
            <Package className="h-8 w-8 text-blue-300" />
          </div>
          <p className="text-white/60 text-sm font-medium mb-2">Выберите поставщика</p>
          <p className="text-white/40 text-xs">Для просмотра каталога товаров сначала выберите поставщика</p>
        </div>
      </div>
    )
  }

  if (products.length === 0) {
    return (
      <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl px-4 h-full flex flex-col">
        {/* ОТКАТ: вернули h-full flex flex-col */}
        <h3 className="text-white font-semibold text-lg mb-4">2. Товары поставщика (0)</h3>
        <div className="text-center py-8">
          <div className="bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-full p-4 w-fit mx-auto mb-3">
            <Package className="h-8 w-8 text-orange-300" />
          </div>
          <p className="text-white/60 text-sm font-medium mb-2">Товары не найдены</p>
          <p className="text-white/40 text-xs">У выбранного поставщика пока нет доступных товаров</p>
        </div>
      </div>
    )
  }

  return (
    <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl px-4 h-full flex flex-col">
      {/* ОТКАТ: вернули h-full flex flex-col */}
      {/* ЗАКОММЕНТИРОВАНО ДЛЯ ТЕСТИРОВАНИЯ
      <h3 className="text-white font-semibold text-lg mb-4">2. Товары поставщика ({products.length})</h3>
      */}

      <div className="flex-1 overflow-x-auto overflow-y-hidden">
        {/* УБРАНО: items-center, добавлены точные отступы */}
        <div className="flex gap-3 py-4" style={{ width: 'max-content' }}>
          {products.slice(0, 10).map(
            (
              product, // Показываем первые 10 товаров
            ) => (
              <div
                key={product.id}
                onClick={() => onProductAdd(product)}
                className={`flex-shrink-0 w-48 h-[164px] rounded-lg overflow-hidden transition-all duration-200 group cursor-pointer relative ${
                  isProductSelected(product.id)
                    ? 'border-2 border-purple-400/70'
                    : 'border border-white/10 hover:border-white/20'
                }`}
              >
                {/* Изображение на весь контейнер */}
                <div className="relative w-full h-full">
                  {product.mainImage || (product.images && product.images[0]) ? (
                    <Image
                      src={product.mainImage || product.images[0]}
                      alt={product.name}
                      fill
                      className="object-contain group-hover:scale-105 transition-transform duration-200"
                    />
                  ) : (
                    <div className="flex items-center justify-center w-full h-full bg-white/5">
                      <Package className="h-12 w-12 text-white/30" />
                    </div>
                  )}

                  {/* Статус наличия */}
                  <div className="absolute top-2 right-2">
                    {product.quantity !== undefined && (
                      <div className={`w-3 h-3 rounded-full ${product.quantity > 0 ? 'bg-green-400' : 'bg-red-400'} shadow-md`} />
                    )}
                  </div>

                  {/* Информация поверх изображения */}
                  <div className="absolute bottom-0 left-0 right-0 p-3">
                    <div className="mb-1">
                      <h4 className="text-white text-sm font-medium line-clamp-1 leading-tight">{product.name}</h4>
                    </div>

                    {/* Категория */}
                    {product.category?.name && (
                      <Badge variant="secondary" className="text-xs mb-1 bg-white/20 text-white/90 border-white/30">
                        {product.category.name}
                      </Badge>
                    )}

                    {/* Цена и наличие */}
                    <div className="flex items-center justify-between">
                      <span className="text-white font-semibold text-sm">{product.price.toLocaleString('ru-RU')} ₽</span>
                      {product.quantity !== undefined && (
                        <span className={`text-xs ${product.quantity > 0 ? 'text-green-300' : 'text-red-300'}`}>
                          {product.quantity > 0 ? `${product.quantity} шт` : 'Нет'}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ),
          )}

          {/* Показать больше товаров */}
          {products.length > 10 && (
            <div className="flex-shrink-0 w-48 bg-white/5 rounded-lg border border-white/10 hover:border-white/20 flex items-center justify-center cursor-pointer transition-all duration-200">
              <div className="text-center p-6">
                <Plus className="h-6 w-6 text-white/50 mx-auto mb-2" />
                <p className="text-white/60 text-sm font-medium">Показать все</p>
                <p className="text-white/40 text-xs">+{products.length - 10} товаров</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Подсказка */}
      {/* ЗАКОММЕНТИРОВАНО ДЛЯ ТЕСТИРОВАНИЯ
      <div className="mt-4 p-3 bg-blue-500/10 border border-blue-400/30 rounded-lg">
        <p className="text-blue-300 text-xs">
          💡 <strong>Подсказка:</strong> Нажмите на товар для быстрого добавления или перейдите к детальному каталогу
          ниже для настройки рецептуры
        </p>
      </div>
      */}
    </div>
  )
})
