'use client'
import React, { useState, useEffect, useMemo } from 'react'
import { MenuItem } from '@/types/global'
import Image from 'next/image'
import { cn } from '@/lib/utils'
import ChatSidebar from './components/ChatSidebar'
import { Badge } from '../ui/badge'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useMainLayout } from '@/context/mainLayout'
import { useCurrentUser } from '@/hooks/auth'
import Notice from './components/Notice'
import useCreatorNavigation from '@/hooks/useCreatorNavigation'

// 菜单项接口
interface IMenuItem {
  id: MenuItem
  icon: string
  selectedIcon: string
  label: string
  link: string
  isSelected: boolean
}

// 主侧边栏组件
function Sidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const { isSidebarExpanded, dispatch } = useMainLayout()
  const { data: user } = useCurrentUser()
  const { routerToCreate } = useCreatorNavigation()

  // 在 /create/image 页面时强制收起侧边栏
  const isImageCreatePage = [
    '/generate/image',
    '/generate/image-2-image',
    '/generate/image-edit',
    '/generate/image-2-background',
  ].includes(pathname)
  const actualIsExpanded = isImageCreatePage ? false : isSidebarExpanded

  const menuItems: IMenuItem[] = useMemo(
    () => [
      {
        id: MenuItem.FOR_YOU,
        icon: '/icons/explore.svg',
        selectedIcon: '/icons/explore_selected.svg',
        label: 'Home',
        link: '/',
        isSelected: pathname === '/',
      },
      {
        id: MenuItem.CREATE,
        icon: '/icons/create.svg',
        selectedIcon: '/icons/create_selected.svg',
        label: 'Create a Character',
        link: '/create',
        isSelected: pathname.startsWith('/create'),
      },
      // {
      //   id: MenuItem.EXPLORE,
      //   icon: "/icons/explore.svg",
      //   selectedIcon: "/icons/explore_selected.svg",
      //   label: "Explore",
      //   link: '/explore',
      //   isSelected: pathname.startsWith('/explore'),
      // },
      {
        id: MenuItem.CHAT,
        icon: '/icons/contact.svg',
        selectedIcon: '/icons/contact_selected.svg',
        label: 'My Crushes',
        link: '/contact',
        isSelected: pathname.startsWith('/contact'),
      },
    ],
    [pathname]
  )

  useEffect(() => {
    menuItems.forEach((item) => {
      // 跳过 /create 路由的 prefetch(使用自定义导航逻辑)
      if (item.link.startsWith('/create')) {
        return
      }
      // /contact 路由只在登录时 prefetch
      if (item.link.startsWith('/contact') && !user) {
        return
      }
      router.prefetch(item.link)
    })
  }, [router, menuItems, user])

  const toggleExpanded = () => {
    // 在 /create/image 页面时禁用展开功能
    if (isImageCreatePage) return
    dispatch({
      type: 'updateState',
      payload: {
        isSidebarExpanded: !isSidebarExpanded,
      },
    })
  }

  return (
    <aside
      className={cn(
        'bg-background-default border-outline-normal sticky top-0 bottom-0 left-0 z-10 h-screen flex-shrink-0 border-r transition-all duration-300 ease-in-out',
        isImageCreatePage ? 'w-0 overflow-hidden' : actualIsExpanded ? 'w-80' : 'w-20'
      )}
    >
      <div className="flex h-full flex-col py-4">
        {/* 顶部导航 */}
        <div className="flex flex-col gap-2 px-4">
          {/* 展开/收起按钮 */}
          <div
            className={cn(
              'flex items-center justify-start p-2 select-none',
              isImageCreatePage ? 'cursor-default' : 'cursor-pointer'
            )}
            onClick={toggleExpanded}
          >
            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
              {actualIsExpanded ? (
                <Image src="/icons/fold.svg" alt="Fold" width={32} height={32} />
              ) : (
                <Image src="/icons/expand.svg" alt="Expand" width={32} height={32} />
              )}
            </div>
          </div>

          {/* 菜单项 */}
          {menuItems.map((item) => {
            const menuItemContent = (
              <div
                className={cn(
                  'hover:bg-surface-element-hover flex cursor-pointer items-center gap-2 rounded-full p-2 transition-colors',
                  item.isSelected && 'bg-surface-element-normal'
                )}
              >
                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
                  <Image
                    src={item.isSelected ? item.selectedIcon : item.icon}
                    alt={item.label}
                    width={32}
                    height={32}
                    className="h-full w-full"
                  />
                </div>
                {actualIsExpanded && (
                  <span className="txt-label-m text-txt-primary-normal flex-1 truncate">
                    {item.label}
                  </span>
                )}
              </div>
            )

            // 对于 create 链接，使用 div + onClick 避免触发 ProgressProvider
            if (item.link.startsWith('/create')) {
              return (
                <div key={item.id} onClick={routerToCreate}>
                  {menuItemContent}
                </div>
              )
            }

            // 其他链接使用 Link 组件以便 SEO
            // 受保护路由（如 /contact）只在登录时启用 prefetch，避免缓存重定向响应
            const isProtectedRoute = item.link.startsWith('/contact')
            return (
              <Link href={item.link} key={item.id} prefetch={!isProtectedRoute || !!user}>
                {menuItemContent}
              </Link>
            )
          })}
        </div>

        <ChatSidebar isExpanded={actualIsExpanded} />
        <Notice actualIsExpanded={actualIsExpanded} />
      </div>
    </aside>
  )
}

export default Sidebar
