'use client';
import { useEffect } 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 '../components/ui/badge';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useLayoutStore } from '@/stores';
import { useTranslations } from 'next-intl';

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

// 主侧边栏组件
function Sidebar() {
  const pathname = usePathname();
  const t = useTranslations('home');
  const isSidebarExpanded = useLayoutStore((s) => s.isSidebarExpanded);
  const setSidebarExpanded = useLayoutStore((s) => s.setSidebarExpanded);

  const menuItems: IMenuItem[] = [
    {
      id: MenuItem.FOR_YOU,
      icon: '/icons/explore.svg',
      selectedIcon: '/icons/explore_selected.svg',
      label: t('home'),
      link: '/home',
      isSelected: pathname === '/home',
    },
  ];

  return (
    <aside
      className={cn(
        'bg-[rgba(10,14,43,1)] 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',
        isSidebarExpanded ? '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', 'cursor-pointer')}
            onClick={() => setSidebarExpanded(!isSidebarExpanded)}
          >
            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
              {isSidebarExpanded ? (
                <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) => {
            return (
              <Link href={item.link} key={item.id}>
                <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>
                  {isSidebarExpanded && (
                    <span className="txt-label-m text-txt-primary-normal flex-1 truncate">
                      {item.label}
                    </span>
                  )}
                </div>
              </Link>
            );
          })}
        </div>
        <ChatSidebar showSeparator />
      </div>
    </aside>
  );
}

export default Sidebar;
