'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  BarChartIcon, 
  HomeIcon, 
  PersonIcon, 
  ChevronLeftIcon, 
  ChevronRightIcon 
} from '@radix-ui/react-icons';

interface NavItemProps {
  href: string;
  label: string;
  icon: React.ReactNode;
  isCollapsed: boolean;
  isActive?: boolean;
}

const NavItem = ({ href, label, icon, isCollapsed, isActive }: NavItemProps) => {
  return (
    <Link 
      href={href}
      className={`flex items-center p-2 rounded-lg ${
        isActive 
          ? 'bg-blue-100 text-blue-700' 
          : 'text-gray-700 hover:bg-gray-100'
      } transition-all duration-200 group`}
    >
      <div className="w-6 h-6 flex items-center justify-center">{icon}</div>
      {!isCollapsed && (
        <span className={`ml-3 whitespace-nowrap transition-opacity duration-200 ${
          isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
        }`}>
          {label}
        </span>
      )}
      {isCollapsed && (
        <span className="sr-only">{label}</span>
      )}
    </Link>
  );
};

export function Sidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const pathname = usePathname();

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  const navigation = [
    { name: 'Dashboard', href: '/dashboard', icon: <HomeIcon className="w-5 h-5" /> },
    { name: 'Analytics', href: '/analytics', icon: <BarChartIcon className="w-5 h-5" /> },
    { name: 'Account', href: '/account', icon: <PersonIcon className="w-5 h-5" /> },
  ];

  return (
    <div className={`flex flex-col h-full transition-all duration-300 ${
      isCollapsed ? 'w-16' : 'w-64'
    } bg-white border-r border-gray-200 relative`}>
      {/* 顶部Logo和标题 */}
      <div className="flex items-center p-4 border-b border-gray-200">
        <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded">
          <span className="font-bold">S</span>
        </div>
        {!isCollapsed && (
          <span className="ml-3 font-medium text-gray-900 transition-opacity duration-200">
            ShortURL Analytics
          </span>
        )}
      </div>

      {/* 导航菜单 */}
      <div className="flex-grow p-4 overflow-y-auto">
        <ul className="space-y-2">
          {navigation.map((item) => (
            <li key={item.name}>
              <NavItem 
                href={item.href}
                label={item.name}
                icon={item.icon}
                isCollapsed={isCollapsed}
                isActive={pathname?.startsWith(item.href)}
              />
            </li>
          ))}
        </ul>
      </div>

      {/* 底部折叠按钮 */}
      <div className="border-t border-gray-200 p-4">
        <button 
          onClick={toggleSidebar}
          className="w-full flex items-center justify-center p-2 rounded-lg text-gray-500 hover:bg-gray-100"
          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
        >
          {isCollapsed ? (
            <ChevronRightIcon className="w-5 h-5" />
          ) : (
            <ChevronLeftIcon className="w-5 h-5" />
          )}
          {!isCollapsed && <span className="ml-2">Collapse</span>}
        </button>
      </div>
    </div>
  );
}