'use client'

import React from 'react'

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

import { AnimationsDemo } from './ui-kit/animations-demo'
import { BackButtonVariantsDemo } from './ui-kit/back-button-variants-demo'
import { BusinessDemo } from './ui-kit/business-demo'
import { BusinessProcessesDemo } from './ui-kit/business-processes-demo'
import { ButtonsDemo } from './ui-kit/buttons-demo'
import { CardsDemo } from './ui-kit/cards-demo'
import { ColorsDemo } from './ui-kit/colors-demo'
import { FormsDemo } from './ui-kit/forms-demo'
import { FulfillmentWarehouse2Demo } from './ui-kit/fulfillment-warehouse-2-demo'
import { FulfillmentWarehouseDemo } from './ui-kit/fulfillment-warehouse-demo'
import { IconsDemo } from './ui-kit/icons-demo'
import { InteractiveDemo } from './ui-kit/interactive-demo'
import { LayoutsDemo } from './ui-kit/layouts-demo'
import { MediaDemo } from './ui-kit/media-demo'
import { NavigationDemo } from './ui-kit/navigation-demo'
import { SpecializedDemo } from './ui-kit/specialized-demo'
import { StatesDemo } from './ui-kit/states-demo'
import { SuppliesDemo } from './ui-kit/supplies-demo'
import { SuppliesNavigationDemo } from './ui-kit/supplies-navigation-demo'
import { TimesheetDemo } from './ui-kit/timesheet-demo'
import { TypographyDemo } from './ui-kit/typography-demo'
import { WBWarehouseDemo } from './ui-kit/wb-warehouse-demo'

const UIKitSection = React.memo(() => {
  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="back-button-variants"
            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="fulfillment-warehouse-2"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
          >
            Склад фулфилмент - 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>
          <TabsTrigger
            value="business-processes"
            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="fulfillment-warehouse-2" className="space-y-6">
          <FulfillmentWarehouse2Demo />
        </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>
        <TabsContent value="back-button-variants" className="space-y-6">
          <BackButtonVariantsDemo />
        </TabsContent>

        <TabsContent value="business-processes" className="space-y-6">
          <BusinessProcessesDemo />
        </TabsContent>
      </Tabs>
    </div>
  )
})

UIKitSection.displayName = 'UIKitSection'

export { UIKitSection }