import React, { memo } from 'react'

import { BreadcrumbsBlock } from './blocks/BreadcrumbsBlock'
import { NavigationMenuBlock } from './blocks/NavigationMenuBlock'
import { PaginationBlock } from './blocks/PaginationBlock'
import { SidebarsBlock } from './blocks/SidebarsBlock'
import { TabsBlock } from './blocks/TabsBlock'
import { useMenuExpansion } from './hooks/useMenuExpansion'
import { useNavigationState } from './hooks/useNavigationState'

/**
 * Демо-компонент навигационных элементов с модульной архитектурой
 * 
 * Особенности модульной архитектуры:
 * - Разделение на логические блоки (Sidebars, Navigation, Tabs, Breadcrumbs, Pagination)
 * - Переиспользуемые хуки для управления состоянием
 * - Типизированные пропсы для каждого блока
 * - React.memo для оптимизации производительности
 * - Централизованное управление состоянием через кастомные хуки
 */
export const NavigationDemo = memo(function NavigationDemo() {
  // Основное состояние навигации
  const { activeTab, onTabChange } = useNavigationState()
  
  // Управление сайдбаром и меню
  const { expandedMenus, toggleMenu } = useMenuExpansion(['analytics'])
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false)
  
  // Состояние хлебных крошек
  const [currentPath, setCurrentPath] = React.useState(0)
  
  // Состояние пагинации
  const [currentPage, setCurrentPage] = React.useState(1)
  const [pageSize, setPageSize] = React.useState(25)
  const totalPages = 12

  const handleToggleSidebar = React.useCallback((collapsed: boolean) => {
    setSidebarCollapsed(collapsed)
  }, [])

  const handlePathChange = React.useCallback((pathIndex: number) => {
    setCurrentPath(pathIndex)
  }, [])

  const handlePageChange = React.useCallback((page: number) => {
    setCurrentPage(page)
  }, [])

  const handlePageSizeChange = React.useCallback((size: number) => {
    setPageSize(size)
    setCurrentPage(1) // Reset to first page when changing page size
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">
            Навигационные элементы
          </h1>
          <p className="text-white/70 text-lg">
            Современные компоненты навигации для web-приложений
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          <SidebarsBlock
            sidebarCollapsed={sidebarCollapsed}
            expandedMenus={expandedMenus}
            onToggleSidebar={handleToggleSidebar}
            onToggleMenu={toggleMenu}
          />

          <NavigationMenuBlock
            activeTab={activeTab}
            onTabChange={onTabChange}
          />
        </div>

        <div className="grid grid-cols-1 gap-8 mb-8">
          <TabsBlock
            activeTab={activeTab}
            onTabChange={onTabChange}
          />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <BreadcrumbsBlock
            currentPath={currentPath}
            onPathChange={handlePathChange}
          />

          <PaginationBlock
            currentPage={currentPage}
            totalPages={totalPages}
            pageSize={pageSize}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
          />
        </div>
      </div>
    </div>
  )
})

NavigationDemo.displayName = 'NavigationDemo'