'use client'

import { useQuery, useMutation } from '@apollo/client'
import {
  ArrowLeft,
  Building2,
  Search,
  Package,
  Plus,
  Minus,
  ShoppingCart,
  Calendar,
  Truck,
  Box,
  FileText,
  AlertCircle,
  Settings,
  DollarSign,
  X,
} from 'lucide-react'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import React, { useState } from 'react'
import { toast } from 'sonner'

import { Sidebar } from '@/components/dashboard/sidebar'
import { OrganizationAvatar } from '@/components/market/organization-avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { DatePicker } from '@/components/ui/date-picker'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { CREATE_SUPPLY_ORDER } from '@/graphql/mutations'
import {
  GET_MY_COUNTERPARTIES,
  GET_ORGANIZATION_PRODUCTS,
  GET_COUNTERPARTY_SERVICES,
  GET_COUNTERPARTY_SUPPLIES,
  GET_AVAILABLE_SUPPLIES_FOR_RECIPE,
} from '@/graphql/queries'
import { useAuth } from '@/hooks/useAuth'
import { useSidebar } from '@/hooks/useSidebar'

import { AddGoodsModal } from './add-goods-modal'

// Интерфейсы согласно rules2.md 9.7
interface GoodsSupplier {
  id: string
  inn: string
  name?: string
  fullName?: string
  type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
  address?: string
  phones?: Array<{ value: string }>
  emails?: Array<{ value: string }>
  users?: Array<{ id: string; avatar?: string; managerName?: string }>
  createdAt: string
  rating?: number
  market?: string // Принадлежность к рынку согласно rules-complete.md v10.0
}

interface GoodsProduct {
  id: string
  name: string
  description?: string
  price: number
  category?: { name: string }
  images: string[]
  mainImage?: string
  article: string // Артикул поставщика
  organization: {
    id: string
    name: string
  }
  quantity?: number
  unit?: string
  weight?: number
  dimensions?: {
    length: number
    width: number
    height: number
  }
}

interface SelectedGoodsItem {
  id: string
  name: string
  sku: string
  price: number
  selectedQuantity: number
  unit?: string
  category?: string
  supplierId: string
  supplierName: string
  completeness?: string // Комплектность согласно rules2.md 9.7.2
  recipe?: string // Рецептура/состав
  specialRequirements?: string // Особые требования
  parameters?: Array<{ name: string; value: string }> // Параметры товара
}

interface LogisticsCompany {
  id: string
  name: string
  estimatedCost: number
  deliveryDays: number
  type: 'EXPRESS' | 'STANDARD' | 'ECONOMY'
}

// Новые интерфейсы для компонентов рецептуры
interface FulfillmentService {
  id: string
  name: string
  description?: string
  price: number
  category?: string
}

interface FulfillmentConsumable {
  id: string
  name: string
  price: number
  quantity: number
  unit?: string
}

interface SellerConsumable {
  id: string
  name: string
  pricePerUnit: number
  warehouseStock: number
  unit?: string
}

interface WBCard {
  id: string
  title: string
  nmID: string
  vendorCode?: string
  brand?: string
}

interface ProductRecipe {
  productId: string
  selectedServices: string[]
  selectedFFConsumables: string[]
  selectedSellerConsumables: string[]
  selectedWBCard?: string
}

