'use client'

import { Package, Clock, Truck } from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

import { NewGoodsTab } from './components/NewGoodsTab'
import { useFulfillmentGoodsData } from './hooks/useFulfillmentGoodsData'

export function FulfillmentGoodsManagement() {
  const [activeTab, setActiveTab] = useState('new')
  const { groupedSupplies, employees, logisticsPartners, loading, error, refetch } = useFulfillmentGoodsData()
  
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-white/60">Загрузка товарных поставок...</div>
      </div>
    )
  }
  
  if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-red-400">
          Ошибка загрузки: {error.message}
        </div>
      </div>
    )
  }
  
  return (
    <div className="space-y-6">
      {/* Заголовок */}
      <div>
        <h1 className="text-2xl font-bold text-white mb-2">Товарные поставки</h1>
        <p className="text-white/60">Управление входящими товарными поставками от селлеров</p>
      </div>
      
      {/* Табы */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3 bg-white/10 backdrop-blur border-white/20">
          <TabsTrigger 
            value="new" 
            className="flex items-center gap-2 glass-button"
          >
            <Clock className="h-4 w-4" />
            Новые
            {groupedSupplies.new.length > 0 && (
              <Badge variant="secondary" className="ml-1 bg-purple-500/20 text-purple-300">
                {groupedSupplies.new.length}
              </Badge>
            )}
          </TabsTrigger>
          
          <TabsTrigger 
            value="receiving" 
            className="flex items-center gap-2 glass-button"
          >
            <Truck className="h-4 w-4" />
            Приёмка
            {groupedSupplies.receiving.length > 0 && (
              <Badge variant="secondary" className="ml-1 bg-blue-500/20 text-blue-300">
                {groupedSupplies.receiving.length}
              </Badge>
            )}
          </TabsTrigger>
          
          <TabsTrigger 
            value="received" 
            className="flex items-center gap-2 glass-button"
          >
            <Package className="h-4 w-4" />
            Принято
            {groupedSupplies.received.length > 0 && (
              <Badge variant="secondary" className="ml-1 bg-green-500/20 text-green-300">
                {groupedSupplies.received.length}
              </Badge>
            )}
          </TabsTrigger>
        </TabsList>
        
        {/* Контент табов */}
        <TabsContent value="new" className="mt-6">
          <NewGoodsTab 
            supplies={groupedSupplies.new}
            employees={employees}
            logisticsPartners={logisticsPartners}
            onRefetch={refetch}
          />
        </TabsContent>
        
        <TabsContent value="receiving" className="mt-6">
          <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
            <div className="text-center py-8">
              <Truck className="h-16 w-16 mx-auto mb-4 text-blue-400" />
              <h3 className="text-xl font-semibold text-white mb-2">Приёмка товаров</h3>
              <p className="text-white/60">ФАЗА 3: Будет реализовано позже</p>
            </div>
          </Card>
        </TabsContent>
        
        <TabsContent value="received" className="mt-6">
          <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
            <div className="text-center py-8">
              <Package className="h-16 w-16 mx-auto mb-4 text-green-400" />
              <h3 className="text-xl font-semibold text-white mb-2">Принятые товары</h3>
              <p className="text-white/60">ФАЗА 4: Будет реализовано позже</p>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}