'use client'

import { LogOut } from 'lucide-react'
import { usePathname, useRouter } from 'next/navigation'

import { useAuthContext } from '@/contexts/AuthContext'
import { useSidebar } from '@/hooks/useSidebar'

import { NavigationButton } from './core/NavigationButton'
import { NotificationBadge } from './core/NotificationBadge'
import { SidebarLayout } from './core/SidebarLayout'
import { UserProfile } from './core/UserProfile'
import { useSidebarData } from './hooks/useSidebarData'
import { fulfillmentNavigation } from './navigations/fulfillment'

// Компонент уведомлений для поставок фулфилмента
function FulfillmentSuppliesNotification({ count }: { count: number }) {
  if (count === 0) return null

  return (
    <div className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[18px] h-[18px] flex items-center justify-center font-bold animate-pulse">
      {count > 99 ? '99+' : count}
    </div>
  )
}

export function FulfillmentSidebar({ user: propUser }: { user?: any } = {}) {
  const { user: hookUser, logout } = useAuthContext()
  
  // Приоритет: переданный user через props, затем из хука
  const user = propUser || hookUser
  const router = useRouter()
  const pathname = usePathname()
  const { isCollapsed, toggleSidebar } = useSidebar()
  const { totalUnreadCount, incomingRequestsCount, supplyOrdersCount } = useSidebarData()

  if (!user) return null

  const handleNavigationClick = (path: string) => {
    router.push(path)
  }

  return (
    <SidebarLayout isCollapsed={isCollapsed} onToggle={toggleSidebar}>
      {/* Информация о пользователе */}
      <UserProfile 
        isCollapsed={isCollapsed}
        user={{
          avatar: user.avatar,
          name: user.organization?.name || user.organization?.fullName || 'Организация',
          role: 'Фулфилмент',
        }}
      />

      {/* Навигация */}
      <div className="flex-1 space-y-1">
        {fulfillmentNavigation.map((item) => (
          <NavigationButton
            key={item.id}
            isActive={item.isActive(pathname)}
            isCollapsed={isCollapsed}
            label={item.label}
            icon={item.icon}
            onClick={() => handleNavigationClick(item.path)}
            notification={
              item.id === 'messenger' ? (
                <NotificationBadge count={totalUnreadCount} isCollapsed={isCollapsed} />
              ) : item.id === 'partners' ? (
                <NotificationBadge count={incomingRequestsCount} isCollapsed={isCollapsed} />
              ) : item.id === 'supplies' ? (
                <FulfillmentSuppliesNotification count={supplyOrdersCount} isCollapsed={isCollapsed} />
              ) : null
            }
          />
        ))}
      </div>

      {/* Кнопка выхода */}
      <div>
        <NavigationButton
          isActive={false}
          isCollapsed={isCollapsed}
          label="Выйти"
          icon={LogOut}
          onClick={logout}
          notification={null}
        />
      </div>
    </SidebarLayout>
  )
}