"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import {
  Home,
  Users,
  MessageCircle,
  Settings,
  Building,
  Package,
  Truck,
  Store,
  ChevronRight,
  ChevronLeft,
  ChevronDown,
  ChevronUp,
  Menu,
  X,
  Search,
  Bell,
  ArrowLeft,
  ArrowRight,
  MoreHorizontal,
  Check,
  Shield,
  BarChart3,
  Wallet,
  FileText,
  Calendar,
  HelpCircle,
  LogOut,
  Sun,
  Moon,
  Zap,
  Globe,
  Heart,
  Star,
  Filter,
  Download,
  Upload,
  Eye,
  EyeOff,
  PanelLeftClose,
  PanelLeftOpen,
  Layers,
  Database,
  Cloud,
  Smartphone,
  Monitor,
  Tablet,
  Clock
} from "lucide-react";

export function NavigationDemo() {
  const [activeTab, setActiveTab] = useState("nav");
  const [currentStep, setCurrentStep] = useState(2);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [expandedMenus, setExpandedMenus] = useState<string[]>(["analytics"]);
  const [darkMode, setDarkMode] = useState(true);
  const [notifications, setNotifications] = useState(true);

  const toggleMenu = (menuId: string) => {
    setExpandedMenus((prev) =>
      prev.includes(menuId)
        ? prev.filter((id) => id !== menuId)
        : [...prev, menuId]
    );
  };

  return (
    <div className="space-y-6">
      {/* Современные сайдбары */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Современные сайдбары</CardTitle>
        </CardHeader>
        <CardContent className="space-y-8">
          {/* Premium Sidebar with Profile */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Премиум сайдбар с профилем
            </h4>
            <div className="w-72 glass-sidebar rounded-xl p-4 space-y-6">
              {/* Profile Section */}
              <div className="glass-card border-white/10 p-4 rounded-lg">
                <div className="flex items-center space-x-3 mb-3">
                  <Avatar className="h-12 w-12 bg-gradient-to-br from-primary/50 to-purple-500/50 border-2 border-white/20">
                    <AvatarFallback className="bg-transparent text-white font-semibold">
                      SF
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-white font-semibold truncate">
                      Александр Смирнов
                    </p>
                    <p className="text-white/60 text-sm truncate">
                      alex@sferav.com
                    </p>
                  </div>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <Settings className="h-4 w-4 text-white/70" />
                  </Button>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                    <span className="text-white/70">Онлайн</span>
                  </div>
                  <Badge
                    variant="secondary"
                    className="bg-primary/20 text-primary-foreground text-xs"
                  >
                    Pro
                  </Badge>
                </div>
              </div>

              {/* Navigation */}
              <nav className="space-y-1">
                <Button
                  variant="glass"
                  className="w-full justify-start h-11 font-medium"
                >
                  <Home className="h-5 w-5 mr-3" />
                  Главная
                  <Badge className="ml-auto bg-primary/30 text-primary-foreground text-xs">
                    3
                  </Badge>
                </Button>

                <Button
                  variant="ghost"
                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
                >
                  <BarChart3 className="h-5 w-5 mr-3" />
                  Аналитика
                </Button>

                <Button
                  variant="ghost"
                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
                >
                  <Store className="h-5 w-5 mr-3" />
                  Маркетплейс
                  <Badge className="ml-auto bg-orange-500/20 text-orange-300 text-xs">
                    Новое
                  </Badge>
                </Button>

                <Button
                  variant="ghost"
                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
                >
                  <MessageCircle className="h-5 w-5 mr-3" />
                  Сообщения
                  <Badge className="ml-auto bg-red-500/20 text-red-300 text-xs">
                    12
                  </Badge>
                </Button>

                <Button
                  variant="ghost"
                  className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
                >
                  <Users className="h-5 w-5 mr-3" />
                  Команда
                </Button>
              </nav>

              {/* Quick Actions */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-white/60 text-xs font-medium uppercase tracking-wider">
                    Быстрые действия
                  </span>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-10 glass-secondary border-white/10"
                  >
                    <Upload className="h-4 w-4 mr-2" />
                    Загрузить
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-10 glass-secondary border-white/10"
                  >
                    <Download className="h-4 w-4 mr-2" />
                    Скачать
                  </Button>
                </div>
              </div>

              {/* Footer */}
              <div className="pt-4 border-t border-white/10 space-y-2">
                <Button
                  variant="ghost"
                  className="w-full justify-start h-9 text-white/70 text-sm"
                >
                  <HelpCircle className="h-4 w-4 mr-3" />
                  Помощь
                </Button>
                <Button
                  variant="ghost"
                  className="w-full justify-start h-9 text-white/70 text-sm"
                >
                  <LogOut className="h-4 w-4 mr-3" />
                  Выйти
                </Button>
              </div>
            </div>
          </div>

          {/* Collapsible Multi-level Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Многоуровневый сайдбар с коллапсом
            </h4>
            <div
              className={`${
                sidebarCollapsed ? "w-16" : "w-72"
              } transition-all duration-300 glass-sidebar rounded-xl p-4 space-y-4`}
            >
              {/* Header with Toggle */}
              <div className="flex items-center justify-between">
                {!sidebarCollapsed && (
                  <div className="flex items-center space-x-2">
                    <div className="w-8 h-8 bg-primary/30 rounded-lg flex items-center justify-center">
                      <Zap className="h-5 w-5 text-primary" />
                    </div>
                    <span className="text-white font-bold">SferaV</span>
                  </div>
                )}
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                  className="h-8 w-8"
                >
                  {sidebarCollapsed ? (
                    <PanelLeftOpen className="h-4 w-4 text-white/70" />
                  ) : (
                    <PanelLeftClose className="h-4 w-4 text-white/70" />
                  )}
                </Button>
              </div>

              {/* Navigation */}
              <nav className="space-y-1">
                {/* Dashboard */}
                <Button
                  variant="glass"
                  className={`w-full ${
                    sidebarCollapsed ? "justify-center" : "justify-start"
                  } h-10`}
                >
                  <Home className="h-4 w-4" />
                  {!sidebarCollapsed && (
                    <span className="ml-3">Панель управления</span>
                  )}
                </Button>

                {/* Analytics with Submenu */}
                <div>
                  <Button
                    variant="ghost"
                    className={`w-full ${
                      sidebarCollapsed ? "justify-center" : "justify-start"
                    } h-10 text-white/70 hover:text-white`}
                    onClick={() => !sidebarCollapsed && toggleMenu("analytics")}
                  >
                    <BarChart3 className="h-4 w-4" />
                    {!sidebarCollapsed && (
                      <>
                        <span className="ml-3 flex-1 text-left">Аналитика</span>
                        {expandedMenus.includes("analytics") ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </>
                    )}
                  </Button>
                  {!sidebarCollapsed && expandedMenus.includes("analytics") && (
                    <div className="ml-4 mt-1 space-y-1 border-l border-white/10 pl-4">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
                      >
                        <BarChart3 className="h-3 w-3 mr-2" />
                        Отчеты
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
                      >
                        <Wallet className="h-3 w-3 mr-2" />
                        Финансы
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
                      >
                        <Users className="h-3 w-3 mr-2" />
                        Пользователи
                      </Button>
                    </div>
                  )}
                </div>

                {/* Projects with Submenu */}
                <div>
                  <Button
                    variant="ghost"
                    className={`w-full ${
                      sidebarCollapsed ? "justify-center" : "justify-start"
                    } h-10 text-white/70 hover:text-white`}
                    onClick={() => !sidebarCollapsed && toggleMenu("projects")}
                  >
                    <Layers className="h-4 w-4" />
                    {!sidebarCollapsed && (
                      <>
                        <span className="ml-3 flex-1 text-left">Проекты</span>
                        {expandedMenus.includes("projects") ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </>
                    )}
                  </Button>
                  {!sidebarCollapsed && expandedMenus.includes("projects") && (
                    <div className="ml-4 mt-1 space-y-1 border-l border-white/10 pl-4">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
                      >
                        <Package className="h-3 w-3 mr-2" />
                        Активные
                        <Badge className="ml-auto bg-green-500/20 text-green-300 text-xs">
                          5
                        </Badge>
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
                      >
                        <Calendar className="h-3 w-3 mr-2" />
                        Архив
                      </Button>
                    </div>
                  )}
                </div>

                {/* Other menu items */}
                <Button
                  variant="ghost"
                  className={`w-full ${
                    sidebarCollapsed ? "justify-center" : "justify-start"
                  } h-10 text-white/70 hover:text-white`}
                >
                  <MessageCircle className="h-4 w-4" />
                  {!sidebarCollapsed && <span className="ml-3">Сообщения</span>}
                  {!sidebarCollapsed && (
                    <Badge className="ml-auto bg-red-500/20 text-red-300 text-xs">
                      3
                    </Badge>
                  )}
                </Button>

                <Button
                  variant="ghost"
                  className={`w-full ${
                    sidebarCollapsed ? "justify-center" : "justify-start"
                  } h-10 text-white/70 hover:text-white`}
                >
                  <Settings className="h-4 w-4" />
                  {!sidebarCollapsed && <span className="ml-3">Настройки</span>}
                </Button>
              </nav>

              {/* Settings Section */}
              {!sidebarCollapsed && (
                <div className="pt-4 border-t border-white/10 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-white/60 text-xs font-medium uppercase tracking-wider">
                      Настройки
                    </span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Moon className="h-4 w-4 text-white/60" />
                        <span className="text-white/70 text-sm">
                          Темная тема
                        </span>
                      </div>
                      <Switch
                        checked={darkMode}
                        onCheckedChange={setDarkMode}
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Bell className="h-4 w-4 text-white/60" />
                        <span className="text-white/70 text-sm">
                          Уведомления
                        </span>
                      </div>
                      <Switch
                        checked={notifications}
                        onCheckedChange={setNotifications}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Dashboard-style Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Дашборд сайдбар
            </h4>
            <div className="w-80 glass-sidebar rounded-xl p-6 space-y-6">
              {/* Stats Overview */}
              <div className="space-y-4">
                <h3 className="text-white font-semibold text-lg">Обзор</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="glass-card border-white/10 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-white mb-1">
                      1,234
                    </div>
                    <div className="text-white/60 text-xs">Заказы</div>
                  </div>
                  <div className="glass-card border-white/10 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-green-400 mb-1">
                      ₽89K
                    </div>
                    <div className="text-white/60 text-xs">Доход</div>
                  </div>
                </div>
              </div>

              {/* Quick Navigation */}
              <div className="space-y-3">
                <h4 className="text-white/70 text-sm font-medium">
                  Быстрая навигация
                </h4>
                <div className="space-y-1">
                  <Button
                    variant="glass"
                    className="w-full justify-start h-12 text-left"
                  >
                    <div className="flex items-center">
                      <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center mr-3">
                        <Store className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <div className="text-white font-medium">
                          Маркетплейс
                        </div>
                        <div className="text-white/60 text-xs">
                          Управление товарами
                        </div>
                      </div>
                    </div>
                  </Button>

                  <Button
                    variant="ghost"
                    className="w-full justify-start h-12 text-left text-white/70 hover:text-white"
                  >
                    <div className="flex items-center">
                      <div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center mr-3">
                        <Users className="h-5 w-5 text-blue-400" />
                      </div>
                      <div>
                        <div className="font-medium">Команда</div>
                        <div className="text-white/60 text-xs">
                          15 активных участников
                        </div>
                      </div>
                    </div>
                  </Button>

                  <Button
                    variant="ghost"
                    className="w-full justify-start h-12 text-left text-white/70 hover:text-white"
                  >
                    <div className="flex items-center">
                      <div className="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center mr-3">
                        <BarChart3 className="h-5 w-5 text-purple-400" />
                      </div>
                      <div>
                        <div className="font-medium">Аналитика</div>
                        <div className="text-white/60 text-xs">
                          Отчеты и метрики
                        </div>
                      </div>
                    </div>
                  </Button>
                </div>
              </div>

              {/* Recent Activity */}
              <div className="space-y-3">
                <h4 className="text-white/70 text-sm font-medium">
                  Последняя активность
                </h4>
                <div className="space-y-2">
                  <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                    <div className="flex-1 min-w-0">
                      <p className="text-white/80 text-sm">Новый заказ #1234</p>
                      <p className="text-white/50 text-xs">2 минуты назад</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
                    <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                    <div className="flex-1 min-w-0">
                      <p className="text-white/80 text-sm">
                        Сообщение от клиента
                      </p>
                      <p className="text-white/50 text-xs">5 минут назад</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
                    <div className="w-2 h-2 bg-orange-400 rounded-full"></div>
                    <div className="flex-1 min-w-0">
                      <p className="text-white/80 text-sm">Обновление товара</p>
                      <p className="text-white/50 text-xs">10 минут назад</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Adaptive Sidebar Showcase */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Адаптивные варианты
            </h4>
            <div className="flex space-x-4">
              {/* Desktop */}
              <div className="space-y-2">
                <div className="flex items-center space-x-2 mb-2">
                  <Monitor className="h-4 w-4 text-white/60" />
                  <span className="text-white/60 text-xs">Desktop</span>
                </div>
                <div className="w-56 glass-sidebar rounded-lg p-3 space-y-2">
                  <Button
                    variant="glass"
                    className="w-full justify-start h-9 text-sm"
                  >
                    <Home className="h-4 w-4 mr-2" />
                    Главная
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-9 text-sm text-white/70"
                  >
                    <Store className="h-4 w-4 mr-2" />
                    Маркет
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-9 text-sm text-white/70"
                  >
                    <Users className="h-4 w-4 mr-2" />
                    Команда
                  </Button>
                </div>
              </div>

              {/* Tablet */}
              <div className="space-y-2">
                <div className="flex items-center space-x-2 mb-2">
                  <Tablet className="h-4 w-4 text-white/60" />
                  <span className="text-white/60 text-xs">Tablet</span>
                </div>
                <div className="w-14 glass-sidebar rounded-lg p-2 space-y-2">
                  <Button variant="glass" size="icon" className="w-10 h-10">
                    <Home className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="w-10 h-10 text-white/70"
                  >
                    <Store className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="w-10 h-10 text-white/70"
                  >
                    <Users className="h-4 w-4" />
                  </Button>
                </div>
              </div>

              {/* Mobile */}
              <div className="space-y-2">
                <div className="flex items-center space-x-2 mb-2">
                  <Smartphone className="h-4 w-4 text-white/60" />
                  <span className="text-white/60 text-xs">Mobile</span>
                </div>
                <div className="w-48 glass-card rounded-lg p-2">
                  <div className="flex justify-between">
                    <Button
                      variant="glass"
                      className="flex-col h-12 text-xs flex-1 mx-1"
                    >
                      <Home className="h-4 w-4 mb-1" />
                      Главная
                    </Button>
                    <Button
                      variant="ghost"
                      className="flex-col h-12 text-xs text-white/70 flex-1 mx-1"
                    >
                      <Store className="h-4 w-4 mb-1" />
                      Маркет
                    </Button>
                    <Button
                      variant="ghost"
                      className="flex-col h-12 text-xs text-white/70 flex-1 mx-1"
                    >
                      <Users className="h-4 w-4 mb-1" />
                      Команда
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Навигационное меню */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Навигационное меню</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Horizontal Navigation */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Горизонтальная навигация
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <nav className="flex items-center justify-between">
                <div className="flex items-center space-x-6">
                  <div className="flex items-center space-x-2">
                    <div className="w-8 h-8 bg-primary/30 rounded-lg"></div>
                    <span className="text-white font-semibold">SferaV</span>
                  </div>
                  <div className="flex items-center space-x-4">
                    <Button variant="glass" size="sm">
                      Главная
                    </Button>
                    <Button variant="ghost" size="sm" className="text-white/70">
                      Маркет
                    </Button>
                    <Button variant="ghost" size="sm" className="text-white/70">
                      Услуги
                    </Button>
                    <Button variant="ghost" size="sm" className="text-white/70">
                      Партнеры
                    </Button>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon">
                    <Search className="h-4 w-4 text-white/70" />
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Bell className="h-4 w-4 text-white/70" />
                  </Button>
                  <Avatar className="h-8 w-8 bg-primary/30">
                    <AvatarFallback className="bg-primary/30 text-white text-xs">
                      SF
                    </AvatarFallback>
                  </Avatar>
                </div>
              </nav>
            </div>
          </div>

          {/* Mobile Navigation */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Мобильная навигация
            </h4>
            <div className="w-64 mx-auto">
              {/* Mobile Header */}
              <div className="glass-card p-3 rounded-t-lg border border-white/10">
                <div className="flex items-center justify-between">
                  <Button variant="ghost" size="icon">
                    <Menu className="h-4 w-4 text-white/70" />
                  </Button>
                  <span className="text-white font-semibold">SferaV</span>
                  <Button variant="ghost" size="icon">
                    <Bell className="h-4 w-4 text-white/70" />
                  </Button>
                </div>
              </div>
              {/* Mobile Bottom Navigation */}
              <div className="glass-card p-2 rounded-b-lg border border-white/10 border-t-0">
                <div className="grid grid-cols-5 gap-1">
                  <Button variant="glass" className="flex-col h-12 text-xs">
                    <Home className="h-4 w-4 mb-1" />
                    Главная
                  </Button>
                  <Button
                    variant="ghost"
                    className="flex-col h-12 text-xs text-white/70"
                  >
                    <Store className="h-4 w-4 mb-1" />
                    Маркет
                  </Button>
                  <Button
                    variant="ghost"
                    className="flex-col h-12 text-xs text-white/70"
                  >
                    <MessageCircle className="h-4 w-4 mb-1" />
                    Чат
                  </Button>
                  <Button
                    variant="ghost"
                    className="flex-col h-12 text-xs text-white/70"
                  >
                    <Users className="h-4 w-4 mb-1" />
                    Команда
                  </Button>
                  <Button
                    variant="ghost"
                    className="flex-col h-12 text-xs text-white/70"
                  >
                    <Settings className="h-4 w-4 mb-1" />
                    Еще
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Табы и вкладки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Табы и вкладки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Enhanced Tabs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10 p-1 rounded-xl h-12">
                <TabsTrigger 
                  value="nav" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                >
                  <Home className="h-4 w-4 mr-2" />
                  Навигация
                </TabsTrigger>
                <TabsTrigger 
                  value="forms" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                >
                  <FileText className="h-4 w-4 mr-2" />
                  Формы
                </TabsTrigger>
                <TabsTrigger 
                  value="data" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                >
                  <Database className="h-4 w-4 mr-2" />
                  Данные
                </TabsTrigger>
                <TabsTrigger 
                  value="settings" 
                  className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
                >
                  <Settings className="h-4 w-4 mr-2" />
                  Настройки
                </TabsTrigger>
              </TabsList>
              <TabsContent value="nav" className="mt-6">
                <div className="glass-card p-6 rounded-xl border border-white/10">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                      <Home className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h5 className="text-white font-semibold">Навигация</h5>
                      <p className="text-white/60 text-sm">Компоненты для навигации по приложению</p>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                      <span className="text-white/80 text-sm">Сайдбары</span>
                      <Badge className="bg-green-500/20 text-green-300">Готово</Badge>
                    </div>
                    <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                      <span className="text-white/80 text-sm">Меню</span>
                      <Badge className="bg-blue-500/20 text-blue-300">В работе</Badge>
                    </div>
                  </div>
                </div>
              </TabsContent>
              <TabsContent value="forms" className="mt-6">
                <div className="glass-card p-6 rounded-xl border border-white/10">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
                      <FileText className="h-5 w-5 text-blue-400" />
                    </div>
                    <div>
                      <h5 className="text-white font-semibold">Формы</h5>
                      <p className="text-white/60 text-sm">Элементы для ввода и обработки данных</p>
                    </div>
                  </div>
                </div>
              </TabsContent>
              <TabsContent value="data" className="mt-6">
                <div className="glass-card p-6 rounded-xl border border-white/10">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
                      <Database className="h-5 w-5 text-purple-400" />
                    </div>
                    <div>
                      <h5 className="text-white font-semibold">Данные</h5>
                      <p className="text-white/60 text-sm">Компоненты для отображения данных</p>
                    </div>
                  </div>
                </div>
              </TabsContent>
              <TabsContent value="settings" className="mt-6">
                <div className="glass-card p-6 rounded-xl border border-white/10">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
                      <Settings className="h-5 w-5 text-orange-400" />
                    </div>
                    <div>
                      <h5 className="text-white font-semibold">Настройки</h5>
                      <p className="text-white/60 text-sm">Элементы управления настройками</p>
                    </div>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </div>

          {/* Pill Tabs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Табы-пилюли</h4>
            <div className="flex space-x-1 glass-card p-2 rounded-xl border border-white/10 w-fit">
              <Button variant="glass" size="sm" className="rounded-full px-4">
                <Package className="h-4 w-4 mr-2" />
                Товары
                <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">234</Badge>
              </Button>
              <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
                <Users className="h-4 w-4 mr-2" />
                Клиенты
              </Button>
              <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
                <Truck className="h-4 w-4 mr-2" />
                Доставка
              </Button>
            </div>
          </div>

          {/* Segmented Control */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Сегментированный контрол</h4>
            <div className="inline-flex glass-card rounded-xl p-1 border border-white/10">
              <Button variant="glass" size="sm" className="rounded-lg">
                <Eye className="h-4 w-4 mr-2" />
                Просмотр
              </Button>
              <Button variant="ghost" size="sm" className="rounded-lg text-white/70">
                <FileText className="h-4 w-4 mr-2" />
                Редактирование
              </Button>
              <Button variant="ghost" size="sm" className="rounded-lg text-white/70">
                <Settings className="h-4 w-4 mr-2" />
                Настройки
              </Button>
            </div>
          </div>

          {/* Vertical Tabs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
            <div className="flex space-x-6">
              <div className="w-56 space-y-2">
                <Button variant="glass" className="w-full justify-start h-11 font-medium">
                  <Home className="h-4 w-4 mr-3" />
                  Главная панель
                  <ChevronRight className="h-4 w-4 ml-auto" />
                </Button>
                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
                  <Users className="h-4 w-4 mr-3" />
                  Управление пользователями
                  <ChevronRight className="h-4 w-4 ml-auto" />
                </Button>
                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
                  <BarChart3 className="h-4 w-4 mr-3" />
                  Аналитика и отчеты
                  <ChevronRight className="h-4 w-4 ml-auto" />
                </Button>
                <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
                  <Settings className="h-4 w-4 mr-3" />
                  Настройки системы
                  <ChevronRight className="h-4 w-4 ml-auto" />
                </Button>
              </div>
              <div className="flex-1 glass-card p-6 rounded-xl border border-white/10">
                <div className="flex items-center space-x-3 mb-4">
                  <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
                    <Home className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h5 className="text-white font-semibold text-lg">Главная панель</h5>
                    <p className="text-white/60">Обзор системы и быстрый доступ к функциям</p>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="glass-card border-white/10 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-white mb-1">2,847</div>
                    <div className="text-white/60 text-sm">Всего пользователей</div>
                  </div>
                  <div className="glass-card border-white/10 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-green-400 mb-1">156</div>
                    <div className="text-white/60 text-sm">Активных сессий</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Breadcrumbs */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">
            Breadcrumbs (Хлебные крошки)
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Standard Breadcrumbs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Стандартные breadcrumbs
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <nav className="flex items-center space-x-2 text-sm">
                <Button
                  variant="link"
                  className="text-white/70 hover:text-white p-0 h-auto"
                >
                  Главная
                </Button>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <Button
                  variant="link"
                  className="text-white/70 hover:text-white p-0 h-auto"
                >
                  Маркет
                </Button>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <Button
                  variant="link"
                  className="text-white/70 hover:text-white p-0 h-auto"
                >
                  Товары
                </Button>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <span className="text-white font-medium">iPhone 15 Pro</span>
              </nav>
            </div>
          </div>

          {/* Breadcrumbs with Back */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Breadcrumbs с кнопкой назад
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center space-x-4">
                <Button variant="outline" size="sm">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Назад
                </Button>
                <nav className="flex items-center space-x-2 text-sm">
                  <Button
                    variant="link"
                    className="text-white/70 hover:text-white p-0 h-auto"
                  >
                    Склад
                  </Button>
                  <ChevronRight className="h-4 w-4 text-white/40" />
                  <Button
                    variant="link"
                    className="text-white/70 hover:text-white p-0 h-auto"
                  >
                    Категории
                  </Button>
                  <ChevronRight className="h-4 w-4 text-white/40" />
                  <span className="text-white font-medium">Электроника</span>
                </nav>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Pagination */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Пагинация</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Standard Pagination */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Стандартная пагинация
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center justify-between">
                <div className="text-white/70 text-sm">
                  Показано 1-10 из 234 записей
                </div>
                <div className="flex items-center space-x-1">
                  <Button variant="outline" size="sm" disabled>
                    <ArrowLeft className="h-4 w-4" />
                  </Button>
                  <Button variant="glass" size="sm">
                    1
                  </Button>
                  <Button variant="ghost" size="sm" className="text-white/70">
                    2
                  </Button>
                  <Button variant="ghost" size="sm" className="text-white/70">
                    3
                  </Button>
                  <Button variant="ghost" size="sm" className="text-white/70">
                    ...
                  </Button>
                  <Button variant="ghost" size="sm" className="text-white/70">
                    24
                  </Button>
                  <Button variant="outline" size="sm">
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Simple Pagination */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Простая пагинация
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center justify-between">
                <Button variant="outline" size="sm" disabled>
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Предыдущая
                </Button>
                <div className="text-white/70 text-sm">Страница 1 из 24</div>
                <Button variant="outline" size="sm">
                  Следующая
                  <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Progress Navigation */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Навигация по шагам</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Step Progress */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Прогресс выполнения шагов
            </h4>
            <div className="glass-card p-6 rounded-lg border border-white/10">
              <div className="flex items-center justify-between mb-4">
                <Badge
                  variant="secondary"
                  className="glass-secondary text-white/80"
                >
                  Шаг {currentStep} из 5
                </Badge>
                <Badge
                  variant="outline"
                  className="glass-secondary text-white/60 border-white/20"
                >
                  Регистрация
                </Badge>
              </div>
              <Progress value={currentStep * 20} className="mb-6" />
              <div className="flex items-center justify-between">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
                  disabled={currentStep <= 1}
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Назад
                </Button>
                <div className="flex items-center space-x-4">
                  {[1, 2, 3, 4, 5].map((step) => (
                    <div key={step} className="flex items-center">
                      <div
                        className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all ${
                          step < currentStep
                            ? "bg-green-500 text-white"
                            : step === currentStep
                            ? "bg-primary text-white"
                            : "bg-white/10 text-white/60"
                        }`}
                      >
                        {step < currentStep ? (
                          <Check className="h-4 w-4" />
                        ) : (
                          step
                        )}
                      </div>
                      {step < 5 && (
                        <div
                          className={`w-8 h-0.5 mx-2 ${
                            step < currentStep ? "bg-green-500" : "bg-white/20"
                          }`}
                        ></div>
                      )}
                    </div>
                  ))}
                </div>
                <Button
                  variant="glass"
                  size="sm"
                  onClick={() => setCurrentStep(Math.min(5, currentStep + 1))}
                  disabled={currentStep >= 5}
                >
                  Далее
                  <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </div>
          </div>

          {/* Step Labels */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Шаги с подписями
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center justify-between">
                {[
                  { number: 1, label: "Телефон", completed: true },
                  { number: 2, label: "SMS", completed: true },
                  { number: 3, label: "Тип кабинета", completed: false },
                  { number: 4, label: "Данные", completed: false },
                  { number: 5, label: "Подтверждение", completed: false },
                ].map((step, index) => (
                  <div key={step.number} className="flex flex-col items-center">
                    <div
                      className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium mb-2 transition-all ${
                        step.completed
                          ? "bg-green-500 text-white"
                          : step.number === 3
                          ? "bg-primary text-white"
                          : "bg-white/10 text-white/60"
                      }`}
                    >
                      {step.completed ? (
                        <Check className="h-4 w-4" />
                      ) : (
                        step.number
                      )}
                    </div>
                    <span
                      className={`text-xs text-center ${
                        step.completed || step.number === 3
                          ? "text-white"
                          : "text-white/60"
                      }`}
                    >
                      {step.label}
                    </span>
                    {index < 4 && (
                      <div
                        className={`absolute w-24 h-0.5 top-5 left-1/2 transform translate-x-8 ${
                          step.completed ? "bg-green-500" : "bg-white/20"
                        }`}
                      ></div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Contextual Navigation */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Контекстная навигация</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Action Bar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">
              Панель действий
            </h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <Button variant="glass" size="sm">
                    <Package className="h-4 w-4 mr-2" />
                    Добавить товар
                  </Button>
                  <Button variant="outline" size="sm">
                    Импорт
                  </Button>
                  <Button variant="outline" size="sm">
                    Экспорт
                  </Button>
                </div>
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon">
                    <Search className="h-4 w-4 text-white/70" />
                  </Button>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal className="h-4 w-4 text-white/70" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Filter Navigation */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Фильтры</h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="flex items-center space-x-2 flex-wrap">
                <Button variant="glass" size="sm">
                  Все
                </Button>
                <Button variant="ghost" size="sm" className="text-white/70">
                  Активные
                </Button>
                <Button variant="ghost" size="sm" className="text-white/70">
                  В наличии
                </Button>
                <Button variant="ghost" size="sm" className="text-white/70">
                  Закончились
                </Button>
                <div className="border-l border-white/20 h-6 mx-2"></div>
                <Button variant="outline" size="sm">
                  Фулфилмент
                  <X className="h-3 w-3 ml-2" />
                </Button>
                <Button variant="outline" size="sm">
                  Электроника
                  <X className="h-3 w-3 ml-2" />
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
      {/* Современные Breadcrumbs */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Современные Breadcrumbs</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Enhanced Breadcrumbs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные breadcrumbs</h4>
            <div className="glass-card p-4 rounded-xl border border-white/10">
              <nav className="flex items-center space-x-2 text-sm">
                <div className="flex items-center space-x-2">
                  <div className="w-6 h-6 bg-primary/20 rounded-lg flex items-center justify-center">
                    <Home className="h-3 w-3 text-primary" />
                  </div>
                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
                    Главная
                  </Button>
                </div>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
                  Маркетплейс
                </Button>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
                  Товары
                </Button>
                <ChevronRight className="h-4 w-4 text-white/40" />
                <div className="flex items-center space-x-2">
                  <div className="w-6 h-6 bg-orange-500/20 rounded-lg flex items-center justify-center">
                    <Package className="h-3 w-3 text-orange-400" />
                  </div>
                  <span className="text-white font-semibold">iPhone 15 Pro Max</span>
                </div>
              </nav>
            </div>
          </div>

          {/* Interactive Breadcrumbs */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Интерактивные breadcrumbs</h4>
            <div className="glass-card p-4 rounded-xl border border-white/10">
              <div className="flex items-center justify-between mb-3">
                <nav className="flex items-center space-x-2 text-sm">
                  <Button variant="outline" size="sm" className="h-8">
                    <ArrowLeft className="h-3 w-3 mr-2" />
                    Назад
                  </Button>
                  <div className="border-l border-white/20 h-6 mx-3"></div>
                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
                    Склад
                  </Button>
                  <ChevronRight className="h-4 w-4 text-white/40" />
                  <Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
                    Категории
                  </Button>
                  <ChevronRight className="h-4 w-4 text-white/40" />
                  <span className="text-white font-medium">Электроника</span>
                </nav>
                <Button variant="ghost" size="icon" className="h-8 w-8">
                  <MoreHorizontal className="h-4 w-4 text-white/60" />
                </Button>
              </div>
              <div className="flex items-center space-x-2">
                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300">
                  234 товара
                </Badge>
                <Badge variant="outline" className="border-white/20 text-white/60">
                  Обновлено 2ч назад
                </Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Современная пагинация */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Современная пагинация</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Enhanced Pagination */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенная пагинация</h4>
            <div className="glass-card p-4 rounded-xl border border-white/10">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <div className="text-white/70 text-sm">
                    Показано <span className="text-white font-medium">1-25</span> из{' '}
                    <span className="text-white font-medium">1,247</span> записей
                  </div>
                  <div className="flex items-center space-x-2">
                    <span className="text-white/60 text-sm">Показать:</span>
                    <Button variant="outline" size="sm" className="h-8 px-3">
                      25 <ChevronDown className="h-3 w-3 ml-1" />
                    </Button>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Button variant="outline" size="sm" disabled className="h-8">
                    <ArrowLeft className="h-4 w-4 mr-1" />
                    Пред
                  </Button>
                  <div className="flex items-center space-x-1">
                    <Button variant="glass" size="sm" className="h-8 w-8">1</Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">2</Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">3</Button>
                    <span className="text-white/40 px-2">...</span>
                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">49</Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">50</Button>
                  </div>
                  <Button variant="outline" size="sm" className="h-8">
                    След
                    <ArrowRight className="h-4 w-4 ml-1" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Compact Pagination */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Компактная пагинация</h4>
            <div className="glass-card p-3 rounded-xl border border-white/10">
              <div className="flex items-center justify-center space-x-4">
                <Button variant="outline" size="sm" disabled className="h-8">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
                <div className="flex items-center space-x-2">
                  <span className="text-white/70 text-sm">Страница</span>
                  <div className="flex items-center space-x-1 glass-card p-1 rounded-lg border border-white/10">
                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">1</Button>
                    <Button variant="glass" size="sm" className="h-6 w-6 p-0 text-xs">2</Button>
                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">3</Button>
                  </div>
                  <span className="text-white/70 text-sm">из 24</span>
                </div>
                <Button variant="outline" size="sm" className="h-8">
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>

          {/* Load More Pattern */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Паттерн "Загрузить еще"</h4>
            <div className="glass-card p-4 rounded-xl border border-white/10 text-center">
              <div className="space-y-3">
                <div className="text-white/70 text-sm">
                  Показано 50 из 1,247 записей
                </div>
                <Progress value={4} className="w-full" />
                <Button variant="outline" className="w-full">
                  <Download className="h-4 w-4 mr-2" />
                  Загрузить еще 50 записей
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Фильтры и поиск */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Фильтры и поиск</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Advanced Filter Bar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Расширенная панель фильтров</h4>
            <div className="glass-card p-4 rounded-xl border border-white/10">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center space-x-3">
                  <Button variant="glass" size="sm">
                    <Filter className="h-4 w-4 mr-2" />
                    Фильтры
                  </Button>
                  <div className="flex items-center space-x-2">
                    <Button variant="outline" size="sm" className="h-8">
                      Категория
                      <ChevronDown className="h-3 w-3 ml-2" />
                    </Button>
                    <Button variant="outline" size="sm" className="h-8">
                      Статус
                      <ChevronDown className="h-3 w-3 ml-2" />
                    </Button>
                    <Button variant="outline" size="sm" className="h-8">
                      Дата
                      <ChevronDown className="h-3 w-3 ml-2" />
                    </Button>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="relative">
                    <Search className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40" />
                    <input 
                      className="bg-white/5 border border-white/10 rounded-lg pl-10 pr-4 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:border-primary/50 w-64"
                      placeholder="Поиск товаров..."
                    />
                  </div>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <MoreHorizontal className="h-4 w-4 text-white/60" />
                  </Button>
                </div>
              </div>
              <div className="flex items-center space-x-2 flex-wrap">
                <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
                  Электроника
                  <X className="h-3 w-3 ml-2 cursor-pointer hover:text-primary" />
                </Badge>
                <Badge variant="outline" className="border-green-500/30 text-green-300 bg-green-500/10">
                  В наличии
                  <X className="h-3 w-3 ml-2 cursor-pointer hover:text-green-300" />
                </Badge>
                <Badge variant="outline" className="border-blue-500/30 text-blue-300 bg-blue-500/10">
                  Сегодня
                  <X className="h-3 w-3 ml-2 cursor-pointer hover:text-blue-300" />
                </Badge>
                <Button variant="ghost" size="sm" className="h-6 text-xs text-white/60 hover:text-white">
                  Очистить все
                </Button>
              </div>
            </div>
          </div>

          {/* Quick Filters */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Быстрые фильтры</h4>
            <div className="glass-card p-3 rounded-xl border border-white/10">
              <div className="flex items-center space-x-2 flex-wrap">
                <Button variant="glass" size="sm" className="h-8">
                  <Star className="h-3 w-3 mr-2" />
                  Избранное
                </Button>
                <Button variant="ghost" size="sm" className="h-8 text-white/70">
                  <Calendar className="h-3 w-3 mr-2" />
                  Недавние
                </Button>
                <Button variant="ghost" size="sm" className="h-8 text-white/70">
                  <Heart className="h-3 w-3 mr-2" />
                  Популярные
                </Button>
                <Button variant="ghost" size="sm" className="h-8 text-white/70">
                  <Zap className="h-3 w-3 mr-2" />
                  Быстрая доставка
                </Button>
                <div className="border-l border-white/20 h-6 mx-2"></div>
                <Button variant="outline" size="sm" className="h-8">
                  <Eye className="h-3 w-3 mr-2" />
                  Показать все
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}