import { useState } from 'react';
import Link from 'next/link';
import { 
  LayoutDashboard, Package, ShoppingCart, Users, BarChart3, 
  Settings, ChevronLeft, ChevronRight, LogOut, Bell
} from 'lucide-react';

interface NavItem {
  name: string;
  href: string;
  icon: any;
  badge?: number;
}

interface AdminSidebarProps {
  currentPath: string;
}

export default function AdminSidebar({ currentPath }: AdminSidebarProps) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  
  const mainNav: NavItem[] = [
    { name: 'แดชบอร์ด', href: '/admin', icon: LayoutDashboard },
    { name: 'สินค้า', href: '/admin/products', icon: Package, badge: 12 },
    { name: 'คำสั่งซื้อ', href: '/admin/orders', icon: ShoppingCart, badge: 5 },
    { name: 'ลูกค้า', href: '/admin/customers', icon: Users },
    { name: 'รายงาน', href: '/admin/reports', icon: BarChart3 },
  ];

  const bottomNav: NavItem[] = [
    { name: 'ตั้งค่า', href: '/admin/settings', icon: Settings },
  ];

  return (
    <aside 
      className={`
        fixed left-0 top-0 h-screen bg-gray-900 text-white transition-all duration-300 z-40
        ${isCollapsed ? 'w-16' : 'w-64'}
      `}
    >
      <div className="flex flex-col h-full">
        {/* Logo */}
        <div className="flex items-center justify-between p-4 border-b border-gray-800">
          {!isCollapsed && (
            <Link href="/admin" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                <span className="font-bold">E</span>
              </div>
              <span className="font-semibold">E-Commerce</span>
            </Link>
          )}
          <button
            onClick={() => setIsCollapsed(!isCollapsed)}
            className="p-1.5 hover:bg-gray-800 rounded-lg transition-colors"
          >
            {isCollapsed ? (
              <ChevronRight className="w-5 h-5" />
            ) : (
              <ChevronLeft className="w-5 h-5" />
            )}
          </button>
        </div>

        {/* Main Navigation */}
        <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto">
          {mainNav.map(item => {
            const isActive = currentPath === item.href;
            const Icon = item.icon;
            
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`
                  flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors relative
                  ${isActive 
                    ? 'bg-blue-600 text-white' 
                    : 'text-gray-400 hover:text-white hover:bg-gray-800'
                  }
                `}
              >
                <Icon className="w-5 h-5 flex-shrink-0" />
                {!isCollapsed && (
                  <>
                    <span className="flex-1">{item.name}</span>
                    {item.badge && item.badge > 0 && (
                      <span className={`
                        text-xs px-2 py-0.5 rounded-full
                        ${isActive ? 'bg-white/20' : 'bg-blue-600'}
                      `}>
                        {item.badge}
                      </span>
                    )}
                  </>
                )}
                {isCollapsed && item.badge && item.badge > 0 && (
                  <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
                )}
              </Link>
            );
          })}
        </nav>

        {/* Notifications */}
        {!isCollapsed && (
          <div className="px-4 py-3 mx-2 mb-2 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
            <div className="flex items-start gap-2">
              <Bell className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" />
              <div>
                <p className="text-sm font-medium">3 คำสั่งซื้อใหม่</p>
                <p className="text-xs text-gray-400 mt-0.5">ต้องจัดการ</p>
              </div>
            </div>
          </div>
        )}

        {/* Bottom Navigation */}
        <div className="py-4 px-2 border-t border-gray-800 space-y-1">
          {bottomNav.map(item => {
            const isActive = currentPath === item.href;
            const Icon = item.icon;
            
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`
                  flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors
                  ${isActive 
                    ? 'bg-blue-600 text-white' 
                    : 'text-gray-400 hover:text-white hover:bg-gray-800'
                  }
                `}
              >
                <Icon className="w-5 h-5 flex-shrink-0" />
                {!isCollapsed && <span>{item.name}</span>}
              </Link>
            );
          })}
          
          <button
            className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
          >
            <LogOut className="w-5 h-5 flex-shrink-0" />
            {!isCollapsed && <span>ออกจากระบบ</span>}
          </button>
        </div>
      </div>
    </aside>
  );
}
