"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card } from '@/components/ui/card'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { useQuery } from '@apollo/client'
import { GET_INCOMING_REQUESTS } from '@/graphql/queries'
import { MarketCounterparties } from '../market/market-counterparties'
import { MarketFulfillment } from '../market/market-fulfillment'
import { MarketSellers } from '../market/market-sellers'
import { MarketLogistics } from '../market/market-logistics'
import { MarketWholesale } from '../market/market-wholesale'

export function PartnersDashboard() {
  const { getSidebarMargin } = useSidebar()
  
  // Загружаем входящие заявки для подсветки
  const { data: incomingRequestsData } = useQuery(GET_INCOMING_REQUESTS, {
    pollInterval: 30000, // Обновляем каждые 30 секунд
    fetchPolicy: 'cache-first',
    errorPolicy: 'ignore',
  })

  const incomingRequests = incomingRequestsData?.incomingRequests || []
  const hasIncomingRequests = incomingRequests.length > 0

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        <div className="h-full w-full flex flex-col">
          {/* Основной контент с табами */}
          <div className="flex-1 overflow-hidden">
            <Tabs defaultValue="counterparties" className="h-full flex flex-col">
              <TabsList className={`grid w-full grid-cols-5 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 ${hasIncomingRequests ? 'ring-2 ring-blue-400/50' : ''}`}>
                <TabsTrigger 
                  value="counterparties" 
                  className={`data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 relative ${hasIncomingRequests ? 'animate-pulse' : ''}`}
                >
                  Мои контрагенты
                  {hasIncomingRequests && (
                    <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full"></div>
                  )}
                </TabsTrigger>
                <TabsTrigger 
                  value="fulfillment" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Фулфилмент
                </TabsTrigger>
                <TabsTrigger 
                  value="sellers" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Селлеры
                </TabsTrigger>
                <TabsTrigger 
                  value="logistics" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Логистика
                </TabsTrigger>
                <TabsTrigger 
                  value="wholesale" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
                >
                  Оптовик
                </TabsTrigger>
              </TabsList>

              <TabsContent value="counterparties" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketCounterparties />
                </Card>
              </TabsContent>

              <TabsContent value="fulfillment" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketFulfillment />
                </Card>
              </TabsContent>

              <TabsContent value="sellers" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketSellers />
                </Card>
              </TabsContent>

              <TabsContent value="logistics" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketLogistics />
                </Card>
              </TabsContent>

              <TabsContent value="wholesale" className="flex-1 overflow-hidden mt-6">
                <Card className="glass-card h-full overflow-hidden p-6">
                  <MarketWholesale />
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}