"use client";

import { useState } from "react";
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 { Building2, ShoppingCart } from "lucide-react";

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

export function FulfillmentSuppliesDashboard() {
  const { getSidebarMargin } = useSidebar();
  const [activeTab, setActiveTab] = useState("fulfillment");

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-4 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-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-sm"
                >
                  <Building2 className="h-3 w-3" />
                  Поставки на ФФ
                </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-sm"
                >
                  <ShoppingCart className="h-3 w-3" />
                  Поставки на маркетплейсы
                </TabsTrigger>
              </TabsList>

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

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