export function CreateSuppliersSupplyPage() {
  const router = useRouter()
  const { user: _user } = useAuth()
  const { getSidebarMargin } = useSidebar()

  // Основные состояния
  const [selectedSupplier, setSelectedSupplier] = useState<GoodsSupplier | null>(null)
  const [selectedGoods, setSelectedGoods] = useState<SelectedGoodsItem[]>([])
  const [searchQuery, setSearchQuery] = useState('')
  const [productSearchQuery] = useState('')

  // Обязательные поля согласно rules2.md 9.7.8
  const [deliveryDate, setDeliveryDate] = useState('')

  // Выбор логистики согласно rules2.md 9.7.7
  const [selectedLogistics, setSelectedLogistics] = useState<string>('auto') // "auto" или ID компании

  // Выбор фулфилмента согласно rules2.md 9.7.2
  const [selectedFulfillment, setSelectedFulfillment] = useState<string>('')

  // Модальное окно для детального добавления товара
  const [selectedProductForModal, setSelectedProductForModal] = useState<GoodsProduct | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const [isCreatingSupply, setIsCreatingSupply] = useState(false)

  // Состояния для компонентов рецептуры
  const [productRecipes, setProductRecipes] = useState<Record<string, ProductRecipe>>({})
  const [productQuantities, setProductQuantities] = useState<Record<string, number>>({})

  // Все выбранные товары для персистентности согласно rules-complete.md 9.2.2.1
  const [allSelectedProducts, setAllSelectedProducts] = useState<
    (GoodsProduct & { selectedQuantity: number; supplierId: string; supplierName: string })[]
  >([])

  // Загружаем партнеров-поставщиков согласно rules2.md 13.3
  const {
    data: counterpartiesData,
    loading: counterpartiesLoading,
    error: counterpartiesError,
  } = useQuery(GET_MY_COUNTERPARTIES, {
    errorPolicy: 'all', // Показываем все ошибки, но не прерываем работу
    onError: (error) => {
      try {
        console.warn('🚨 GET_MY_COUNTERPARTIES ERROR:', {
          errorMessage: error?.message || 'Unknown error',
          hasGraphQLErrors: !!error?.graphQLErrors?.length,
          hasNetworkError: !!error?.networkError,
        })
      } catch (logError) {
        console.warn('❌ Error in counterparties error handler:', logError)
      }
    },
  })

  // Загружаем каталог товаров согласно rules2.md 13.3
  // Товары поставщика загружаются из Product таблицы where organizationId = поставщик.id
  const {
    data: productsData,
    loading: productsLoading,
    error: productsError,
  } = useQuery(GET_ORGANIZATION_PRODUCTS, {
    variables: {
      organizationId: selectedSupplier?.id || '', // Избегаем undefined для обязательного параметра
      search: productSearchQuery, // Используем поисковый запрос для фильтрации
      category: '', // Пока без фильтра по категории
      type: 'PRODUCT', // КРИТИЧЕСКИ ВАЖНО: показываем только PRODUCT, не CONSUMABLE согласно development-checklist.md
    },
    skip: !selectedSupplier || !selectedSupplier.id, // Более строгая проверка
    fetchPolicy: 'network-only', // Обходим кеш для получения актуальных данных
    errorPolicy: 'all', // Показываем все ошибки, но не прерываем работу
    onError: (error) => {
      try {
        console.warn('🚨 GET_ORGANIZATION_PRODUCTS ERROR:', {
          errorMessage: error?.message || 'Unknown error',
          hasGraphQLErrors: !!error?.graphQLErrors?.length,
          hasNetworkError: !!error?.networkError,
          variables: {
            organizationId: selectedSupplier?.id || 'not_selected',
            search: productSearchQuery || 'empty',
            category: '',
            type: 'PRODUCT',
          },
          selectedSupplier: selectedSupplier
            ? {
                id: selectedSupplier.id,
                name: selectedSupplier.name || selectedSupplier.fullName || 'Unknown',
              }
            : 'not_selected',
        })
      } catch (logError) {
        console.warn('❌ Error in error handler:', logError)
      }
    },
  })

  // Мутация создания поставки
  const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER)

  // Запросы для компонентов рецептуры
  const { data: fulfillmentServicesData } = useQuery(GET_COUNTERPARTY_SERVICES, {
    variables: { organizationId: selectedFulfillment || '' },
    skip: !selectedFulfillment,
    errorPolicy: 'all',
  })

  const { data: fulfillmentConsumablesData } = useQuery(GET_COUNTERPARTY_SUPPLIES, {
    variables: { organizationId: selectedFulfillment || '' },
    skip: !selectedFulfillment,
    errorPolicy: 'all',
  })

  const { data: sellerConsumablesData } = useQuery(GET_AVAILABLE_SUPPLIES_FOR_RECIPE, {
    skip: !selectedFulfillment,
    errorPolicy: 'all',
  })

  // TODO: Нужен запрос для получения карточек товаров селлера
  // const { data: wbCardsData } = useQuery(GET_MY_WILDBERRIES_SUPPLIES, {
  //   skip: !user?.organization?.id,
  //   errorPolicy: 'all',
  // })

  // Фильтруем только партнеров-поставщиков согласно rules2.md 13.3
  const allCounterparties = counterpartiesData?.myCounterparties || []

  // Извлекаем данные для компонентов рецептуры
  const fulfillmentServices: FulfillmentService[] = fulfillmentServicesData?.counterpartyServices || []
  const fulfillmentConsumables: FulfillmentConsumable[] = fulfillmentConsumablesData?.counterpartySupplies || []
  const sellerConsumables: SellerConsumable[] = sellerConsumablesData?.getAvailableSuppliesForRecipe || []
  const _wbCards: WBCard[] = [] // Временно отключено

  // Показываем только партнеров с типом WHOLESALE согласно rules2.md 13.3
  const wholesaleSuppliers = allCounterparties.filter((cp: any) => {
    try {
      return cp && cp.type === 'WHOLESALE'
    } catch (error) {
      console.warn('❌ Error filtering wholesale suppliers:', error)
      return false
    }
  })

  const suppliers = wholesaleSuppliers.filter((cp: GoodsSupplier) => {
    try {
      if (!cp) return false
      const searchLower = searchQuery.toLowerCase()
      return (
        cp.name?.toLowerCase().includes(searchLower) ||
        cp.fullName?.toLowerCase().includes(searchLower) ||
        cp.inn?.includes(searchQuery) ||
        cp.phones?.some((phone) => phone.value?.includes(searchQuery))
      )
    } catch (error) {
      console.warn('❌ Error filtering suppliers by search:', error)
      return false
    }
  })

  const isLoading = counterpartiesLoading

  // Получаем товары выбранного поставщика согласно rules2.md 13.3
  // Теперь фильтрация происходит на сервере через GraphQL запрос
  const products = (productsData?.organizationProducts || []).filter((product: any) => {
    try {
      return product && product.id && product.name
    } catch (error) {
      console.warn('❌ Error filtering products:', error)
      return false
    }
  })

  // Отладочные логи согласно development-checklist.md
  console.warn('🛒 CREATE_SUPPLIERS_SUPPLY DEBUG:', {
    selectedSupplier: selectedSupplier
      ? {
          id: selectedSupplier.id,
          name: selectedSupplier.name,
          type: selectedSupplier.type,
        }
      : null,
    counterpartiesStatus: {
      loading: counterpartiesLoading,
      error: counterpartiesError?.message,
      dataCount: counterpartiesData?.myCounterparties?.length || 0,
    },
    productsStatus: {
      loading: productsLoading,
      error: productsError?.message,
      dataCount: products.length,
      hasData: !!productsData?.organizationProducts,
      productSample: products.slice(0, 3).map((p) => ({ id: p.id, name: p.name, article: p.article })),
    },
  })

  // Моковые логистические компании согласно rules2.md 9.7.7
  // Функции для работы с рынками согласно rules-complete.md v10.0
  const getMarketLabel = (market?: string) => {
    const marketLabels = {
      sadovod: 'Садовод',
      'tyak-moscow': 'ТЯК Москва',
      'opt-market': 'ОПТ Маркет',
    }
    return marketLabels[market as keyof typeof marketLabels] || market
  }

  const getMarketBadgeStyle = (market?: string) => {
    const styles = {
      sadovod: 'bg-green-500/20 text-green-300 border-green-500/30',
      'tyak-moscow': 'bg-blue-500/20 text-blue-300 border-blue-500/30',
      'opt-market': 'bg-purple-500/20 text-purple-300 border-purple-500/30',
    }
    return styles[market as keyof typeof styles] || 'bg-gray-500/20 text-gray-300 border-gray-500/30'
  }

  // Получаем логистические компании из партнеров
  const logisticsCompanies = allCounterparties?.filter((partner) => partner.type === 'LOGIST') || []

  // Моковые фулфилмент-центры согласно rules2.md 9.7.2
  const fulfillmentCenters = [
    { id: 'ff1', name: 'СФ Центр Москва', address: 'г. Москва, ул. Складская 10' },
    { id: 'ff2', name: 'СФ Центр СПб', address: 'г. Санкт-Петербург, пр. Логистический 5' },
    { id: 'ff3', name: 'СФ Центр Екатеринбург', address: 'г. Екатеринбург, ул. Промышленная 15' },
  ]

  // Функции для работы с количеством товаров в карточках согласно rules2.md 13.3
  const getProductQuantity = (productId: string): number => {
    return productQuantities[productId] || 0
  }

  const setProductQuantity = (productId: string, quantity: number): void => {
    setProductQuantities((prev) => ({
      ...prev,
      [productId]: Math.max(0, quantity),
    }))
  }

  // Removed unused updateProductQuantity function

  // Добавление товара в корзину из карточки с заданным количеством
  const addToCart = (product: GoodsProduct) => {
    const quantity = getProductQuantity(product.id)
    if (quantity <= 0) {
      toast.error('Укажите количество товара')
      return
    }

    // Проверка остатков согласно rules2.md 9.7.9
    if (product.quantity !== undefined && quantity > product.quantity) {
      toast.error(`Недостаточно товара на складе. Доступно: ${product.quantity} ${product.unit || 'шт'}`)
      return
    }

    if (!selectedSupplier) {
      toast.error('Не выбран поставщик')
      return
    }

    const newGoodsItem: SelectedGoodsItem = {
      id: product.id,
      name: product.name,
      sku: product.article,
      price: product.price,
      selectedQuantity: quantity,
      unit: product.unit,
      category: product.category?.name,
      supplierId: selectedSupplier.id,
      supplierName: selectedSupplier.name || selectedSupplier.fullName || 'Неизвестный поставщик',
    }

    // Проверяем, есть ли уже такой товар в корзине
    const existingItemIndex = selectedGoods.findIndex((item) => item.id === product.id)

    if (existingItemIndex >= 0) {
      // Обновляем количество существующего товара
      const updatedGoods = [...selectedGoods]
      updatedGoods[existingItemIndex] = {
        ...updatedGoods[existingItemIndex],
        selectedQuantity: quantity,
      }
      setSelectedGoods(updatedGoods)
      toast.success(`Количество товара "${product.name}" обновлено в корзине`)
    } else {
      // Добавляем новый товар
      setSelectedGoods((prev) => [...prev, newGoodsItem])
      // Инициализируем рецептуру для нового товара
      initializeProductRecipe(product.id)
      toast.success(`Товар "${product.name}" добавлен в корзину`)
    }

    // Сбрасываем количество в карточке
    setProductQuantity(product.id, 0)
  }

  // Removed unused openAddModal function

  // Функции для работы с рецептурой
  const initializeProductRecipe = (productId: string) => {
    if (!productRecipes[productId]) {
      setProductRecipes((prev) => ({
        ...prev,
        [productId]: {
          productId,
          selectedServices: [],
          selectedFFConsumables: [],
          selectedSellerConsumables: [],
          selectedWBCard: undefined,
        },
      }))
    }
  }

  const toggleService = (productId: string, serviceId: string) => {
    initializeProductRecipe(productId)
    setProductRecipes((prev) => {
      const recipe = prev[productId]
      const isSelected = recipe.selectedServices.includes(serviceId)
      return {
        ...prev,
        [productId]: {
          ...recipe,
          selectedServices: isSelected
            ? recipe.selectedServices.filter((id) => id !== serviceId)
            : [...recipe.selectedServices, serviceId],
        },
      }
    })
  }

  const toggleFFConsumable = (productId: string, consumableId: string) => {
    initializeProductRecipe(productId)
    setProductRecipes((prev) => {
      const recipe = prev[productId]
      const isSelected = recipe.selectedFFConsumables.includes(consumableId)
      return {
        ...prev,
        [productId]: {
          ...recipe,
          selectedFFConsumables: isSelected
            ? recipe.selectedFFConsumables.filter((id) => id !== consumableId)
            : [...recipe.selectedFFConsumables, consumableId],
        },
      }
    })
  }

  const toggleSellerConsumable = (productId: string, consumableId: string) => {
    initializeProductRecipe(productId)
    setProductRecipes((prev) => {
      const recipe = prev[productId]
      const isSelected = recipe.selectedSellerConsumables.includes(consumableId)
      return {
        ...prev,
        [productId]: {
          ...recipe,
          selectedSellerConsumables: isSelected
            ? recipe.selectedSellerConsumables.filter((id) => id !== consumableId)
            : [...recipe.selectedSellerConsumables, consumableId],
        },
      }
    })
  }

  const _setWBCard = (productId: string, cardId: string) => {
    initializeProductRecipe(productId)
    setProductRecipes((prev) => ({
      ...prev,
      [productId]: {
        ...prev[productId],
        selectedWBCard: cardId,
      },
    }))
  }

  // Расчет стоимости компонентов рецептуры
  const calculateRecipeCost = (productId: string) => {
    const recipe = productRecipes[productId]
    if (!recipe) return { services: 0, consumables: 0, total: 0 }

    const servicesTotal = recipe.selectedServices.reduce((sum, serviceId) => {
      const service = fulfillmentServices.find((s) => s.id === serviceId)
      return sum + (service?.price || 0)
    }, 0)

    const consumablesTotal = recipe.selectedFFConsumables.reduce((sum, consumableId) => {
      const consumable = fulfillmentConsumables.find((c) => c.id === consumableId)
      return sum + (consumable?.price || 0)
    }, 0)

    return {
      services: servicesTotal,
      consumables: consumablesTotal,
      total: servicesTotal + consumablesTotal,
    }
  }

  // Добавление товара в корзину из модального окна с дополнительными данными
  const addToCartFromModal = (
    product: GoodsProduct,
    quantity: number,
    additionalData?: {
      completeness?: string
      recipe?: string
      specialRequirements?: string
      parameters?: Array<{ name: string; value: string }>
      customPrice?: number
    },
  ) => {
    // Проверка остатков согласно rules2.md 9.7.9
    if (product.quantity !== undefined && quantity > product.quantity) {
      toast.error(`Недостаточно товара на складе. Доступно: ${product.quantity} ${product.unit || 'шт'}`)
      return
    }

    const existingItem = selectedGoods.find((item) => item.id === product.id)
    const finalPrice = additionalData?.customPrice || product.price

    if (existingItem) {
      // Обновляем существующий товар
      setSelectedGoods((prev) =>
        prev.map((item) =>
          item.id === product.id
            ? {
                ...item,
                selectedQuantity: quantity,
                price: finalPrice,
                completeness: additionalData?.completeness,
                recipe: additionalData?.recipe,
                specialRequirements: additionalData?.specialRequirements,
                parameters: additionalData?.parameters,
              }
            : item,
        ),
      )
    } else {
      // Добавляем новый товар
      const newItem: SelectedGoodsItem = {
        id: product.id,
        name: product.name,
        sku: product.article,
        price: finalPrice,
        selectedQuantity: quantity,
        unit: product.unit,
        category: product.category?.name,
        supplierId: selectedSupplier!.id,
        supplierName: selectedSupplier!.name || selectedSupplier!.fullName || '',
        completeness: additionalData?.completeness,
        recipe: additionalData?.recipe,
        specialRequirements: additionalData?.specialRequirements,
        parameters: additionalData?.parameters,
      }

      setSelectedGoods((prev) => [...prev, newItem])
    }

    toast.success('Товар добавлен в корзину')
  }

  // Удаление из корзины
  const removeFromCart = (productId: string) => {
    setSelectedGoods((prev) => prev.filter((item) => item.id !== productId))
    // Удаляем рецептуру товара
    setProductRecipes((prev) => {
      const updated = { ...prev }
      delete updated[productId]
      return updated
    })
    toast.success('Товар удален из корзины')
  }

  // Функция расчета полной стоимости товара с рецептурой
  const getProductTotalWithRecipe = (productId: string, quantity: number) => {
    const product = allSelectedProducts.find(p => p.id === productId)
    if (!product) return 0
    
    const baseTotal = product.price * quantity
    const recipe = productRecipes[productId]
    
    if (!recipe) return baseTotal
    
    // Услуги ФФ
    const servicesCost = (recipe.selectedServices || []).reduce((sum, serviceId) => {
      const service = fulfillmentServices.find(s => s.id === serviceId)
      return sum + (service ? service.price * quantity : 0)
    }, 0)
    
    // Расходники ФФ
    const ffConsumablesCost = (recipe.selectedFFConsumables || []).reduce((sum, consumableId) => {
      const consumable = fulfillmentConsumables.find(c => c.id === consumableId)
      // Используем такую же логику как в карточке - только price
      return sum + (consumable ? consumable.price * quantity : 0)
    }, 0)
    
    // Расходники селлера
    const sellerConsumablesCost = (recipe.selectedSellerConsumables || []).reduce((sum, consumableId) => {
      const consumable = sellerConsumables.find(c => c.id === consumableId)
      return sum + (consumable ? (consumable.pricePerUnit || 0) * quantity : 0)
    }, 0)
    
    return baseTotal + servicesCost + ffConsumablesCost + sellerConsumablesCost
  }

  // Расчеты для корзины - используем функцию расчета
  const totalGoodsAmount = selectedGoods.reduce((sum, item) => {
    return sum + getProductTotalWithRecipe(item.id, item.selectedQuantity)
  }, 0)
  
  const totalQuantity = selectedGoods.reduce((sum, item) => sum + item.selectedQuantity, 0)
  const totalAmount = totalGoodsAmount

  // Валидация формы согласно rules2.md 9.7.6
  // Проверяем обязательность услуг фулфилмента согласно rules-complete.md
  const hasRequiredServices = selectedGoods.every((item) => productRecipes[item.id]?.selectedServices?.length > 0)

  const isFormValid =
    selectedSupplier && selectedGoods.length > 0 && deliveryDate && selectedFulfillment && hasRequiredServices // Обязательно: каждый товар должен иметь услуги

  // Создание поставки
  const handleCreateSupply = async () => {
    if (!isFormValid) {
      if (!hasRequiredServices) {
        toast.error('Каждый товар должен иметь минимум 1 услугу фулфилмента')
      } else {
        toast.error('Заполните все обязательные поля')
      }
      return
    }

    setIsCreatingSupply(true)
    try {
      await createSupplyOrder({
        variables: {
          supplierId: selectedSupplier!.id,
          fulfillmentCenterId: selectedFulfillment,
          items: selectedGoods.map((item) => ({
            productId: item.id,
            quantity: item.selectedQuantity,
            recipe: productRecipes[item.id]
              ? {
                  services: productRecipes[item.id].selectedServices,
                  fulfillmentConsumables: productRecipes[item.id].selectedFFConsumables,
                  sellerConsumables: productRecipes[item.id].selectedSellerConsumables,
                  marketplaceCardId: productRecipes[item.id].selectedWBCard,
                }
              : undefined,
          })),
          deliveryDate,
          logisticsCompany: selectedLogistics === 'auto' ? null : selectedLogistics,
          type: 'ТОВАР',
          creationMethod: 'suppliers',
        },
      })

      toast.success('Поставка успешно создана')
      router.push('/supplies?tab=goods&subTab=suppliers')
    } catch (error) {
      console.error('Ошибка создания поставки:', error)
      toast.error('Ошибка при создании поставки')
    } finally {
      setIsCreatingSupply(false)
    }
  }

  // Получение минимальной и максимальной даты согласно rules2.md 9.7.8
  const tomorrow = new Date()
  tomorrow.setDate(tomorrow.getDate() + 1)
  const maxDate = new Date()
  maxDate.setDate(maxDate.getDate() + 90)

  const minDateString = tomorrow.toISOString().split('T')[0]
  const maxDateString = maxDate.toISOString().split('T')[0]

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300 p-4`}>
        <div className="h-full flex flex-col gap-4">
          {/* СТРУКТУРА ИЗ 4 БЛОКОВ согласно rules-complete.md 9.2 - кабинет селлера */}
          <div className="flex-1 flex gap-4 min-h-0">
            {/* ЛЕВЫЙ БЛОК: ПОСТАВЩИКИ, КАРТОЧКИ ТОВАРОВ И ДЕТАЛЬНЫЙ КАТАЛОГ */}
            <div className="flex-1 flex flex-col gap-4 min-h-0">
              {/* БЛОК 1: ПОСТАВЩИКИ - обязательный блок согласно rules-complete.md 9.2.1 */}
              <div
                className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-shrink-0 flex flex-col"
                style={{ height: '180px' }}
              >
                <div className="p-4 flex-shrink-0">
                  {/* Навигация и заголовок в одном блоке */}
                  <div className="flex items-center justify-between gap-4 mb-4">
                    <div className="flex items-center gap-3">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => router.push('/supplies?tab=goods&subTab=suppliers')}
                        className="glass-secondary hover:text-white/90 gap-2 transition-all duration-200 -ml-2"
                      >
                        <ArrowLeft className="h-3 w-3" />
                        Назад
                      </Button>
                      <div className="h-4 w-px bg-white/20"></div>
                      <Building2 className="h-5 w-5 text-blue-400" />
                      <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                    </div>
                    <div className="w-64">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/90 h-4 w-4 drop-shadow-sm z-10" />
                        <Input
                          placeholder="Поиск поставщиков..."
                          value={searchQuery}
                          onChange={(e) => setSearchQuery(e.target.value)}
                          className="bg-white/10 border-white/20 text-white placeholder:text-white/60 pl-10 h-9 text-sm rounded-full transition-all duration-200 focus:border-white/30 backdrop-blur-sm"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Кнопка поиска в маркете */}
                  {!isLoading && allCounterparties.length === 0 && (
                    <div className="mt-4">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => router.push('/market')}
                        className="glass-secondary hover:text-white/90 transition-all duration-200"
                      >
                        <Building2 className="h-3 w-3 mr-2" />
                        Найти поставщиков в маркете
                      </Button>
                    </div>
                  )}

                  {/* Контейнер скролла поставщиков согласно rules-complete.md 9.2.1 */}
                  <div className="flex-1 overflow-hidden">
                    {isLoading ? (
                      <div className="flex items-center justify-center h-44">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white/60"></div>
                        <span className="ml-3 text-white/70">Загрузка поставщиков...</span>
                      </div>
                    ) : suppliers.length === 0 ? (
                      <div className="flex items-center justify-center h-44">
                        <div className="text-center space-y-3">
                          <div className="w-12 h-12 mx-auto bg-white/5 rounded-full flex items-center justify-center">
                            <Building2 className="h-6 w-6 text-white/40" />
                          </div>
                          <div>
                            <h3 className="text-base font-medium text-white mb-1">Поставщики товаров не найдены</h3>
                            <p className="text-white/60 text-xs max-w-md mx-auto">
                              {allCounterparties.length === 0
                                ? "У вас нет партнеров. Найдите поставщиков в маркете или добавьте их через раздел 'Партнеры'"
                                : wholesaleSuppliers.length === 0
                                  ? `Найдено ${allCounterparties.length} партнеров, но среди них нет поставщиков (тип WHOLESALE)`
                                  : searchQuery && suppliers.length === 0
                                    ? 'Поставщики-партнеры не найдены по вашему запросу'
                                    : `Найдено ${suppliers.length} поставщиков-партнеров`}
                            </p>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="h-44 overflow-hidden">
                        <div
                          className={`h-full ${
                            suppliers.length <= 4
                              ? 'flex items-start gap-3 px-4'
                              : 'flex gap-3 overflow-x-auto px-4 pb-2 scrollbar-hide'
                          }`}
                          style={{ 
                            scrollbarWidth: 'none',
                            msOverflowStyle: 'none',
                          }}
                        >
                          {suppliers.map((supplier: GoodsSupplier) => (
                            <div
                              key={supplier.id}
                              onClick={() => setSelectedSupplier(supplier)}
                              className={`flex-shrink-0 p-3 rounded-lg cursor-pointer group transition-all duration-200 
                                w-[184px] md:w-[200px] lg:w-[216px] h-[92px]
                                ${
                                selectedSupplier?.id === supplier.id
                                  ? 'bg-green-500/20 border border-green-400/60 shadow-lg ring-1 ring-green-400/30'
                                  : 'bg-white/5 border border-white/10 hover:border-white/20 hover:bg-white/10 hover:shadow-md'
                              }`}
                            >
                              <div className="flex items-start gap-2 h-full">
                                <div className="flex-shrink-0">
                                  <OrganizationAvatar organization={supplier} size="sm" />
                                </div>
                                <div className="flex-1 min-w-0">
                                  <h4 className="text-white font-medium text-sm truncate group-hover:text-white transition-colors">
                                    {supplier.name || supplier.fullName}
                                  </h4>
                                  <p className="text-white/60 text-xs font-mono mt-1">ИНН: {supplier.inn}</p>
                                  {supplier.market && (
                                    <div className="mt-1">
                                      <Badge
                                        className={`text-xs font-medium border ${getMarketBadgeStyle(supplier.market)}`}
                                      >
                                        {getMarketLabel(supplier.market)}
                                      </Badge>
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              {/* БЛОК 2: КАРТОЧКИ ТОВАРОВ */}
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-shrink-0">
                <div className="flex gap-3 overflow-x-auto p-4" style={{ scrollbarWidth: 'thin' }}>
                  {selectedSupplier &&
                    products.length > 0 &&
                    products.map((product: GoodsProduct) => {
                      return (
                        <div
                          key={product.id}
                          className="relative flex-shrink-0 bg-white/5 rounded-lg overflow-hidden border cursor-pointer transition-all duration-300 group w-20 h-28 border-white/10 hover:border-white/30"
                          onClick={() => {
                            // Добавляем товар в детальный каталог (блок 3)
                            if (!allSelectedProducts.find((p) => p.id === product.id)) {
                              setAllSelectedProducts((prev) => [
                                ...prev,
                                {
                                  ...product,
                                  selectedQuantity: 0,
                                  supplierId: selectedSupplier.id,
                                  supplierName: selectedSupplier.name || selectedSupplier.fullName || 'Поставщик',
                                },
                              ])
                              // Инициализируем рецептуру для нового товара
                              initializeProductRecipe(product.id)
                            }
                          }}
                        >
                          {product.mainImage ? (
                            <Image
                              src={product.mainImage}
                              alt={product.name}
                              width={80}
                              height={112}
                              className="w-full h-full object-cover"
                            />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center">
                              <Package className="h-6 w-6 text-white/40" />
                            </div>
                          )}
                        </div>
                      )
                    })}
                </div>
              </div>

              {/* БЛОК 3: КАТАЛОГ ТОВАРОВ согласно rules-complete.md 9.2.3 */}
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-1 min-h-0 flex flex-col">
                {/* Верхняя панель каталога товаров согласно правилам 9.2.3.1 */}
                {!counterpartiesLoading && (
                  <div className="flex items-center gap-4 p-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl mb-4">
                    <DatePicker
                      placeholder="Дата поставки"
                      value={deliveryDate}
                      onChange={setDeliveryDate}
                      className="min-w-[140px]"
                    />
                    <Select value={selectedFulfillment} onValueChange={setSelectedFulfillment}>
                      <SelectTrigger className="glass-input min-w-[200px]">
                        <SelectValue placeholder="Выберите фулфилмент" />
                      </SelectTrigger>
                      <SelectContent>
                        {allCounterparties && allCounterparties.length > 0 ? (
                          allCounterparties
                            .filter((partner) => partner.type === 'FULFILLMENT')
                            .map((fulfillment) => (
                              <SelectItem key={fulfillment.id} value={fulfillment.id}>
                                {fulfillment.name || fulfillment.fullName}
                              </SelectItem>
                            ))
                        ) : (
                          <SelectItem value="" disabled>
                            Нет доступных фулфилмент-центров
                          </SelectItem>
                        )}
                      </SelectContent>
                    </Select>
                    <div className="relative flex-1">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
                      <Input
                        placeholder="Поиск товаров..."
                        value={productSearchQuery}
                        onChange={(e) => setProductSearchQuery(e.target.value)}
                        className="pl-10 glass-input"
                      />
                    </div>
                  </div>
                )}

                {counterpartiesLoading && (
                  <div className="flex items-center justify-center p-4 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl mb-4">
                    <div className="text-white/60 text-sm">Загрузка партнеров...</div>
                  </div>
                )}

                {counterpartiesError && (
                  <div className="flex items-center justify-center p-4 bg-red-500/10 backdrop-blur-xl border border-red-500/20 rounded-2xl mb-4">
                    <div className="text-red-300 text-sm">Ошибка загрузки партнеров: {counterpartiesError.message}</div>
                  </div>
                )}

                <div className="flex-1 overflow-y-auto p-6">
                  {allSelectedProducts.length === 0 ? (
                    <div className="flex items-center justify-center h-full">
                      <div className="text-center space-y-4">
                        <div className="w-24 h-24 mx-auto bg-blue-400/5 rounded-full flex items-center justify-center">
                          <Package className="h-12 w-12 text-blue-400/50" />
                        </div>
                        <div>
                          <h4 className="text-xl font-medium text-white mb-2">Каталог товаров пуст</h4>
                          <p className="text-white/60 max-w-sm mx-auto">Выберите поставщика для просмотра товаров</p>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {allSelectedProducts.map((product) => {
                        // Расчет стоимостей для каждого блока рецептуры
                        const recipe = productRecipes[product.id]
                        const selectedServicesIds = recipe?.selectedServices || []
                        const selectedFFConsumablesIds = recipe?.selectedFFConsumables || []
                        const selectedSellerConsumablesIds = recipe?.selectedSellerConsumables || []

                        // Стоимость услуг ФФ
                        const servicesCost = selectedServicesIds.reduce((sum, serviceId) => {
                          const service = fulfillmentServices.find((s) => s.id === serviceId)
                          return sum + (service ? service.price * product.selectedQuantity : 0)
                        }, 0)

                        // Стоимость расходников ФФ
                        const ffConsumablesCost = selectedFFConsumablesIds.reduce((sum, consumableId) => {
                          const consumable = fulfillmentConsumables.find((c) => c.id === consumableId)
                          return sum + (consumable ? consumable.price * product.selectedQuantity : 0)
                        }, 0)

                        // Стоимость расходников селлера
                        const sellerConsumablesCost = selectedSellerConsumablesIds.reduce((sum, consumableId) => {
                          const consumable = sellerConsumables.find((c) => c.id === consumableId)
                          return sum + (consumable ? (consumable.pricePerUnit || 0) * product.selectedQuantity : 0)
                        }, 0)

                        // Общая стоимость товара с рецептурой
                        const totalWithRecipe =
                          product.price * product.selectedQuantity + servicesCost + ffConsumablesCost + sellerConsumablesCost
                        
                        // Debug: сравниваем с функцией расчета корзины
                        const cartTotal = getProductTotalWithRecipe(product.id, product.selectedQuantity)
                        if (Math.abs(totalWithRecipe - cartTotal) > 0.01) {
                          console.log(`РАЗНИЦА для ${product.name}:`, {
                            карточка: totalWithRecipe,
                            корзина: cartTotal,
                            базовая_цена: product.price * product.selectedQuantity,
                            услуги: servicesCost,
                            расходники_ФФ: ffConsumablesCost, 
                            расходники_селлера: sellerConsumablesCost,
                          })
                        }

                        return (
                          <div
                            key={product.id}
                            className="glass-card border-white/10 hover:border-white/20 transition-all duration-300 group relative"
                            style={{ height: '140px' }}
                          >
                            {/* Элегантный крестик удаления - согласно visual-design-rules.md */}
                            <button
                              onClick={() => {
                                setAllSelectedProducts((prev) => prev.filter((p) => p.id !== product.id))
                                // Очищаем рецептуру
                                setProductRecipes((prev) => {
                                  const updated = { ...prev }
                                  delete updated[product.id]
                                  return updated
                                })
                              }}
                              className="absolute top-3 right-3 z-10 w-7 h-7 flex items-center justify-center rounded-full bg-white/5 text-white/40 hover:bg-red-500/20 hover:text-red-400 transition-all duration-200 opacity-0 group-hover:opacity-100"
                            >
                              <Plus className="h-4 w-4 rotate-45" />
                            </button>

                            {/* 7 модулей согласно rules-complete.md 9.2.3.2 + visual-design-rules.md */}
                            <div className="flex h-full">
                              {/* 1. ИЗОБРАЖЕНИЕ (80px фиксированная ширина) */}
                              <div className="w-20 flex-shrink-0 p-3">
                                <div className="w-full h-full bg-white/5 rounded-lg overflow-hidden">
                                  {product.mainImage ? (
                                    <Image
                                      src={product.mainImage}
                                      alt={product.name}
                                      width={80}
                                      height={112}
                                      className="w-full h-full object-cover"
                                    />
                                  ) : (
                                    <div className="w-full h-full flex items-center justify-center">
                                      <Package className="h-5 w-5 text-white/40" />
                                    </div>
                                  )}
                                </div>
                              </div>

                              {/* 2. ОБЩАЯ ИНФОРМАЦИЯ (flex-1) - Правильная типографика согласно 2.2 */}
                              <div className="flex-1 p-3 flex flex-col justify-center">
                                <div className="space-y-2">
                                  <h4 className="text-white font-semibold text-sm truncate">{product.name}</h4>
                                  <div className="text-white font-bold text-lg">
                                    {product.price.toLocaleString('ru-RU')} ₽
                                  </div>
                                  {product.category && (
                                    <Badge className="bg-blue-500/20 text-blue-300 border-0 text-xs font-medium px-2 py-1">
                                      {product.category.name}
                                    </Badge>
                                  )}
                                  <p className="text-white/60 text-xs truncate">От: {product.supplierName}</p>
                                  <p className="font-mono text-xs text-white/60 truncate">Артикул: {product.article}</p>
                                </div>
                              </div>

                              {/* 3. КОЛИЧЕСТВО/СУММА/ОСТАТОК (flex-1) */}
                              <div className="flex-1 p-3 flex flex-col justify-center">
                                <div className="space-y-3">
                                  {product.quantity !== undefined && (
                                    <div className="flex items-center gap-2">
                                      <div
                                        className={`w-2 h-2 rounded-full ${product.quantity > 0 ? 'bg-green-400' : 'bg-red-400'}`}
                                      ></div>
                                      <span className={`text-xs ${product.quantity > 0 ? 'text-green-400' : 'text-red-400'}`}>
                                        {product.quantity > 0 ? `${product.quantity} шт` : 'Нет в наличии'}
                                      </span>
                                    </div>
                                  )}

                                  <div className="flex items-center gap-2">
                                    <Input
                                      type="number"
                                      min="0"
                                      max={product.quantity}
                                      value={product.selectedQuantity || ''}
                                      onChange={(e) => {
                                        const inputValue = e.target.value
                                        const newQuantity = inputValue === '' ? 0 : Math.max(0, parseInt(inputValue) || 0)
                                        setAllSelectedProducts((prev) =>
                                          prev.map((p) =>
                                            p.id === product.id ? { ...p, selectedQuantity: newQuantity } : p,
                                          ),
                                        )
                                        
                                        // Автоматическое добавление/удаление из корзины
                                        if (newQuantity > 0) {
                                          // Добавляем в корзину
                                          const existingItem = selectedGoods.find(item => item.id === product.id)
                                          if (!existingItem) {
                                            // Добавляем новый товар
                                            setSelectedGoods(prev => [...prev, {
                                              id: product.id,
                                              name: product.name,
                                              sku: product.article,
                                              price: product.price,
                                              category: product.category?.name || '',
                                              selectedQuantity: newQuantity,
                                              unit: product.unit || 'шт',
                                              supplierId: selectedSupplier?.id || '',
                                              supplierName: selectedSupplier?.name || selectedSupplier?.fullName || 'Поставщик',
                                            }])
                                            // Инициализируем рецептуру
                                            initializeProductRecipe(product.id)
                                          } else {
                                            // Обновляем количество
                                            setSelectedGoods(prev => 
                                              prev.map(item => 
                                                item.id === product.id 
                                                  ? { ...item, selectedQuantity: newQuantity }
                                                  : item,
                                              ),
                                            )
                                          }
                                        } else {
                                          // Удаляем из корзины при количестве 0
                                          setSelectedGoods(prev => prev.filter(item => item.id !== product.id))
                                        }
                                      }}
                                      className="glass-input w-16 h-8 text-sm text-center text-white placeholder:text-white/50"
                                      placeholder="0"
                                    />
                                    <span className="text-white/60 text-sm">шт</span>
                                  </div>

                                  <div className="text-green-400 font-semibold text-sm">
                                    {(product.price * product.selectedQuantity).toLocaleString('ru-RU')} ₽
                                  </div>
                                </div>
                              </div>

                              {/* 4. УСЛУГИ ФФ (flex-1) - Правильные цвета согласно 1.2 */}
                              <div className="flex-1 p-3 flex flex-col">
                                <div className="text-center mb-2">
                                  {servicesCost > 0 && (
                                    <div className="text-purple-400 font-semibold text-sm mb-1">
                                      {servicesCost.toLocaleString('ru-RU')} ₽
                                    </div>
                                  )}
                                  <h6 className="text-purple-400 text-xs font-medium uppercase tracking-wider">🛠️ Услуги ФФ</h6>
                                </div>
                                <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
                                  {fulfillmentServices.length > 0 ? (
                                    fulfillmentServices.map((service) => {
                                      const isSelected = selectedServicesIds.includes(service.id)
                                      return (
                                        <label
                                          key={service.id}
                                          className={`block w-full px-2 py-1.5 rounded-md text-xs cursor-pointer transition-all duration-200 hover:scale-105 ${
                                            isSelected
                                              ? 'bg-purple-500/20 border-purple-500/30 text-purple-300 border'
                                              : 'bg-white/5 text-white/70 hover:bg-white/10 hover:text-white'
                                          }`}
                                        >
                                          <input
                                            type="checkbox"
                                            checked={isSelected}
                                            onChange={() => toggleService(product.id, service.id)}
                                            className="sr-only"
                                          />
                                          <div className="text-center">
                                            <div className="truncate font-medium">{service.name}</div>
                                            <div className="text-xs opacity-80 mt-1">
                                              {service.price.toLocaleString('ru-RU')}₽
                                            </div>
                                          </div>
                                        </label>
                                      )
                                    })
                                  ) : (
                                    <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">
                                      {selectedFulfillment ? 'Загрузка...' : 'Выберите ФФ'}
                                    </div>
                                  )}
                                </div>
                              </div>

                              {/* 5. РАСХОДНИКИ ФФ (flex-1) */}
                              <div className="flex-1 p-3 flex flex-col">
                                <div className="text-center mb-2">
                                  {ffConsumablesCost > 0 && (
                                    <div className="text-orange-400 font-semibold text-sm mb-1">
                                      {ffConsumablesCost.toLocaleString('ru-RU')} ₽
                                    </div>
                                  )}
                                  <h6 className="text-orange-400 text-xs font-medium uppercase tracking-wider">📦 Расходники ФФ</h6>
                                </div>
                                <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
                                  {fulfillmentConsumables.length > 0 ? (
                                    fulfillmentConsumables.map((consumable) => {
                                      const isSelected = selectedFFConsumablesIds.includes(consumable.id)
                                      return (
                                        <label
                                          key={consumable.id}
                                          className={`block w-full px-2 py-1.5 rounded-md text-xs cursor-pointer transition-all duration-200 hover:scale-105 ${
                                            isSelected
                                              ? 'bg-orange-500/20 border-orange-500/30 text-orange-300 border'
                                              : 'bg-white/5 text-white/70 hover:bg-white/10 hover:text-white'
                                          }`}
                                        >
                                          <input
                                            type="checkbox"
                                            checked={isSelected}
                                            onChange={() => toggleFFConsumable(product.id, consumable.id)}
                                            className="sr-only"
                                          />
                                          <div className="text-center">
                                            <div className="truncate font-medium">{consumable.name}</div>
                                            <div className="text-xs opacity-80 mt-1">
                                              {consumable.price.toLocaleString('ru-RU')}₽
                                            </div>
                                          </div>
                                        </label>
                                      )
                                    })
                                  ) : (
                                    <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">
                                      {selectedFulfillment ? 'Загрузка...' : 'Выберите ФФ'}
                                    </div>
                                  )}
                                </div>
                              </div>

                              {/* 6. РАСХОДНИКИ СЕЛЛЕРА (flex-1) */}
                              <div className="flex-1 p-3 flex flex-col">
                                <div className="text-center mb-2">
                                  {sellerConsumablesCost > 0 && (
                                    <div className="text-blue-400 font-semibold text-sm mb-1">
                                      {sellerConsumablesCost.toLocaleString('ru-RU')} ₽
                                    </div>
                                  )}
                                  <h6 className="text-blue-400 text-xs font-medium uppercase tracking-wider">🏪 Расходники сел.</h6>
                                </div>
                                <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
                                  {sellerConsumables.length > 0 ? (
                                    sellerConsumables.map((consumable) => {
                                      const isSelected = selectedSellerConsumablesIds.includes(consumable.id)
                                      return (
                                        <label
                                          key={consumable.id}
                                          className={`block w-full px-2 py-1.5 rounded-md text-xs cursor-pointer transition-all duration-200 hover:scale-105 ${
                                            isSelected
                                              ? 'bg-blue-500/20 border-blue-500/30 text-blue-300 border'
                                              : 'bg-white/5 text-white/70 hover:bg-white/10 hover:text-white'
                                          }`}
                                        >
                                          <input
                                            type="checkbox"
                                            checked={isSelected}
                                            onChange={() => toggleSellerConsumable(product.id, consumable.id)}
                                            className="sr-only"
                                          />
                                          <div className="text-center">
                                            <div className="truncate font-medium">{consumable.name}</div>
                                            <div className="text-xs opacity-80 mt-1">
                                              {consumable.pricePerUnit} ₽/{consumable.unit || 'шт'}
                                            </div>
                                          </div>
                                        </label>
                                      )
                                    })
                                  ) : (
                                    <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Загрузка...</div>
                                  )}
                                </div>
                              </div>

                              {/* 7. МП + ИТОГО (flex-1) */}
                              <div className="flex-1 p-3 flex flex-col justify-between">
                                <div className="text-center">
                                  <div className="text-green-400 font-bold text-lg mb-3">
                                    Итого: {totalWithRecipe.toLocaleString('ru-RU')} ₽
                                  </div>
                                </div>

                                <div className="flex-1 flex flex-col justify-center">
                                  <Select
                                    value={recipe?.selectedWBCard || 'none'}
                                    onValueChange={(value) => {
                                      if (value !== 'none') {
                                        _setWBCard(product.id, value)
                                      }
                                    }}
                                  >
                                    <SelectTrigger className="glass-input h-9 text-sm text-white">
                                      <SelectValue placeholder="Не выбрано" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="none">
                                        Не выбрано
                                      </SelectItem>
                                      {/* TODO: Загружать из БД */}
                                      <SelectItem value="card1">Карточка 1</SelectItem>
                                      <SelectItem value="card2">Карточка 2</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                              </div>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* БЛОК 4: КОРЗИНА И НАСТРОЙКИ - правый блок согласно rules-complete.md 9.2 */}
            <div className="w-72 flex-shrink-0">
              <div className="bg-white/10 backdrop-blur border-white/20 p-3 sticky top-0 rounded-2xl">
                <h3 className="text-white font-semibold mb-3 flex items-center text-sm">
                  <ShoppingCart className="h-4 w-4 mr-2" />
                  Корзина ({selectedGoods.length} шт)
                </h3>
                
                {selectedGoods.length === 0 ? (
                  <div className="text-center py-6">
                    <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-4 w-fit mx-auto mb-3">
                      <ShoppingCart className="h-8 w-8 text-purple-300" />
                    </div>
                    <p className="text-white/60 text-sm font-medium mb-2">Корзина пуста</p>
                    <p className="text-white/40 text-xs mb-3">Добавьте товары из каталога для создания поставки</p>
                  </div>
                ) : (
                  <div className="space-y-2 mb-4">
                    {selectedGoods.map((item) => {
                      // Используем единую функцию расчета
                      const itemTotalPrice = getProductTotalWithRecipe(item.id, item.selectedQuantity)
                      const basePrice = item.price
                      const priceWithRecipe = itemTotalPrice / item.selectedQuantity
                      
                      return (
                        <div key={item.id} className="flex items-center justify-between bg-white/5 rounded-lg p-2">
                          <div className="flex-1 min-w-0">
                            <h4 className="text-white text-sm font-medium truncate">{item.name}</h4>
                            <p className="text-white/60 text-xs">
                              {priceWithRecipe.toLocaleString('ru-RU')} ₽ × {item.selectedQuantity}
                            </p>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-green-400 font-bold text-sm">
                              {itemTotalPrice.toLocaleString('ru-RU')} ₽
                            </span>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => removeFromCart(item.id)}
                              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 p-1 h-6 w-6"
                            >
                              <X className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )}

                {selectedGoods.length > 0 && (
                  <>
                    <div className="border-t border-white/10 pt-3 mb-3">
                      {deliveryDate && (
                        <div className="mb-2">
                          <p className="text-white/60 text-xs">Дата поставки:</p>
                          <p className="text-white text-xs font-medium">
                            {new Date(deliveryDate).toLocaleDateString('ru-RU')}
                          </p>
                        </div>
                      )}
                      
                      {selectedFulfillment && (
                        <div className="mb-2">
                          <p className="text-white/60 text-xs">Фулфилмент-центр:</p>
                          <p className="text-white text-xs font-medium">
                            {allCounterparties?.find(c => c.id === selectedFulfillment)?.name || 
                             allCounterparties?.find(c => c.id === selectedFulfillment)?.fullName || 
                             'Выбранный центр'}
                          </p>
                        </div>
                      )}

                      <div className="mb-3">
                        <p className="text-white/60 text-xs mb-1">Логистическая компания:</p>
                        <select
                          value={selectedLogistics}
                          onChange={(e) => setSelectedLogistics(e.target.value)}
                          className="w-full bg-white/5 border-white/10 text-white h-7 text-xs rounded hover:border-white/30 focus:border-purple-400/50 transition-all duration-200"
                        >
                          <option value="auto" className="bg-gray-800 text-white">
                            Выбрать
                          </option>
                          {logisticsCompanies.length > 0 ? (
                            logisticsCompanies.map((logisticsPartner) => (
                              <option key={logisticsPartner.id} value={logisticsPartner.id} className="bg-gray-800 text-white">
                                {logisticsPartner.name || logisticsPartner.fullName}
                              </option>
                            ))
                          ) : (
                            <option value="" disabled className="bg-gray-800 text-white">
                              Нет доступных логистических партнеров
                            </option>
                          )}
                        </select>
                      </div>
                    </div>
                    
                    <div className="flex items-center justify-between mb-3 pt-2 border-t border-white/10">
                      <span className="text-white font-semibold text-sm">Итого:</span>
                      <span className="text-green-400 font-bold text-lg">{totalAmount.toLocaleString('ru-RU')} ₽</span>
                    </div>
                    
                    <Button
                      onClick={handleCreateSupply}
                      disabled={!isFormValid || isCreatingSupply}
                      className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50 h-8 text-sm"
                    >
                      {isCreatingSupply ? 'Создание...' : 'Создать поставку'}
                    </Button>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Модальное окно для детального добавления товара */}
      <AddGoodsModal
        product={selectedProductForModal}
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false)
          setSelectedProductForModal(null)
        }}
        onAdd={addToCartFromModal}
      />
    </div>
  )
}