'use client'

import { useQuery } from '@apollo/client'
import {
  Package,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  RotateCcw,
  Wrench,
  Users,
  Box,
  Search,
  ArrowUpDown,
  Store,
  Package2,
  Eye,
  EyeOff,
  ChevronRight,
  ChevronDown,
  Layers,
  Truck,
  Clock,
  CheckCircle,
  Settings,
} from 'lucide-react'
import { useRouter } from 'next/navigation'
import { useState, useMemo } from 'react'
import { toast } from 'sonner'

import { Sidebar } from '@/components/dashboard/sidebar'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import {
  GET_MY_COUNTERPARTIES,
  GET_SUPPLY_ORDERS,
  GET_WAREHOUSE_PRODUCTS,
  GET_MY_SUPPLIES, // Расходники селлеров (старые данные заказов)
  GET_SELLER_SUPPLIES_ON_WAREHOUSE, // Расходники селлеров на складе (новый API)
  GET_MY_FULFILLMENT_SUPPLIES, // Расходники фулфилмента
  GET_FULFILLMENT_WAREHOUSE_STATS, // Статистика склада с изменениями за сутки
} from '@/graphql/queries'
import { useAuth } from '@/hooks/useAuth'
import { useSidebar } from '@/hooks/useSidebar'
import { useRealtime } from '@/hooks/useRealtime'

import { WbReturnClaims } from './wb-return-claims'

// Типы данных
interface ProductVariant {
  id: string
  name: string // Размер, характеристика, вариант упаковки
  // Места и количества для каждого типа на уровне варианта
  productPlace?: string
  productQuantity: number
  goodsPlace?: string
  goodsQuantity: number
  defectsPlace?: string
  defectsQuantity: number
  sellerSuppliesPlace?: string
  sellerSuppliesQuantity: number
  sellerSuppliesOwners?: string[] // Владельцы расходников
  pvzReturnsPlace?: string
  pvzReturnsQuantity: number
}

interface ProductItem {
  id: string
  name: string
  article: string
  // Места и количества для каждого типа
  productPlace?: string
  productQuantity: number
  goodsPlace?: string
  goodsQuantity: number
  defectsPlace?: string
  defectsQuantity: number
  sellerSuppliesPlace?: string
  sellerSuppliesQuantity: number
  sellerSuppliesOwners?: string[] // Владельцы расходников
  pvzReturnsPlace?: string
  pvzReturnsQuantity: number
  // Третий уровень - варианты товара
  variants?: ProductVariant[]
}

interface StoreData {
  id: string
  name: string
  logo?: string
  avatar?: string // Аватар пользователя организации
  products: number
  goods: number
  defects: number
  sellerSupplies: number
  pvzReturns: number
  // Изменения за сутки
  productsChange: number
  goodsChange: number
  defectsChange: number
  sellerSuppliesChange: number
  pvzReturnsChange: number
  // Детализация по товарам
  items: ProductItem[]
}

interface WarehouseStats {
  products: { current: number; change: number }
  goods: { current: number; change: number }
  defects: { current: number; change: number }
  pvzReturns: { current: number; change: number }
  fulfillmentSupplies: { current: number; change: number }
  sellerSupplies: { current: number; change: number }
}

interface Supply {
  id: string
  name: string
  description?: string
  price: number
  quantity: number
  unit: string
  category: string
  status: string
  date: string
  supplier: string
  minStock: number
  currentStock: number
}

interface SupplyOrder {
  id: string
  status: 'PENDING' | 'CONFIRMED' | 'IN_TRANSIT' | 'DELIVERED' | 'CANCELLED'
  deliveryDate: string
  totalAmount: number
  totalItems: number
  partner: {
    id: string
    name: string
    fullName: string
  }
  items: Array<{
    id: string
    quantity: number
    product: {
      id: string
      name: string
      article: string
    }
  }>
}

/**
 * Цветовая схема уровней:
 * 🔵 Уровень 1: Магазины - УНИКАЛЬНЫЕ ЦВЕТА для каждого магазина:
 *    - ТехноМир: Синий (blue-400/500) - технологии
 *    - Стиль и Комфорт: Розовый (pink-400/500) - мода/одежда
 *    - Зелёный Дом: Изумрудный (emerald-400/500) - природа/сад
 *    - Усиленная видимость: жирная левая граница (8px), тень, светлый текст
 * 🟢 Уровень 2: Товары - Зеленый (green-500)
 * 🟠 Уровень 3: Варианты товаров - Оранжевый (orange-500)
 *
 * Каждый уровень имеет:
 * - Цветной индикатор (круглая точка увеличивающегося размера)
 * - Цветную левую границу с увеличивающимся отступом и толщиной
 * - Соответствующий цвет фона и границ
 * - Скроллбары в цвете уровня
 * - Контрастный цвет текста для лучшей читаемости
 */
