"use client"

import React, { useState, useEffect } from 'react'
import { useQuery } from '@apollo/client'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { GET_MY_COUNTERPARTIES, GET_ALL_PRODUCTS } from '@/graphql/queries'
import { 
  ArrowLeft,
  ShoppingCart,
  Users,
  Building2,
  MapPin,
  Phone,
  Mail,
  Star,
  Plus,
  Minus,
  Info,
  Package,
  Zap,
  Heart,
  Eye,
  ShoppingBag,
  Search
} from 'lucide-react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import { WBProductCards } from './wb-product-cards'

interface WholesalerForCreation {
  id: string
  inn: string
  name: string
  fullName: string
  address: string
  phone?: string
  email?: string
  rating: number
  productCount: number
  avatar?: string
  specialization: string[]
}

interface WholesalerProduct {
  id: string
  name: string
  article: string
  description: string
  price: number
  quantity: number
  category: string
  brand?: string
  color?: string
  size?: string
  weight?: number
  dimensions?: string
  material?: string
  images: string[]
  mainImage?: string
  discount?: number
  isNew?: boolean
  isBestseller?: boolean
}

interface SelectedProduct extends WholesalerProduct {
  selectedQuantity: number
  wholesalerId: string
  wholesalerName: string
}

interface WildberriesCard {
  nmID: number
  vendorCode: string
  title: string
  description: string
  brand: string
  mediaFiles: string[]
  sizes: Array<{
    chrtID: number
    techSize: string
    wbSize: string
    price: number
    discountedPrice: number
    quantity: number
  }>
}

interface SelectedCard {
  card: WildberriesCard
  selectedQuantity: number
  selectedMarket: string
  selectedPlace: string
  sellerName: string
  sellerPhone: string
  deliveryDate: string
  selectedServices: string[]
}

// Моковые данные оптовиков
const mockWholesalers: WholesalerForCreation[] = [
  {
    id: '1',
    inn: '7707083893',
    name: 'ОПТ-Электроника',
    fullName: 'ООО "ОПТ-Электроника"',
    address: 'г. Москва, ул. Садовая, д. 15',
    phone: '+7 (495) 123-45-67',
    email: 'opt@electronics.ru',
    rating: 4.8,
    productCount: 1250,
    specialization: ['Электроника', 'Бытовая техника']
  },
  {
    id: '2',
    inn: '7707083894',
    name: 'ТекстильМастер',
    fullName: 'ООО "ТекстильМастер"',
    address: 'г. Иваново, пр. Ленина, д. 42',
    phone: '+7 (4932) 55-66-77',
    email: 'sales@textilmaster.ru',
    rating: 4.6,
    productCount: 850,
    specialization: ['Текстиль', 'Одежда', 'Домашний текстиль']
  },
  {
    id: '3',
    inn: '7707083895',
    name: 'МетизКомплект',
    fullName: 'ООО "МетизКомплект"',
    address: 'г. Тула, ул. Металлургов, д. 8',
    phone: '+7 (4872) 33-44-55',
    email: 'info@metiz.ru',
    rating: 4.9,
    productCount: 2100,
    specialization: ['Крепеж', 'Метизы', 'Инструменты']
  }
]

