'use client'

import { useQuery } from '@apollo/client'
import { Plus, Package, Wrench, AlertTriangle, Building2, ShoppingCart, FileText } from 'lucide-react'
import { useSearchParams, useRouter } from 'next/navigation'
import React, { useState, useEffect } from 'react'

import { Sidebar } from '@/components/dashboard/sidebar'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { GET_MY_SELLER_GOODS_SUPPLIES } from '@/graphql/mutations/seller-goods-v2'
import { GET_PENDING_SUPPLIES_COUNT } from '@/graphql/queries'
import { GET_MY_SELLER_CONSUMABLE_SUPPLIES } from '@/graphql/queries/seller-consumables-v2'
import { useAuthContext } from '@/contexts/AuthContext'
import { useRealtime } from '@/hooks/useRealtime'
import { useSidebar } from '@/hooks/useSidebar'

import { AllSuppliesTab } from './fulfillment-supplies/all-supplies-tab'
import { RealSupplyOrdersTab } from './fulfillment-supplies/real-supply-orders-tab'
import { SellerSupplyOrdersTab } from './fulfillment-supplies/seller-supply-orders-tab'
import { SuppliesStatistics } from './supplies-statistics'

// Компонент для отображения бейджа с уведомлениями
function NotificationBadge({ count }: { count: number }) {
  if (count === 0) return null

  return (
    <div className="ml-1 bg-red-500 text-white text-xs font-bold rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
      {count > 99 ? '99+' : count}
    </div>
  )
}

