'use client'

import React, { useState, useEffect } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import Image from 'next/image'
import useUIStore from '../../app/store/uiStore'
import useNavigationStore from '../../app/store/navigationStore'
import { useNavigationService } from '@/services/navigationService'

interface NavigationItem {
  id: number
  label: string
  icon: React.ComponentType<{ className?: string }>
}

interface SidebarProps {
  navigationItems?: NavigationItem[]
  logoSrc?: string
  userInfo?: {
    name: string
    role: string
    avatar?: string
  }
  activeItem?: number | null
  onCustomItemClick?: (itemId: number) => boolean  
}
 
const IconWrapper = ({ src, alt, className }: { src: string; alt: string; className?: string }) => (
  <div className={`relative ${className}`}>
    <Image
      src={src}
      alt={alt}
      width={20}
      height={20}
      className="w-full h-full object-contain"
    />
  </div>
)

const BookOpen = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/BookOpen.png" alt="Dashboard" className={className} />
)

const Bot = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/Bot.png" alt="Navigation" className={className} />
)

const SquareTerminal = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/SquareTerminal.png" alt="Terminal" className={className} />
)

const CircleDot = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/CircleDot.png" alt="Sensors" className={className} />
)

const BellDot = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/BellDot.png" alt="Notifications" className={className} />
)

const History = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/History.png" alt="History" className={className} />
)

const Settings2 = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/Settings2.png" alt="Settings" className={className} />
)

const Monitor = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/Bot.png" alt="Monitor" className={className} />
)

const Building = ({ className }: { className?: string }) => (
  <IconWrapper src="/icons/BookOpen.png" alt="Building" className={className} />
)
 
// основные routes
const mainNavigationItems: NavigationItem[] = [
  {
    id: 1,
    icon: BookOpen,
    label: 'Дашборд'
  },
  {
    id: 2,
    icon: Bot,
    label: 'Навигация по зданию'
  },
  {
    id: 8,
    icon: History,
    label: 'История тревог'
  },
  {
    id: 9,
    icon: Settings2,
    label: 'Отчеты'
  }
]