// Улучшенные моковые данные товаров
const mockProducts: WholesalerProduct[] = [
  {
    id: '1',
    name: 'iPhone 15 Pro Max',
    article: 'APL-15PM-256',
    description: 'Флагманский смартфон Apple с титановым корпусом, камерой 48 МП и чипом A17 Pro',
    price: 124900,
    quantity: 45,
    category: 'Смартфоны',
    brand: 'Apple',
    color: 'Натуральный титан',
    size: '6.7"',
    weight: 221,
    dimensions: '159.9 x 76.7 x 8.25 мм',
    material: 'Титан, стекло',
    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224'],
    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-15-pro-max-naturaltitanium-select?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1692845705224',
    isNew: true,
    isBestseller: true
  },
  {
    id: '2',
    name: 'Sony WH-1000XM5',
    article: 'SNY-WH1000XM5',
    description: 'Беспроводные наушники премиум-класса с лучшим в отрасли шумоподавлением',
    price: 34900,
    quantity: 128,
    category: 'Наушники',
    brand: 'Sony',
    color: 'Черный',
    weight: 250,
    material: 'Пластик, эко-кожа',
    images: ['https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF'],
    mainImage: 'https://www.sony.ru/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF',
    discount: 15,
    isBestseller: true
  },
  {
    id: '3',
    name: 'iPad Pro 12.9" M2',
    article: 'APL-IPADPRO-M2',
    description: 'Самый мощный iPad с чипом M2, дисплеем Liquid Retina XDR и поддержкой Apple Pencil',
    price: 109900,
    quantity: 32,
    category: 'Планшеты',
    brand: 'Apple',
    color: 'Серый космос',
    size: '12.9"',
    weight: 682,
    dimensions: '280.6 x 214.9 x 6.4 мм',
    material: 'Алюминий',
    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213'],
    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-spacegray-202210?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1664411207213',
    isNew: true
  },
  {
    id: '4',
    name: 'MacBook Pro 16" M3 Max',
    article: 'APL-MBP16-M3MAX',
    description: 'Профессиональный ноутбук с чипом M3 Max, 36 ГБ памяти и дисплеем Liquid Retina XDR',
    price: 329900,
    quantity: 18,
    category: 'Ноутбуки',
    brand: 'Apple',
    color: 'Серый космос',
    size: '16"',
    weight: 2160,
    dimensions: '355.7 x 248.1 x 16.8 мм',
    material: 'Алюминий',
    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200'],
    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp16-spacegray-select-202310?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1697230830200',
    isNew: true,
    isBestseller: true
  },
  {
    id: '5',
    name: 'Apple Watch Ultra 2',
    article: 'APL-AWU2-49',
    description: 'Самые прочные и функциональные умные часы Apple для экстремальных приключений',
    price: 89900,
    quantity: 67,
    category: 'Умные часы',
    brand: 'Apple',
    color: 'Натуральный титан',
    size: '49 мм',
    weight: 61,
    dimensions: '49 x 44 x 14.4 мм',
    material: 'Титан',
    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133'],
    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/watch-ultra2-select-202309?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1693967875133',
    isNew: true
  },
  {
    id: '6',
    name: 'Magic Keyboard для iPad Pro',
    article: 'APL-MK-IPADPRO',
    description: 'Клавиатура с трекпадом и подсветкой клавиш для iPad Pro 12.9"',
    price: 36900,
    quantity: 89,
    category: 'Аксессуары',
    brand: 'Apple',
    color: 'Черный',
    weight: 710,
    dimensions: '280.9 x 214.3 x 25 мм',
    material: 'Алюминий, пластик',
    images: ['https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'],
    mainImage: 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MJQJ3?wid=470&hei=556&fmt=jpeg&qlt=99&.v=1639066901000'
  }
]

