/**
 * БЛОК СЕТКИ ТОВАРОВ
 *
 * Выделен из direct-supply-creation.tsx
 * Отображает товары WB в виде красивой сетки с возможностью добавления
 */

'use client'

import { Plus, Package } from 'lucide-react'
import React from 'react'

import { WildberriesService } from '@/services/wildberries-service'

import type { ProductGridBlockProps } from '../types/direct-supply.types'

export const ProductGridBlock = React.memo(function ProductGridBlock({
  wbCards,
  loading,
  onAddToSupply,
}: ProductGridBlockProps) {
  if (loading) {
    return (
      <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
        <h3 className="text-white font-semibold text-lg mb-4">Товары (загрузка...)</h3>

        {/* Skeleton сетка */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
          {[...Array(16)].map((_, i) => (
            <div key={i} className="group">
              <div className="aspect-[3/4] bg-gradient-to-br from-white/10 to-white/5 rounded-xl animate-pulse">
                <div className="w-full h-full bg-white/5 rounded-xl"></div>
              </div>
              <div className="mt-1 px-1">
                <div className="h-3 bg-white/10 rounded animate-pulse"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (wbCards.length === 0) {
    return (
      <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
        <h3 className="text-white font-semibold text-lg mb-4">Товары (0)</h3>

        {/* Пустое состояние */}
        <div className="flex flex-col items-center justify-center py-12">
          <div className="w-16 h-16 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center mb-4">
            <Package className="w-8 h-8 text-white/40" />
          </div>
          <h3 className="text-white/80 font-medium text-base mb-2">Товары не найдены</h3>
          <p className="text-white/50 text-sm text-center max-w-md">
            Введите поисковый запрос или проверьте настройки API Wildberries
          </p>
        </div>
      </div>
    )
  }

  return (
    <div className="relative">
      <div className="bg-gradient-to-br from-white/15 via-white/10 to-white/5 backdrop-blur-xl border border-white/20 rounded-2xl p-4 shadow-2xl">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-white font-semibold text-lg">Товары ({wbCards.length})</h3>
          <p className="text-white/60 text-sm">Нажмите на товар для добавления</p>
        </div>

        {/* Сетка товаров */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
          {wbCards.map((card) => (
            <div
              key={card.nmID}
              className="group cursor-pointer transition-all duration-300 hover:scale-105"
              onClick={() => onAddToSupply(card, 1, '')}
            >
              {/* Карточка товара */}
              <div className="relative aspect-[3/4] rounded-xl overflow-hidden shadow-lg transition-all duration-300 bg-white/10 hover:bg-white/15 hover:shadow-xl">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={WildberriesService.getCardImage(card, 'c516x688') || '/api/placeholder/200/267'}
                  alt={card.title}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                  loading="lazy"
                />

                {/* Градиентный оверлей */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

                {/* Информация при наведении */}
                <div className="absolute bottom-0 left-0 right-0 p-3 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                  <h4 className="text-white font-medium text-sm line-clamp-2 mb-1">{card.title}</h4>
                  <p className="text-white/80 text-xs">WB: {card.nmID}</p>
                  {card.vendorCode && <p className="text-white/60 text-xs">Арт: {card.vendorCode}</p>}
                </div>

                {/* Кнопка добавления */}
                <div className="absolute top-3 right-3 w-8 h-8 bg-white/20 backdrop-blur rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <Plus className="w-4 h-4 text-white" />
                </div>

                {/* Эффект при клике */}
                <div className="absolute inset-0 bg-white/20 opacity-0 group-active:opacity-100 transition-opacity duration-150" />
              </div>

              {/* Название под карточкой */}
              <div className="mt-2 px-1">
                <h4 className="text-white/90 font-medium text-xs line-clamp-2 leading-tight">{card.title}</h4>
                {card.brand && <p className="text-white/50 text-[10px] mt-1">{card.brand}</p>}
              </div>
            </div>
          ))}
        </div>

        {/* Декоративные элементы */}
        <div className="absolute -top-1 -left-1 w-4 h-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full opacity-60 animate-pulse" />
        <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-40 animate-pulse delay-700" />
      </div>
    </div>
  )
})