import Link from 'next/link';
import { useRouter } from 'next/router';
import { 
  LayoutDashboard, 
  ShoppingBag, 
  Tag, 
  FileText, 
  Settings, 
  Users, 
  ShoppingCart,
  BarChart,
  MessageSquare
} from 'lucide-react';

// Определение элементов меню
const menuItems = [
  { 
    title: 'Дашборд', 
    icon: <LayoutDashboard className="h-5 w-5" />, 
    href: '/admin/dashboard',
    active: (path) => path === '/admin/dashboard'
  },
  { 
    title: 'Заказы', 
    icon: <ShoppingCart className="h-5 w-5" />, 
    href: '/admin/orders',
    active: (path) => path.startsWith('/admin/orders')
  },
  { 
    title: 'Клиенты', 
    icon: <Users className="h-5 w-5" />, 
    href: '/admin/customers',
    active: (path) => path.startsWith('/admin/customers')
  },
  { 
    title: 'Категории', 
    icon: <Tag className="h-5 w-5" />, 
    href: '/admin/categories',
    active: (path) => path.startsWith('/admin/categories')
  },
  { 
    title: 'Товары', 
    icon: <ShoppingBag className="h-5 w-5" />, 
    href: '/admin/products',
    active: (path) => path.startsWith('/admin/products')
  },
  { 
    title: 'Страницы', 
    icon: <FileText className="h-5 w-5" />, 
    href: '/admin/pages',
    active: (path) => path.startsWith('/admin/pages')
  },
  { 
    title: 'Отзывы', 
    icon: <MessageSquare className="h-5 w-5" />, 
    href: '/admin/reviews',
    active: (path) => path.startsWith('/admin/reviews')
  },
  { 
    title: 'Аналитика', 
    icon: <BarChart className="h-5 w-5" />, 
    href: '/admin/analytics',
    active: (path) => path.startsWith('/admin/analytics')
  },
  { 
    title: 'Настройки', 
    icon: <Settings className="h-5 w-5" />, 
    href: '/admin/settings',
    active: (path) => path.startsWith('/admin/settings')
  }
];

export default function AdminSidebar() {
  const router = useRouter();
  const currentPath = router.pathname;

  return (
    <div className="h-full bg-white border-r border-gray-200 w-64 flex-shrink-0">
      <div className="p-6">
        <Link href="/admin/dashboard" className="flex items-center">
          <span className="text-xl font-bold text-indigo-600">DressedForSuccess</span>
        </Link>
      </div>
      <nav className="mt-5 px-3 space-y-1">
        {menuItems.map((item) => (
          <Link
            key={item.title}
            href={item.href}
            className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md ${
              item.active(currentPath)
                ? 'bg-indigo-50 text-indigo-600'
                : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
            }`}
          >
            <span className={`mr-3 ${
              item.active(currentPath) ? 'text-indigo-600' : 'text-gray-400 group-hover:text-gray-500'
            }`}>
              {item.icon}
            </span>
            {item.title}
          </Link>
        ))}
      </nav>
    </div>
  );
} 