"use client";

import { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Package, Wrench, RotateCcw, Building2 } from "lucide-react";

// Импорты компонентов подкатегорий
import { FulfillmentGoodsTab } from "./fulfillment-goods-tab";
import { PvzReturnsTab } from "./pvz-returns-tab";
import { FulfillmentConsumablesOrdersTab } from "./fulfillment-consumables-orders-tab";

// Новые компоненты для детального просмотра (копия из supplies модуля)
import { FulfillmentDetailedSuppliesTab } from "./fulfillment-detailed-supplies-tab";

export function FulfillmentSuppliesTab() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [activeTab, setActiveTab] = useState("goods");

  // Проверяем URL параметр при загрузке
  useEffect(() => {
    const tabParam = searchParams.get("tab");
    if (
      tabParam &&
      ["goods", "detailed-supplies", "consumables", "returns"].includes(
        tabParam
      )
    ) {
      setActiveTab(tabParam);
    }
  }, [searchParams]);

  // Обновляем URL при смене вкладки
  const handleTabChange = (newTab: string) => {
    setActiveTab(newTab);
    const currentPath = window.location.pathname;
    const newUrl = `${currentPath}?tab=${newTab}`;
    router.replace(newUrl);
  };

  return (
    <div className="h-full flex flex-col">
      <Tabs
        value={activeTab}
        onValueChange={handleTabChange}
        className="h-full flex flex-col"
      >
        <TabsList className="grid w-full grid-cols-4 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-8 xl:h-10 mb-2 xl:mb-3 mx-2 xl:mx-4 mt-2 xl:mt-4">
          <TabsTrigger
            value="goods"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
          >
            <Package className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
            <span className="hidden sm:inline">Товар</span>
            <span className="sm:hidden">Т</span>
          </TabsTrigger>
          <TabsTrigger
            value="detailed-supplies"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
          >
            <Building2 className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
            <span className="hidden md:inline">Наши расходники</span>
            <span className="md:hidden hidden sm:inline">Наши</span>
            <span className="sm:hidden">Н</span>
          </TabsTrigger>
          <TabsTrigger
            value="consumables"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
          >
            <Wrench className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
            <span className="hidden md:inline">Расходники селлеров</span>
            <span className="md:hidden hidden sm:inline">Селлеры</span>
            <span className="sm:hidden">С</span>
          </TabsTrigger>
          <TabsTrigger
            value="returns"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-1 text-[10px] xl:text-xs"
          >
            <RotateCcw className="h-2.5 w-2.5 xl:h-3 xl:w-3" />
            <span className="hidden sm:inline">Возвраты с ПВЗ</span>
            <span className="sm:hidden">В</span>
          </TabsTrigger>
        </TabsList>

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

        <TabsContent
          value="detailed-supplies"
          className="flex-1 overflow-hidden"
        >
          <div className="h-full p-2 xl:p-4 overflow-y-auto">
            <FulfillmentDetailedSuppliesTab />
          </div>
        </TabsContent>

        <TabsContent value="consumables" className="flex-1 overflow-hidden">
          <div className="h-full p-2 xl:p-4 overflow-y-auto">
            <FulfillmentConsumablesOrdersTab />
          </div>
        </TabsContent>

        <TabsContent value="returns" className="flex-1 overflow-hidden">
          <PvzReturnsTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}
