"use client";

import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { useAuth } from "@/hooks/useAuth";
import { useQuery } from "@apollo/client";
import {
  GET_MY_COUNTERPARTIES,
  GET_SUPPLY_ORDERS,
  GET_WAREHOUSE_PRODUCTS,
  GET_MY_SUPPLIES, // Расходники селлеров
  GET_MY_FULFILLMENT_SUPPLIES, // Расходники фулфилмента
  GET_FULFILLMENT_WAREHOUSE_STATS, // Статистика склада с изменениями за сутки
} from "@/graphql/queries";
import { toast } from "sonner";
import {
  Package,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  RotateCcw,
  Wrench,
  Users,
  Box,
  Search,
  ArrowUpDown,
  Store,
  Package2,
  Eye,
  EyeOff,
  ChevronRight,
  ChevronDown,
  Layers,
  Truck,
  Clock,
} from "lucide-react";

// Типы данных
interface ProductVariant {
  id: string;
  name: string; // Размер, характеристика, вариант упаковки
  // Места и количества для каждого типа на уровне варианта
  productPlace?: string;
  productQuantity: number;
  goodsPlace?: string;
  goodsQuantity: number;
  defectsPlace?: string;
  defectsQuantity: number;
  sellerSuppliesPlace?: string;
  sellerSuppliesQuantity: number;
  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;
  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 [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: suppliesData,
    loading: suppliesLoading,
    error: suppliesError,
    refetch: refetchSupplies,
  } = useQuery(GET_MY_SUPPLIES, {
    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", // Принудительно обходим кеш
    pollInterval: 60000, // Обновляем каждую минуту
  });

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

  // Детальное логирование данных статистики
  if (warehouseStatsData?.fulfillmentWarehouseStats) {
    console.log("📈 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 mySupplies = suppliesData?.mySupplies || []; // Расходники селлеров
  const myFulfillmentSupplies =
    fulfillmentSuppliesData?.myFulfillmentSupplies || []; // Расходники фулфилмента

  // Логирование для отладки
  console.log("🏪 Данные склада фулфилмента:", {
    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: mySupplies.length, // Добавляем логирование расходников
    supplies: mySupplies.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 = mySupplies.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,
    suppliesLoading, // Добавляем статус загрузки расходников
    counterpartiesError: counterpartiesError?.message,
    ordersError: ordersError?.message,
    productsError: productsError?.message,
    suppliesError: suppliesError?.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.log("📦 Анализ поставок расходников за сутки:", {
      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.log("📦 Анализ поставок товаров за сутки:", {
      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.log("📊 Статистика расходников селлера:", {
    suppliesReceivedToday,
    suppliesUsedToday,
    totalSellerSupplies: mySupplies.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 groupedSupplies = new Map<string, number>();
    mySupplies.forEach((supply: any) => {
      const supplyName = supply.name;
      const currentStock = supply.currentStock || 0;

      if (groupedSupplies.has(supplyName)) {
        groupedSupplies.set(
          supplyName,
          groupedSupplies.get(supplyName)! + currentStock
        );
      } else {
        groupedSupplies.set(supplyName, currentStock);
      }
    });

    // Логирование группировки
    console.log("📊 Группировка товаров и расходников:", {
      groupedProductsCount: groupedProducts.size,
      groupedSuppliesCount: groupedSupplies.size,
      groupedProducts: Array.from(groupedProducts.entries()).map(
        ([name, data]) => ({
          name,
          totalQuantity: data.totalQuantity,
          suppliersCount: data.suppliers.length,
          uniqueSuppliers: [...new Set(data.suppliers)],
        })
      ),
      groupedSupplies: Array.from(groupedSupplies.entries()).map(
        ([name, quantity]) => ({
          name,
          totalQuantity: 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;

          // Ищем соответствующий расходник по названию
          const matchingSupplyQuantity = groupedSupplies.get(productName) || 0;

          // Если нет точного совпадения, ищем частичное совпадение
          let itemSuppliesQuantity = matchingSupplyQuantity;
          if (itemSuppliesQuantity === 0) {
            for (const [supplyName, quantity] of groupedSupplies.entries()) {
              if (
                supplyName.toLowerCase().includes(productName.toLowerCase()) ||
                productName.toLowerCase().includes(supplyName.toLowerCase())
              ) {
                itemSuppliesQuantity = quantity;
                break;
              }
            }
          }

          // Fallback к процентному соотношению
          if (itemSuppliesQuantity === 0) {
            itemSuppliesQuantity = Math.floor(itemProducts * 0.1);
          }

          console.log(`📦 Товар "${productName}":`, {
            totalQuantity: itemProducts,
            suppliersCount: productData.suppliers.length,
            uniqueSuppliers: [...new Set(productData.suppliers)],
            matchingSupplyQuantity: matchingSupplyQuantity,
            finalSuppliesQuantity: itemSuppliesQuantity,
            usedFallback:
              matchingSupplyQuantity === 0 && 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, // Суммированное количество расходников (реальные данные)
            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
                      ), // Часть от расходников
                      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
                      ), // Часть от расходников
                      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
                      ), // Оставшаяся часть расходников
                      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.log(`🏪 Партнер "${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 /
                (mySupplies.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, mySupplies, 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.log("🔍 Фильтрация поставщиков:", {
      storeDataLength: storeData.length,
      searchTerm,
      sortField,
      sortOrder,
    });

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

    console.log("📋 Отфильтрованные поставщики:", {
      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 ||
    suppliesLoading
  ) {
    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>
    );
  }

  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 ||
                    suppliesLoading
                  }
                >
                  <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="К обработке"
              />
              <StatCard
                title="Расходники фулфилмента"
                icon={Wrench}
                current={warehouseStats.fulfillmentSupplies.current}
                change={warehouseStats.fulfillmentSupplies.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.fulfillmentSupplies?.percentChange}
                description="Расходники, этикетки"
                onClick={() => router.push("/fulfillment-warehouse/supplies")}
              />
              <StatCard
                title="Расходники селлеров"
                icon={Users}
                current={warehouseStats.sellerSupplies.current}
                change={warehouseStats.sellerSupplies.change}
                percentChange={warehouseStatsData?.fulfillmentWarehouseStats?.sellerSupplies?.percentChange}
                description="Материалы клиентов"
              />
            </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">
                                      <div className="px-1 py-2 text-center text-xs text-white font-medium">
                                        {formatNumber(
                                          item.sellerSuppliesQuantity
                                        )}
                                      </div>
                                      <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">
                                                <div className="px-1 py-1.5 text-center text-[10px] text-white font-medium">
                                                  {formatNumber(
                                                    variant.sellerSuppliesQuantity
                                                  )}
                                                </div>
                                                <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>
  );
}