"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 {
  Package,
  Wrench,
  Truck,
  ArrowLeftRight,
  Building,
  ShoppingCart,
} from "lucide-react";

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

export function SuppliesDashboard() {
  const { getSidebarMargin } = useSidebar();
  const [mainTab, setMainTab] = useState("goods");
  const [goodsSubTab, setGoodsSubTab] = 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="mb-4">
            <h1 className="text-2xl font-bold text-white mb-2">Поставки</h1>
            <p className="text-white/60 text-sm">
              Управление поставками товаров и расходников
            </p>
          </div>

          {/* Основная навигация */}
          <div className="flex-1 overflow-hidden">
            <Tabs
              value={mainTab}
              onValueChange={setMainTab}
              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-12 mb-4">
                <TabsTrigger
                  value="goods"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-sm font-medium"
                >
                  <Package className="h-4 w-4" />
                  Поставки товаров
                </TabsTrigger>
                <TabsTrigger
                  value="materials"
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-sm font-medium"
                >
                  <Wrench className="h-4 w-4" />
                  Поставки расходников
                </TabsTrigger>
              </TabsList>

              {/* Поставки товаров */}
              <TabsContent value="goods" className="flex-1 overflow-hidden">
                <Tabs
                  value={goodsSubTab}
                  onValueChange={setGoodsSubTab}
                  className="h-full flex flex-col"
                >
                  <TabsList className="grid w-full grid-cols-2 bg-white/10 backdrop-blur border-white/10 flex-shrink-0 h-10 mb-3">
                    <TabsTrigger
                      value="fulfillment"
                      className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
                    >
                      <Building className="h-3 w-3" />
                      Наш фулфилмент
                    </TabsTrigger>
                    <TabsTrigger
                      value="marketplaces"
                      className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 flex items-center gap-2 text-xs"
                    >
                      <ShoppingCart className="h-3 w-3" />
                      Маркетплейсы
                    </TabsTrigger>
                  </TabsList>

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

                  <TabsContent
                    value="marketplaces"
                    className="flex-1 overflow-hidden"
                  >
                    <Card className="glass-card h-full overflow-hidden p-0">
                      <MarketplaceSuppliesTab />
                    </Card>
                  </TabsContent>
                </Tabs>
              </TabsContent>

              {/* Поставки расходников */}
              <TabsContent value="materials" className="flex-1 overflow-hidden">
                <Card className="glass-card h-full overflow-hidden p-0">
                  <MaterialsSuppliesTab />
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  );
}