"use client";

import React, { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FulfillmentGoodsTab } from "./fulfillment-goods-tab";
import { RealSupplyOrdersTab } from "./real-supply-orders-tab";
import { SellerSupplyOrdersTab } from "./seller-supply-orders-tab";
import { PvzReturnsTab } from "./pvz-returns-tab";
import { useAuth } from "@/hooks/useAuth";

interface FulfillmentSuppliesTabProps {
  defaultSubTab?: string;
}

export function FulfillmentSuppliesTab({
  defaultSubTab,
}: FulfillmentSuppliesTabProps) {
  const [activeSubTab, setActiveSubTab] = useState("goods");
  const { user } = useAuth();

  // Устанавливаем активную подвкладку при получении 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="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"
          >
            Расходники
          </TabsTrigger>
          <TabsTrigger
            value="returns"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-3 sm:px-4"
          >
            <span className="hidden sm:inline">Возвраты с ПВЗ</span>
            <span className="sm:hidden">Возвраты</span>
          </TabsTrigger>
        </TabsList>

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

        <TabsContent value="supplies" className="mt-0 flex-1 overflow-hidden">
          {isWholesale ? <RealSupplyOrdersTab /> : <SellerSupplyOrdersTab />}
        </TabsContent>

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