"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ButtonsDemo } from "./ui-kit/buttons-demo";
import { FormsDemo } from "./ui-kit/forms-demo";
import { CardsDemo } from "./ui-kit/cards-demo";
import { TypographyDemo } from "./ui-kit/typography-demo";
import { ColorsDemo } from "./ui-kit/colors-demo";
import { IconsDemo } from "./ui-kit/icons-demo";
import { LayoutsDemo } from "./ui-kit/layouts-demo";
import { NavigationDemo } from "./ui-kit/navigation-demo";
import { SpecializedDemo } from "./ui-kit/specialized-demo";
import { AnimationsDemo } from "./ui-kit/animations-demo";
import { StatesDemo } from "./ui-kit/states-demo";
import { MediaDemo } from "./ui-kit/media-demo";
import { InteractiveDemo } from "./ui-kit/interactive-demo";
import { BusinessDemo } from "./ui-kit/business-demo";
import { TimesheetDemo } from "./ui-kit/timesheet-demo";
import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
import { SuppliesDemo } from "./ui-kit/supplies-demo";
import { WBWarehouseDemo } from "./ui-kit/wb-warehouse-demo";
import { SuppliesNavigationDemo } from "./ui-kit/supplies-navigation-demo";

export function UIKitSection() {
  return (
    <div className="p-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">UI Kit</h1>
        <p className="text-white/70">
          Полная коллекция компонентов дизайн-системы SferaV
        </p>
      </div>

      <Tabs defaultValue="buttons" className="w-full">
        <TabsList className="flex flex-wrap gap-1 bg-white/5 backdrop-blur border-white/10 p-2 rounded-lg mb-8 h-auto">
          <TabsTrigger
            value="buttons"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Кнопки
          </TabsTrigger>
          <TabsTrigger
            value="forms"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Формы
          </TabsTrigger>
          <TabsTrigger
            value="cards"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Карточки
          </TabsTrigger>
          <TabsTrigger
            value="typography"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Типографика
          </TabsTrigger>
          <TabsTrigger
            value="colors"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Цвета
          </TabsTrigger>
          <TabsTrigger
            value="icons"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Иконки
          </TabsTrigger>
          <TabsTrigger
            value="layouts"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Макеты
          </TabsTrigger>
          <TabsTrigger
            value="navigation"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Навигация
          </TabsTrigger>
          <TabsTrigger
            value="specialized"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Специальные
          </TabsTrigger>
          <TabsTrigger
            value="animations"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Анимации
          </TabsTrigger>
          <TabsTrigger
            value="states"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Состояния
          </TabsTrigger>
          <TabsTrigger
            value="media"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Медиа
          </TabsTrigger>
          <TabsTrigger
            value="interactive"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Интерактив
          </TabsTrigger>
          <TabsTrigger
            value="business"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Бизнес
          </TabsTrigger>
          <TabsTrigger
            value="timesheet"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Табель
          </TabsTrigger>
          <TabsTrigger
            value="fulfillment-warehouse"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Склад фулфилмент
          </TabsTrigger>
          <TabsTrigger
            value="supplies"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Поставки
          </TabsTrigger>
          <TabsTrigger
            value="wb-warehouse"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Склад WB
          </TabsTrigger>
          <TabsTrigger
            value="supplies-navigation"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Навигация поставок
          </TabsTrigger>
        </TabsList>

        <TabsContent value="buttons" className="space-y-6">
          <ButtonsDemo />
        </TabsContent>

        <TabsContent value="forms" className="space-y-6">
          <FormsDemo />
        </TabsContent>

        <TabsContent value="cards" className="space-y-6">
          <CardsDemo />
        </TabsContent>

        <TabsContent value="typography" className="space-y-6">
          <TypographyDemo />
        </TabsContent>

        <TabsContent value="colors" className="space-y-6">
          <ColorsDemo />
        </TabsContent>

        <TabsContent value="icons" className="space-y-6">
          <IconsDemo />
        </TabsContent>

        <TabsContent value="layouts" className="space-y-6">
          <LayoutsDemo />
        </TabsContent>

        <TabsContent value="navigation" className="space-y-6">
          <NavigationDemo />
        </TabsContent>

        <TabsContent value="specialized" className="space-y-6">
          <SpecializedDemo />
        </TabsContent>

        <TabsContent value="animations" className="space-y-6">
          <AnimationsDemo />
        </TabsContent>

        <TabsContent value="states" className="space-y-6">
          <StatesDemo />
        </TabsContent>

        <TabsContent value="media" className="space-y-6">
          <MediaDemo />
        </TabsContent>

        <TabsContent value="interactive" className="space-y-6">
          <InteractiveDemo />
        </TabsContent>

        <TabsContent value="business" className="space-y-6">
          <BusinessDemo />
        </TabsContent>

        <TabsContent value="timesheet" className="space-y-6">
          <TimesheetDemo />
        </TabsContent>

        <TabsContent value="fulfillment-warehouse" className="space-y-6">
          <FulfillmentWarehouseDemo />
        </TabsContent>

        <TabsContent value="supplies" className="space-y-6">
          <SuppliesDemo />
        </TabsContent>

        <TabsContent value="wb-warehouse" className="space-y-6">
          <WBWarehouseDemo />
        </TabsContent>

        <TabsContent value="supplies-navigation" className="space-y-6">
          <SuppliesNavigationDemo />
        </TabsContent>
      </Tabs>
    </div>
  );
}