export function CreateSupplyPage() {
  const router = useRouter()
  const { getSidebarMargin } = useSidebar()
  const [selectedVariant, setSelectedVariant] = useState<'cards' | 'wholesaler' | null>(null)
  const [selectedWholesaler, setSelectedWholesaler] = useState<WholesalerForCreation | null>(null)
  const [selectedProducts, setSelectedProducts] = useState<SelectedProduct[]>([])
  const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([])
  const [showSummary, setShowSummary] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')

  // Загружаем контрагентов-оптовиков
  const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(GET_MY_COUNTERPARTIES)
  
  // Загружаем товары для выбранного оптовика
  const { data: productsData, loading: productsLoading } = useQuery(GET_ALL_PRODUCTS, {
    skip: !selectedWholesaler,
    variables: { search: null, category: null }
  })
  
  // Фильтруем только оптовиков
  const wholesalers = (counterpartiesData?.myCounterparties || []).filter((org: { type: string }) => org.type === 'WHOLESALE')

  // Фильтруем оптовиков по поисковому запросу
  const filteredWholesalers = wholesalers.filter((wholesaler: { name?: string; fullName?: string; inn?: string }) => 
    wholesaler.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
    wholesaler.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
    wholesaler.inn?.toLowerCase().includes(searchQuery.toLowerCase())
  )

  // Фильтруем товары по выбранному оптовику
  const wholesalerProducts = selectedWholesaler 
    ? (productsData?.allProducts || []).filter((product: { organization: { id: string } }) => 
        product.organization.id === selectedWholesaler.id
      )
    : []

  // Автоматически показываем корзину если в ней есть товары и мы на этапе выбора оптовиков
  useEffect(() => {
    if (selectedVariant === 'wholesaler' && !selectedWholesaler && selectedProducts.length > 0) {
      setShowSummary(true)
    }
  }, [selectedVariant, selectedWholesaler, selectedProducts.length])

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0
    }).format(amount)
  }

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star 
        key={i} 
        className={`h-4 w-4 ${i < Math.floor(rating) ? 'text-yellow-400 fill-current' : 'text-gray-400'}`} 
      />
    ))
  }

  const updateProductQuantity = (productId: string, quantity: number) => {
    const product = wholesalerProducts.find((p: { id: string }) => p.id === productId)
    if (!product || !selectedWholesaler) return

    setSelectedProducts(prev => {
      const existing = prev.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
      
      if (quantity === 0) {
        return prev.filter(p => !(p.id === productId && p.wholesalerId === selectedWholesaler.id))
      }
      
      if (existing) {
        return prev.map(p => 
          p.id === productId && p.wholesalerId === selectedWholesaler.id 
            ? { ...p, selectedQuantity: quantity } 
            : p
        )
      } else {
        return [...prev, { 
          ...product, 
          selectedQuantity: quantity,
          wholesalerId: selectedWholesaler.id,
          wholesalerName: selectedWholesaler.name
        }]
      }
    })
  }

  const getSelectedQuantity = (productId: string): number => {
    if (!selectedWholesaler) return 0
    const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
    return selected ? selected.selectedQuantity : 0
  }

  const getTotalAmount = () => {
    return selectedProducts.reduce((sum, product) => {
      const discountedPrice = product.discount 
        ? product.price * (1 - product.discount / 100)
        : product.price
      return sum + (discountedPrice * product.selectedQuantity)
    }, 0)
  }

  const getTotalItems = () => {
    return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
  }

  const handleCardsComplete = (cards: SelectedCard[]) => {
    setSelectedCards(cards)
    console.log('Карточки товаров выбраны:', cards)
    // TODO: Здесь будет создание поставки с данными карточек
    router.push('/supplies')
  }

  const handleCreateSupply = () => {
    if (selectedVariant === 'cards') {
      console.log('Создание поставки с карточками Wildberries')
      // TODO: Здесь будет создание поставки с данными карточек
    } else {
      console.log('Создание поставки с товарами:', selectedProducts)
      // TODO: Здесь будет реальное создание поставки
    }
    router.push('/supplies')
  }

  const handleGoBack = () => {
    if (selectedWholesaler) {
      setSelectedWholesaler(null)
      // НЕ очищаем корзину! setSelectedProducts([])
      setShowSummary(false)
    } else if (selectedVariant) {
      setSelectedVariant(null)
      setSelectedProducts([]) // Очищаем корзину только при полном выходе
      setShowSummary(false)
    } else {
      router.push('/supplies')
    }
  }

  // Рендер товаров оптовика
  if (selectedWholesaler && selectedVariant === 'wholesaler') {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
          <div className="p-8">
            <div className="flex items-center justify-between mb-8">
              <div className="flex items-center space-x-4">
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={handleGoBack}
                  className="text-white/60 hover:text-white hover:bg-white/10"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Назад
                </Button>
                <div>
                  <h1 className="text-3xl font-bold text-white mb-2">Товары оптовика</h1>
                  <p className="text-white/60">{selectedWholesaler.name} • {wholesalerProducts.length} товаров</p>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={() => setShowSummary(!showSummary)}
                  className="text-white/60 hover:text-white hover:bg-white/10"
                >
                  <Info className="h-4 w-4 mr-2" />
                  Резюме ({selectedProducts.length})
                </Button>
              </div>
            </div>

            {showSummary && selectedProducts.length > 0 && (
              <Card className="bg-white/5 backdrop-blur border-white/10 mb-8">
                <div className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <h3 className="text-white font-semibold text-xl flex items-center">
                      <ShoppingCart className="h-5 w-5 mr-2" />
                      Корзина ({selectedProducts.length})
                    </h3>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowSummary(false)}
                      className="text-white/60 hover:text-white"
                    >
                      ✕
                    </Button>
                  </div>
                  
                  {/* Текущий оптовик */}
                  <div className="mb-6">
                    <div className="flex items-center mb-3 pb-2 border-b border-white/10">
                      <Building2 className="h-4 w-4 text-blue-400 mr-2" />
                      <span className="text-white font-medium">{selectedWholesaler?.name}</span>
                      <Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
                        {selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).length} товар(ов)
                      </Badge>
                    </div>
                    
                    <div className="space-y-3">
                      {selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).map((product) => {
                        const discountedPrice = product.discount 
                          ? product.price * (1 - product.discount / 100)
                          : product.price
                        const totalPrice = discountedPrice * product.selectedQuantity
                        
                        return (
                          <div key={product.id} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
                            <img
                              src={product.mainImage || '/api/placeholder/60/60'}
                              alt={product.name}
                              className="w-16 h-16 rounded-lg object-cover"
                            />
                            <div className="flex-1 min-w-0">
                              <h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
                              <p className="text-white/60 text-xs mb-2">{product.article}</p>
                              <div className="flex items-center space-x-3">
                                <span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
                                <div className="text-right">
                                  <div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
                                  {product.discount && (
                                    <div className="text-white/40 text-xs line-through">
                                      {formatCurrency(product.price * product.selectedQuantity)}
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                  
                  {/* Другие оптовики в корзине */}
                  {Object.entries(
                    selectedProducts.filter(p => p.wholesalerId !== selectedWholesaler?.id).reduce((acc, product) => {
                      if (!acc[product.wholesalerId]) {
                        acc[product.wholesalerId] = {
                          wholesaler: product.wholesalerName,
                          products: []
                        }
                      }
                      acc[product.wholesalerId].products.push(product)
                      return acc
                    }, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
                  ).map(([wholesalerId, group]) => (
                    <div key={wholesalerId} className="mb-6 last:mb-0">
                      <div className="flex items-center mb-3 pb-2 border-b border-white/10">
                        <Building2 className="h-4 w-4 text-purple-400 mr-2" />
                        <span className="text-white font-medium">{group.wholesaler}</span>
                        <Badge className="ml-2 bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
                          {group.products.length} товар(ов)
                        </Badge>
                      </div>
                      
                      <div className="space-y-3">
                        {group.products.map((product) => {
                          const discountedPrice = product.discount 
                            ? product.price * (1 - product.discount / 100)
                            : product.price
                          const totalPrice = discountedPrice * product.selectedQuantity
                          
                          return (
                            <div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
                              <img
                                src={product.mainImage || '/api/placeholder/60/60'}
                                alt={product.name}
                                className="w-16 h-16 rounded-lg object-cover"
                              />
                              <div className="flex-1 min-w-0">
                                <h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
                                <p className="text-white/60 text-xs mb-2">{product.article}</p>
                                <div className="flex items-center space-x-3">
                                  <span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
                                  <div className="text-right">
                                    <div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
                                    {product.discount && (
                                      <div className="text-white/40 text-xs line-through">
                                        {formatCurrency(product.price * product.selectedQuantity)}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              </div>
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  ))}
                  
                  {/* Итого */}
                  <div className="border-t border-white/20 pt-4 mt-6">
                    <div className="flex justify-between items-center">
                      <span className="text-white font-semibold text-lg">
                        Итого: {getTotalItems()} товаров
                      </span>
                      <span className="text-white font-bold text-2xl">
                        {formatCurrency(getTotalAmount())}
                      </span>
                    </div>
                    <Button 
                      className="w-full mt-4 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
                      onClick={handleCreateSupply}
                    >
                      <ShoppingCart className="h-4 w-4 mr-2" />
                      Создать поставку
                    </Button>
                  </div>
                </div>
              </Card>
            )}

            {productsLoading ? (
              <div className="flex items-center justify-center p-8 col-span-full">
                <div className="text-center">
                  <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
                  <p className="text-white/60">Загружаем товары...</p>
                </div>
              </div>
            ) : wholesalerProducts.length === 0 ? (
              <div className="flex items-center justify-center p-8 col-span-full">
                <div className="text-center">
                  <Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
                  <p className="text-white/60">У этого оптовика нет товаров</p>
                  <p className="text-white/40 text-sm mt-2">Выберите другого оптовика</p>
                </div>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
                {wholesalerProducts.map((product: { 
                  id: string; 
                  name: string; 
                  article: string; 
                  description?: string; 
                  price: number; 
                  quantity: number; 
                  category?: { name: string }; 
                  brand?: string; 
                  color?: string; 
                  size?: string; 
                  mainImage?: string; 
                  images?: string[] 
                }) => {
                const selectedQuantity = getSelectedQuantity(product.id)
                const discountedPrice = product.price // Убираем discount так как его нет в схеме
                
                return (
                  <Card key={product.id} className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
                    <div className="aspect-square relative bg-white/5 overflow-hidden">
                      <img
                        src={product.mainImage || '/api/placeholder/400/400'}
                        alt={product.name}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                      />
                      
                      {/* Количество в наличии */}
                      <div className="absolute top-2 right-2">
                        <Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur text-xs`}>
                          {product.quantity}
                        </Badge>
                      </div>

                      {/* Убираем discount badge так как поля нет в схеме */}

                      {/* Overlay с кнопками */}
                      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <div className="flex space-x-2">
                          <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
                            <Heart className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                    
                    <div className="p-3 space-y-3">
                      {/* Заголовок и бренд */}
                      <div>
                        <div className="flex items-center justify-between mb-1">
                          {product.brand && (
                            <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
                              {product.brand}
                            </Badge>
                          )}
                          {/* Убираем isNew и isBestseller так как этих полей нет в схеме */}
                        </div>
                        <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
                          {product.name}
                        </h3>
                      </div>

                      {/* Основная характеристика */}
                      <div className="text-white/60 text-xs">
                        {product.color && <span className="text-white">{product.color}</span>}
                        {product.size && <span className="text-white ml-2">{product.size}</span>}
                      </div>

                      {/* Цена */}
                      <div className="pt-2 border-t border-white/10">
                        <div className="flex items-center space-x-2">
                          <div className="text-white font-bold text-lg">
                            {formatCurrency(discountedPrice)}
                          </div>
                          {/* Убираем отображение оригинальной цены так как discount нет */}
                        </div>
                      </div>

                      {/* Управление количеством */}
                      <div className="flex items-center space-x-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
                          disabled={selectedQuantity === 0}
                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
                        >
                          <Minus className="h-3 w-3" />
                        </Button>
                        <input
                          type="text"
                          inputMode="numeric"
                          pattern="[0-9]*"
                          value={selectedQuantity}
                          onChange={(e) => {
                            const value = e.target.value.replace(/[^0-9]/g, '')
                            const numValue = Math.max(0, Math.min(product.quantity, parseInt(value) || 0))
                            updateProductQuantity(product.id, numValue)
                          }}
                          onFocus={(e) => e.target.select()}
                          className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                        />
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
                          disabled={selectedQuantity >= product.quantity}
                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
                        >
                          <Plus className="h-3 w-3" />
                        </Button>
                        
                        {selectedQuantity > 0 && (
                          <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
                            <ShoppingCart className="h-3 w-3 mr-1" />
                            {selectedQuantity}
                          </Badge>
                        )}
                      </div>

                      {/* Сумма для выбранного товара */}
                      {selectedQuantity > 0 && (
                        <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
                          <div className="text-green-300 text-xs font-medium text-center">
                            {formatCurrency(discountedPrice * selectedQuantity)}
                          </div>
                        </div>
                      )}
                    </div>
                  </Card>
                )
              })}
            </div>
            )}

            {/* Floating корзина */}
            {selectedProducts.length > 0 && (
              <div className="fixed bottom-6 right-6 z-50">
                <Button 
                  size="lg"
                  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl text-lg px-8 py-4"
                  onClick={() => setShowSummary(!showSummary)}
                >
                  <ShoppingCart className="h-5 w-5 mr-3" />
                  Корзина ({selectedProducts.length}) • {formatCurrency(getTotalAmount())}
                </Button>
              </div>
            )}
          </div>
        </main>
      </div>
    )
  }

  // Рендер карточек Wildberries
  if (selectedVariant === 'cards') {
    return (
      <WBProductCards 
        onBack={() => setSelectedVariant(null)}
        onComplete={handleCardsComplete}
      />
    )
  }

  // Рендер выбора оптовиков
  if (selectedVariant === 'wholesaler') {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
          <div className="p-8">
            <div className="flex items-center justify-between mb-8">
              <div className="flex items-center space-x-4">
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={handleGoBack}
                  className="text-white/60 hover:text-white hover:bg-white/10"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Назад
                </Button>
                <div>
                  <h1 className="text-3xl font-bold text-white mb-2">Выбор оптовика</h1>
                  <p className="text-white/60">
                    {selectedProducts.length > 0 
                      ? `Выберите еще оптовика или перейдите к оформлению (${selectedProducts.length} товаров в корзине)`
                      : "Выберите оптовика для создания поставки"
                    }
                  </p>
                </div>
              </div>
              {selectedProducts.length > 0 && (
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={() => setShowSummary(!showSummary)}
                  className="text-white/60 hover:text-white hover:bg-white/10"
                >
                  <ShoppingCart className="h-4 w-4 mr-2" />
                  Корзина ({selectedProducts.length})
                </Button>
              )}
            </div>

            {/* Корзина */}
            {showSummary && selectedProducts.length > 0 && (
              <Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 backdrop-blur-xl border border-purple-500/20 mb-8 shadow-2xl">
                <div className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center space-x-3">
                      <div className="p-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl">
                        <ShoppingCart className="h-6 w-6 text-white" />
                      </div>
                      <div>
                        <h3 className="text-white font-bold text-xl">Корзина</h3>
                        <p className="text-purple-200 text-sm">{selectedProducts.length} товаров от {Object.keys(selectedProducts.reduce((acc, p) => ({ ...acc, [p.wholesalerId]: true }), {})).length} поставщиков</p>
                      </div>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowSummary(false)}
                      className="text-white/60 hover:text-white hover:bg-white/10 rounded-xl"
                    >
                      <Eye className="h-4 w-4" />
                    </Button>
                  </div>
                  
                  {/* Группировка по оптовикам */}
                  {Object.entries(
                    selectedProducts.reduce((acc, product) => {
                      if (!acc[product.wholesalerId]) {
                        acc[product.wholesalerId] = {
                          wholesaler: product.wholesalerName,
                          products: []
                        }
                      }
                      acc[product.wholesalerId].products.push(product)
                      return acc
                    }, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
                  ).map(([wholesalerId, group]) => (
                    <div key={wholesalerId} className="mb-6 last:mb-0">
                      <div className="flex items-center mb-3 pb-2 border-b border-white/10">
                        <Building2 className="h-4 w-4 text-blue-400 mr-2" />
                        <span className="text-white font-medium">{group.wholesaler}</span>
                        <Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
                          {group.products.length} товар(ов)
                        </Badge>
                      </div>
                      
                      <div className="space-y-3">
                        {group.products.map((product) => {
                          const discountedPrice = product.discount 
                            ? product.price * (1 - product.discount / 100)
                            : product.price
                          const totalPrice = discountedPrice * product.selectedQuantity
                          
                          return (
                            <div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
                              <img
                                src={product.mainImage || '/api/placeholder/60/60'}
                                alt={product.name}
                                className="w-16 h-16 rounded-lg object-cover"
                              />
                              <div className="flex-1 min-w-0">
                                <h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
                                <p className="text-white/60 text-xs mb-2">{product.article}</p>
                                <div className="flex items-center space-x-3">
                                  <div className="flex items-center space-x-1">
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => {
                                        const newQuantity = Math.max(0, product.selectedQuantity - 1)
                                        if (newQuantity === 0) {
                                          setSelectedProducts(prev => 
                                            prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
                                          )
                                        } else {
                                          setSelectedProducts(prev => 
                                            prev.map(p => 
                                              p.id === product.id && p.wholesalerId === product.wholesalerId
                                                ? { ...p, selectedQuantity: newQuantity }
                                                : p
                                            )
                                          )
                                        }
                                      }}
                                      className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                    >
                                      <Minus className="h-3 w-3" />
                                    </Button>
                                    <span className="text-white text-sm w-8 text-center">{product.selectedQuantity}</span>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => {
                                        setSelectedProducts(prev => 
                                          prev.map(p => 
                                            p.id === product.id && p.wholesalerId === product.wholesalerId
                                              ? { ...p, selectedQuantity: Math.min(product.quantity, p.selectedQuantity + 1) }
                                              : p
                                          )
                                        )
                                      }}
                                      disabled={product.selectedQuantity >= product.quantity}
                                      className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                    >
                                      <Plus className="h-3 w-3" />
                                    </Button>
                                  </div>
                                  <div className="text-right">
                                    <div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
                                    {product.discount && (
                                      <div className="text-white/40 text-xs line-through">
                                        {formatCurrency(product.price * product.selectedQuantity)}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              </div>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => {
                                  setSelectedProducts(prev => 
                                    prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
                                  )
                                }}
                                className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
                              >
                                ✕
                              </Button>
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  ))}
                  
                  {/* Итого */}
                  <div className="border-t border-white/20 pt-4 mt-6">
                    <div className="flex justify-between items-center">
                      <span className="text-white font-semibold text-lg">
                        Итого: {getTotalItems()} товаров
                      </span>
                      <span className="text-white font-bold text-2xl">
                        {formatCurrency(getTotalAmount())}
                      </span>
                    </div>
                    <div className="flex space-x-3 mt-4">
                      <Button 
                        variant="outline"
                        className="flex-1 border-purple-300/30 text-white hover:bg-white/10"
                        onClick={() => setShowSummary(false)}
                      >
                        <Plus className="h-4 w-4 mr-2" />
                        Добавить еще
                      </Button>
                      <Button 
                        className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
                        onClick={handleCreateSupply}
                      >
                        <ShoppingCart className="h-4 w-4 mr-2" />
                        Оформить поставку
                      </Button>
                    </div>
                  </div>
                </div>
              </Card>
            )}

            {/* Поиск */}
            <div className="mb-6">
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-white/40" />
                <Input
                  placeholder="Поиск оптовиков по названию или ИНН..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 glass-input text-white placeholder:text-white/40"
                />
              </div>
            </div>

            {counterpartiesLoading ? (
              <div className="flex items-center justify-center p-8">
                <div className="text-center">
                  <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mx-auto mb-4"></div>
                  <p className="text-white/60">Загружаем оптовиков...</p>
                </div>
              </div>
            ) : filteredWholesalers.length === 0 ? (
              <div className="text-center p-8">
                <Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
                <p className="text-white/60">
                  {searchQuery ? 'Оптовики не найдены' : 'У вас нет контрагентов-оптовиков'}
                </p>
                <p className="text-white/40 text-sm mt-2">
                  {searchQuery ? 'Попробуйте изменить условия поиска' : 'Добавьте оптовиков в разделе "Партнеры"'}
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredWholesalers.map((wholesaler: { 
                  id: string; 
                  name?: string; 
                  fullName?: string; 
                  inn?: string; 
                  address?: string; 
                  phones?: { value: string }[]; 
                  emails?: { value: string }[] 
                }) => (
                <Card 
                  key={wholesaler.id}
                  className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
                  onClick={() => {
                    // Адаптируем данные под существующий интерфейс
                    const adaptedWholesaler = {
                      id: wholesaler.id,
                      inn: wholesaler.inn || '',
                      name: wholesaler.name || 'Неизвестная организация',
                      fullName: wholesaler.fullName || wholesaler.name || 'Неизвестная организация',
                      address: wholesaler.address || 'Адрес не указан',
                      phone: wholesaler.phones?.[0]?.value,
                      email: wholesaler.emails?.[0]?.value,
                      rating: 4.5, // Временное значение
                      productCount: 0, // Временное значение
                      specialization: ['Оптовая торговля'] // Временное значение
                    }
                    setSelectedWholesaler(adaptedWholesaler)
                  }}
                >
                  <div className="space-y-4">
                    <div className="flex items-start space-x-3">
                      <div className="p-3 bg-blue-500/20 rounded-lg">
                        <Building2 className="h-6 w-6 text-blue-400" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="text-white font-semibold text-lg mb-1 truncate">
                          {wholesaler.name || 'Неизвестная организация'}
                        </h3>
                        <p className="text-white/60 text-xs mb-2 truncate">
                          {wholesaler.fullName || wholesaler.name}
                        </p>
                        {wholesaler.inn && (
                          <p className="text-white/40 text-xs">
                            ИНН: {wholesaler.inn}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="space-y-2">
                      {wholesaler.address && (
                        <div className="flex items-center space-x-2">
                          <MapPin className="h-4 w-4 text-gray-400" />
                          <span className="text-white/80 text-sm truncate">{wholesaler.address}</span>
                        </div>
                      )}
                      
                      {wholesaler.phones?.[0]?.value && (
                        <div className="flex items-center space-x-2">
                          <Phone className="h-4 w-4 text-gray-400" />
                          <span className="text-white/80 text-sm">{wholesaler.phones[0].value}</span>
                        </div>
                      )}

                      {wholesaler.emails?.[0]?.value && (
                        <div className="flex items-center space-x-2">
                          <Mail className="h-4 w-4 text-gray-400" />
                          <span className="text-white/80 text-sm truncate">{wholesaler.emails[0].value}</span>
                        </div>
                      )}
                    </div>

                    <div className="mt-4">
                      <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                        Контрагент
                      </Badge>
                    </div>

                    <div className="pt-2 border-t border-white/10">
                      <p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
            )}

            {/* Floating корзина */}
            {selectedProducts.length > 0 && !showSummary && (
              <div className="fixed bottom-6 right-6 z-50">
                <Button 
                  size="lg"
                  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
                  onClick={() => setShowSummary(true)}
                >
                  <ShoppingCart className="h-5 w-5 mr-2" />
                  {selectedProducts.length} • {formatCurrency(getTotalAmount())}
                </Button>
              </div>
            )}
          </div>
        </main>
      </div>
    )
  }

  // Главная страница выбора варианта
  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        <div className="p-8">
          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center space-x-4">
              <Button 
                variant="ghost" 
                size="sm"
                onClick={() => router.push('/supplies')}
                className="text-white/60 hover:text-white hover:bg-white/10"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Назад к поставкам
              </Button>
              <div>
                <h1 className="text-3xl font-bold text-white mb-2">Создание поставки</h1>
                <p className="text-white/60">Выберите способ создания поставки</p>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Card 
              className="bg-white/10 backdrop-blur border-white/20 p-8 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
              onClick={() => setSelectedVariant('cards')}
            >
              <div className="text-center space-y-6">
                <div className="p-6 bg-blue-500/20 rounded-2xl w-fit mx-auto">
                  <ShoppingCart className="h-12 w-12 text-blue-400" />
                </div>
                <div>
                  <h3 className="text-2xl font-semibold text-white mb-3">Карточки</h3>
                  <p className="text-white/60">
                    Создание поставки через выбор товаров по карточкам Wildberries
                  </p>
                </div>
                <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-lg px-4 py-2">
                  Доступно
                </Badge>
              </div>
            </Card>

            <Card 
              className="bg-white/10 backdrop-blur border-white/20 p-8 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-105"
              onClick={() => setSelectedVariant('wholesaler')}
            >
              <div className="text-center space-y-6">
                <div className="p-6 bg-green-500/20 rounded-2xl w-fit mx-auto">
                  <Users className="h-12 w-12 text-green-400" />
                </div>
                <div>
                  <h3 className="text-2xl font-semibold text-white mb-3">Оптовик</h3>
                  <p className="text-white/60">
                    Создание поставки через выбор товаров у оптовиков
                  </p>
                </div>
                <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-lg px-4 py-2">
                  Доступно
                </Badge>
              </div>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}