"use client";

import React, { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FulfillmentGoodsTab } from "./fulfillment-goods-tab";
import { FulfillmentSuppliesTab as FulfillmentSuppliesSubTab } from "./fulfillment-supplies-sub-tab";
import { PvzReturnsTab } from "./pvz-returns-tab";

export function FulfillmentSuppliesTab() {
  const [activeSubTab, setActiveSubTab] = useState("goods");

  return (
    <div className="h-full">
      <Tabs
        value={activeSubTab}
        onValueChange={setActiveSubTab}
        className="w-full h-full flex flex-col"
      >
        {/* Подвкладки для ФФ */}
        <TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
          <TabsTrigger
            value="goods"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
          >
            Товар
          </TabsTrigger>
          <TabsTrigger
            value="supplies"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
          >
            Расходники
          </TabsTrigger>
          <TabsTrigger
            value="returns"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
          >
            Возвраты с ПВЗ
          </TabsTrigger>
        </TabsList>

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

        <TabsContent value="supplies" className="mt-0 flex-1">
          <FulfillmentSuppliesSubTab />
        </TabsContent>

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