"use client"

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { 
  // Основные иконки
  Home, Settings, User, Search, Bell, Heart, Share2, Download, Upload, 
  Edit, Trash2, Plus, Minus, X, Check, ChevronDown, ChevronUp, ChevronLeft, 
  ChevronRight, ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
  
  // Бизнес иконки
  Building, Package, Truck, Users, Phone, Mail, Calendar, Clock, MapPin,
  TrendingUp, TrendingDown, BarChart, PieChart, DollarSign, CreditCard,
  
  // Интерфейс
  Menu, MoreHorizontal, MoreVertical, Eye, EyeOff, Lock, Unlock, Key,
  Shield, AlertCircle, AlertTriangle, Info, CheckCircle, XCircle,
  
  // Файлы и медиа
  File, FileText, Image, Video, Music, Camera, Paperclip, Link2,
  
  // Действия
  Play, Pause, Square, SkipForward, SkipBack, Volume2, VolumeX,
  
  // Социальные
  MessageCircle, Send, ThumbsUp, ThumbsDown, Star, Bookmark,
  
  // Статус
  Wifi, WifiOff, Battery, Zap, Globe, Monitor, Smartphone, Tablet
} from 'lucide-react'

const iconSections = [
  {
    title: 'Основные иконки',
    icons: [
      { icon: Home, name: 'Home' },
      { icon: Settings, name: 'Settings' },
      { icon: User, name: 'User' },
      { icon: Search, name: 'Search' },
      { icon: Bell, name: 'Bell' },
      { icon: Heart, name: 'Heart' },
      { icon: Share2, name: 'Share2' },
      { icon: Download, name: 'Download' },
      { icon: Upload, name: 'Upload' },
      { icon: Edit, name: 'Edit' },
      { icon: Trash2, name: 'Trash2' },
      { icon: Plus, name: 'Plus' },
      { icon: Minus, name: 'Minus' },
      { icon: X, name: 'X' },
      { icon: Check, name: 'Check' },
    ]
  },
  {
    title: 'Навигация',
    icons: [
      { icon: ChevronDown, name: 'ChevronDown' },
      { icon: ChevronUp, name: 'ChevronUp' },
      { icon: ChevronLeft, name: 'ChevronLeft' },
      { icon: ChevronRight, name: 'ChevronRight' },
      { icon: ArrowLeft, name: 'ArrowLeft' },
      { icon: ArrowRight, name: 'ArrowRight' },
      { icon: ArrowUp, name: 'ArrowUp' },
      { icon: ArrowDown, name: 'ArrowDown' },
      { icon: Menu, name: 'Menu' },
      { icon: MoreHorizontal, name: 'MoreHorizontal' },
      { icon: MoreVertical, name: 'MoreVertical' },
    ]
  },
  {
    title: 'Бизнес и коммерция',
    icons: [
      { icon: Building, name: 'Building' },
      { icon: Package, name: 'Package' },
      { icon: Truck, name: 'Truck' },
      { icon: Users, name: 'Users' },
      { icon: Phone, name: 'Phone' },
      { icon: Mail, name: 'Mail' },
      { icon: Calendar, name: 'Calendar' },
      { icon: Clock, name: 'Clock' },
      { icon: MapPin, name: 'MapPin' },
      { icon: TrendingUp, name: 'TrendingUp' },
      { icon: TrendingDown, name: 'TrendingDown' },
      { icon: BarChart, name: 'BarChart' },
      { icon: PieChart, name: 'PieChart' },
      { icon: DollarSign, name: 'DollarSign' },
      { icon: CreditCard, name: 'CreditCard' },
    ]
  },
  {
    title: 'Безопасность и статус',
    icons: [
      { icon: Eye, name: 'Eye' },
      { icon: EyeOff, name: 'EyeOff' },
      { icon: Lock, name: 'Lock' },
      { icon: Unlock, name: 'Unlock' },
      { icon: Key, name: 'Key' },
      { icon: Shield, name: 'Shield' },
      { icon: AlertCircle, name: 'AlertCircle' },
      { icon: AlertTriangle, name: 'AlertTriangle' },
      { icon: Info, name: 'Info' },
      { icon: CheckCircle, name: 'CheckCircle' },
      { icon: XCircle, name: 'XCircle' },
    ]
  },
  {
    title: 'Файлы и медиа',
    icons: [
      { icon: File, name: 'File' },
      { icon: FileText, name: 'FileText' },
      { icon: Image, name: 'Image' },
      { icon: Video, name: 'Video' },
      { icon: Music, name: 'Music' },
      { icon: Camera, name: 'Camera' },
      { icon: Paperclip, name: 'Paperclip' },
      { icon: Link2, name: 'Link2' },
    ]
  },
  {
    title: 'Медиа контролы',
    icons: [
      { icon: Play, name: 'Play' },
      { icon: Pause, name: 'Pause' },
      { icon: Square, name: 'Square' },
      { icon: SkipForward, name: 'SkipForward' },
      { icon: SkipBack, name: 'SkipBack' },
      { icon: Volume2, name: 'Volume2' },
      { icon: VolumeX, name: 'VolumeX' },
    ]
  },
  {
    title: 'Коммуникации',
    icons: [
      { icon: MessageCircle, name: 'MessageCircle' },
      { icon: Send, name: 'Send' },
      { icon: ThumbsUp, name: 'ThumbsUp' },
      { icon: ThumbsDown, name: 'ThumbsDown' },
      { icon: Star, name: 'Star' },
      { icon: Bookmark, name: 'Bookmark' },
    ]
  },
  {
    title: 'Устройства и подключения',
    icons: [
      { icon: Wifi, name: 'Wifi' },
      { icon: WifiOff, name: 'WifiOff' },
      { icon: Battery, name: 'Battery' },
      { icon: Zap, name: 'Zap' },
      { icon: Globe, name: 'Globe' },
      { icon: Monitor, name: 'Monitor' },
      { icon: Smartphone, name: 'Smartphone' },
      { icon: Tablet, name: 'Tablet' },
    ]
  }
]

