"use client";

import React, { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { useSearchParams } from "next/navigation";
import { Plus, Package, Wrench, ChevronDown } from "lucide-react";
import { FulfillmentSuppliesTab } from "./fulfillment-supplies/fulfillment-supplies-tab";
import { MarketplaceSuppliesTab } from "./marketplace-supplies/marketplace-supplies-tab";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

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

  // Автоматически открываем нужную вкладку при загрузке
  useEffect(() => {
    const tab = searchParams.get('tab');
    if (tab === 'consumables') {
      setActiveTab('fulfillment'); // Устанавливаем основную вкладку "Поставки на ФФ"
    }
  }, [searchParams]);

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-4 py-4 overflow-hidden transition-all duration-300`}
      >
        <div className="h-full">
          {/* Главные вкладки с кнопкой создания */}
          <Tabs
            value={activeTab}
            onValueChange={setActiveTab}
            className="w-full h-full flex flex-col"
          >
            <div className="flex items-center justify-between mb-2">
              <TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
                <TabsTrigger
                  value="fulfillment"
                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
                >
                  Поставки на ФФ
                </TabsTrigger>
                <TabsTrigger
                  value="marketplace"
                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
                >
                  Поставки на Маркетплейсы
                </TabsTrigger>
              </TabsList>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
                    <Plus className="h-4 w-4 mr-2" />
                    Создать поставку
                    <ChevronDown className="h-4 w-4 ml-2" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  align="end"
                  className="bg-white/10 backdrop-blur border-white/20"
                >
                  <DropdownMenuItem
                    onClick={() => {
                      window.location.href = "/supplies/create";
                    }}
                    className="text-white hover:bg-white/10 cursor-pointer"
                  >
                    <Package className="h-4 w-4 mr-2" />
                    Поставка товаров
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => {
                      window.location.href = "/supplies/create-consumables";
                    }}
                    className="text-white hover:bg-white/10 cursor-pointer"
                  >
                    <Wrench className="h-4 w-4 mr-2" />
                    Поставка расходников
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>

            <TabsContent value="fulfillment" className="mt-0 flex-1 overflow-hidden">
              <FulfillmentSuppliesTab defaultSubTab={searchParams.get('tab') === 'consumables' ? 'supplies' : undefined} />
            </TabsContent>

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