"use client";

import { useState } from "react";
import { useQuery } from "@apollo/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 { GET_PENDING_SUPPLIES_COUNT } from "@/graphql/queries";
import { Building2, ShoppingCart } from "lucide-react";

// Импорты компонентов подразделов
import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";

// Компонент для отображения бейджа с уведомлениями
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 FulfillmentSuppliesDashboard() {
  const { getSidebarMargin } = useSidebar();
  const [activeTab, setActiveTab] = useState("fulfillment");

  // Загружаем данные о непринятых поставках
  const { data: pendingData } = useQuery(GET_PENDING_SUPPLIES_COUNT, {
    pollInterval: 30000, // Обновляем каждые 30 секунд
    fetchPolicy: "cache-first",
    errorPolicy: "ignore",
  });

  const pendingCount = pendingData?.pendingSuppliesCount?.total || 0;

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-2 xl:px-4 py-2 xl:py-3 overflow-hidden transition-all duration-300`}
      >
        <div className="h-full w-full flex flex-col">
          {/* Основной контент с табами */}
          <div className="flex-1 overflow-hidden">
            <Tabs
              value={activeTab}
              onValueChange={setActiveTab}
              className="h-full flex flex-col"
            >
              <TabsList className="grid w-full grid-cols-2 bg-white/5 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10">
                <TabsTrigger
                  value="fulfillment"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm relative"
                >
                  <Building2 className="h-3 w-3" />
                  <span className="hidden sm:inline">
                    Поставки на фулфилмент
                  </span>
                  <span className="sm:hidden">Фулфилмент</span>
                  <NotificationBadge count={pendingCount} />
                </TabsTrigger>
                <TabsTrigger
                  value="marketplace"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-xs xl:text-sm"
                >
                  <ShoppingCart className="h-3 w-3" />
                  <span className="hidden sm:inline">
                    Поставки на маркетплейсы
                  </span>
                  <span className="sm:hidden">Маркетплейсы</span>
                </TabsTrigger>
              </TabsList>

              <TabsContent
                value="fulfillment"
                className="flex-1 overflow-hidden mt-2 xl:mt-3"
              >
                <Card className="glass-card h-full overflow-hidden p-0">
                  <FulfillmentSuppliesTab />
                </Card>
              </TabsContent>

              <TabsContent
                value="marketplace"
                className="flex-1 overflow-hidden mt-2 xl:mt-3"
              >
                <Card className="glass-card h-full overflow-hidden p-0">
                  <MarketplaceSuppliesTab />
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  );
}