"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-2 py-2 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-1 flex-wrap gap-2">
              <TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit text-sm">
                <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-3 sm:px-6"
                >
                  <span className="hidden sm:inline">Поставки на ФФ</span>
                  <span className="sm:hidden">ФФ</span>
                </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-3 sm:px-6"
                >
                  <span className="hidden sm:inline">Поставки на Маркетплейсы</span>
                  <span className="sm:hidden">МП</span>
                </TabsTrigger>
              </TabsList>

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    size="sm"
                    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-3 w-3 mr-1" />
                    <span className="hidden sm:inline">Создать поставку</span>
                    <span className="sm:hidden">Создать</span>
                    <ChevronDown className="h-3 w-3 ml-1" />
                  </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>
  );
}