// суб-меню под  "Навигация по зданию"
const navigationSubItems: NavigationItem[] = [
  {
    id: 3,
    icon: Monitor,
    label: 'Зоны Мониторинга'
  },
  {
    id: 4,
    icon: Building,
    label: 'Навигация по этажам'
  },
  {
    id: 5,
    icon: BellDot,
    label: 'Уведомления'
  },
  {
    id: 6,
    icon: CircleDot,
    label: 'Сенсоры'
  },
  {
    id: 7,
    icon: SquareTerminal,
    label: 'Список датчиков'
  }
]

 
const Sidebar: React.FC<SidebarProps> = ({
  logoSrc,
  userInfo = {
    name: 'Александр',
    role: 'Администратор'
  },
  activeItem: propActiveItem,
  onCustomItemClick
}) => {
  const navigationService = useNavigationService()
  const router = useRouter()
  const pathname = usePathname()
  const [internalActiveItem, setInternalActiveItem] = useState<number | null>(null)
  const [isHydrated, setIsHydrated] = useState(false)
  const [manuallyToggled, setManuallyToggled] = useState(false)
  const activeItem = propActiveItem !== undefined ? propActiveItem : internalActiveItem
  const { 
    isSidebarCollapsed: isCollapsed, 
    toggleSidebar,
    isNavigationSubMenuExpanded: showNavigationSubItems,
    setNavigationSubMenuExpanded: setShowNavigationSubItems,
    toggleNavigationSubMenu
  } = useUIStore()
  
  const {
    openMonitoring,
    openFloorNavigation, 
    openNotifications,
    closeMonitoring,
    closeFloorNavigation,
    closeNotifications,
    showMonitoring,
    showFloorNavigation,
    showNotifications
  } = useNavigationStore()

  useEffect(() => {
    setIsHydrated(true)
  }, [])
  
  // Чек если суб-меню активны
  const isNavigationSubItemActive = activeItem && [3, 4, 5, 6, 7].includes(activeItem)
  const shouldShowNavigationAsActive = activeItem === 2 || isNavigationSubItemActive
  
  // Авто-расткрытие меню, если суб-меню стало активным (только если не было ручного переключения)
  useEffect(() => {
    if (isNavigationSubItemActive && !showNavigationSubItems && !manuallyToggled) {
      setShowNavigationSubItems(true)
    } 
  }, [isNavigationSubItemActive, showNavigationSubItems, manuallyToggled, setShowNavigationSubItems])

  const handleItemClick = (itemId: number) => { 
    let handled = false
    
    // Управление суб-меню через navigationStore (суб-меню - работают как отдельные элементы, но не страницы)
    switch (itemId) {
      case 2:  
        if (pathname !== '/navigation') {
          router.push('/navigation')
        }
        handled = true
        break
      case 3: // Monitoring
        if (pathname !== '/navigation') { 
          router.push('/navigation')
          setTimeout(() => openMonitoring(), 100)
        } else if (showMonitoring) { 
          closeMonitoring()
        } else {
          openMonitoring()
        }
        handled = true
        break
      case 4: // Floor Navigation  
        if (pathname !== '/navigation') { 
          router.push('/navigation')
          setTimeout(() => openFloorNavigation(), 100)
        } else if (showFloorNavigation) { 
          closeFloorNavigation()
        } else {
          openFloorNavigation()
        }
        handled = true
        break
      case 5: // Notifications
        if (pathname !== '/navigation') { 
          router.push('/navigation')
          setTimeout(() => openNotifications(), 100)
        } else if (showNotifications) { 
          closeNotifications()
        } else {
          openNotifications()
        }
        handled = true
        break
      default:
        // Для остального используем routes
        if (navigationService) {
          handled = navigationService.handleSidebarItemClick(itemId, pathname)
        }
        break
    }
    
    if (handled) { 
      if (propActiveItem === undefined) {
        setInternalActiveItem(itemId)
      }
       
      if (onCustomItemClick) {
        onCustomItemClick(itemId)
      }
    }
  }

  return (
    <aside
      className={`flex flex-col items-start gap-6 relative bg-[#161824] transition-all duration-300 h-screen ${
        isCollapsed ? 'w-16' : 'w-64'
      }`}
      role="navigation"
      aria-label="Main navigation"
    > 
      <header className="flex items-center gap-2 pt-2 pb-2 px-4 relative self-stretch w-full flex-[0_0_auto] bg-[#161824]">
        {!isCollapsed && (
          <div className="relative">
            <Image
              className="w-auto h-[33px]"
              alt="AerBIM Monitor Logo"
              src={logoSrc || "/icons/logo.png"}
              width={169}
              height={33}
            />
          </div>
        )}
      </header>

      <nav className="flex flex-col items-end gap-2 relative flex-1 self-stretch w-full grow">
        <div className="flex flex-col items-end gap-2 px-4 py-2 relative self-stretch w-full flex-[0_0_auto]">
          <ul className="flex flex-col items-start gap-3 relative self-stretch w-full flex-[0_0_auto]" role="list">
            {mainNavigationItems.map((item) => {
              const IconComponent = item.icon
              const isActive = item.id === 2 ? shouldShowNavigationAsActive : activeItem === item.id

              return (
                <li key={item.id} className="flex-col flex items-center relative self-stretch w-full" role="listitem">
                  <button
                    className={`gap-2 pt-2 pr-2 pb-2 pl-2 rounded-md flex h-9 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
                      isActive ? 'bg-gray-700' : ''
                    }`}
                    onClick={() => handleItemClick(item.id)}
                    aria-current={isActive ? 'page' : undefined}
                    type="button"
                  >
                    <IconComponent
                      className="!relative !w-5 !h-5 text-white"
                      aria-hidden="true"
                    />
                    {!isCollapsed && (
                      <span className="flex-1 [font-family:'Inter-Regular',Helvetica] font-normal text-white text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical] text-left">
                        {item.label}
                      </span>
                    )}
                    {item.id === 2 && !isCollapsed && (
                      // Закрыть все суб-меню при закрытии главного окна 
                      <div
                        className="p-1.5 hover:bg-gray-600 rounded-md transition-colors duration-200 cursor-pointer bg-gray-700/50 border border-gray-600/50"
                        onClick={(e) => {
                           e.stopPropagation()
                             setManuallyToggled(true) 
                             if (showNavigationSubItems || isNavigationSubItemActive) {
                               closeMonitoring()
                               closeFloorNavigation()
                               closeNotifications()
                             }
                             toggleNavigationSubMenu()
                         }}
                        role="button"
                        tabIndex={0}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault()
                            e.stopPropagation()
                            setManuallyToggled(true) 
                            if (showNavigationSubItems || isNavigationSubItemActive) {
                              closeMonitoring()
                              closeFloorNavigation()
                              closeNotifications()
                            }
                            toggleNavigationSubMenu()
                          }
                        }}
                        aria-label={isHydrated ? (showNavigationSubItems || isNavigationSubItemActive ? 'Collapse navigation menu' : 'Expand navigation menu') : 'Toggle navigation menu'}
                      >
                        <svg 
                          className={`!relative !w-4 !h-4 text-white transition-transform duration-200 drop-shadow-sm ${
                            isHydrated && (showNavigationSubItems || isNavigationSubItemActive) ? 'rotate-90' : ''
                          }`} 
                          fill="currentColor" 
                          viewBox="0 0 24 24"
                        >
                          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
                        </svg>
                      </div>
                    )}
                  </button>
                  
                  {/* Суб-меню */}
                  {item.id === 2 && !isCollapsed && (showNavigationSubItems || isNavigationSubItemActive) && (
                    <ul className="flex flex-col items-start gap-1 mt-1 ml-6 relative w-full" role="list">
                      {navigationSubItems.map((subItem) => {
                        const SubIconComponent = subItem.icon
                        const isSubActive = activeItem === subItem.id

                        return (
                          <li key={subItem.id} className="flex-col flex h-8 items-center relative self-stretch w-full" role="listitem">
                            <button
                              className={`gap-2 pt-1.5 pr-2 pb-1.5 pl-2 rounded-md flex h-8 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
                                isSubActive ? 'bg-gray-600' : ''
                              }`}
                              onClick={() => handleItemClick(subItem.id)}
                              aria-current={isSubActive ? 'page' : undefined}
                              type="button"
                            >
                              <SubIconComponent
                                className="!relative !w-4 !h-4 text-gray-300"
                                aria-hidden="true"
                              />
                              <span className="flex-1 [font-family:'Inter-Regular',Helvetica] font-normal text-gray-300 text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical] text-left">
                                {subItem.label}
                              </span>
                            </button>
                          </li>
                        )
                      })}
                    </ul>
                  )}
                </li>
              )
            })}
          </ul>
          <button
            className="!relative !w-8 !h-8 p-1.5 rounded-lg hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 bg-gray-800/60 border border-gray-600/40 shadow-lg hover:shadow-xl"
            onClick={() => { 
               // Убираем суб-меню перед сворачиванием сайдбара
               if (showNavigationSubItems) {
                 setShowNavigationSubItems(false)
                 setManuallyToggled(true)
               
                 closeMonitoring()
                 closeFloorNavigation()
                 closeNotifications()
               }
               // Убираем сайд-бар
               toggleSidebar()
            }}
            aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
            type="button"
          >
            <svg className={`!relative !w-5 !h-5 text-white transition-transform duration-200 drop-shadow-sm ${isCollapsed ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
            </svg>
          </button>
        </div>
      </nav>
 
      {!isCollapsed && (
        <footer className="flex w-64 items-center gap-2 pt-2 pr-2 pb-2 pl-2 mt-auto bg-[#161824]">
          <div className="inline-flex flex-[0_0_auto] items-center gap-2 relative rounded-md">
            <div className="inline-flex items-center relative flex-[0_0_auto]">
              <div
                className="relative w-8 h-8 rounded-lg bg-white"
                role="img"
                aria-label="User avatar"
              >
                {userInfo.avatar && (
                  <Image
                    src={userInfo.avatar}
                    alt="User avatar"
                    className="w-full h-full rounded-lg object-cover"
                    fill
                    sizes="32px"
                  />
                )}
              </div>
            </div>
          </div>

          <div className="flex p-2 flex-1 grow items-center gap-2 relative rounded-md">
            <div className="flex flex-col items-start justify-center gap-0.5 relative flex-1 grow">
              <div className="self-stretch mt-[-1.00px] [font-family:'Inter-SemiBold',Helvetica] font-semibold text-white text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical]">
                {userInfo.name}
              </div>
              <div className="self-stretch [font-family:'Inter-Regular',Helvetica] font-normal text-[#71717a] text-[10px] leading-[10px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical]">
                {userInfo.role}
              </div>
            </div>
          </div>

          <button
            className="relative w-4 h-4 aspect-[1] p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200"
            aria-label="User menu"
            type="button"
          >
            <svg className="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
            </svg>
          </button>
        </footer>
      )}
    </aside>
  )
}

export default Sidebar