"use client";

import { useState, useMemo } from "react";
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 { useQuery } from "@apollo/client";
import { GET_MY_COUNTERPARTIES, GET_SUPPLY_ORDERS } 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 { getSidebarMargin } = useSidebar();

  // Состояния для поиска и фильтрации
  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 allCounterparties = counterpartiesData?.myCounterparties || [];
  const sellerPartners = allCounterparties.filter(
    (partner: any) => partner.type === "SELLER"
  );
  const supplyOrders: SupplyOrder[] = ordersData?.supplyOrders || [];

  // Логирование для отладки
  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,
    counterpartiesLoading,
    ordersLoading,
    counterpartiesError: counterpartiesError?.message,
    ordersError: ordersError?.message,
  });

  // Подсчитываем статистику на основе реальных данных партнеров-селлеров
  const warehouseStats: WarehouseStats = useMemo(() => {
    const inTransitOrders = supplyOrders.filter(
      (o) => o.status === "IN_TRANSIT"
    );
    const deliveredOrders = supplyOrders.filter(
      (o) => o.status === "DELIVERED"
    );

    // Генерируем статистику на основе количества партнеров-селлеров
    const baseMultiplier = sellerPartners.length * 100;

    return {
      products: {
        current: baseMultiplier + 450,
        change: 105,
      },
      goods: {
        current: Math.floor(baseMultiplier * 0.6) + 200,
        change: 77,
      },
      defects: {
        current: Math.floor(baseMultiplier * 0.05) + 15,
        change: -15,
      },
      pvzReturns: {
        current: Math.floor(baseMultiplier * 0.1) + 50,
        change: 36,
      },
      fulfillmentSupplies: {
        current: Math.floor(baseMultiplier * 0.3) + 80,
        change: deliveredOrders.length,
      },
      sellerSupplies: {
        current: inTransitOrders.reduce((sum, o) => sum + o.totalItems, 0) + Math.floor(baseMultiplier * 0.2),
        change: 57,
      },
    };
  }, [sellerPartners, supplyOrders]);

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

    // Создаем структуру данных для каждого партнера-селлера
    return sellerPartners.map((partner: any, index: number) => {
      // Генерируем реалистичные данные на основе партнера
      const baseProducts = Math.floor(Math.random() * 500) + 100;
      const baseGoods = Math.floor(baseProducts * 0.6);
      const baseDefects = Math.floor(baseProducts * 0.05);
      const baseSellerSupplies = Math.floor(Math.random() * 50) + 10;
      const basePvzReturns = Math.floor(baseProducts * 0.1);

      // Создаем товары для партнера
      const itemsCount = Math.floor(Math.random() * 8) + 3; // от 3 до 10 товаров
      const items: ProductItem[] = Array.from({ length: itemsCount }, (_, itemIndex) => {
        const itemProducts = Math.floor(baseProducts / itemsCount) + Math.floor(Math.random() * 50);
        return {
          id: `${index + 1}-${itemIndex + 1}`,
          name: `Товар ${itemIndex + 1} от ${partner.name}`,
          article: `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: Math.floor(itemProducts * 0.6),
          defectsPlace: `C${index + 1}-${itemIndex + 1}`,
          defectsQuantity: Math.floor(itemProducts * 0.05),
          sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}`,
          sellerSuppliesQuantity: Math.floor(Math.random() * 5) + 1,
          pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}`,
          pvzReturnsQuantity: Math.floor(itemProducts * 0.1),
          // Создаем варианты товара
          variants: Math.random() > 0.5 ? [
            {
              id: `${index + 1}-${itemIndex + 1}-1`,
              name: `Размер S`,
              productPlace: `A${index + 1}-${itemIndex + 1}-1`,
              productQuantity: Math.floor(itemProducts * 0.4),
              goodsPlace: `B${index + 1}-${itemIndex + 1}-1`,
              goodsQuantity: Math.floor(itemProducts * 0.24),
              defectsPlace: `C${index + 1}-${itemIndex + 1}-1`,
              defectsQuantity: Math.floor(itemProducts * 0.02),
              sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-1`,
              sellerSuppliesQuantity: Math.floor(Math.random() * 3) + 1,
              pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-1`,
              pvzReturnsQuantity: Math.floor(itemProducts * 0.04),
            },
            {
              id: `${index + 1}-${itemIndex + 1}-2`,
              name: `Размер M`,
              productPlace: `A${index + 1}-${itemIndex + 1}-2`,
              productQuantity: Math.floor(itemProducts * 0.4),
              goodsPlace: `B${index + 1}-${itemIndex + 1}-2`,
              goodsQuantity: Math.floor(itemProducts * 0.24),
              defectsPlace: `C${index + 1}-${itemIndex + 1}-2`,
              defectsQuantity: Math.floor(itemProducts * 0.02),
              sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-2`,
              sellerSuppliesQuantity: Math.floor(Math.random() * 3) + 1,
              pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-2`,
              pvzReturnsQuantity: Math.floor(itemProducts * 0.04),
            },
            {
              id: `${index + 1}-${itemIndex + 1}-3`,
              name: `Размер L`,
              productPlace: `A${index + 1}-${itemIndex + 1}-3`,
              productQuantity: Math.floor(itemProducts * 0.2),
              goodsPlace: `B${index + 1}-${itemIndex + 1}-3`,
              goodsQuantity: Math.floor(itemProducts * 0.12),
              defectsPlace: `C${index + 1}-${itemIndex + 1}-3`,
              defectsQuantity: Math.floor(itemProducts * 0.01),
              sellerSuppliesPlace: `D${index + 1}-${itemIndex + 1}-3`,
              sellerSuppliesQuantity: Math.floor(Math.random() * 2) + 1,
              pvzReturnsPlace: `E${index + 1}-${itemIndex + 1}-3`,
              pvzReturnsQuantity: Math.floor(itemProducts * 0.02),
            },
          ] : undefined,
        };
      });

      return {
        id: (index + 1).toString(),
        name: partner.name || partner.fullName || `Селлер ${index + 1}`,
        avatar: partner.users?.[0]?.avatar || `https://images.unsplash.com/photo-15312974840${index + 1}?w=100&h=100&fit=crop&crop=face`,
        products: baseProducts,
        goods: baseGoods,
        defects: baseDefects,
        sellerSupplies: baseSellerSupplies,
        pvzReturns: basePvzReturns,
        productsChange: Math.floor(Math.random() * 50) + 10,
        goodsChange: Math.floor(Math.random() * 30) + 15,
        defectsChange: Math.floor(Math.random() * 10) - 5,
        sellerSuppliesChange: Math.floor(Math.random() * 20) + 5,
        pvzReturnsChange: Math.floor(Math.random() * 15) + 3,
        items,
      };
    });
  }, [sellerPartners]);

  // Функции для аватаров магазинов
  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,
    description,
  }: {
    title: string;
    icon: React.ComponentType<{ className?: string }>;
    current: number;
    change: number;
    description: string;
  }) => {
    // Генерируем случайные значения для положительных и отрицательных изменений
    const positiveChange = Math.floor(Math.random() * 50) + 10; // от 10 до 59
    const negativeChange = Math.floor(Math.random() * 30) + 5; // от 5 до 34
    const 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`}
      >
        <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"
              }`}
            >
              {percentChange.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 bg-green-500/20">
              <span className="text-xs font-bold text-green-400">
                +{positiveChange}
              </span>
            </div>
            {/* Отрицательное изменение */}
            <div className="flex items-center space-x-0.5 px-1 py-0.5 rounded bg-red-500/20">
              <span className="text-xs font-bold text-red-400">
                -{negativeChange}
              </span>
            </div>
          </div>
        </div>
        <div className="text-white/60 text-[10px]">{description}</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) {
    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) {
    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}
            </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();
                    toast.success("Данные склада обновлены");
                  }}
                  disabled={counterpartiesLoading || ordersLoading}
                >
                  <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}
                description="Готовые к отправке"
              />
              <StatCard
                title="Товары"
                icon={Package}
                current={warehouseStats.goods.current}
                change={warehouseStats.goods.change}
                description="В обработке"
              />
              <StatCard
                title="Брак"
                icon={AlertTriangle}
                current={warehouseStats.defects.current}
                change={warehouseStats.defects.change}
                description="Требует утилизации"
              />
              <StatCard
                title="Возвраты с ПВЗ"
                icon={RotateCcw}
                current={warehouseStats.pvzReturns.current}
                change={warehouseStats.pvzReturns.change}
                description="К обработке"
              />
              <StatCard
                title="Расходники ФФ"
                icon={Wrench}
                current={warehouseStats.fulfillmentSupplies.current}
                change={warehouseStats.fulfillmentSupplies.change}
                description="Упаковка, этикетки"
              />
              <StatCard
                title="Расходники селлеров"
                icon={Users}
                current={warehouseStats.sellerSupplies.current}
                change={warehouseStats.sellerSupplies.change}
                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">
                          +{Math.abs(Math.floor(totals.productsChange * 0.6))}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -{Math.abs(Math.floor(totals.productsChange * 0.4))}
                        </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">
                          +{Math.abs(Math.floor(totals.goodsChange * 0.6))}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -{Math.abs(Math.floor(totals.goodsChange * 0.4))}
                        </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">
                          +{Math.abs(Math.floor(totals.defectsChange * 0.6))}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -{Math.abs(Math.floor(totals.defectsChange * 0.4))}
                        </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.abs(
                            Math.floor(totals.sellerSuppliesChange * 0.6)
                          )}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -
                          {Math.abs(
                            Math.floor(totals.sellerSuppliesChange * 0.4)
                          )}
                        </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">
                          +{Math.abs(Math.floor(totals.pvzReturnsChange * 0.6))}
                        </span>
                      </div>
                      <div className="flex items-center space-x-0.5">
                        <span className="text-[9px] font-bold text-red-400">
                          -{Math.abs(Math.floor(totals.pvzReturnsChange * 0.4))}
                        </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
                        ? "Нет партнеров-селлеров"
                        : "Партнеры не найдены"}
                    </p>
                    <p className="text-white/40 text-sm mt-2">
                      {sellerPartners.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.abs(
                                      Math.floor(store.productsChange * 0.6)
                                    )}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -
                                    {Math.abs(
                                      Math.floor(store.productsChange * 0.4)
                                    )}
                                  </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">
                                    +
                                    {Math.abs(
                                      Math.floor(store.goodsChange * 0.6)
                                    )}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -
                                    {Math.abs(
                                      Math.floor(store.goodsChange * 0.4)
                                    )}
                                  </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">
                                    +
                                    {Math.abs(
                                      Math.floor(store.defectsChange * 0.6)
                                    )}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -
                                    {Math.abs(
                                      Math.floor(store.defectsChange * 0.4)
                                    )}
                                  </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.abs(
                                      Math.floor(
                                        store.sellerSuppliesChange * 0.6
                                      )
                                    )}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -
                                    {Math.abs(
                                      Math.floor(
                                        store.sellerSuppliesChange * 0.4
                                      )
                                    )}
                                  </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">
                                    +
                                    {Math.abs(
                                      Math.floor(store.pvzReturnsChange * 0.6)
                                    )}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-0.5">
                                  <span className="text-[9px] font-bold text-red-400">
                                    -
                                    {Math.abs(
                                      Math.floor(store.pvzReturnsChange * 0.4)
                                    )}
                                  </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>
  );
}
