'use client'

import { useQuery } from '@apollo/client'
import { Package2, ArrowRight, Sparkles, ShoppingCart, Heart } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { GET_CATEGORIES, GET_MY_CART } from '@/graphql/queries'

interface Category {
  id: string
  name: string
  createdAt: string
  updatedAt: string
}

interface MarketCategoriesProps {
  onSelectCategory: (categoryId: string, categoryName: string) => void
  onShowCart?: () => void
  onShowFavorites?: () => void
}

export function MarketCategories({ onSelectCategory, onShowCart, onShowFavorites }: MarketCategoriesProps) {
  const { data, loading, error } = useQuery(GET_CATEGORIES)
  const { data: cartData } = useQuery(GET_MY_CART)

  const categories: Category[] = data?.categories || []
  const cart = cartData?.myCart
  const uniqueItemsCount = cart?.items?.length || 0

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-4 border-white border-t-transparent mx-auto mb-4"></div>
          <p className="text-white/70">Загружаем категории...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <Package2 className="h-16 w-16 text-red-400/40 mx-auto mb-4" />
          <p className="text-red-400">Ошибка загрузки категорий</p>
          <p className="text-white/40 text-sm mt-2">{error.message}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="h-full flex flex-col p-6">
      {/* Заголовок */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center space-x-3">
          <div className="p-3 rounded-xl bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30">
            <Package2 className="h-8 w-8 text-purple-400" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-white mb-1">Каталог товаров</h1>
            <p className="text-white/60">Выберите категорию для просмотра товаров от поставщиков</p>
          </div>
        </div>

        {/* Кнопки корзины и избранного */}
        <div className="flex items-center space-x-3">
          {onShowFavorites && (
            <Button
              onClick={onShowFavorites}
              variant="outline"
              className="bg-gradient-to-r from-red-500/20 to-pink-500/20 hover:from-red-500/30 hover:to-pink-500/30 text-white border-red-500/30 hover:border-red-400/50 transition-all duration-200 shadow-lg px-6 py-3"
            >
              <Heart className="h-5 w-5 mr-2" />
              Избранное
            </Button>
          )}

          {onShowCart && (
            <Button
              onClick={onShowCart}
              className="bg-gradient-to-r from-purple-500/20 to-pink-500/20 hover:from-purple-500/30 hover:to-pink-500/30 text-white border-purple-500/30 hover:border-purple-400/50 transition-all duration-200 shadow-lg px-6 py-3"
            >
              <ShoppingCart className="h-5 w-5 mr-2" />
              Корзина {uniqueItemsCount > 0 && `(${uniqueItemsCount})`}
            </Button>
          )}
        </div>
      </div>

      {/* Категории */}
      <div className="flex-1 overflow-auto">
        {categories.length === 0 ? (
          <div className="glass-card p-8">
            <div className="text-center">
              <Package2 className="h-16 w-16 text-white/20 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">Категории отсутствуют</h3>
              <p className="text-white/60">Пока нет доступных категорий товаров</p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {/* Карточка "Все товары" */}
            <Card
              onClick={() => onSelectCategory('', 'Все товары')}
              className="group relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 backdrop-blur border-white/10 hover:border-white/20 transition-all duration-300 cursor-pointer hover:scale-105"
            >
              <div className="p-6 h-32 flex flex-col justify-between">
                <div className="flex items-center justify-between">
                  <div className="p-3 rounded-lg bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30">
                    <Sparkles className="h-6 w-6 text-indigo-400" />
                  </div>
                  <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                    Все товары
                  </h3>
                  <p className="text-white/60 text-sm">Просмотреть весь каталог</p>
                </div>
              </div>

              {/* Эффект при наведении */}
              <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            </Card>

            {/* Карточки категорий */}
            {categories.map((category, index) => {
              // Разные градиенты для разных категорий
              const gradients = [
                'from-purple-500/10 via-pink-500/10 to-red-500/10',
                'from-blue-500/10 via-cyan-500/10 to-teal-500/10',
                'from-green-500/10 via-emerald-500/10 to-lime-500/10',
                'from-yellow-500/10 via-orange-500/10 to-red-500/10',
                'from-pink-500/10 via-rose-500/10 to-purple-500/10',
                'from-indigo-500/10 via-blue-500/10 to-cyan-500/10',
                'from-teal-500/10 via-green-500/10 to-emerald-500/10',
              ]

              const borderColors = [
                'border-purple-500/30',
                'border-blue-500/30',
                'border-green-500/30',
                'border-orange-500/30',
                'border-pink-500/30',
                'border-indigo-500/30',
                'border-teal-500/30',
              ]

              const iconColors = [
                'text-purple-400',
                'text-blue-400',
                'text-green-400',
                'text-orange-400',
                'text-pink-400',
                'text-indigo-400',
                'text-teal-400',
              ]

              const bgColors = [
                'from-purple-500/20 to-pink-500/20',
                'from-blue-500/20 to-cyan-500/20',
                'from-green-500/20 to-emerald-500/20',
                'from-yellow-500/20 to-orange-500/20',
                'from-pink-500/20 to-rose-500/20',
                'from-indigo-500/20 to-blue-500/20',
                'from-teal-500/20 to-green-500/20',
              ]

              const gradient = gradients[index % gradients.length]
              const borderColor = borderColors[index % borderColors.length]
              const iconColor = iconColors[index % iconColors.length]
              const bgColor = bgColors[index % bgColors.length]

              return (
                <Card
                  key={category.id}
                  onClick={() => onSelectCategory(category.id, category.name)}
                  className={`group relative overflow-hidden bg-gradient-to-br ${gradient} backdrop-blur border-white/10 hover:${borderColor} transition-all duration-300 cursor-pointer hover:scale-105`}
                >
                  <div className="p-6 h-32 flex flex-col justify-between">
                    <div className="flex items-center justify-between">
                      <div className={`p-3 rounded-lg bg-gradient-to-r ${bgColor} border ${borderColor}`}>
                        <Package2 className={`h-6 w-6 ${iconColor}`} />
                      </div>
                      <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                        {category.name}
                      </h3>
                      <p className="text-white/60 text-sm">Товары категории</p>
                    </div>
                  </div>

                  {/* Эффект при наведении */}
                  <div
                    className={`absolute inset-0 bg-gradient-to-r ${gradient} opacity-0 group-hover:opacity-50 transition-opacity duration-300`}
                  />
                </Card>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}