export function IconsDemo() {
  return (
    <div className="space-y-6">
      {/* Размеры иконок */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Размеры иконок</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center gap-8">
            <div className="text-center space-y-2">
              <Settings className="h-3 w-3 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-3 w-3</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-4 w-4 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-4 w-4</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-5 w-5 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-5 w-5</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-6 w-6 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-6 w-6</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-8 w-8 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-8 w-8</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-10 w-10 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-10 w-10</div>
            </div>
            <div className="text-center space-y-2">
              <Settings className="h-12 w-12 text-white mx-auto" />
              <div className="text-white/70 text-xs">h-12 w-12</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Цвета иконок */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Цвета иконок</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-3 md:grid-cols-5 gap-4">
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-white mx-auto" />
              <div className="text-white/70 text-xs">text-white</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-white/80 mx-auto" />
              <div className="text-white/70 text-xs">text-white/80</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-white/60 mx-auto" />
              <div className="text-white/70 text-xs">text-white/60</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-primary mx-auto" />
              <div className="text-white/70 text-xs">text-primary</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-red-400 mx-auto" />
              <div className="text-white/70 text-xs">text-red-400</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-green-400 mx-auto" />
              <div className="text-white/70 text-xs">text-green-400</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-blue-400 mx-auto" />
              <div className="text-white/70 text-xs">text-blue-400</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-yellow-400 mx-auto" />
              <div className="text-white/70 text-xs">text-yellow-400</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-purple-400 mx-auto" />
              <div className="text-white/70 text-xs">text-purple-400</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-pink-400 mx-auto" />
              <div className="text-white/70 text-xs">text-pink-400</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Заполненные иконки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Заполненные иконки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center gap-8">
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-red-400 mx-auto" />
              <div className="text-white/70 text-xs">Обычная</div>
            </div>
            <div className="text-center space-y-2">
              <Heart className="h-8 w-8 text-red-400 mx-auto fill-red-400" />
              <div className="text-white/70 text-xs">Заполненная</div>
            </div>
            <div className="text-center space-y-2">
              <Star className="h-8 w-8 text-yellow-400 mx-auto" />
              <div className="text-white/70 text-xs">Обычная</div>
            </div>
            <div className="text-center space-y-2">
              <Star className="h-8 w-8 text-yellow-400 mx-auto fill-yellow-400" />
              <div className="text-white/70 text-xs">Заполненная</div>
            </div>
          </div>
          <div className="text-white/60 text-sm">
            Добавьте класс <code className="bg-white/10 px-1 py-0.5 rounded text-xs font-mono">fill-[color]</code> для заливки иконки
          </div>
        </CardContent>
      </Card>

      {/* Аватары */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Аватары</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Размеры аватаров */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Размеры</h4>
            <div className="flex items-center gap-6">
              <div className="text-center space-y-2">
                <Avatar className="h-6 w-6 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white text-xs">XS</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-6 w-6</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-8 w-8 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white text-xs">SM</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-8 w-8</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-10 w-10 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white text-sm">MD</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-10 w-10</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-12 w-12 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white text-sm">LG</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-12 w-12</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-16 w-16 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white">XL</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-16 w-16</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-20 w-20 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white text-lg">2XL</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">h-20 w-20</div>
              </div>
            </div>
          </div>

          {/* Типы аватаров */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Типы</h4>
            <div className="flex items-center gap-6">
              <div className="text-center space-y-2">
                <Avatar className="h-12 w-12 bg-white/20">
                  <AvatarFallback className="bg-white/20 text-white font-semibold">ИП</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">Инициалы</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-12 w-12 bg-primary/20">
                  <AvatarFallback className="bg-primary/20 text-white font-semibold">AB</AvatarFallback>
                </Avatar>
                <div className="text-white/70 text-xs">Цветной фон</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-12 w-12 bg-white/20">
                  <User className="h-6 w-6 text-white/70" />
                </Avatar>
                <div className="text-white/70 text-xs">С иконкой</div>
              </div>
              <div className="text-center space-y-2">
                <Avatar className="h-12 w-12">
                  <div className="w-full h-full bg-gradient-to-br from-primary/60 to-blue-500/60 flex items-center justify-center">
                    <span className="text-white font-semibold">GR</span>
                  </div>
                </Avatar>
                <div className="text-white/70 text-xs">Градиент</div>
              </div>
            </div>
          </div>

          {/* Статусы */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Со статусом</h4>
            <div className="flex items-center gap-6">
              <div className="text-center space-y-2">
                <div className="relative">
                  <Avatar className="h-12 w-12 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">ON</AvatarFallback>
                  </Avatar>
                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-400 rounded-full border-2 border-background"></div>
                </div>
                <div className="text-white/70 text-xs">Онлайн</div>
              </div>
              <div className="text-center space-y-2">
                <div className="relative">
                  <Avatar className="h-12 w-12 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">AW</AvatarFallback>
                  </Avatar>
                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-yellow-400 rounded-full border-2 border-background"></div>
                </div>
                <div className="text-white/70 text-xs">Отошел</div>
              </div>
              <div className="text-center space-y-2">
                <div className="relative">
                  <Avatar className="h-12 w-12 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">OF</AvatarFallback>
                  </Avatar>
                  <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-gray-400 rounded-full border-2 border-background"></div>
                </div>
                <div className="text-white/70 text-xs">Не в сети</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">
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Варианты</h4>
            <div className="flex flex-wrap gap-3">
              <Badge variant="default">Default</Badge>
              <Badge variant="secondary">Secondary</Badge>
              <Badge variant="outline">Outline</Badge>
              <Badge variant="destructive">Destructive</Badge>
            </div>
          </div>

          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">С иконками</h4>
            <div className="flex flex-wrap gap-3">
              <Badge variant="default" className="gap-1">
                <CheckCircle className="h-3 w-3" />
                Активно
              </Badge>
              <Badge variant="secondary" className="gap-1">
                <Clock className="h-3 w-3" />
                Ожидание
              </Badge>
              <Badge variant="outline" className="gap-1">
                <AlertTriangle className="h-3 w-3" />
                Предупреждение
              </Badge>
              <Badge variant="destructive" className="gap-1">
                <XCircle className="h-3 w-3" />
                Ошибка
              </Badge>
            </div>
          </div>

          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Статусы организаций</h4>
            <div className="flex flex-wrap gap-3">
              <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/50">
                Фулфилмент
              </Badge>
              <Badge className="bg-green-500/20 text-green-400 border-green-500/50">
                Селлер
              </Badge>
              <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/50">
                Логистика
              </Badge>
              <Badge className="bg-orange-500/20 text-orange-400 border-orange-500/50">
                Оптовик
              </Badge>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Коллекция иконок */}
      {iconSections.map((section) => (
        <Card key={section.title} className="glass-card border-white/10">
          <CardHeader>
            <CardTitle className="text-white">{section.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
              {section.icons.map((iconData) => {
                const IconComponent = iconData.icon
                return (
                  <div key={iconData.name} className="text-center space-y-2 p-2 rounded-lg hover:bg-white/5 transition-colors">
                    <IconComponent className="h-6 w-6 text-white/80 mx-auto" />
                    <div className="text-white/60 text-xs font-mono">{iconData.name}</div>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      ))}

      {/* Примеры использования */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Примеры использования в интерфейсе</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Кнопки с иконками */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Кнопки с иконками</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Создать
              </Button>
              <Button variant="outline" size="sm">
                <Edit className="h-4 w-4 mr-2" />
                Редактировать
              </Button>
              <Button variant="destructive" size="sm">
                <Trash2 className="h-4 w-4 mr-2" />
                Удалить
              </Button>
              <Button variant="ghost" size="icon">
                <Heart className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon">
                <Share2 className="h-4 w-4" />
              </Button>
            </div>
          </div>

          {/* Элементы интерфейса */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Элементы интерфейса</h4>
            <div className="space-y-4">
              <div className="flex items-center justify-between glass-card p-4 rounded-lg">
                <div className="flex items-center space-x-3">
                  <Avatar className="h-10 w-10 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white text-sm">ИП</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="text-white font-medium">Иван Петров</div>
                    <div className="text-white/70 text-sm flex items-center">
                      <Building className="h-3 w-3 mr-1" />
                      ООО &quot;Логистик&quot;
                    </div>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="secondary" className="gap-1">
                    <CheckCircle className="h-3 w-3" />
                    Активен
                  </Badge>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal className="h-4 w-4 text-white/70" />
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}