export function FulfillmentWarehouseDashboard() {
  const router = useRouter()
  const { getSidebarMargin } = useSidebar()
  const { user } = useAuth()

  // Состояния для поиска и фильтрации
  const [searchTerm, setSearchTerm] = useState('')
  const [sortField, setSortField] = useState<keyof StoreData>('name')
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
  const [expandedStores, setExpandedStores] = useState<Set<string>>(new Set())
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
  const [showReturnClaims, setShowReturnClaims] = useState(false)
  const [showAdditionalValues, setShowAdditionalValues] = useState(true)

  // Загружаем данные из GraphQL
  const {
    data: counterpartiesData,
    loading: counterpartiesLoading,
    error: counterpartiesError,
    refetch: refetchCounterparties,
  } = useQuery(GET_MY_COUNTERPARTIES, {
    fetchPolicy: 'cache-and-network', // Всегда проверяем актуальные данные
  })
  const {
    data: ordersData,
    loading: ordersLoading,
    error: ordersError,
    refetch: refetchOrders,
  } = useQuery(GET_SUPPLY_ORDERS, {
    fetchPolicy: 'cache-and-network',
  })
  const {
    data: productsData,
    loading: productsLoading,
    error: productsError,
    refetch: refetchProducts,
  } = useQuery(GET_WAREHOUSE_PRODUCTS, {
    fetchPolicy: 'cache-and-network',
  })

  // Загружаем расходники селлеров на складе фулфилмента
  const {
    data: sellerSuppliesData,
    loading: sellerSuppliesLoading,
    error: sellerSuppliesError,
    refetch: refetchSellerSupplies,
  } = useQuery(GET_SELLER_SUPPLIES_ON_WAREHOUSE, {
    fetchPolicy: 'cache-and-network',
  })

  // Загружаем расходники фулфилмента
  const {
    data: fulfillmentSuppliesData,
    loading: fulfillmentSuppliesLoading,
    error: fulfillmentSuppliesError,
    refetch: refetchFulfillmentSupplies,
  } = useQuery(GET_MY_FULFILLMENT_SUPPLIES, {
    fetchPolicy: 'cache-and-network',
  })

  // Загружаем статистику склада с изменениями за сутки
  const {
    data: warehouseStatsData,
    loading: warehouseStatsLoading,
    error: warehouseStatsError,
    refetch: refetchWarehouseStats,
  } = useQuery(GET_FULFILLMENT_WAREHOUSE_STATS, {
    fetchPolicy: 'no-cache', // Принудительно обходим кеш
  })

  // Real-time: обновляем ключевые блоки при событиях поставок/склада
  useRealtime({
    onEvent: (evt) => {
      switch (evt.type) {
        case 'supply-order:new':
        case 'supply-order:updated':
          refetchOrders()
          refetchWarehouseStats()
          refetchProducts()
          refetchSellerSupplies()
          refetchFulfillmentSupplies()
          break
        case 'warehouse:changed':
          refetchWarehouseStats()
          refetchFulfillmentSupplies()
          break
      }
    },
  })

  // Логируем статистику склада для отладки
  console.warn('📊 WAREHOUSE STATS DEBUG:', {
    loading: warehouseStatsLoading,
    error: warehouseStatsError?.message,
    data: warehouseStatsData,
    hasData: !!warehouseStatsData?.fulfillmentWarehouseStats,
  })

  // Детальное логирование данных статистики
  if (warehouseStatsData?.fulfillmentWarehouseStats) {
    console.warn('📈 DETAILED WAREHOUSE STATS:', {
      products: warehouseStatsData.fulfillmentWarehouseStats.products,
      goods: warehouseStatsData.fulfillmentWarehouseStats.goods,
      defects: warehouseStatsData.fulfillmentWarehouseStats.defects,
      pvzReturns: warehouseStatsData.fulfillmentWarehouseStats.pvzReturns,
      fulfillmentSupplies: warehouseStatsData.fulfillmentWarehouseStats.fulfillmentSupplies,
      sellerSupplies: warehouseStatsData.fulfillmentWarehouseStats.sellerSupplies,
    })
  }

  // Получаем данные магазинов, заказов и товаров
  const allCounterparties = counterpartiesData?.myCounterparties || []
  const sellerPartners = allCounterparties.filter((partner: { type: string }) => partner.type === 'SELLER')
  const supplyOrders: SupplyOrder[] = ordersData?.supplyOrders || []
  const allProducts = productsData?.warehouseProducts || []
  const sellerSupplies = sellerSuppliesData?.sellerSuppliesOnWarehouse || [] // Расходники селлеров на складе
  const myFulfillmentSupplies = fulfillmentSuppliesData?.myFulfillmentSupplies || [] // Расходники фулфилмента

  // Логирование для отладки
  console.warn('🏪 Данные склада фулфилмента:', {
    allCounterpartiesCount: allCounterparties.length,
    sellerPartnersCount: sellerPartners.length,
    sellerPartners: sellerPartners.map((p: any) => ({
      id: p.id,
      name: p.name,
      fullName: p.fullName,
      type: p.type,
    })),
    ordersCount: supplyOrders.length,
    deliveredOrders: supplyOrders.filter((o) => o.status === 'DELIVERED').length,
    productsCount: allProducts.length,
    suppliesCount: sellerSupplies.length, // Добавляем логирование расходников
    supplies: sellerSupplies.map((s: any) => ({
      id: s.id,
      name: s.name,
      currentStock: s.currentStock,
      category: s.category,
      supplier: s.supplier,
    })),
    products: allProducts.map((p: any) => ({
      id: p.id,
      name: p.name,
      article: p.article,
      organizationName: p.organization?.name || p.organization?.fullName,
      organizationType: p.organization?.type,
    })),
    // Добавляем анализ соответствия товаров и расходников
    productSupplyMatching: allProducts.map((product: any) => {
      const matchingSupply = sellerSupplies.find((supply: any) => {
        return (
          supply.name.toLowerCase() === product.name.toLowerCase() ||
          supply.name.toLowerCase().includes(product.name.toLowerCase().split(' ')[0])
        )
      })
      return {
        productName: product.name,
        matchingSupplyName: matchingSupply?.name,
        matchingSupplyStock: matchingSupply?.currentStock,
        hasMatch: !!matchingSupply,
      }
    }),
    counterpartiesLoading,
    ordersLoading,
    productsLoading,
    sellerSuppliesLoading, // Добавляем статус загрузки расходников селлеров
    counterpartiesError: counterpartiesError?.message,
    ordersError: ordersError?.message,
    productsError: productsError?.message,
    sellerSuppliesError: sellerSuppliesError?.message, // Добавляем ошибки загрузки расходников селлеров
  })

  // Расчет поступлений расходников за сутки (выносим отдельно для использования в storeData)
  const suppliesReceivedToday = useMemo(() => {
    const deliveredOrders = supplyOrders.filter((o) => o.status === 'DELIVERED')

    // Подсчитываем расходники селлера из доставленных заказов за последние сутки
    const oneDayAgo = new Date()
    oneDayAgo.setDate(oneDayAgo.getDate() - 1)

    const recentDeliveredOrders = deliveredOrders.filter((order) => {
      const deliveryDate = new Date(order.deliveryDate)
      return deliveryDate >= oneDayAgo && order.fulfillmentCenter?.id // За последние сутки
    })

    const realSuppliesReceived = recentDeliveredOrders.reduce((sum, order) => sum + order.totalItems, 0)

    // Логирование для отладки
    console.warn('📦 Анализ поставок расходников за сутки:', {
      totalDeliveredOrders: deliveredOrders.length,
      recentDeliveredOrders: recentDeliveredOrders.length,
      recentOrders: recentDeliveredOrders.map((order) => ({
        id: order.id,
        deliveryDate: order.deliveryDate,
        totalItems: order.totalItems,
        status: order.status,
      })),
      realSuppliesReceived,
      oneDayAgo: oneDayAgo.toISOString(),
    })

    // Возвращаем реальное значение без fallback
    return realSuppliesReceived
  }, [supplyOrders])

  // Расчет использованных расходников за сутки (пока всегда 0, так как нет данных об использовании)
  const suppliesUsedToday = useMemo(() => {
    // TODO: Здесь должна быть логика подсчета использованных расходников
    // Пока возвращаем 0, так как нет данных об использовании
    return 0
  }, [])

  // Расчет изменений товаров за сутки (реальные данные)
  const productsReceivedToday = useMemo(() => {
    // Товары, поступившие за сутки из доставленных заказов
    const deliveredOrders = supplyOrders.filter((o) => o.status === 'DELIVERED')
    const oneDayAgo = new Date()
    oneDayAgo.setDate(oneDayAgo.getDate() - 1)

    const recentDeliveredOrders = deliveredOrders.filter((order) => {
      const deliveryDate = new Date(order.deliveryDate)
      return deliveryDate >= oneDayAgo && order.fulfillmentCenter?.id
    })

    const realProductsReceived = recentDeliveredOrders.reduce((sum, order) => sum + (order.totalItems || 0), 0)

    // Логирование для отладки
    console.warn('📦 Анализ поставок товаров за сутки:', {
      totalDeliveredOrders: deliveredOrders.length,
      recentDeliveredOrders: recentDeliveredOrders.length,
      recentOrders: recentDeliveredOrders.map((order) => ({
        id: order.id,
        deliveryDate: order.deliveryDate,
        totalItems: order.totalItems,
        status: order.status,
      })),
      realProductsReceived,
      oneDayAgo: oneDayAgo.toISOString(),
    })

    return realProductsReceived
  }, [supplyOrders])

  const productsUsedToday = useMemo(() => {
    // Товары, отправленные/использованные за сутки (пока 0, нет данных)
    return 0
  }, [])

  // Логирование статистики расходников для отладки
  console.warn('📊 Статистика расходников селлера:', {
    suppliesReceivedToday,
    suppliesUsedToday,
    totalSellerSupplies: sellerSupplies.reduce((sum: number, supply: any) => sum + (supply.currentStock || 0), 0),
    netChange: suppliesReceivedToday - suppliesUsedToday,
  })

  // Получаем статистику склада из GraphQL (с реальными изменениями за сутки)
  const warehouseStats: WarehouseStats = useMemo(() => {
    // Если данные еще загружаются, возвращаем нули
    if (warehouseStatsLoading || !warehouseStatsData?.fulfillmentWarehouseStats) {
      return {
        products: { current: 0, change: 0 },
        goods: { current: 0, change: 0 },
        defects: { current: 0, change: 0 },
        pvzReturns: { current: 0, change: 0 },
        fulfillmentSupplies: { current: 0, change: 0 },
        sellerSupplies: { current: 0, change: 0 },
      }
    }

    // Используем данные из GraphQL резолвера
    const stats = warehouseStatsData.fulfillmentWarehouseStats

    return {
      products: {
        current: stats.products.current,
        change: stats.products.change,
      },
      goods: {
        current: stats.goods.current,
        change: stats.goods.change,
      },
      defects: {
        current: stats.defects.current,
        change: stats.defects.change,
      },
      pvzReturns: {
        current: stats.pvzReturns.current,
        change: stats.pvzReturns.change,
      },
      fulfillmentSupplies: {
        current: stats.fulfillmentSupplies.current,
        change: stats.fulfillmentSupplies.change,
      },
      sellerSupplies: {
        current: stats.sellerSupplies.current,
        change: stats.sellerSupplies.change,
      },
    }
  }, [warehouseStatsData, warehouseStatsLoading])

  // Создаем структурированные данные склада на основе уникальных товаров
  const storeData: StoreData[] = useMemo(() => {
    if (!sellerPartners.length && !allProducts.length) return []

    // Группируем товары по названию, суммируя количества из разных поставок
    const groupedProducts = new Map<
      string,
      {
        name: string
        totalQuantity: number
        suppliers: string[]
        categories: string[]
        prices: number[]
        articles: string[]
        originalProducts: any[]
      }
    >()

    // Группируем товары из allProducts
    allProducts.forEach((product: any) => {
      const productName = product.name
      const quantity = product.orderedQuantity || 0

      if (groupedProducts.has(productName)) {
        const existing = groupedProducts.get(productName)!
        existing.totalQuantity += quantity
        existing.suppliers.push(product.organization?.name || product.organization?.fullName || 'Неизвестно')
        existing.categories.push(product.category?.name || 'Без категории')
        existing.prices.push(product.price || 0)
        existing.articles.push(product.article || '')
        existing.originalProducts.push(product)
      } else {
        groupedProducts.set(productName, {
          name: productName,
          totalQuantity: quantity,
          suppliers: [product.organization?.name || product.organization?.fullName || 'Неизвестно'],
          categories: [product.category?.name || 'Без категории'],
          prices: [product.price || 0],
          articles: [product.article || ''],
          originalProducts: [product],
        })
      }
    })

    // ИСПРАВЛЕНО: Группируем расходники по СЕЛЛЕРУ-ВЛАДЕЛЬЦУ, а не по названию
    const suppliesByOwner = new Map<string, Map<string, { quantity: number; ownerName: string }>>()

    sellerSupplies.forEach((supply: any) => {
      const ownerId = supply.sellerOwner?.id
      const ownerName = supply.sellerOwner?.name || supply.sellerOwner?.fullName || 'Неизвестный селлер'
      const supplyName = supply.name
      const currentStock = supply.currentStock || 0
      const supplyType = supply.type

      // ИСПРАВЛЕНО: Строгая проверка согласно правилам
      if (!ownerId || supplyType !== 'SELLER_CONSUMABLES') {
        console.warn('⚠️ ОТФИЛЬТРОВАН расходник в компоненте (нарушение правил):', {
          id: supply.id,
          name: supplyName,
          type: supplyType,
          ownerId,
          ownerName,
          reason: !ownerId ? 'нет sellerOwner.id' : 'тип не SELLER_CONSUMABLES',
        })
        return // Пропускаем согласно ПРАВИЛУ 6 из секции 11.6
      }

      // Инициализируем группу для селлера, если её нет
      if (!suppliesByOwner.has(ownerId)) {
        suppliesByOwner.set(ownerId, new Map())
      }

      const ownerSupplies = suppliesByOwner.get(ownerId)!

      if (ownerSupplies.has(supplyName)) {
        // Суммируем количество, если расходник уже есть у этого селлера
        const existing = ownerSupplies.get(supplyName)!
        existing.quantity += currentStock
      } else {
        // Добавляем новый расходник для этого селлера
        ownerSupplies.set(supplyName, {
          quantity: currentStock,
          ownerName: ownerName,
        })
      }
    })

    // Логирование группировки
    console.warn('📊 Группировка товаров и расходников:', {
      groupedProductsCount: groupedProducts.size,
      suppliesByOwnerCount: suppliesByOwner.size,
      groupedProducts: Array.from(groupedProducts.entries()).map(([name, data]) => ({
        name,
        totalQuantity: data.totalQuantity,
        suppliersCount: data.suppliers.length,
        uniqueSuppliers: [...new Set(data.suppliers)],
      })),
      suppliesByOwner: Array.from(suppliesByOwner.entries()).map(([ownerId, ownerSupplies]) => ({
        ownerId,
        suppliesCount: ownerSupplies.size,
        totalQuantity: Array.from(ownerSupplies.values()).reduce((sum, s) => sum + s.quantity, 0),
        ownerName: Array.from(ownerSupplies.values())[0]?.ownerName || 'Unknown',
        supplies: Array.from(ownerSupplies.entries()).map(([name, data]) => ({
          name,
          quantity: data.quantity,
        })),
      })),
    })

    // Создаем виртуальных "партнеров" на основе уникальных товаров
    const uniqueProductNames = Array.from(groupedProducts.keys())
    const virtualPartners = Math.max(1, Math.min(sellerPartners.length, Math.ceil(uniqueProductNames.length / 8)))

    return Array.from({ length: virtualPartners }, (_, index) => {
      const startIndex = index * 8
      const endIndex = Math.min(startIndex + 8, uniqueProductNames.length)
      const partnerProductNames = uniqueProductNames.slice(startIndex, endIndex)

      const items: ProductItem[] = partnerProductNames.map((productName, itemIndex) => {
        const productData = groupedProducts.get(productName)!
        const itemProducts = productData.totalQuantity

        // ИСПРАВЛЕНО: Ищем расходники конкретного селлера-владельца
        let itemSuppliesQuantity = 0
        let suppliesOwners: string[] = []

        // Получаем реального селлера для этого виртуального партнера
        const realSeller = sellerPartners[index]

        if (realSeller?.id && suppliesByOwner.has(realSeller.id)) {
          const sellerSupplies = suppliesByOwner.get(realSeller.id)!

          // Ищем расходники этого селлера по названию товара
          const matchingSupply = sellerSupplies.get(productName)

          if (matchingSupply) {
            itemSuppliesQuantity = matchingSupply.quantity
            suppliesOwners = [matchingSupply.ownerName]
          } else {
            // Если нет точного совпадения, ищем частичное среди расходников ЭТОГО селлера
            for (const [supplyName, supplyData] of sellerSupplies.entries()) {
              if (
                supplyName.toLowerCase().includes(productName.toLowerCase()) ||
                productName.toLowerCase().includes(supplyName.toLowerCase())
              ) {
                itemSuppliesQuantity = supplyData.quantity
                suppliesOwners = [supplyData.ownerName]
                break
              }
            }
          }
        }

        // Если у этого селлера нет расходников для данного товара - оставляем 0
        // НЕ используем fallback, так как должны показывать только реальные данные

        console.warn(`📦 Товар "${productName}" (партнер: ${realSeller?.name || 'Unknown'}):`, {
          totalQuantity: itemProducts,
          suppliersCount: productData.suppliers.length,
          uniqueSuppliers: [...new Set(productData.suppliers)],
          sellerSuppliesQuantity: itemSuppliesQuantity,
          suppliesOwners: suppliesOwners,
          sellerId: realSeller?.id,
          hasSellerSupplies: itemSuppliesQuantity > 0,
        })

        return {
          id: `grouped-${productName}-${itemIndex}`, // Уникальный ID для группированного товара
          name: productName,
          article:
            productData.articles[0] ||
            `ART${(index + 1).toString().padStart(2, '0')}${(itemIndex + 1).toString().padStart(2, '0')}`,
          productPlace: `A${index + 1}-${itemIndex + 1}`,
          productQuantity: itemProducts, // Суммированное количество (реальные данные)
          goodsPlace: `B${index + 1}-${itemIndex + 1}`,
          goodsQuantity: 0, // Нет реальных данных о готовых товарах
          defectsPlace: `C${index + 1}-${itemIndex + 1}`,
          defectsQuantity: 0, // Нет реальных данных о браке
          sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}`,
          sellerSuppliesQuantity: itemSuppliesQuantity, // Суммированное количество расходников (реальные данные)
          sellerSuppliesOwners: suppliesOwners, // Владельцы расходников (ИСПРАВЛЕНО)
          pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}`,
          pvzReturnsQuantity: 0, // Нет реальных данных о возвратах с ПВЗ
          // Создаем варианты товара
          variants:
            Math.random() > 0.5
              ? [
                  {
                    id: `grouped-${productName}-${itemIndex}-1`,
                    name: 'Размер S',
                    productPlace: `A${index + 1}-${itemIndex + 1}-1`,
                    productQuantity: Math.floor(itemProducts * 0.4), // Часть от общего количества
                    goodsPlace: `B${index + 1}-${itemIndex + 1}-1`,
                    goodsQuantity: 0, // Нет реальных данных о готовых товарах
                    defectsPlace: `C${index + 1}-${itemIndex + 1}-1`,
                    defectsQuantity: 0, // Нет реальных данных о браке
                    sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-1`,
                    sellerSuppliesQuantity: Math.floor(itemSuppliesQuantity * 0.4), // Часть от расходников
                    sellerSuppliesOwners: suppliesOwners, // Владельцы расходников (ИСПРАВЛЕНО)
                    pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-1`,
                    pvzReturnsQuantity: 0, // Нет реальных данных о возвратах
                  },
                  {
                    id: `grouped-${productName}-${itemIndex}-2`,
                    name: 'Размер M',
                    productPlace: `A${index + 1}-${itemIndex + 1}-2`,
                    productQuantity: Math.floor(itemProducts * 0.4), // Часть от общего количества
                    goodsPlace: `B${index + 1}-${itemIndex + 1}-2`,
                    goodsQuantity: 0, // Нет реальных данных о готовых товарах
                    defectsPlace: `C${index + 1}-${itemIndex + 1}-2`,
                    defectsQuantity: 0, // Нет реальных данных о браке
                    sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-2`,
                    sellerSuppliesQuantity: Math.floor(itemSuppliesQuantity * 0.4), // Часть от расходников
                    sellerSuppliesOwners: suppliesOwners, // Владельцы расходников (ИСПРАВЛЕНО)
                    pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-2`,
                    pvzReturnsQuantity: 0, // Нет реальных данных о возвратах
                  },
                  {
                    id: `grouped-${productName}-${itemIndex}-3`,
                    name: 'Размер L',
                    productPlace: `A${index + 1}-${itemIndex + 1}-3`,
                    productQuantity: Math.floor(itemProducts * 0.2), // Оставшаяся часть
                    goodsPlace: `B${index + 1}-${itemIndex + 1}-3`,
                    goodsQuantity: 0, // Нет реальных данных о готовых товарах
                    defectsPlace: `C${index + 1}-${itemIndex + 1}-3`,
                    defectsQuantity: 0, // Нет реальных данных о браке
                    sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-3`,
                    sellerSuppliesQuantity: Math.floor(itemSuppliesQuantity * 0.2), // Оставшаяся часть расходников
                    sellerSuppliesOwners: suppliesOwners, // Владельцы расходников (ИСПРАВЛЕНО)
                    pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-3`,
                    pvzReturnsQuantity: 0, // Нет реальных данных о возвратах
                  },
                ]
              : [],
        }
      })

      // Подсчитываем реальные суммы на основе товаров партнера
      const totalProducts = items.reduce((sum, item) => sum + item.productQuantity, 0)
      const totalGoods = items.reduce((sum, item) => sum + item.goodsQuantity, 0)
      const totalDefects = items.reduce((sum, item) => sum + item.defectsQuantity, 0)

      // Используем реальные данные из товаров для расходников селлера
      const totalSellerSupplies = items.reduce((sum, item) => sum + item.sellerSuppliesQuantity, 0)
      const totalPvzReturns = items.reduce((sum, item) => sum + item.pvzReturnsQuantity, 0)

      // Логирование общих сумм виртуального партнера
      const partnerName = sellerPartners[index]
        ? sellerPartners[index].name || sellerPartners[index].fullName || `Селлер ${index + 1}`
        : `Склад ${index + 1}`

      console.warn(`🏪 Партнер "${partnerName}":`, {
        totalProducts,
        totalGoods,
        totalDefects,
        totalSellerSupplies,
        totalPvzReturns,
        itemsCount: items.length,
        itemsWithSupplies: items.filter((item) => item.sellerSuppliesQuantity > 0).length,
        productNames: items.map((item) => item.name),
        hasRealPartner: !!sellerPartners[index],
      })

      // Рассчитываем изменения расходников для этого партнера
      // Распределяем общие поступления пропорционально количеству расходников партнера
      const totalVirtualPartners = Math.max(
        1,
        Math.min(sellerPartners.length, Math.ceil(uniqueProductNames.length / 8)),
      )

      // Нет данных об изменениях продуктов для этого партнера
      const partnerProductsChange = 0

      // Реальные изменения расходников селлера для этого партнера
      const partnerSuppliesChange =
        totalSellerSupplies > 0
          ? Math.floor(
              (totalSellerSupplies /
                (sellerSupplies.reduce((sum: number, supply: any) => sum + (supply.currentStock || 0), 0) || 1)) *
                (suppliesReceivedToday - suppliesUsedToday),
            )
          : Math.floor((suppliesReceivedToday - suppliesUsedToday) / totalVirtualPartners)

      return {
        id: `virtual-partner-${index + 1}`,
        name: sellerPartners[index]
          ? sellerPartners[index].name || sellerPartners[index].fullName || `Селлер ${index + 1}`
          : `Склад ${index + 1}`, // Только если нет реального партнера
        avatar:
          sellerPartners[index]?.users?.[0]?.avatar ||
          `https://images.unsplash.com/photo-15312974840${index + 1}?w=100&h=100&fit=crop&crop=face`,
        products: totalProducts, // Реальная сумма товаров
        goods: totalGoods, // Реальная сумма готовых к отправке
        defects: totalDefects, // Реальная сумма брака
        sellerSupplies: totalSellerSupplies, // Реальная сумма расходников селлера
        pvzReturns: totalPvzReturns, // Реальная сумма возвратов
        productsChange: partnerProductsChange, // Реальные изменения товаров
        goodsChange: 0, // Нет реальных данных о готовых товарах
        defectsChange: 0, // Нет реальных данных о браке
        sellerSuppliesChange: partnerSuppliesChange, // Реальные изменения расходников
        pvzReturnsChange: 0, // Нет реальных данных о возвратах
        items,
      }
    })
  }, [sellerPartners, allProducts, sellerSupplies, suppliesReceivedToday])

  // Функции для аватаров магазинов
  const getInitials = (name: string): string => {
    return name
      .split(' ')
      .map((word) => word.charAt(0))
      .join('')
      .toUpperCase()
      .slice(0, 2)
  }

  const getColorForStore = (storeId: string): string => {
    const colors = [
      'bg-blue-500',
      'bg-green-500',
      'bg-purple-500',
      'bg-orange-500',
      'bg-pink-500',
      'bg-indigo-500',
      'bg-teal-500',
      'bg-red-500',
      'bg-yellow-500',
      'bg-cyan-500',
    ]
    const hash = storeId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
    return colors[hash % colors.length]
  }

  // Уникальные цветовые схемы для каждого магазина
  const getColorScheme = (storeId: string) => {
    const colorSchemes = {
      '1': {
        // Первый поставщик - Синий
        bg: 'bg-blue-500/5',
        border: 'border-blue-500/30',
        borderLeft: 'border-l-blue-400',
        text: 'text-blue-100',
        indicator: 'bg-blue-400 border-blue-300',
        hover: 'hover:bg-blue-500/10',
        header: 'bg-blue-500/20 border-blue-500/40',
      },
      '2': {
        // Второй поставщик - Розовый
        bg: 'bg-pink-500/5',
        border: 'border-pink-500/30',
        borderLeft: 'border-l-pink-400',
        text: 'text-pink-100',
        indicator: 'bg-pink-400 border-pink-300',
        hover: 'hover:bg-pink-500/10',
        header: 'bg-pink-500/20 border-pink-500/40',
      },
      '3': {
        // Третий поставщик - Зеленый
        bg: 'bg-emerald-500/5',
        border: 'border-emerald-500/30',
        borderLeft: 'border-l-emerald-400',
        text: 'text-emerald-100',
        indicator: 'bg-emerald-400 border-emerald-300',
        hover: 'hover:bg-emerald-500/10',
        header: 'bg-emerald-500/20 border-emerald-500/40',
      },
      '4': {
        // Четвертый поставщик - Фиолетовый
        bg: 'bg-purple-500/5',
        border: 'border-purple-500/30',
        borderLeft: 'border-l-purple-400',
        text: 'text-purple-100',
        indicator: 'bg-purple-400 border-purple-300',
        hover: 'hover:bg-purple-500/10',
        header: 'bg-purple-500/20 border-purple-500/40',
      },
      '5': {
        // Пятый поставщик - Оранжевый
        bg: 'bg-orange-500/5',
        border: 'border-orange-500/30',
        borderLeft: 'border-l-orange-400',
        text: 'text-orange-100',
        indicator: 'bg-orange-400 border-orange-300',
        hover: 'hover:bg-orange-500/10',
        header: 'bg-orange-500/20 border-orange-500/40',
      },
      '6': {
        // Шестой поставщик - Индиго
        bg: 'bg-indigo-500/5',
        border: 'border-indigo-500/30',
        borderLeft: 'border-l-indigo-400',
        text: 'text-indigo-100',
        indicator: 'bg-indigo-400 border-indigo-300',
        hover: 'hover:bg-indigo-500/10',
        header: 'bg-indigo-500/20 border-indigo-500/40',
      },
    }

    // Если у нас больше поставщиков чем цветовых схем, используем циклический выбор
    const schemeKeys = Object.keys(colorSchemes)
    const schemeIndex = (parseInt(storeId) - 1) % schemeKeys.length
    const selectedKey = schemeKeys[schemeIndex] || '1'

    return colorSchemes[selectedKey as keyof typeof colorSchemes] || colorSchemes['1']
  }

  // Фильтрация и сортировка данных
  const filteredAndSortedStores = useMemo(() => {
    console.warn('🔍 Фильтрация поставщиков:', {
      storeDataLength: storeData.length,
      searchTerm,
      sortField,
      sortOrder,
    })

    const filtered = storeData.filter((store) => store.name.toLowerCase().includes(searchTerm.toLowerCase()))

    console.warn('📋 Отфильтрованные поставщики:', {
      filteredLength: filtered.length,
      storeNames: filtered.map((s) => s.name),
    })

    filtered.sort((a, b) => {
      const aValue = a[sortField]
      const bValue = b[sortField]

      if (typeof aValue === 'string' && typeof bValue === 'string') {
        return sortOrder === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
      }

      if (typeof aValue === 'number' && typeof bValue === 'number') {
        return sortOrder === 'asc' ? aValue - bValue : bValue - aValue
      }

      return 0
    })

    return filtered
  }, [searchTerm, sortField, sortOrder, storeData])

  // Подсчет общих сумм
  const totals = useMemo(() => {
    return filteredAndSortedStores.reduce(
      (acc, store) => ({
        products: acc.products + store.products,
        goods: acc.goods + store.goods,
        defects: acc.defects + store.defects,
        sellerSupplies: acc.sellerSupplies + store.sellerSupplies,
        pvzReturns: acc.pvzReturns + store.pvzReturns,
        productsChange: acc.productsChange + store.productsChange,
        goodsChange: acc.goodsChange + store.goodsChange,
        defectsChange: acc.defectsChange + store.defectsChange,
        sellerSuppliesChange: acc.sellerSuppliesChange + store.sellerSuppliesChange,
        pvzReturnsChange: acc.pvzReturnsChange + store.pvzReturnsChange,
      }),
      {
        products: 0,
        goods: 0,
        defects: 0,
        sellerSupplies: 0,
        pvzReturns: 0,
        productsChange: 0,
        goodsChange: 0,
        defectsChange: 0,
        sellerSuppliesChange: 0,
        pvzReturnsChange: 0,
      },
    )
  }, [filteredAndSortedStores])

  const formatNumber = (num: number) => {
    return num.toLocaleString('ru-RU')
  }

  const formatChange = (change: number) => {
    const sign = change > 0 ? '+' : ''
    return `${sign}${change}`
  }

  const toggleStoreExpansion = (storeId: string) => {
    const newExpanded = new Set(expandedStores)
    if (newExpanded.has(storeId)) {
      newExpanded.delete(storeId)
    } else {
      newExpanded.add(storeId)
    }
    setExpandedStores(newExpanded)
  }

  const toggleItemExpansion = (itemId: string) => {
    const newExpanded = new Set(expandedItems)
    if (newExpanded.has(itemId)) {
      newExpanded.delete(itemId)
    } else {
      newExpanded.add(itemId)
    }
    setExpandedItems(newExpanded)
  }

  const handleSort = (field: keyof StoreData) => {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
    } else {
      setSortField(field)
      setSortOrder('asc')
    }
  }

  // Компонент компактной статистической карточки
  const StatCard = ({
    title,
    icon: Icon,
    current,
    change,
    percentChange,
    description,
    onClick,
  }: {
    title: string
    icon: React.ComponentType<{ className?: string }>
    current: number
    change: number
    percentChange?: number
    description: string
    onClick?: () => void
  }) => {
    // Используем percentChange из GraphQL, если доступно, иначе вычисляем локально
    const displayPercentChange =
      percentChange !== undefined && percentChange !== null && !isNaN(percentChange)
        ? percentChange
        : current > 0
          ? (change / current) * 100
          : 0

    return (
      <div
        className={`glass-card p-3 hover:bg-white/15 transition-all duration-300 relative overflow-hidden ${
          onClick ? 'cursor-pointer hover:scale-105' : ''
        }`}
        onClick={onClick}
      >
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center space-x-2">
            <div className="p-1.5 bg-white/10 rounded-lg">
              <Icon className="h-3 w-3 text-white" />
            </div>
            <span className="text-white text-xs font-semibold">{title}</span>
          </div>
          {/* Процентное изменение - всегда показываем */}
          <div className="flex items-center space-x-0.5 px-1.5 py-0.5 rounded bg-blue-500/20">
            {change >= 0 ? (
              <TrendingUp className="h-3 w-3 text-green-400" />
            ) : (
              <TrendingDown className="h-3 w-3 text-red-400" />
            )}
            <span className={`text-xs font-bold ${change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
              {displayPercentChange.toFixed(1)}%
            </span>
          </div>
        </div>
        <div className="flex items-center justify-between mb-1">
          <div className="text-lg font-bold text-white">{formatNumber(current)}</div>
          {/* Изменения - всегда показываем */}
          <div className="flex items-center space-x-1">
            <div
              className={`flex items-center space-x-0.5 px-1 py-0.5 rounded ${
                change >= 0 ? 'bg-green-500/20' : 'bg-red-500/20'
              }`}
            >
              <span className={`text-xs font-bold ${change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                {change >= 0 ? '+' : ''}
                {change}
              </span>
            </div>
          </div>
        </div>
        <div className="text-white/60 text-[10px]">{description}</div>
        {onClick && (
          <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
            <ChevronRight className="h-3 w-3 text-white/60" />
          </div>
        )}
      </div>
    )
  }

  // Компонент заголовка таблицы
  const TableHeader = ({
    field,
    children,
    sortable = false,
  }: {
    field?: keyof StoreData
    children: React.ReactNode
    sortable?: boolean
  }) => (
    <div
      className={`px-3 py-2 text-left text-xs font-medium text-blue-100 uppercase tracking-wider ${
        sortable ? 'cursor-pointer hover:text-white hover:bg-blue-500/10' : ''
      } flex items-center space-x-1`}
      onClick={sortable && field ? () => handleSort(field) : undefined}
    >
      <span>{children}</span>
      {sortable && field && (
        <ArrowUpDown className={`h-3 w-3 ${sortField === field ? 'text-blue-400' : 'text-white/40'}`} />
      )}
      {field === 'pvzReturns' && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            setShowAdditionalValues(!showAdditionalValues)
          }}
          className="p-1 rounded hover:bg-orange-500/20 transition-colors border border-orange-500/30 bg-orange-500/10 ml-2"
          title={showAdditionalValues ? 'Скрыть дополнительные значения' : 'Показать дополнительные значения'}
        >
          {showAdditionalValues ? (
            <Eye className="h-3 w-3 text-orange-400 hover:text-orange-300" />
          ) : (
            <EyeOff className="h-3 w-3 text-orange-400 hover:text-orange-300" />
          )}
        </button>
      )}
    </div>
  )

  // Индикатор загрузки
  if (counterpartiesLoading || ordersLoading || productsLoading || sellerSuppliesLoading) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex items-center justify-center`}>
          <div className="flex items-center space-x-3">
            <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
            <span className="text-white/60">Загрузка данных склада...</span>
          </div>
        </main>
      </div>
    )
  }

  // Индикатор ошибки
  if (counterpartiesError || ordersError || productsError) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex items-center justify-center`}>
          <div className="text-center">
            <AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
            <p className="text-red-400 font-medium">Ошибка загрузки данных склада</p>
            <p className="text-white/60 text-sm mt-2">
              {counterpartiesError?.message || ordersError?.message || productsError?.message}
            </p>
          </div>
        </main>
      </div>
    )
  }

  // Если показываем заявки на возврат, отображаем соответствующий компонент
  if (showReturnClaims) {
    return (
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-2 py-2 overflow-hidden transition-all duration-300`}>
          <div className="h-full bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl">
            <WbReturnClaims onBack={() => setShowReturnClaims(false)} />
          </div>
        </main>
      </div>
    )
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col transition-all duration-300`}>
        {/* Компактная статичная верхняя секция со статистикой - максимум 30% экрана */}
        <div className="flex-shrink-0 mb-4" style={{ maxHeight: '30vh' }}>
          <div className="glass-card p-4">
            <div className="flex items-center justify-between mb-3">
              <h2 className="text-base font-semibold text-blue-400">Статистика склада</h2>
              {/* Индикатор обновления данных */}
              <div className="flex items-center space-x-3">
                <div className="flex items-center space-x-2 text-xs text-white/60">
                  <Clock className="h-3 w-3" />
                  <span>Обновлено из поставок</span>
                  {supplyOrders.filter((o) => o.status === 'DELIVERED').length > 0 && (
                    <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
                      {supplyOrders.filter((o) => o.status === 'DELIVERED').length} поставок получено
                    </Badge>
                  )}
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 text-xs bg-white/10 border-white/20 text-white hover:bg-white/20"
                  onClick={() => {
                    refetchCounterparties()
                    refetchOrders()
                    refetchProducts()
                    refetchSupplies() // Добавляем обновление расходников
                    toast.success('Данные склада обновлены')
                  }}
                  disabled={counterpartiesLoading || ordersLoading || productsLoading || sellerSuppliesLoading}
                >
                  <RotateCcw className="h-3 w-3 mr-1" />
                  Обновить
                </Button>
              </div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3">
              <StatCard
                title="Продукты"
                icon={Box}
                current={warehouseStats.products.current}
                change={warehouseStats.products.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.products?.percentChange}
                description="Готовые к отправке"
              />
              <StatCard
                title="Товары"
                icon={Package}
                current={warehouseStats.goods.current}
                change={warehouseStats.goods.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.goods?.percentChange}
                description="На складе и в обработке"
              />
              <StatCard
                title="Брак"
                icon={AlertTriangle}
                current={warehouseStats.defects.current}
                change={warehouseStats.defects.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.defects?.percentChange}
                description="Требует утилизации"
              />
              <StatCard
                title="Возвраты с ПВЗ"
                icon={RotateCcw}
                current={warehouseStats.pvzReturns.current}
                change={warehouseStats.pvzReturns.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.pvzReturns?.percentChange}
                description="К обработке"
                onClick={() => setShowReturnClaims(true)}
              />
              <StatCard
                title="Расходники селлеров"
                icon={Users}
                current={warehouseStats.sellerSupplies.current}
                change={warehouseStats.sellerSupplies.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.sellerSupplies?.percentChange}
                description="Материалы клиентов"
              />
              <StatCard
                title="Расходники фулфилмента"
                icon={Wrench}
                current={warehouseStats.fulfillmentSupplies.current}
                change={warehouseStats.fulfillmentSupplies.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.fulfillmentSupplies?.percentChange}
                description="Операционные материалы"
                onClick={() => router.push('/fulfillment-warehouse/supplies')}
              />
            </div>
          </div>
        </div>

        {/* Основная скроллируемая часть - оставшиеся 70% экрана */}
        <div className="flex-1 flex flex-col overflow-hidden" style={{ minHeight: '60vh' }}>
          <div className="glass-card flex-1 flex flex-col overflow-hidden">
            {/* Компактная шапка таблицы - максимум 10% экрана */}
            <div className="p-4 border-b border-white/10 flex-shrink-0" style={{ maxHeight: '10vh' }}>
              <div className="flex items-center justify-between">
                <h2 className="text-base font-semibold text-white flex items-center space-x-2">
                  <Store className="h-4 w-4 text-blue-400" />
                  <span>Детализация по Магазинам</span>
                  <div className="flex items-center space-x-1 text-xs text-white/60">
                    <div className="flex items-center space-x-1">
                      <div className="flex space-x-0.5">
                        <div className="w-2 h-2 bg-blue-400 rounded"></div>
                        <div className="w-2 h-2 bg-pink-400 rounded"></div>
                        <div className="w-2 h-2 bg-emerald-400 rounded"></div>
                      </div>
                      <span>Магазины</span>
                    </div>
                    <ChevronRight className="h-3 w-3" />
                    <div className="flex items-center space-x-1">
                      <div className="w-2 h-2 bg-green-500 rounded"></div>
                      <span>Товары</span>
                    </div>
                  </div>
                </h2>

                {/* Компактный поиск */}
                <div className="relative mx-2.5 flex-1 max-w-xs">
                  <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-white/40" />
                  <div className="flex space-x-2">
                    <Input
                      placeholder="Поиск по магазинам..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-8 h-8 text-sm glass-input text-white placeholder:text-white/40 flex-1"
                    />
                    <Button
                      size="sm"
                      className="h-8 px-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border border-blue-500/30 text-xs"
                    >
                      Поиск
                    </Button>
                  </div>
                </div>

                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 text-xs">
                  {filteredAndSortedStores.length} магазинов
                </Badge>
              </div>
            </div>

            {/* Фиксированные заголовки таблицы - Уровень 1 (Поставщики) */}
            <div className="flex-shrink-0 bg-blue-500/20 border-b border-blue-500/40">
              <div className="grid grid-cols-6 gap-0">
                <TableHeader field="name" sortable>
                  № / Магазин
                </TableHeader>
                <TableHeader field="products" sortable>
                  Продукты
                </TableHeader>
                <TableHeader field="goods" sortable>
                  Товары
                </TableHeader>
                <TableHeader field="defects" sortable>
                  Брак
                </TableHeader>
                <TableHeader field="sellerSupplies" sortable>
                  Расходники селлера
                </TableHeader>
                <TableHeader field="pvzReturns" sortable>
                  Возвраты с ПВЗ
                </TableHeader>
              </div>
            </div>

            {/* Строка с суммами - Уровень 1 (Поставщики) */}
            <div className="flex-shrink-0 bg-blue-500/25 border-b border-blue-500/50">
              <div className="grid grid-cols-6 gap-0">
                <div className="px-3 py-2 text-xs font-bold text-blue-300">
                  ИТОГО ({filteredAndSortedStores.length})
                </div>
                <div className="px-3 py-2 text-xs font-bold text-white">
                  <div className="flex items-center justify-between">
                    <span>{formatNumber(totals.products)}</span>
                    <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-blue-500/20">
                      {totals.productsChange >= 0 ? (
                        <TrendingUp className="h-2 w-2 text-green-400" />
                      ) : (
                        <TrendingDown className="h-2 w-2 text-red-400" />
                      )}
                      <span
                        className={`text-[9px] font-bold ${
                          totals.productsChange >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                      >
                        {totals.products > 0 ? ((totals.productsChange / totals.products) * 100).toFixed(1) : '0.0'}%
                      </span>
                    </div>
                  </div>
                  {showAdditionalValues && (
                    <div className="flex items-center justify-end space-x-1">
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-green-400">
                          +0 {/* ТЕСТ: Временно захардкожено для проверки */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -0 {/* ТЕСТ: Временно захардкожено для проверки */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-white">{Math.abs(totals.productsChange)}</span>
                      </div>
                    </div>
                  )}
                </div>
                <div className="px-3 py-2 text-xs font-bold text-white">
                  <div className="flex items-center justify-between">
                    <span>{formatNumber(totals.goods)}</span>
                    <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-blue-500/20">
                      {totals.goodsChange >= 0 ? (
                        <TrendingUp className="h-2 w-2 text-green-400" />
                      ) : (
                        <TrendingDown className="h-2 w-2 text-red-400" />
                      )}
                      <span
                        className={`text-[9px] font-bold ${
                          totals.goodsChange >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                      >
                        {totals.goods > 0 ? ((totals.goodsChange / totals.goods) * 100).toFixed(1) : '0.0'}%
                      </span>
                    </div>
                  </div>
                  {showAdditionalValues && (
                    <div className="flex items-center justify-end space-x-1">
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-green-400">
                          +0 {/* Нет реальных данных о готовых товарах */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -0 {/* Нет реальных данных о готовых товарах */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-white">{Math.abs(totals.goodsChange)}</span>
                      </div>
                    </div>
                  )}
                </div>
                <div className="px-3 py-2 text-xs font-bold text-white">
                  <div className="flex items-center justify-between">
                    <span>{formatNumber(totals.defects)}</span>
                    <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-blue-500/20">
                      {totals.defectsChange >= 0 ? (
                        <TrendingUp className="h-2 w-2 text-green-400" />
                      ) : (
                        <TrendingDown className="h-2 w-2 text-red-400" />
                      )}
                      <span
                        className={`text-[9px] font-bold ${
                          totals.defectsChange >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                      >
                        {totals.defects > 0 ? ((totals.defectsChange / totals.defects) * 100).toFixed(1) : '0.0'}%
                      </span>
                    </div>
                  </div>
                  {showAdditionalValues && (
                    <div className="flex items-center justify-end space-x-1">
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-green-400">
                          +0 {/* Нет реальных данных о браке */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -0 {/* Нет реальных данных о браке */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-white">{Math.abs(totals.defectsChange)}</span>
                      </div>
                    </div>
                  )}
                </div>
                <div className="px-3 py-2 text-xs font-bold text-white">
                  <div className="flex items-center justify-between">
                    <span>{formatNumber(totals.sellerSupplies)}</span>
                    <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-blue-500/20">
                      {totals.sellerSuppliesChange >= 0 ? (
                        <TrendingUp className="h-2 w-2 text-green-400" />
                      ) : (
                        <TrendingDown className="h-2 w-2 text-red-400" />
                      )}
                      <span
                        className={`text-[9px] font-bold ${
                          totals.sellerSuppliesChange >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                      >
                        {totals.sellerSupplies > 0
                          ? ((totals.sellerSuppliesChange / totals.sellerSupplies) * 100).toFixed(1)
                          : '0.0'}
                        %
                      </span>
                    </div>
                  </div>
                  {showAdditionalValues && (
                    <div className="flex items-center justify-end space-x-1">
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-green-400">
                          +{Math.max(totals.sellerSuppliesChange, 0)}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -{Math.max(-totals.sellerSuppliesChange, 0)}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-white">{Math.abs(totals.sellerSuppliesChange)}</span>
                      </div>
                    </div>
                  )}
                </div>
                <div className="px-3 py-2 text-xs font-bold text-white">
                  <div className="flex items-center justify-between">
                    <span>{formatNumber(totals.pvzReturns)}</span>
                    <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-blue-500/20">
                      {totals.pvzReturnsChange >= 0 ? (
                        <TrendingUp className="h-2 w-2 text-green-400" />
                      ) : (
                        <TrendingDown className="h-2 w-2 text-red-400" />
                      )}
                      <span
                        className={`text-[9px] font-bold ${
                          totals.pvzReturnsChange >= 0 ? 'text-green-400' : 'text-red-400'
                        }`}
                      >
                        {totals.pvzReturns > 0
                          ? ((totals.pvzReturnsChange / totals.pvzReturns) * 100).toFixed(1)
                          : '0.0'}
                        %
                      </span>
                    </div>
                  </div>
                  {showAdditionalValues && (
                    <div className="flex items-center justify-end space-x-1">
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-green-400">
                          +0 {/* Нет реальных данных о возвратах с ПВЗ */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -0 {/* Нет реальных данных о возвратах с ПВЗ */}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-white">{Math.abs(totals.pvzReturnsChange)}</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Скроллируемый контент таблицы - оставшееся пространство */}
            <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
              {filteredAndSortedStores.length === 0 ? (
                <div className="flex items-center justify-center h-full">
                  <div className="text-center">
                    <Package className="h-12 w-12 text-white/40 mx-auto mb-4" />
                    <p className="text-white/60 font-medium">
                      {sellerPartners.length === 0
                        ? 'Нет магазинов'
                        : allProducts.length === 0
                          ? 'Нет товаров на складе'
                          : 'Магазины не найдены'}
                    </p>
                    <p className="text-white/40 text-sm mt-2">
                      {sellerPartners.length === 0
                        ? 'Добавьте магазины для отображения данных склада'
                        : allProducts.length === 0
                          ? 'Добавьте товары на склад для отображения данных'
                          : searchTerm
                            ? 'Попробуйте изменить поисковый запрос'
                            : 'Данные о магазинах будут отображены здесь'}
                    </p>
                  </div>
                </div>
              ) : (
                filteredAndSortedStores.map((store, index) => {
                  const colorScheme = getColorScheme(store.id)
                  return (
                    <div
                      key={store.id}
                      className={`border-b ${colorScheme.border} ${colorScheme.hover} transition-colors border-l-8 ${colorScheme.borderLeft} ${colorScheme.bg} shadow-sm hover:shadow-md`}
                    >
                      {/* Основная строка поставщика */}
                      <div
                        className="grid grid-cols-6 gap-0 cursor-pointer"
                        onClick={() => toggleStoreExpansion(store.id)}
                      >
                        <div className="px-3 py-2.5 flex items-center space-x-2">
                          <span className="text-white/60 text-xs">{filteredAndSortedStores.length - index}</span>
                          <div className="flex items-center space-x-2">
                            <Avatar className="w-6 h-6">
                              {store.avatar && <AvatarImage src={store.avatar} alt={store.name} />}
                              <AvatarFallback
                                className={`${getColorForStore(store.id)} text-white font-medium text-xs`}
                              >
                                {getInitials(store.name)}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <div className="text-white font-medium text-xs flex items-center space-x-2">
                                <div className={`w-3 h-3 ${colorScheme.indicator} rounded flex-shrink-0 border`}></div>
                                <span className={colorScheme.text}>{store.name}</span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div className="px-3 py-2.5">
                          <div className="flex items-center justify-between">
                            <div className={`${colorScheme.text} font-bold text-sm`}>
                              {formatNumber(store.products)}
                            </div>
                            {showAdditionalValues && (
                              <div className="flex items-center space-x-1">
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-green-400">
                                    +{Math.max(0, store.productsChange)} {/* Поступило товаров */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -{Math.max(0, -store.productsChange)} {/* Использовано товаров */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-white">
                                    {Math.abs(store.productsChange)}
                                  </span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="px-3 py-2.5">
                          <div className="flex items-center justify-between">
                            <div className={`${colorScheme.text} font-bold text-sm`}>{formatNumber(store.goods)}</div>
                            {showAdditionalValues && (
                              <div className="flex items-center space-x-1">
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-green-400">
                                    +0 {/* Нет реальных данных о готовых товарах */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -0 {/* Нет реальных данных о готовых товарах */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-white">{Math.abs(store.goodsChange)}</span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="px-3 py-2.5">
                          <div className="flex items-center justify-between">
                            <div className={`${colorScheme.text} font-bold text-sm`}>{formatNumber(store.defects)}</div>
                            {showAdditionalValues && (
                              <div className="flex items-center space-x-1">
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-green-400">
                                    +0 {/* Нет реальных данных о браке */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -0 {/* Нет реальных данных о браке */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-white">
                                    {Math.abs(store.defectsChange)}
                                  </span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="px-3 py-2.5">
                          <div className="flex items-center justify-between">
                            <div className={`${colorScheme.text} font-bold text-sm`}>
                              {formatNumber(store.sellerSupplies)}
                            </div>
                            {showAdditionalValues && (
                              <div className="flex items-center space-x-1">
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-green-400">
                                    +{Math.max(0, store.sellerSuppliesChange)} {/* Поступило расходников */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -{Math.max(0, -store.sellerSuppliesChange)} {/* Использовано расходников */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-white">
                                    {Math.abs(store.sellerSuppliesChange)}
                                  </span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="px-3 py-2.5">
                          <div className="flex items-center justify-between">
                            <div className={`${colorScheme.text} font-bold text-sm`}>
                              {formatNumber(store.pvzReturns)}
                            </div>
                            {showAdditionalValues && (
                              <div className="flex items-center space-x-1">
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-green-400">
                                    +0 {/* Нет реальных данных о возвратах с ПВЗ */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -0 {/* Нет реальных данных о возвратах с ПВЗ */}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-white">
                                    {Math.abs(store.pvzReturnsChange)}
                                  </span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>

                      {/* Второй уровень - детализация по товарам */}
                      {expandedStores.has(store.id) && (
                        <div className="bg-green-500/5 border-t border-green-500/20">
                          {/* Статическая часть - заголовки столбцов второго уровня */}
                          <div className="border-b border-green-500/20 bg-green-500/10">
                            <div className="grid grid-cols-6 gap-0">
                              <div className="px-3 py-2 text-xs font-medium text-green-200 uppercase tracking-wider">
                                Наименование
                              </div>
                              <div className="grid grid-cols-2 gap-0">
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Кол-во
                                </div>
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Место
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-0">
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Кол-во
                                </div>
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Место
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-0">
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Кол-во
                                </div>
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Место
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-0">
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Кол-во
                                </div>
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Место
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-0">
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Кол-во
                                </div>
                                <div className="px-1 py-2 text-xs font-medium text-green-200 uppercase tracking-wider text-center">
                                  Место
                                </div>
                              </div>
                            </div>
                          </div>

                          {/* Динамическая часть - данные по товарам (скроллируемая) */}
                          <div className="max-h-64 overflow-y-auto scrollbar-thin scrollbar-thumb-green-500/30 scrollbar-track-transparent">
                            {store.items?.map((item) => (
                              <div key={item.id}>
                                {/* Основная строка товара */}
                                <div
                                  className="border-b border-green-500/15 hover:bg-green-500/10 transition-colors cursor-pointer border-l-4 border-l-green-500/40 ml-4"
                                  onClick={() => toggleItemExpansion(item.id)}
                                >
                                  <div className="grid grid-cols-6 gap-0">
                                    {/* Наименование */}
                                    <div className="px-3 py-2 flex items-center">
                                      <div className="flex-1">
                                        <div className="text-white font-medium text-xs flex items-center space-x-2">
                                          <div className="w-2 h-2 bg-green-500 rounded flex-shrink-0"></div>
                                          <span>{item.name}</span>
                                          {item.variants && item.variants.length > 0 && (
                                            <Badge
                                              variant="secondary"
                                              className="bg-orange-500/20 text-orange-300 text-[9px] px-1 py-0"
                                            >
                                              {item.variants.length} вар.
                                            </Badge>
                                          )}
                                        </div>
                                        <div className="text-white/60 text-[10px]">{item.article}</div>
                                      </div>
                                    </div>

                                    {/* Продукты */}
                                    <div className="grid grid-cols-2 gap-0">
                                      <div className="px-1 py-2 text-center text-xs text-white font-medium">
                                        {formatNumber(item.productQuantity)}
                                      </div>
                                      <div className="px-1 py-2 text-center text-xs text-white/60">
                                        {item.productPlace || '-'}
                                      </div>
                                    </div>

                                    {/* Товары */}
                                    <div className="grid grid-cols-2 gap-0">
                                      <div className="px-1 py-2 text-center text-xs text-white font-medium">
                                        {formatNumber(item.goodsQuantity)}
                                      </div>
                                      <div className="px-1 py-2 text-center text-xs text-white/60">
                                        {item.goodsPlace || '-'}
                                      </div>
                                    </div>

                                    {/* Брак */}
                                    <div className="grid grid-cols-2 gap-0">
                                      <div className="px-1 py-2 text-center text-xs text-white font-medium">
                                        {formatNumber(item.defectsQuantity)}
                                      </div>
                                      <div className="px-1 py-2 text-center text-xs text-white/60">
                                        {item.defectsPlace || '-'}
                                      </div>
                                    </div>

                                    {/* Расходники селлера */}
                                    <div className="grid grid-cols-2 gap-0">
                                      <Popover>
                                        <PopoverTrigger asChild>
                                          <div className="px-1 py-2 text-center text-xs text-white font-medium cursor-help hover:bg-white/10 rounded">
                                            {formatNumber(item.sellerSuppliesQuantity)}
                                          </div>
                                        </PopoverTrigger>
                                        <PopoverContent className="w-64 glass-card">
                                          <div className="text-xs">
                                            <div className="font-medium mb-2 text-white">Расходники селлеров:</div>
                                            {item.sellerSuppliesOwners && item.sellerSuppliesOwners.length > 0 ? (
                                              <div className="space-y-1">
                                                {item.sellerSuppliesOwners.map((owner, i) => (
                                                  <div key={i} className="text-white/80 flex items-center">
                                                    <div className="w-2 h-2 bg-purple-500 rounded-full mr-2 flex-shrink-0"></div>
                                                    {owner}
                                                  </div>
                                                ))}
                                              </div>
                                            ) : (
                                              <div className="text-white/60">Нет данных о владельцах</div>
                                            )}
                                          </div>
                                        </PopoverContent>
                                      </Popover>
                                      <div className="px-1 py-2 text-center text-xs text-white/60">
                                        {item.sellerSuppliesPlace || '-'}
                                      </div>
                                    </div>

                                    {/* Возвраты с ПВЗ */}
                                    <div className="grid grid-cols-2 gap-0">
                                      <div className="px-1 py-2 text-center text-xs text-white font-medium">
                                        {formatNumber(item.pvzReturnsQuantity)}
                                      </div>
                                      <div className="px-1 py-2 text-center text-xs text-white/60">
                                        {item.pvzReturnsPlace || '-'}
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                {/* Третий уровень - варианты товара */}
                                {expandedItems.has(item.id) && item.variants && item.variants.length > 0 && (
                                  <div className="bg-orange-500/5 border-t border-orange-500/20">
                                    {/* Заголовки для вариантов */}
                                    <div className="border-b border-orange-500/20 bg-orange-500/10">
                                      <div className="grid grid-cols-6 gap-0">
                                        <div className="px-3 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider">
                                          Вариант
                                        </div>
                                        <div className="grid grid-cols-2 gap-0">
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Кол-во
                                          </div>
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Место
                                          </div>
                                        </div>
                                        <div className="grid grid-cols-2 gap-0">
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Кол-во
                                          </div>
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Место
                                          </div>
                                        </div>
                                        <div className="grid grid-cols-2 gap-0">
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Кол-во
                                          </div>
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Место
                                          </div>
                                        </div>
                                        <div className="grid grid-cols-2 gap-0">
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Кол-во
                                          </div>
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Место
                                          </div>
                                        </div>
                                        <div className="grid grid-cols-2 gap-0">
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Кол-во
                                          </div>
                                          <div className="px-1 py-1.5 text-[10px] font-medium text-orange-200 uppercase tracking-wider text-center">
                                            Место
                                          </div>
                                        </div>
                                      </div>
                                    </div>

                                    {/* Данные по вариантам */}
                                    <div className="max-h-32 overflow-y-auto scrollbar-thin scrollbar-thumb-orange-500/30 scrollbar-track-transparent">
                                      {item.variants.map((variant) => (
                                        <div
                                          key={variant.id}
                                          className="border-b border-orange-500/15 hover:bg-orange-500/10 transition-colors border-l-4 border-l-orange-500/50 ml-8"
                                        >
                                          <div className="grid grid-cols-6 gap-0">
                                            {/* Название варианта */}
                                            <div className="px-3 py-1.5">
                                              <div className="text-white font-medium text-[10px] flex items-center space-x-2">
                                                <div className="w-1.5 h-1.5 bg-orange-500 rounded flex-shrink-0"></div>
                                                <span>{variant.name}</span>
                                              </div>
                                            </div>

                                            {/* Продукты */}
                                            <div className="grid grid-cols-2 gap-0">
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium">
                                                {formatNumber(variant.productQuantity)}
                                              </div>
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white/60">
                                                {variant.productPlace || '-'}
                                              </div>
                                            </div>

                                            {/* Товары */}
                                            <div className="grid grid-cols-2 gap-0">
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium">
                                                {formatNumber(variant.goodsQuantity)}
                                              </div>
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white/60">
                                                {variant.goodsPlace || '-'}
                                              </div>
                                            </div>

                                            {/* Брак */}
                                            <div className="grid grid-cols-2 gap-0">
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium">
                                                {formatNumber(variant.defectsQuantity)}
                                              </div>
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white/60">
                                                {variant.defectsPlace || '-'}
                                              </div>
                                            </div>

                                            {/* Расходники селлера */}
                                            <div className="grid grid-cols-2 gap-0">
                                              <Popover>
                                                <PopoverTrigger asChild>
                                                  <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium cursor-help hover:bg-white/10 rounded">
                                                    {formatNumber(variant.sellerSuppliesQuantity)}
                                                  </div>
                                                </PopoverTrigger>
                                                <PopoverContent className="w-64 glass-card">
                                                  <div className="text-xs">
                                                    <div className="font-medium mb-2 text-white">
                                                      Расходники селлеров:
                                                    </div>
                                                    {variant.sellerSuppliesOwners &&
                                                    variant.sellerSuppliesOwners.length > 0 ? (
                                                      <div className="space-y-1">
                                                        {variant.sellerSuppliesOwners.map((owner, i) => (
                                                          <div key={i} className="text-white/80 flex items-center">
                                                            <div className="w-2 h-2 bg-purple-500 rounded-full mr-2 flex-shrink-0"></div>
                                                            {owner}
                                                          </div>
                                                        ))}
                                                      </div>
                                                    ) : (
                                                      <div className="text-white/60">Нет данных о владельцах</div>
                                                    )}
                                                  </div>
                                                </PopoverContent>
                                              </Popover>
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white/60">
                                                {variant.sellerSuppliesPlace || '-'}
                                              </div>
                                            </div>

                                            {/* Возвраты с ПВЗ */}
                                            <div className="grid grid-cols-2 gap-0">
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium">
                                                {formatNumber(variant.pvzReturnsQuantity)}
                                              </div>
                                              <div className="px-1 py-1.5 text-center text-[10px] text-white/60">
                                                {variant.pvzReturnsPlace || '-'}
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      ))}
                                    </div>
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
