// =============================================================================
// 🧩 МОДУЛЬНАЯ ВЕРСИЯ ДЛЯ СЕЛЛЕРА - СОЗДАНИЕ ПОСТАВОК РАСХОДНИКОВ V2
// =============================================================================
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в фулфилмент версии!
// Отличия только в бизнес-логике и данных

'use client'

import { useRouter } from 'next/navigation'
import React from 'react'

import { Sidebar } from '@/components/dashboard/sidebar'
import { useAuthContext } from '@/contexts/AuthContext'
import { useSidebar } from '@/hooks/useSidebar'

// 📦 Импорт селлерских компонентов
import {
  PageHeader,
  ConsumablesBlock, // Используем тот же компонент расходников
} from './blocks'
import { SellerSuppliersBlock, SellerShoppingCartBlock } from './blocks/seller-blocks'
// 🔧 Импорт селлерских хуков
import {
  useProductData, // Используем тот же hook для товаров
  useQuantityManagement, // Используем тот же hook для количества
  useCurrencyFormatting, // Используем тот же hook для валюты
} from './hooks'
import { useSellerSupplyForm, useSellerSupplyCreation, useSellerSupplierData } from './hooks/seller-hooks'

export function SellerModularVersion() {
  const router = useRouter()
  const { getSidebarMargin } = useSidebar()
  const { user: _user } = useAuthContext()

  // 📋 Управление состоянием формы СЕЛЛЕРА
  const {
    selectedSupplier,
    selectedFulfillment, // 🆕 Дополнительное поле для селлера
    selectedLogistics,
    selectedConsumables,
    searchQuery,
    productSearchQuery,
    deliveryDate,
    notes,
    setSelectedSupplier,
    setSelectedFulfillment, // 🆕 Дополнительный сеттер
    setSelectedLogistics,
    setSelectedConsumables,
    setSearchQuery,
    setProductSearchQuery,
    setDeliveryDate,
    setNotes,
    resetForm,
  } = useSellerSupplyForm()

  // 🏢 Данные партнеров для селлера (поставщики + фулфилмент-центры)
  const {
    suppliers,
    fulfillmentCenters, // 🆕 Фулфилмент-центры для селлера
    filteredSuppliers,
    filteredFulfillmentCenters, // 🆕 Фильтрованные ФФ
    logisticsPartners,
    loading: suppliersLoading,
  } = useSellerSupplierData({ searchQuery })

  // 📦 Данные товаров (используем тот же hook что и для фулфилмента)
  const { products, loading: productsLoading } = useProductData({
    selectedSupplier, // 🔄 Товары от выбранного поставщика
    productSearchQuery,
  })

  // 📊 Управление количеством (используем тот же hook)
  const { updateConsumableQuantity, getSelectedQuantity, getTotalAmount, getTotalItems } = useQuantityManagement({
    selectedSupplier,
    selectedConsumables,
    products,
    setSelectedConsumables,
  })

  // 🚀 Создание поставки СЕЛЛЕРА
  const { createSupply, isCreating: isCreatingSupply } = useSellerSupplyCreation({
    selectedSupplier,
    selectedFulfillment, // 🆕 Передаем фулфилмент-центр
    selectedConsumables,
    deliveryDate,
    notes,
    resetForm,
  })

  // 💰 Форматирование валюты (используем тот же hook)
  const { formatCurrency } = useCurrencyFormatting()

  // 🔄 Обработчики событий
  const handleBack = () => {
    // TODO: Создать маршрут для списка поставок селлера
    // Вариант 1: Новый URL (активный)
    router.push('/seller/supplies')
    // Вариант 2: Старый URL (для отката)
    // router.push('/seller-supplies') // или другой подходящий маршрут
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300`}>
        <div className="min-h-full w-full flex flex-col px-3 py-2">
          {/* 📄 Заголовок страницы */}
          <PageHeader onBack={handleBack} />

          {/* 🧩 Основной контент с двумя блоками */}
          <div className="flex-1 flex gap-3 min-h-0">
            {/* 📦 Левая колонка - Партнеры и Расходники */}
            <div className="flex-1 flex flex-col gap-3 min-h-0">
              {/* 🏪 Блок партнеров (поставщики + фулфилмент-центры) */}
              <SellerSuppliersBlock
                suppliers={suppliers}
                fulfillmentCenters={fulfillmentCenters}
                filteredSuppliers={filteredSuppliers}
                filteredFulfillmentCenters={filteredFulfillmentCenters}
                selectedSupplier={selectedSupplier}
                selectedFulfillment={selectedFulfillment}
                searchQuery={searchQuery}
                loading={suppliersLoading}
                onSelectSupplier={setSelectedSupplier}
                onSelectFulfillment={setSelectedFulfillment}
                onSearchChange={setSearchQuery}
              />

              {/* 📦 Блок расходников (тот же что у фулфилмента) */}
              <ConsumablesBlock
                selectedSupplier={selectedSupplier}
                products={products}
                productsLoading={productsLoading}
                productSearchQuery={productSearchQuery}
                getSelectedQuantity={getSelectedQuantity}
                onProductSearchChange={setProductSearchQuery}
                onUpdateQuantity={updateConsumableQuantity}
                formatCurrency={formatCurrency}
              />
            </div>

            {/* 🛒 Правая колонка - Корзина СЕЛЛЕРА */}
            <div className="w-72 flex-shrink-0">
              <SellerShoppingCartBlock
                selectedConsumables={selectedConsumables}
                selectedFulfillment={selectedFulfillment} // 🆕 Показываем выбранный ФФ
                deliveryDate={deliveryDate}
                notes={notes}
                selectedLogistics={selectedLogistics}
                logisticsPartners={logisticsPartners}
                isCreatingSupply={isCreatingSupply}
                getTotalAmount={getTotalAmount}
                getTotalItems={getTotalItems}
                formatCurrency={formatCurrency}
                onUpdateQuantity={updateConsumableQuantity}
                onSetDeliveryDate={setDeliveryDate}
                onSetNotes={setNotes}
                onSetLogistics={setSelectedLogistics}
                onCreateSupply={createSupply}
              />
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
