"use client"

import React, { useState, useEffect } from 'react'
import { useAuth } from '@/hooks/useAuth'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { WildberriesService } from '@/services/wildberries-service'
import { toast } from 'sonner'
import { StatsCards } from './stats-cards'
import { SearchBar } from './search-bar'
import { TableHeader } from './table-header'
import { LoadingSkeleton } from './loading-skeleton'
import { StockTableRow } from './stock-table-row'
import { TrendingUp, Search, Package, Warehouse, TrendingDown, MapPin, Info } from 'lucide-react'

interface WBStock {
  nmId: number
  vendorCode: string
  title: string
  brand: string
  price: number
  stocks: Array<{
    warehouseId: number
    warehouseName: string
    quantity: number
    quantityFull: number
    inWayToClient: number
    inWayFromClient: number
  }>
  totalQuantity: number
  totalReserved: number
  photos?: Array<{
    big?: string
    c246x328?: string
    c516x688?: string
    square?: string
    tm?: string
  }>
  mediaFiles?: string[]
  characteristics?: Array<{
    id: number
    name: string
    value: string[] | string
  }>
  subjectName?: string
  description?: string
}

interface WBWarehouse {
  id: number
  name: string
  cargoType: number
  deliveryType: number
}

export function WBWarehouseDashboard() {
  const { user } = useAuth()
  const { getSidebarMargin } = useSidebar()
  
  const [stocks, setStocks] = useState<WBStock[]>([])
  const [warehouses, setWarehouses] = useState<WBWarehouse[]>([])
  const [analyticsData, setAnalyticsData] = useState<Array<{warehouseId: number; warehouseName: string; toClient: number; fromClient: number}>>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedWarehouse, setSelectedWarehouse] = useState<string>('all')
  
  // Статистика
  const [totalProducts, setTotalProducts] = useState(0)
  const [totalStocks, setTotalStocks] = useState(0)
  const [totalReserved, setTotalReserved] = useState(0)
  const [totalFromClient, setTotalFromClient] = useState(0)
  const [activeWarehouses, setActiveWarehouses] = useState(0)

  // Загрузка данных
  const loadWarehouseData = async (showToast = false) => {
    const isInitialLoad = loading
    if (!isInitialLoad) setRefreshing(true)
    
    try {
      const wbApiKey = user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')
      
      if (!wbApiKey?.isActive) {
        toast.error('API ключ Wildberries не настроен')
        return
      }

      const validationData = wbApiKey.validationData as Record<string, string>
      const apiToken = validationData?.token || 
                       validationData?.apiKey || 
                       validationData?.key ||
                       (wbApiKey as { apiKey?: string }).apiKey

      if (!apiToken) {
        toast.error('Токен API не найден')
        return
      }

      const wbService = new WildberriesService(apiToken)
      
      console.log('WB Warehouse: Starting data load...')
      
      // Сначала получаем карточки товаров - это основа для всего
      console.log('WB Warehouse: Getting cards...')
      const cards = await WildberriesService.getAllCards(apiToken).catch(() => [])
      const nmIds = cards.map(card => card.nmID).filter(id => id > 0)
      console.log('WB Warehouse: Found cards:', cards.length)
      console.log('WB Warehouse: Card IDs for analytics:', nmIds)

      if (cards.length === 0) {
        console.log('WB Warehouse: No cards found, cannot proceed with analytics')
        setStocks([])
        setWarehouses([])
        return
      }

      // Получаем данные по складам для каждого товара отдельно
      console.log('WB Warehouse: Getting stocks analytics for each card separately...')
      const analyticsResults = []
      
      for (const nmId of nmIds) {
        console.log(`WB Warehouse: Getting analytics for nmId: ${nmId}`)
        try {
          const result = await wbService.getStocksReportByOffices({
            nmIds: [nmId], // Один товар за раз
            stockType: '' // все склады
          })
          analyticsResults.push({ nmId, data: result })
          console.log(`WB Warehouse: Got analytics for ${nmId}:`, result)
          
          // Пауза между запросами чтобы не превысить лимиты API
          await new Promise(resolve => setTimeout(resolve, 1000))
        } catch (error) {
          console.error(`WB Warehouse: Error loading analytics for ${nmId}:`, error)
          analyticsResults.push({ nmId, data: { data: { regions: [] } } })
        }
      }

      console.log('WB Warehouse: Cards loaded:', cards.length)
      console.log('WB Warehouse: Analytics data received')
      
      // Объединяем карточки товаров с данными Analytics API
      const combinedStocks = combineCardsWithIndividualAnalytics(cards, analyticsResults)
      console.log('WB Warehouse: Combined stocks:', combinedStocks.length)
      
      // Отключаем общую аналитику - будем показывать детализацию по товарам в карточках
      setAnalyticsData([])
      
      // Используем объединенные данные
      setStocks(combinedStocks)
      
      // Извлекаем информацию о складах из данных Analytics API
      const warehousesFromAnalytics = extractWarehousesFromStocks(combinedStocks)
      setWarehouses(warehousesFromAnalytics)
      
      // Обновляем статистику
      updateStatistics(combinedStocks, warehousesFromAnalytics)
      
      if (showToast) {
        toast.success('Данные обновлены')
      }
      
    } catch (error) {
      console.error('Ошибка загрузки данных склада:', error)
      toast.error('Ошибка загрузки данных склада')
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }



  // Объединение карточек товаров с индивидуальными данными Analytics API
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const combineCardsWithIndividualAnalytics = (cards: any[], analyticsResults: any[]): WBStock[] => {
    const stocksMap = new Map<number, WBStock>()
    
    console.log('WB Warehouse: Combining cards with individual analytics...')
    console.log('WB Warehouse: Cards count:', cards.length)
    console.log('WB Warehouse: Analytics results count:', analyticsResults.length)
    
    // Создаем карту Analytics результатов по nmId
    const analyticsMap = new Map()
    analyticsResults.forEach(result => {
      analyticsMap.set(result.nmId, result.data)
    })
    
    // Создаем записи для каждой карточки товара
    cards.forEach(card => {
      const stock: WBStock = {
        nmId: card.nmID,
        vendorCode: String(card.vendorCode || card.supplierVendorCode || ''),
        title: String(card.title || card.object || `Товар ${card.nmID}`),
        brand: String(card.brand || ''),
        price: 0, // Цена будет из размеров, если есть
        stocks: [], // Заполним из Analytics API
        totalQuantity: 0,
        totalReserved: 0,
        photos: Array.isArray(card.photos) ? card.photos : [],
        mediaFiles: Array.isArray(card.mediaFiles) ? card.mediaFiles : [],
        characteristics: Array.isArray(card.characteristics) ? card.characteristics : [],
        subjectName: String(card.subjectName || card.object || ''),
        description: String(card.description || '')
      }
      
      // Берем цену из первого размера если есть
      if (card.sizes && card.sizes.length > 0) {
        stock.price = Number(card.sizes[0].price || card.sizes[0].discountedPrice) || 0
      }
      
      // Получаем данные Analytics для этого конкретного товара
      const analyticsData = analyticsMap.get(card.nmID)
      console.log(`WB Warehouse: Processing analytics for card ${card.nmID}:`, analyticsData)
      
             if (analyticsData?.data?.regions) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         analyticsData.data.regions.forEach((region: any) => {
          if (region.offices && region.offices.length > 0) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            region.offices.forEach((office: any) => {
              console.log(`WB Warehouse: Adding office ${office.officeName} for card ${card.nmID}`)
              console.log(`WB Warehouse: Office metrics:`, office.metrics)
              
              stock.stocks.push({
                warehouseId: office.officeID,
                warehouseName: office.officeName,
                quantity: office.metrics?.stockCount || 0,
                quantityFull: office.metrics?.stockCount || 0,
                inWayToClient: office.metrics?.toClientCount || 0,
                inWayFromClient: office.metrics?.fromClientCount || 0
              })
              
              stock.totalQuantity += office.metrics?.stockCount || 0
              stock.totalReserved += office.metrics?.toClientCount || 0
            })
          }
        })
      } else {
        console.log(`WB Warehouse: No analytics data found for card ${card.nmID}`)
      }
      
      stocksMap.set(card.nmID, stock)
    })
    
    console.log('WB Warehouse: Final stocks after combining:', stocksMap.size)
    return Array.from(stocksMap.values()).sort((a, b) => b.totalQuantity - a.totalQuantity)
  }

  // Объединение карточек товаров с данными Analytics API (старая функция)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const combineCardsWithAnalytics = (cards: any[], analyticsResponse: any): WBStock[] => {
    const stocksMap = new Map<number, WBStock>()
    
    console.log('WB Warehouse: Combining cards with analytics...')
    console.log('WB Warehouse: Cards count:', cards.length)
    console.log('WB Warehouse: Analytics response:', analyticsResponse)
    
    // Сначала создаем записи для всех карточек товаров
    cards.forEach(card => {
      const stock: WBStock = {
        nmId: card.nmID,
        vendorCode: String(card.vendorCode || card.supplierVendorCode || ''),
        title: String(card.title || card.object || `Товар ${card.nmID}`),
        brand: String(card.brand || ''),
        price: 0, // Цена будет из размеров, если есть
        stocks: [], // Заполним из Analytics API
        totalQuantity: 0,
        totalReserved: 0,
        photos: Array.isArray(card.photos) ? card.photos : [],
        mediaFiles: Array.isArray(card.mediaFiles) ? card.mediaFiles : [],
        characteristics: Array.isArray(card.characteristics) ? card.characteristics : [],
        subjectName: String(card.subjectName || card.object || ''),
        description: String(card.description || '')
      }
      
      // Берем цену из первого размера если есть
      if (card.sizes && card.sizes.length > 0) {
        stock.price = Number(card.sizes[0].price || card.sizes[0].discountedPrice) || 0
      }
      
      stocksMap.set(card.nmID, stock)
    })
    
    console.log('WB Warehouse: Created stocks from cards:', stocksMap.size)
    
    // Теперь дополняем данными из Analytics API
    if (analyticsResponse?.data?.regions) {
      console.log('WB Warehouse: Processing analytics regions:', analyticsResponse.data.regions.length)
      
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
       analyticsResponse.data.regions.forEach((region: any) => {
         if (region.offices && region.offices.length > 0) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           region.offices.forEach((office: any) => {
            console.log(`WB Warehouse: Processing office ${office.officeName} (${office.officeID})`)
            console.log('WB Warehouse: Office metrics:', office.metrics)
            
            // Пока что добавляем данные склада ко всем товарам
            // TODO: нужно понять как Analytics API связывает товары со складами
            stocksMap.forEach((stock, nmId) => {
              stock.stocks.push({
                warehouseId: office.officeID,
                warehouseName: office.officeName,
                quantity: office.metrics?.stockCount || 0,
                quantityFull: office.metrics?.stockCount || 0,
                inWayToClient: office.metrics?.toClientCount || 0,
                inWayFromClient: office.metrics?.fromClientCount || 0
              })
              
              stock.totalQuantity += office.metrics?.stockCount || 0
              stock.totalReserved += office.metrics?.toClientCount || 0
            })
          })
        }
      })
    }
    
    console.log('WB Warehouse: Final stocks after combining:', stocksMap.size)
    return Array.from(stocksMap.values()).sort((a, b) => b.totalQuantity - a.totalQuantity)
  }

  // Извлечение информации о складах из данных Analytics API
  const extractWarehousesFromStocks = (stocksData: WBStock[]): WBWarehouse[] => {
    const warehousesMap = new Map<number, WBWarehouse>()
    
    stocksData.forEach(stock => {
      stock.stocks.forEach(stockInfo => {
        if (!warehousesMap.has(stockInfo.warehouseId)) {
          warehousesMap.set(stockInfo.warehouseId, {
            id: stockInfo.warehouseId,
            name: stockInfo.warehouseName,
            cargoType: 1, // По умолчанию
            deliveryType: 1 // По умолчанию
          })
        }
      })
    })
    
    return Array.from(warehousesMap.values())
  }

  // Обновление статистики
  const updateStatistics = (stocksData: WBStock[], warehousesData: WBWarehouse[]) => {
    setTotalProducts(stocksData.length)
    setTotalStocks(stocksData.reduce((sum, item) => sum + item.totalQuantity, 0))
    setTotalReserved(stocksData.reduce((sum, item) => sum + item.totalReserved, 0))
    
    // Считаем общее количество товаров в пути от клиента
    const totalFromClientCount = stocksData.reduce((sum, item) => 
      sum + item.stocks.reduce((stockSum, stock) => stockSum + stock.inWayFromClient, 0), 0
    )
    setTotalFromClient(totalFromClientCount)
    
    const warehousesWithStock = new Set(
      stocksData.flatMap(item => item.stocks.map(s => s.warehouseId))
    )
    setActiveWarehouses(warehousesWithStock.size)
  }

  

  // Фильтрация товаров (показываем все товары, включая с нулевыми остатками)
  const filteredStocks = stocks.filter(item => {
    const matchesSearch = searchTerm === '' || 
      item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.brand.toLowerCase().includes(searchTerm.toLowerCase())
    
    const matchesWarehouse = selectedWarehouse === 'all' || 
      item.stocks.some(s => s.warehouseId.toString() === selectedWarehouse)
    
    return matchesSearch && matchesWarehouse
  })

  useEffect(() => {
    if (user?.organization?.type === 'SELLER') {
      loadWarehouseData()
    }
  }, [user])

  // Проверяем настройку API ключа
  const hasWBApiKey = user?.organization?.apiKeys?.find(key => key.marketplace === 'WILDBERRIES')?.isActive

  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="h-full w-full flex flex-col">

          {/* Результирующие вкладки */}
          <StatsCards
            totalProducts={totalProducts}
            totalStocks={totalStocks}
            totalReserved={totalReserved}
            totalFromClient={totalFromClient}
            activeWarehouses={activeWarehouses}
            loading={loading}
          />

          {/* Аналитика по складам WB */}
          {analyticsData.length > 0 && (
            <Card className="glass-card border-white/10 p-4 mb-6">
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
                <TrendingUp className="h-5 w-5 mr-2 text-blue-400" />
                Движение товаров по складам WB
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {analyticsData.map((warehouse) => (
                  <Card key={warehouse.warehouseId} className="bg-white/5 border-white/10 p-3">
                    <div className="text-sm font-medium text-white mb-2">{warehouse.warehouseName}</div>
                    <div className="space-y-2">
                      <div className="flex justify-between text-xs">
                        <span className="text-white/60">К клиенту:</span>
                        <span className="text-green-400 font-medium">{warehouse.toClient}</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-white/60">От клиента:</span>
                        <span className="text-orange-400 font-medium">{warehouse.fromClient}</span>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </Card>
          )}

          {/* Поиск */}
          <SearchBar 
            searchTerm={searchTerm}
            onSearchChange={setSearchTerm}
          />

          {/* Список товаров */}
          <div className="flex-1 overflow-hidden">
            {loading ? (
              <div className="overflow-y-auto pr-2 max-h-full">
                <TableHeader />
                <LoadingSkeleton />
              </div>
            ) : !hasWBApiKey ? (
              <Card className="glass-card border-white/10 p-8 text-center">
                <Package className="h-12 w-12 text-blue-400 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-white mb-2">Настройте API ключ Wildberries</h3>
                <p className="text-white/60 mb-4">
                  Для просмотра остатков товаров на складах WB необходимо добавить API ключ
                </p>
                <Button
                  onClick={() => window.location.href = '/settings'}
                  className="bg-blue-500 hover:bg-blue-600 text-white"
                >
                  Перейти в настройки
                </Button>
              </Card>
            ) : filteredStocks.length === 0 ? (
              <Card className="glass-card border-white/10 p-8 text-center">
                <Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
                <p className="text-white/60">
                  {searchTerm || selectedWarehouse !== 'all' 
                    ? 'Товары не найдены по заданным фильтрам' 
                    : 'Нет карточек товаров в WB'
                  }
                </p>
              </Card>
            ) : (
              <div className="overflow-y-auto pr-2 max-h-full">
                {/* Красивая шапка таблицы */}
                <div className="mb-3 p-4 rounded-xl bg-gradient-to-r from-white/5 to-white/10 border border-white/10">
                  <div className="grid grid-cols-12 gap-4 text-sm font-medium text-white/80">
                    <div className="col-span-3 flex items-center gap-2">
                      <Package className="h-4 w-4 text-blue-400" />
                      <span>Товар</span>
                    </div>
                    <div className="col-span-1 text-center flex items-center justify-center gap-1">
                      <Warehouse className="h-3 w-3 text-green-400" />
                      <span>Остаток</span>
                    </div>
                    <div className="col-span-1 text-center flex items-center justify-center gap-1">
                      <TrendingUp className="h-3 w-3 text-orange-400" />
                      <span>К клиенту</span>
                    </div>
                    <div className="col-span-1 text-center flex items-center justify-center gap-1">
                      <TrendingDown className="h-3 w-3 text-red-400" />
                      <span>От клиента</span>
                    </div>
                    <div className="col-span-1 text-center flex items-center justify-center gap-1">
                      <MapPin className="h-3 w-3 text-purple-400" />
                      <span>Складов</span>
                    </div>
                    <div className="col-span-5 flex items-center gap-2">
                      <Info className="h-4 w-4 text-blue-400" />
                      <span>Характеристики</span>
                    </div>
                  </div>
                </div>

                {/* Таблица товаров */}
                <div className="space-y-1">
                  {filteredStocks.map((item, index) => (
                    <StockTableRow key={`${item.nmId}-${index}`} item={item} />
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  )
}

// Табличная строка товара  
function StockTableRow({ item }: { item: WBStock }) {
  
  // Получение изображений карточки через WildberriesService
  const getCardImages = (item: WBStock): string[] => {
    if (item.photos && item.photos.length > 0) {
      const urls = item.photos
        .map(photo => photo.c246x328 || photo.c516x688 || photo.big)
        .filter((url): url is string => Boolean(url))
      return urls
    }
    
    if (item.mediaFiles && item.mediaFiles.length > 0) {
      return item.mediaFiles
    }
    
    const vol = Math.floor(item.nmId / 100000)
    const part = Math.floor(item.nmId / 1000)
    const fallbackUrl = `https://basket-${String(vol).padStart(2, '0')}.wbbasket.ru/vol${vol}/part${part}/${item.nmId}/images/c246x328/1.webp`
    return [fallbackUrl]
  }
  
  const getStockStatus = (quantity: number) => {
    if (quantity === 0) return { 
      color: 'text-red-400', 
      bgColor: 'bg-red-500/10',
      label: 'Нет в наличии'
    }
    if (quantity < 10) return { 
      color: 'text-orange-400', 
      bgColor: 'bg-orange-500/10',
      label: 'Мало'
    }
    return { 
      color: 'text-green-400', 
      bgColor: 'bg-green-500/10',
      label: 'В наличии'
    }
  }

  const stockStatus = getStockStatus(item.totalQuantity)
  const images = getCardImages(item)
  const mainImage = images[0] || null

  // Отбираем ключевые характеристики для отображения в таблице
  const keyCharacteristics = item.characteristics?.slice(0, 3) || []

  return (
    <div className="group">
      {/* Основная строка товара */}
      <div 
        className="grid grid-cols-12 gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition-all duration-300"
      >
        {/* Товар (3 колонки) */}
        <div className="col-span-3 flex items-center gap-3">
          <div className="w-12 h-12 rounded-lg overflow-hidden bg-white/10 flex-shrink-0">
            {mainImage ? (
              <img 
                src={mainImage} 
                alt={item.title}
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center">
                <Package className="h-5 w-5 text-white/40" />
              </div>
            )}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <span className="text-xs text-blue-300 bg-blue-500/20 px-2 py-0.5 rounded">
                {item.brand || 'Без бренда'}
              </span>
              <span className="text-white/40 text-xs">#{item.nmId}</span>
            </div>
            <h3 className="text-white text-sm font-medium line-clamp-1 mb-1">
              {item.title}
            </h3>
            <div className="text-white/60 text-xs">
              {item.vendorCode}
            </div>
          </div>
        </div>

        {/* Остаток */}
        <div className="col-span-1 flex items-center justify-center">
          <div className="text-center">
            <div className={`text-lg font-bold ${stockStatus.color}`}>
              {item.totalQuantity.toLocaleString()}
            </div>
            <div className={`text-xs px-2 py-0.5 rounded ${stockStatus.bgColor} ${stockStatus.color}`}>
              {stockStatus.label}
            </div>
          </div>
        </div>

        {/* К клиенту */}
        <div className="col-span-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-bold text-orange-400">
              {item.stocks.reduce((sum, s) => sum + s.inWayToClient, 0)}
            </div>
            <div className="text-xs text-white/60">в пути</div>
          </div>
        </div>

        {/* От клиента */}
        <div className="col-span-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-bold text-red-400">
              {item.stocks.reduce((sum, s) => sum + s.inWayFromClient, 0)}
            </div>
            <div className="text-xs text-white/60">возвраты</div>
          </div>
        </div>

        {/* Складов */}
        <div className="col-span-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-bold text-purple-400">
              {item.stocks.length}
            </div>
            <div className="text-xs text-white/60">активных</div>
          </div>
        </div>

        {/* Характеристики (5 колонок) */}
        <div className="col-span-5 flex items-center">
          <div className="space-y-1 w-full">
            {keyCharacteristics.map((char, index) => (
              <div key={index} className="flex justify-between text-xs">
                <span className="text-white/60 truncate w-1/2">{char.name}:</span>
                <span className="text-white truncate w-1/2 text-right">
                  {Array.isArray(char.value) ? char.value.join(', ') : String(char.value)}
                </span>
              </div>
            ))}
            {item.subjectName && (
              <div className="flex justify-between text-xs">
                <span className="text-white/60">Категория:</span>
                <span className="text-blue-300 truncate text-right">{item.subjectName}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Города в модулях */}
      <div className="grid grid-cols-12 gap-4 p-3 bg-white/[0.02] border-l-2 border-blue-400/30">
        <div className="col-span-12 flex flex-wrap gap-3">
          {item.stocks.map((stock, stockIndex) => (
            <div 
              key={`${stock.warehouseId}-${stockIndex}`} 
              className="bg-white/10 rounded-lg px-3 py-2 border border-white/20 hover:border-white/30 transition-colors"
            >
              {/* Название города */}
              <div className="text-white text-sm font-medium mb-1">
                {stock.warehouseName}
              </div>
              
              {/* Цифры */}
              <div className="flex items-center gap-3 text-xs">
                <div className="text-center">
                  <div className={`font-bold ${stock.quantity > 0 ? 'text-green-400' : 'text-white/30'}`}>
                    {stock.quantity}
                  </div>
                  <div className="text-white/50">остаток</div>
                </div>
                
                {(stock.inWayToClient > 0 || stock.inWayFromClient > 0) && (
                  <>
                    <div className="w-px h-6 bg-white/20" />
                    
                    {stock.inWayToClient > 0 && (
                      <div className="text-center">
                        <div className="font-bold text-orange-400">{stock.inWayToClient}</div>
                        <div className="text-white/50">к клиенту</div>
                      </div>
                    )}
                    
                    {stock.inWayFromClient > 0 && (
                      <div className="text-center">
                        <div className="font-bold text-red-400">{stock.inWayFromClient}</div>
                        <div className="text-white/50">от клиента</div>
                      </div>
                    )}
                  </>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// Супер современная карточка товара (СТАРАЯ ВЕРСИЯ - НЕ ИСПОЛЬЗУЕТСЯ)
function StockCard({ item }: { item: WBStock }) {
  // Получение изображений карточки через WildberriesService
  const getCardImages = (item: WBStock): string[] => {
    if (item.photos && item.photos.length > 0) {
      const urls = item.photos
        .map(photo => photo.c246x328 || photo.c516x688 || photo.big)
        .filter((url): url is string => Boolean(url))
      return urls
    }
    
    if (item.mediaFiles && item.mediaFiles.length > 0) {
      return item.mediaFiles
    }
    
    const vol = Math.floor(item.nmId / 100000)
    const part = Math.floor(item.nmId / 1000)
    const fallbackUrl = `https://basket-${String(vol).padStart(2, '0')}.wbbasket.ru/vol${vol}/part${part}/${item.nmId}/images/c246x328/1.webp`
    return [fallbackUrl]
  }
  
  const getStockStatus = (quantity: number) => {
    if (quantity === 0) return { 
      color: 'from-red-500/20 to-red-600/5 border-red-500/30', 
      textColor: 'text-red-400',
      label: 'Нет в наличии',
      icon: '❌'
    }
    if (quantity < 10) return { 
      color: 'from-orange-500/20 to-orange-600/5 border-orange-500/30', 
      textColor: 'text-orange-400',
      label: 'Мало',
      icon: '⚠️'
    }
    return { 
      color: 'from-green-500/20 to-green-600/5 border-green-500/30', 
      textColor: 'text-green-400',
      label: 'В наличии',
      icon: '✅'
    }
  }

  const stockStatus = getStockStatus(item.totalQuantity)
  const images = getCardImages(item)
  const mainImage = images[0] || null

  return (
    <div className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-white/5 to-white/[0.02] border border-white/10 hover:border-white/20 transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10">
      {/* Градиентный фон при hover */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/0 via-purple-500/0 to-pink-500/0 group-hover:from-blue-500/5 group-hover:via-purple-500/5 group-hover:to-pink-500/5 transition-all duration-700" />
      
      <div className="relative p-5">
        {/* Хедер карточки */}
        <div className="flex items-start gap-4 mb-4">
          {/* Изображение товара */}
          <div className="relative">
            <div className="w-16 h-16 rounded-xl overflow-hidden bg-gradient-to-br from-white/10 to-white/5 flex-shrink-0 relative group/image">
              {mainImage ? (
                <img 
                  src={mainImage} 
                  alt={item.title}
                  className="w-full h-full object-cover group-hover/image:scale-110 transition-transform duration-500"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  <Package className="h-6 w-6 text-white/40" />
                </div>
              )}
            </div>
            {/* WB Badge */}
            <div className="absolute -top-1 -right-1">
              <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs px-2 py-0.5 rounded-full font-bold shadow-lg">
                WB
              </div>
            </div>
          </div>

          {/* Инфо товара */}
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between mb-2">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-xs text-blue-300 font-medium bg-blue-500/20 px-2 py-0.5 rounded-md">
                    {item.brand || 'Без бренда'}
                  </span>
                  <span className="text-white/40 text-xs">#{item.nmId}</span>
                </div>
                <h3 className="text-white font-semibold text-sm leading-tight line-clamp-2">
                  {item.title}
                </h3>
              </div>
              
              {/* Статус */}
              <div className={`ml-2 px-2 py-1 rounded-lg bg-gradient-to-r ${stockStatus.color} border text-xs font-medium ${stockStatus.textColor} flex items-center gap-1`}>
                <span>{stockStatus.icon}</span>
                {stockStatus.label}
              </div>
            </div>
            
            <div className="text-white/60 text-xs">
              Артикул: <span className="text-white/80 font-mono">{item.vendorCode}</span>
            </div>
          </div>
        </div>

        {/* Компактная статистика */}
        <div className="grid grid-cols-4 gap-2 mb-4">
          <div className="text-center p-2 rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/5 border border-green-500/20">
            <div className="text-green-400 text-lg font-bold">{item.totalQuantity.toLocaleString()}</div>
            <div className="text-green-300/60 text-xs">Остаток</div>
          </div>
          <div className="text-center p-2 rounded-lg bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20">
            <div className="text-purple-400 text-lg font-bold">{item.stocks.length}</div>
            <div className="text-purple-300/60 text-xs">Складов</div>
          </div>
          <div className="text-center p-2 rounded-lg bg-gradient-to-br from-orange-500/10 to-orange-600/5 border border-orange-500/20">
            <div className="text-orange-400 text-lg font-bold">
              {item.stocks.reduce((sum, s) => sum + s.inWayToClient, 0)}
            </div>
            <div className="text-orange-300/60 text-xs">К клиенту</div>
          </div>
          <div className="text-center p-2 rounded-lg bg-gradient-to-br from-red-500/10 to-red-600/5 border border-red-500/20">
            <div className="text-red-400 text-lg font-bold">
              {item.stocks.reduce((sum, s) => sum + s.inWayFromClient, 0)}
            </div>
            <div className="text-red-300/60 text-xs">От клиента</div>
          </div>
        </div>

        {/* Склады - компактно */}
        <div className="space-y-2">
          <h4 className="text-white/80 font-medium text-xs uppercase tracking-wide flex items-center gap-2">
            <Warehouse className="h-3 w-3" />
            Склады
          </h4>
          <div className="space-y-1.5">
            {item.stocks.slice(0, 3).map((stock, stockIndex) => (
              <div key={`${stock.warehouseId}-${stockIndex}`} className="flex items-center justify-between p-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors duration-200">
                <div className="flex-1">
                  <div className="text-white text-xs font-medium truncate">{stock.warehouseName}</div>
                  <div className="text-white/50 text-xs">ID: {stock.warehouseId}</div>
                </div>
                <div className="flex items-center gap-3 text-xs">
                  <div className="text-center">
                    <div className={`font-bold ${stock.quantity > 0 ? 'text-green-400' : 'text-white/30'}`}>
                      {stock.quantity}
                    </div>
                  </div>
                  <div className="text-center">
                    <div className={`font-bold ${stock.inWayToClient > 0 ? 'text-orange-400' : 'text-white/30'}`}>
                      {stock.inWayToClient}
                    </div>
                  </div>
                  <div className="text-center">
                    <div className={`font-bold ${stock.inWayFromClient > 0 ? 'text-red-400' : 'text-white/30'}`}>
                      {stock.inWayFromClient}
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {item.stocks.length > 3 && (
              <div className="text-center text-white/40 text-xs py-1">
                +{item.stocks.length - 3} ещё складов
              </div>
            )}
          </div>
        </div>

        {/* Категория */}
        {item.subjectName && (
          <div className="mt-3 pt-3 border-t border-white/10">
            <div className="text-white/60 text-xs">
              <span className="text-white/40">Категория:</span> {item.subjectName}
            </div>
          </div>
        )}
      </div>
    </div>
  )
} 