'use client'

import React, { useState, useCallback, useMemo } from 'react'

import { AdminSidebar } from './admin-sidebar'
import { CategoriesSection } from './categories-section'
import { UIKitSection } from './ui-kit-section'
import { UsersSection } from './users-section'

type AdminSection = 'users' | 'categories' | 'ui-kit' | 'settings'

const AdminDashboard = React.memo(() => {
  const [activeSection, setActiveSection] = useState<AdminSection>('users')

  const handleSectionChange = useCallback((section: AdminSection) => {
    setActiveSection(section)
  }, [])

  const renderContent = useMemo(() => {
    switch (activeSection) {
      case 'users':
        return <UsersSection />
      case 'categories':
        return (
          <div className="p-8">
            <CategoriesSection />
          </div>
        )
      case 'ui-kit':
        return <UIKitSection />
      case 'settings':
        return (
          <div className="p-8">
            <h1 className="text-3xl font-bold text-white mb-6">Настройки</h1>
            <div className="glass-card p-6">
              <p className="text-white/70">Раздел настроек в разработке</p>
            </div>
          </div>
        )
      default:
        return <UsersSection />
    }
  }, [activeSection])

  return (
    <div className="h-screen bg-gradient-smooth flex overflow-hidden">
      <AdminSidebar activeSection={activeSection} onSectionChange={handleSectionChange} />
      <main className="flex-1 ml-64 overflow-y-auto">{renderContent}</main>
    </div>
  )
})

AdminDashboard.displayName = 'AdminDashboard'

export { AdminDashboard }