export function SuppliesDashboard() {
  const { getSidebarMargin } = useSidebar()
  const searchParams = useSearchParams()
  const router = useRouter()
  const [activeTab, setActiveTab] = useState('fulfillment')
  const [activeSubTab, setActiveSubTab] = useState('goods')
  const [activeThirdTab, setActiveThirdTab] = useState('cards')
  const { user } = useAuthContext()
  const [_statisticsData, _setStatisticsData] = useState<any>(null)

  // Загружаем счетчик поставок, требующих одобрения
  const { data: pendingData, refetch: refetchPending } = useQuery(GET_PENDING_SUPPLIES_COUNT, {
    fetchPolicy: 'cache-first',
    errorPolicy: 'ignore',
  })

  // 🔧 V2 СИСТЕМЫ: Работаем только с V2, без переключений

  // Вариант 1: V2 СИСТЕМА (активный)
  // Вариант 2: V1 код (BACKUP для отката)
  /*
  const { data: mySuppliesData, loading: mySuppliesLoading, refetch: refetchMySupplies } = useQuery(GET_MY_SUPPLY_ORDERS, {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'all',
    skip: !user || user.organization?.type !== 'SELLER' || (USE_V2_GOODS_SYSTEM && (activeSubTab === 'goods')),
  })
  */

  // Загружаем V2 товарные поставки селлера
  const { data: myV2GoodsData, loading: myV2GoodsLoading, refetch: refetchMyV2Goods, error: _myV2GoodsError } = useQuery(GET_MY_SELLER_GOODS_SUPPLIES, {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'all',
    skip: !user || user.organization?.type !== 'SELLER' || activeSubTab !== 'goods', // Загружаем только для товаров
  })

  // Загружаем V2 расходники селлера
  const { data: myV2ConsumablesData, loading: myV2ConsumablesLoading, refetch: refetchMyV2Consumables, error: _myV2ConsumablesError } = useQuery(GET_MY_SELLER_CONSUMABLE_SUPPLIES, {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'all',
    skip: !user || user.organization?.type !== 'SELLER' || activeSubTab !== 'consumables', // Загружаем только для расходников
  })

  // Отладка V2 данных
  console.log('🔍 V2 Query Debug:', {
    activeSubTab,
    userType: user?.organization?.type,
    hasUser: !!user,
    goodsLoading: myV2GoodsLoading,
    consumablesLoading: myV2ConsumablesLoading,
    goodsData: myV2GoodsData?.mySellerGoodsSupplies?.length || 0,
    consumablesData: myV2ConsumablesData?.mySellerConsumableSupplies?.length || 0,
  })

  useRealtime({
    onEvent: (evt) => {
      if (evt.type === 'supply-order:new' || evt.type === 'supply-order:updated') {
        refetchPending()
        refetchMyV2Goods() // Обновляем V2 товарные поставки селлера при изменениях
        refetchMyV2Consumables() // Обновляем V2 расходники селлера при изменениях
      }
    },
  })

  const pendingCount = pendingData?.pendingSuppliesCount
  // ✅ ПРАВИЛЬНО: Настраиваем уведомления по типам организаций
  const hasPendingItems = (() => {
    if (!pendingCount) return false

    switch (user?.organization?.type) {
      case 'SELLER':
        // Селлеры не получают уведомления о поставках - только отслеживают статус
        return false
      case 'WHOLESALE':
        // Поставщики видят только входящие заказы, не заявки на партнерство
        return pendingCount.incomingSupplierOrders > 0
      case 'FULFILLMENT':
        // Фулфилмент видит только поставки к обработке, не заявки на партнерство
        return pendingCount.supplyOrders > 0
      case 'LOGIST':
        // Логистика видит только логистические заявки, не заявки на партнерство
        return pendingCount.logisticsOrders > 0
      default:
        return pendingCount.total > 0
    }
  })()

  // Автоматически определяем активные табы на основе URL
  useEffect(() => {
    const currentPath = window.location.pathname
    
    // Определяем активные табы на основе URL структуры
    if (currentPath.includes('/seller/supplies/goods/cards')) {
      setActiveTab('fulfillment')
      setActiveSubTab('goods')
      setActiveThirdTab('cards')
    } else if (currentPath.includes('/seller/supplies/goods/suppliers')) {
      setActiveTab('fulfillment')
      setActiveSubTab('goods')
      setActiveThirdTab('suppliers')
    } else if (currentPath.includes('/seller/supplies/consumables')) {
      setActiveTab('fulfillment')
      setActiveSubTab('consumables')
    } else if (currentPath.includes('/seller/supplies/marketplace/wildberries')) {
      setActiveTab('marketplace')
      setActiveSubTab('wildberries')
    } else if (currentPath.includes('/seller/supplies/marketplace/ozon')) {
      setActiveTab('marketplace')
      setActiveSubTab('ozon')
    }

    // Поддержка старых параметров для обратной совместимости
    const tab = searchParams.get('tab')
    if (tab === 'consumables') {
      setActiveTab('fulfillment')
      setActiveSubTab('consumables')
    } else if (tab === 'goods') {
      setActiveTab('fulfillment')
      setActiveSubTab('goods')
    }
  }, [searchParams])

  // Определяем тип организации для выбора правильного компонента
  const isWholesale = user?.organization?.type === 'WHOLESALE'

  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">
          {/* Уведомляющий баннер */}
          {hasPendingItems && (
            <Alert className="bg-blue-500/20 border-blue-400/30 text-blue-300 animate-pulse">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>
                {(() => {
                  switch (user?.organization?.type) {
                    case 'WHOLESALE':
                      const orders = pendingCount.incomingSupplierOrders || 0
                      return `У вас ${orders} входящ${orders > 1 ? (orders < 5 ? 'их' : 'их') : 'ий'} заказ${
                        orders > 1 ? (orders < 5 ? 'а' : 'ов') : ''
                      } от клиентов, ожидающ${orders > 1 ? 'их' : 'ий'} подтверждения`
                    case 'FULFILLMENT':
                      const supplies = pendingCount.supplyOrders || 0
                      return `У вас ${supplies} поставк${supplies > 1 ? (supplies < 5 ? 'и' : 'ов') : 'а'} к обработке`
                    case 'LOGIST':
                      const logistics = pendingCount.logisticsOrders || 0
                      return `У вас ${logistics} логистическ${
                        logistics > 1 ? (logistics < 5 ? 'их' : 'их') : 'ая'
                      } заявк${logistics > 1 ? (logistics < 5 ? 'и' : 'и') : 'а'} к подтверждению`
                    default:
                      return 'У вас есть элементы, требующие внимания'
                  }
                })()}
              </AlertDescription>
            </Alert>
          )}

          {/* БЛОК 1: ТАБЫ (навигация) */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 flex-shrink-0">
            {/* УРОВЕНЬ 1: Главные табы */}
            <div className="mb-4">
              <div className="grid w-full grid-cols-2 bg-white/15 backdrop-blur border-white/30 rounded-xl h-11 p-2">
                <button
                  onClick={() => {
                    router.push('/seller/supplies/goods/cards')
                  }}
                  className={`flex items-center gap-2 text-sm font-semibold transition-all duration-200 rounded-lg px-3 ${
                    activeTab === 'fulfillment'
                      ? 'bg-gradient-to-r from-purple-500/40 to-pink-500/40 text-white shadow-lg'
                      : 'text-white/80 hover:text-white'
                  }`}
                >
                  <Building2 className="h-4 w-4" />
                  <span className="hidden sm:inline">Поставки на фулфилмент</span>
                  <span className="sm:hidden">Фулфилмент</span>
                  <NotificationBadge count={pendingCount?.supplyOrders || 0} />
                </button>
                <button
                  onClick={() => {
                    router.push('/seller/supplies/marketplace/wildberries')
                  }}
                  className={`flex items-center gap-2 text-sm font-semibold transition-all duration-200 rounded-lg px-3 ${
                    activeTab === 'marketplace'
                      ? 'bg-gradient-to-r from-purple-500/40 to-pink-500/40 text-white shadow-lg'
                      : 'text-white/80 hover:text-white'
                  }`}
                >
                  <ShoppingCart className="h-4 w-4" />
                  <span className="hidden sm:inline">Поставки на маркетплейсы</span>
                  <span className="sm:hidden">Маркетплейсы</span>
                </button>
              </div>
            </div>

            {/* УРОВЕНЬ 2: Подтабы для фулфилмента - ТОЛЬКО когда активен фулфилмент */}
            {activeTab === 'fulfillment' && (
              <div className="ml-4 mb-3">
                <div className="flex w-full bg-white/8 backdrop-blur border-white/20 h-9 rounded-lg p-1">
                  {/* Табы товар и расходники */}
                  <div className="grid grid-cols-2 flex-1">
                    <button
                      onClick={() => router.push('/seller/supplies/goods/cards')}
                      className={`flex items-center gap-1 text-xs font-medium transition-all duration-150 rounded-md px-2 ${
                        activeSubTab === 'goods'
                          ? 'bg-white/15 text-white border-white/20'
                          : 'text-white/60 hover:text-white/80'
                      }`}
                    >
                      <Package className="h-3 w-3" />
                      <span className="hidden sm:inline">Товар</span>
                      <span className="sm:hidden">Т</span>
                    </button>
                    <button
                      onClick={() => router.push('/seller/supplies/consumables')}
                      className={`flex items-center justify-between text-xs font-medium transition-all duration-150 rounded-md px-2 relative ${
                        activeSubTab === 'consumables'
                          ? 'bg-white/15 text-white border-white/20'
                          : 'text-white/60 hover:text-white/80'
                      }`}
                    >
                      <div className="flex items-center gap-1">
                        <Wrench className="h-3 w-3" />
                        <span className="hidden sm:inline">Расходники селлера</span>
                        <span className="sm:hidden">Р</span>
                        <NotificationBadge count={pendingCount?.supplyOrders || 0} />
                      </div>

                      {/* Кнопка создания внутри таба расходников */}
                      {activeSubTab === 'consumables' && (
                        <div
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push('/seller/create/consumables')
                          }}
                          className="h-6 px-2 py-1 bg-white/10 border border-white/20 hover:bg-white/20 text-xs font-medium text-white/80 hover:text-white rounded-md transition-all duration-150 flex items-center gap-1 cursor-pointer"
                        >
                          <Plus className="h-2.5 w-2.5" />
                          <span className="hidden lg:inline">Создать</span>
                        </div>
                      )}
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* УРОВЕНЬ 2: Подтабы для маркетплейсов - ТОЛЬКО когда активны маркетплейсы */}
            {activeTab === 'marketplace' && (
              <div className="ml-4 mb-3">
                <div className="flex w-full bg-white/8 backdrop-blur border-white/20 h-9 rounded-lg p-1">
                  {/* Табы маркетплейсов */}
                  <div className="grid grid-cols-2 flex-1">
                    <button
                      onClick={() => router.push('/seller/supplies/marketplace/wildberries')}
                      className={`flex items-center justify-between text-xs font-medium transition-all duration-150 rounded-md px-2 ${
                        activeSubTab === 'wildberries'
                          ? 'bg-white/15 text-white border-white/20'
                          : 'text-white/60 hover:text-white/80'
                      }`}
                    >
                      <div className="flex items-center gap-1">
                        <ShoppingCart className="h-3 w-3" />
                        <span className="hidden sm:inline">Wildberries</span>
                        <span className="sm:hidden">W</span>
                      </div>

                      {/* Кнопка создания внутри таба Wildberries */}
                      {activeSubTab === 'wildberries' && (
                        <div
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push('/seller/supplies/marketplace/wildberries')
                          }}
                          className="h-6 px-2 py-1 bg-white/10 border border-white/20 hover:bg-white/20 text-xs font-medium text-white/80 hover:text-white rounded-md transition-all duration-150 flex items-center gap-1 cursor-pointer"
                        >
                          <Plus className="h-2.5 w-2.5" />
                          <span className="hidden lg:inline">Создать</span>
                        </div>
                      )}
                    </button>
                    <button
                      onClick={() => router.push('/seller/supplies/marketplace/ozon')}
                      className={`flex items-center justify-between text-xs font-medium transition-all duration-150 rounded-md px-2 ${
                        activeSubTab === 'ozon'
                          ? 'bg-white/15 text-white border-white/20'
                          : 'text-white/60 hover:text-white/80'
                      }`}
                    >
                      <div className="flex items-center gap-1">
                        <ShoppingCart className="h-3 w-3" />
                        <span className="hidden sm:inline">Ozon</span>
                        <span className="sm:hidden">O</span>
                      </div>

                      {/* Кнопка создания внутри таба Ozon */}
                      {activeSubTab === 'ozon' && (
                        <div
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push('/seller/supplies/marketplace/ozon')
                          }}
                          className="h-6 px-2 py-1 bg-white/10 border border-white/20 hover:bg-white/20 text-xs font-medium text-white/80 hover:text-white rounded-md transition-all duration-150 flex items-center gap-1 cursor-pointer"
                        >
                          <Plus className="h-2.5 w-2.5" />
                          <span className="hidden lg:inline">Создать</span>
                        </div>
                      )}
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* УРОВЕНЬ 3: Подподтабы для товаров - ТОЛЬКО когда активен товар */}
            {activeTab === 'fulfillment' && activeSubTab === 'goods' && (
              <div className="ml-8">
                <div className="flex w-full bg-white/5 backdrop-blur border-white/15 h-8 rounded-md p-1">
                  {/* Табы карточки и поставщики */}
                  <div className="grid grid-cols-2 flex-1">
                    <button
                      onClick={() => router.push('/seller/supplies/goods/cards')}
                      className={`flex items-center justify-between text-xs font-normal transition-all duration-150 rounded-sm px-2 ${
                        activeThirdTab === 'cards' ? 'bg-white/10 text-white' : 'text-white/50 hover:text-white/70'
                      }`}
                    >
                      <div className="flex items-center gap-1">
                        <FileText className="h-2.5 w-2.5" />
                        <span className="hidden sm:inline">Карточки</span>
                        <span className="sm:hidden">К</span>
                      </div>

                      {/* Кнопка создания внутри таба карточек */}
                      {activeThirdTab === 'cards' && (
                        <div
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push('/seller/create/goods')
                          }}
                          className="h-5 px-1.5 py-0.5 bg-white/8 border border-white/15 hover:bg-white/15 text-xs font-normal text-white/60 hover:text-white/80 rounded-sm transition-all duration-150 flex items-center gap-0.5 cursor-pointer"
                        >
                          <Plus className="h-2 w-2" />
                          <span className="hidden xl:inline text-xs">Создать</span>
                        </div>
                      )}
                    </button>
                    <button
                      onClick={() => router.push('/seller/supplies/goods/suppliers')}
                      className={`flex items-center justify-between text-xs font-normal transition-all duration-150 rounded-sm px-2 ${
                        activeThirdTab === 'suppliers' ? 'bg-white/10 text-white' : 'text-white/50 hover:text-white/70'
                      }`}
                    >
                      <div className="flex items-center gap-1">
                        <Building2 className="h-2.5 w-2.5" />
                        <span className="hidden sm:inline">Поставщики</span>
                        <span className="sm:hidden">П</span>
                      </div>

                      {/* Кнопка создания внутри таба поставщиков */}
                      {activeThirdTab === 'suppliers' && (
                        <div
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push('/seller/create/goods')
                          }}
                          className="h-5 px-1.5 py-0.5 bg-white/8 border border-white/15 hover:bg-white/15 text-xs font-normal text-white/60 hover:text-white/80 rounded-sm transition-all duration-150 flex items-center gap-0.5 cursor-pointer"
                        >
                          <Plus className="h-2 w-2" />
                          <span className="hidden xl:inline text-xs">Создать</span>
                        </div>
                      )}
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* БЛОК 2: СТАТИСТИКА (метрики) */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 mt-4 flex-shrink-0">
            <SuppliesStatistics
              activeTab={activeTab}
              activeSubTab={activeSubTab}
              activeThirdTab={activeThirdTab}
              data={_statisticsData}
              loading={false}
            />
          </div>

          {/* БЛОК 3: ОСНОВНОЙ КОНТЕНТ (сохраняем весь функционал) */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl mt-4 flex-1 min-h-0">
            <div className="h-full overflow-y-auto p-6">
              {/* СОДЕРЖИМОЕ ПОСТАВОК НА ФУЛФИЛМЕНТ */}
              {activeTab === 'fulfillment' && (
                <div className="h-full">
                  {/* ТОВАР */}
                  {activeSubTab === 'goods' && (
                    <div className="h-full">
                      {/* ✅ ЕДИНАЯ ЛОГИКА для табов "Карточки" и "Поставщики" согласно rules2.md 9.5.3 */}
                      {(activeThirdTab === 'cards' || activeThirdTab === 'suppliers') && (
                        <div>
                          {/* V2 система - всегда активна */}
                          <div className="mb-4 p-3 bg-blue-500/20 border border-blue-400/30 text-blue-200 rounded-lg">
                            🆕 V2 система товарных поставок
                          </div>
                          
                          <AllSuppliesTab
                            pendingSupplyOrders={pendingCount?.supplyOrders || 0}
                            goodsSupplies={(myV2GoodsData?.mySellerGoodsSupplies || []).map((v2Supply: any) => ({
                              // Адаптируем V2 структуру под V1 формат для таблицы
                              ...v2Supply,
                              partner: v2Supply.supplier || { id: '', name: 'Поставщик не выбран', inn: '' }, // supplier → partner для совместимости
                              deliveryDate: v2Supply.requestedDeliveryDate, // для совместимости
                              totalAmount: v2Supply.totalCostWithDelivery, // V2 уже содержит итоговую сумму
                              items: v2Supply.recipeItems?.map((item: any) => ({
                                // Адаптируем recipeItems → items для совместимости с таблицей
                                ...item,
                                price: item.product?.price || 0,
                                totalPrice: (item.product?.price || 0) * item.quantity,
                                // В V2 нет рецептуры в item, поэтому создаем пустой объект
                                recipe: {
                                  services: [],
                                  fulfillmentConsumables: [],
                                  sellerConsumables: [],
                                },
                              })) || [],
                            }))}
                            loading={myV2GoodsLoading}
                          />
                        </div>
                      )}
                    </div>
                  )}

                  {/* РАСХОДНИКИ СЕЛЛЕРА - сохраняем весь функционал */}
                  {activeSubTab === 'consumables' && (
                    <div className="h-full">
                      {/* V2 система - всегда активна */}
                      <div className="mb-4 p-3 bg-green-500/20 border border-green-400/30 text-green-200 rounded-lg">
                        🆕 V2 система расходников селлера
                      </div>
                      
                      {isWholesale ? <RealSupplyOrdersTab /> : <SellerSupplyOrdersTab />}
                    </div>
                  )}
                </div>
              )}

              {/* СОДЕРЖИМОЕ ПОСТАВОК НА МАРКЕТПЛЕЙСЫ */}
              {activeTab === 'marketplace' && (
                <div className="h-full">
                  {/* WILDBERRIES - плейсхолдер */}
                  {activeSubTab === 'wildberries' && (
                    <div className="text-white/70 text-center py-8">
                      <Package className="h-16 w-16 mx-auto mb-4 text-white/30" />
                      <h3 className="text-xl font-semibold mb-2">Поставки на Wildberries</h3>
                      <p>Раздел находится в разработке</p>
                    </div>
                  )}

                  {/* OZON - плейсхолдер */}
                  {activeSubTab === 'ozon' && (
                    <div className="text-white/70 text-center py-8">
                      <Package className="h-16 w-16 mx-auto mb-4 text-white/30" />
                      <h3 className="text-xl font-semibold mb-2">Поставки на Ozon</h3>
                      <p>Раздел находится в разработке</p>
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
