'use client'

import React, { useState, useEffect } from 'react'

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useAuthContext } from '@/contexts/AuthContext'

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

interface FulfillmentSuppliesTabProps {
  defaultSubTab?: string
  pendingSupplyOrders?: number
}

export function FulfillmentSuppliesTab({ defaultSubTab, pendingSupplyOrders = 0 }: FulfillmentSuppliesTabProps) {
  const [activeSubTab, setActiveSubTab] = useState('all')
  const { user } = useAuthContext()

  // Устанавливаем активную подвкладку при получении defaultSubTab
  useEffect(() => {
    if (defaultSubTab) {
      setActiveSubTab(defaultSubTab)
    }
  }, [defaultSubTab])

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

  return (
    <div className="h-full overflow-hidden">
      <Tabs
        value={activeSubTab}
        onValueChange={setActiveSubTab}
        className="w-full h-full flex flex-col overflow-hidden"
      >
        {/* Подвкладки для ФФ */}
        <TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-2 w-fit text-sm">
          <TabsTrigger
            value="all"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
          >
            Все
          </TabsTrigger>
          <TabsTrigger
            value="goods"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
          >
            Товар
          </TabsTrigger>
          <TabsTrigger
            value="supplies"
            className={`data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4 relative ${
              pendingSupplyOrders > 0 ? 'animate-pulse' : ''
            }`}
          >
            Расходники
            {pendingSupplyOrders > 0 && (
              <div className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-xs font-bold text-white">
                {pendingSupplyOrders}
              </div>
            )}
          </TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="mt-0 flex-1 overflow-hidden">
          <AllSuppliesTab pendingSupplyOrders={pendingSupplyOrders} />
        </TabsContent>

        <TabsContent value="goods" className="mt-0 flex-1 overflow-hidden">
          <FulfillmentGoodsTab />
        </TabsContent>

        <TabsContent value="supplies" className="mt-0 flex-1 overflow-hidden">
          {/* ВРЕМЕННО: Заменяем старый компонент на информационное сообщение */}
          {isWholesale ? (
            <div className="flex items-center justify-center h-64">
              <div className="text-center">
                <h3 className="text-lg font-semibold text-white mb-2">Используйте новый интерфейс</h3>
                <p className="text-white/60">Переходите в раздел "Входящие поставки" → "Расходники фулфилмента"</p>
              </div>
            </div>
          ) : (
            <SellerSupplyOrdersTab />
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
