'use client'

import {
  Play,
  Pause,
  Volume2,
  VolumeX,
  SkipBack,
  SkipForward,
  Download,
  Share,
  MoreVertical,
  Maximize2,
  Minimize2,
  Image as ImageIcon,
  FileText,
  File,
  Archive,
  Video,
  Music,
  Mic,
  Camera,
  Upload,
  X,
  Eye,
  ZoomIn,
  ZoomOut,
  RotateCcw,
  Crop,
  Edit3,
  Trash2,
  Copy,
  ExternalLink,
  Paperclip,
} from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'

export function MediaDemo() {
  const [isPlaying, setIsPlaying] = useState(false)
  const [isMuted, setIsMuted] = useState(false)
  const [_volume, _setVolume] = useState(75)
  const [progress, _setProgress] = useState(30)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [selectedFile, setSelectedFile] = useState<number | null>(null)

  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">
          {/* Audio Player */}
          <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-4">
                {/* Play/Pause Button */}
                <Button variant="glass" size="icon" onClick={() => setIsPlaying(!isPlaying)} className="w-12 h-12">
                  {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
                </Button>

                {/* Progress and Time */}
                <div className="flex-1 space-y-2">
                  <div className="flex items-center space-x-3">
                    <Volume2 className="h-4 w-4 text-white/60" />
                    <div className="flex-1 h-1 bg-white/20 rounded-full overflow-hidden cursor-pointer">
                      <div
                        className="h-full bg-blue-400 transition-all duration-300"
                        style={{ width: `${progress}%` }}
                      />
                    </div>
                  </div>

                  <div className="flex justify-between items-center text-xs text-white/60">
                    <span>1:23</span>
                    <span className="text-white font-medium">Голосовое сообщение</span>
                    <span>4:15</span>
                  </div>
                </div>

                {/* Controls */}
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon" onClick={() => setIsMuted(!isMuted)}>
                    {isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Download className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Voice Recorder */}
          <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="icon" className="w-12 h-12">
                    <Mic className="h-6 w-6" />
                  </Button>

                  <div>
                    <div className="text-white font-medium">Запись голоса</div>
                    <div className="text-white/60 text-sm">Нажмите для начала записи</div>
                  </div>
                </div>

                <div className="flex items-center space-x-2">
                  <div className="flex space-x-1">
                    <div className="w-1 h-8 bg-white/30 rounded animate-pulse"></div>
                    <div className="w-1 h-6 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.1s' }}></div>
                    <div
                      className="w-1 h-10 bg-white/30 rounded animate-pulse"
                      style={{ animationDelay: '0.2s' }}
                    ></div>
                    <div className="w-1 h-4 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.3s' }}></div>
                    <div className="w-1 h-8 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.4s' }}></div>
                  </div>
                  <span className="text-white/60 text-sm">0:05</span>
                </div>
              </div>
            </div>
          </div>

          {/* Mini Audio Controls */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Мини-контролы</h4>
            <div className="grid grid-cols-3 gap-4">
              <div className="glass-card p-3 rounded-lg border border-white/10">
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon" className="w-8 h-8">
                    <Play className="h-4 w-4" />
                  </Button>
                  <div className="flex-1">
                    <div className="h-1 bg-white/20 rounded-full">
                      <div className="h-full w-1/3 bg-blue-400 rounded-full"></div>
                    </div>
                    <div className="flex justify-between text-xs text-white/60 mt-1">
                      <span>0:12</span>
                      <span>0:38</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="glass-card p-3 rounded-lg border border-white/10">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <Music className="h-4 w-4 text-blue-400" />
                    <span className="text-white text-sm">Аудио</span>
                  </div>
                  <Button variant="ghost" size="icon" className="w-6 h-6">
                    <Download className="h-3 w-3" />
                  </Button>
                </div>
              </div>

              <div className="glass-card p-3 rounded-lg border border-white/10">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
                    <span className="text-white text-sm">Запись</span>
                  </div>
                  <span className="text-white/60 text-xs">1:23</span>
                </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">
          {/* Image Gallery */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Галерея изображений</h4>
            <div className="grid grid-cols-4 gap-4">
              {[1, 2, 3, 4].map((image) => (
                <div
                  key={image}
                  className="relative group glass-card rounded-lg border border-white/10 overflow-hidden aspect-square cursor-pointer"
                  onClick={() => setSelectedFile(image)}
                >
                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
                    <ImageIcon className="h-12 w-12 text-white/30" />
                  </div>

                  {/* Overlay */}
                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <div className="flex items-center space-x-2">
                      <Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
                        <Download className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
                        <Share className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

                  {/* Badge */}
                  <div className="absolute top-2 left-2">
                    <Badge className="bg-white/20 text-white text-xs">IMG {image}</Badge>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Image Viewer */}
          <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">
              {selectedFile ? (
                <div className="space-y-4">
                  {/* Header */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <ImageIcon className="h-5 w-5 text-blue-400" />
                      <div>
                        <div className="text-white font-medium">image_{selectedFile}.jpg</div>
                        <div className="text-white/60 text-sm">1920×1080 • 2.4 MB</div>
                      </div>
                    </div>

                    <div className="flex items-center space-x-2">
                      <Button variant="ghost" size="icon">
                        <ZoomIn className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <ZoomOut className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <RotateCcw className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <Download className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" onClick={() => setSelectedFile(null)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

                  {/* Image Preview */}
                  <div className="h-64 bg-white/5 rounded-lg border border-white/10 flex items-center justify-center">
                    <div className="text-center">
                      <ImageIcon className="h-16 w-16 text-white/30 mx-auto mb-2" />
                      <p className="text-white/60">Предпросмотр изображения #{selectedFile}</p>
                    </div>
                  </div>

                  {/* Actions */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <Button variant="glass" size="sm">
                        <Edit3 className="h-4 w-4 mr-2" />
                        Редактировать
                      </Button>
                      <Button variant="outline" size="sm">
                        <Crop className="h-4 w-4 mr-2" />
                        Обрезать
                      </Button>
                    </div>

                    <div className="flex items-center space-x-2">
                      <Button variant="outline" size="sm">
                        <Copy className="h-4 w-4 mr-2" />
                        Копировать
                      </Button>
                      <Button variant="ghost" size="sm" className="text-red-400">
                        <Trash2 className="h-4 w-4 mr-2" />
                        Удалить
                      </Button>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="h-64 flex items-center justify-center">
                  <div className="text-center">
                    <ImageIcon className="h-16 w-16 text-white/30 mx-auto mb-4" />
                    <p className="text-white/60">Выберите изображение для просмотра</p>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Image Upload */}
          <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 border-dashed">
              <div className="text-center">
                <Camera className="h-12 w-12 text-white/40 mx-auto mb-4" />
                <div className="text-white font-medium mb-2">Перетащите изображения сюда</div>
                <div className="text-white/60 text-sm mb-4">или нажмите для выбора файлов</div>

                <Button variant="glass" className="mb-4">
                  <Upload className="h-4 w-4 mr-2" />
                  Выбрать файлы
                </Button>

                <div className="text-white/40 text-xs">Поддерживаются: JPG, PNG, GIF до 10MB</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">
          {/* File List */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Список файлов</h4>
            <div className="space-y-2">
              {[
                { name: 'договор.pdf', size: '2.4 MB', type: 'pdf', icon: FileText, color: 'text-red-400' },
                {
                  name: 'презентация.pptx',
                  size: '8.1 MB',
                  type: 'presentation',
                  icon: File,
                  color: 'text-orange-400',
                },
                { name: 'архив.zip', size: '15.6 MB', type: 'archive', icon: Archive, color: 'text-purple-400' },
                { name: 'видео.mp4', size: '45.2 MB', type: 'video', icon: Video, color: 'text-blue-400' },
                { name: 'аудио.mp3', size: '5.8 MB', type: 'audio', icon: Music, color: 'text-green-400' },
              ].map((file, index) => (
                <div
                  key={index}
                  className="glass-card p-3 rounded-lg border border-white/10 flex items-center space-x-3 hover:bg-white/5 transition-colors cursor-pointer"
                >
                  <div className={`w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center ${file.color}`}>
                    <file.icon className="h-5 w-5" />
                  </div>

                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">{file.name}</div>
                    <div className="text-white/60 text-xs">
                      {file.size} • {file.type}
                    </div>
                  </div>

                  <div className="flex items-center space-x-1">
                    <Button variant="ghost" size="icon" className="w-8 h-8">
                      <Eye className="h-4 w-4 text-white/60" />
                    </Button>
                    <Button variant="ghost" size="icon" className="w-8 h-8">
                      <Download className="h-4 w-4 text-white/60" />
                    </Button>
                    <Button variant="ghost" size="icon" className="w-8 h-8">
                      <MoreVertical className="h-4 w-4 text-white/60" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* File Upload Progress */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Прогресс загрузки</h4>
            <div className="space-y-3">
              <div className="glass-card p-4 rounded-lg border border-white/10">
                <div className="flex items-center space-x-3 mb-3">
                  <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                    <Upload className="h-5 w-5 text-blue-400" />
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">отчет.xlsx</div>
                    <div className="text-white/60 text-xs">3.2 MB • Загружается...</div>
                  </div>
                  <Button variant="ghost" size="icon" className="w-8 h-8">
                    <X className="h-4 w-4 text-white/60" />
                  </Button>
                </div>
                <Progress value={65} className="h-2" />
                <div className="flex justify-between text-xs text-white/60 mt-2">
                  <span>65% • 2.1 MB из 3.2 MB</span>
                  <span>~30 сек</span>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-green-500/30 bg-green-500/10">
                <div className="flex items-center space-x-3">
                  <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                    <FileText className="h-5 w-5 text-green-400" />
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">документ.pdf</div>
                    <div className="text-green-300/70 text-xs">1.8 MB • Загружен</div>
                  </div>
                  <Button variant="ghost" size="icon" className="w-8 h-8">
                    <ExternalLink className="h-4 w-4 text-green-400" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* File Attachments */}
          <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-3 mb-4">
                <Paperclip className="h-5 w-5 text-white/60" />
                <div>
                  <div className="text-white font-medium">Прикрепленные файлы</div>
                  <div className="text-white/60 text-sm">3 файла • 12.4 MB</div>
                </div>
              </div>

              <div className="space-y-2">
                {[
                  { name: 'техзадание.docx', size: '2.1 MB', icon: FileText },
                  { name: 'макеты.zip', size: '8.7 MB', icon: Archive },
                  { name: 'презентация.pdf', size: '1.6 MB', icon: FileText },
                ].map((file, index) => (
                  <div
                    key={index}
                    className="flex items-center space-x-3 p-2 rounded hover:bg-white/5 transition-colors"
                  >
                    <file.icon className="h-4 w-4 text-white/60" />
                    <div className="flex-1">
                      <div className="text-white text-sm">{file.name}</div>
                      <div className="text-white/40 text-xs">{file.size}</div>
                    </div>
                    <Button variant="ghost" size="icon" className="w-6 h-6">
                      <Download className="h-3 w-3 text-white/60" />
                    </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">
          {/* Video Player */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Видео плеер</h4>
            <div className="glass-card rounded-lg border border-white/10 overflow-hidden">
              {/* Video Area */}
              <div className="relative h-64 bg-black/30 flex items-center justify-center">
                <div className="text-center">
                  <Video className="h-16 w-16 text-white/40 mx-auto mb-2" />
                  <p className="text-white/60">Видео плеер</p>
                </div>

                {/* Play Overlay */}
                <div className="absolute inset-0 flex items-center justify-center bg-black/20">
                  <Button variant="glass" size="icon" className="w-16 h-16" onClick={() => setIsPlaying(!isPlaying)}>
                    {isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
                  </Button>
                </div>

                {/* Fullscreen Toggle */}
                <div className="absolute top-4 right-4">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="bg-black/50"
                    onClick={() => setIsFullscreen(!isFullscreen)}
                  >
                    {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

              {/* Video Controls */}
              <div className="p-4 space-y-3">
                {/* Progress Bar */}
                <div className="flex items-center space-x-3">
                  <span className="text-white/60 text-sm">2:34</span>
                  <div className="flex-1 h-1 bg-white/20 rounded-full cursor-pointer">
                    <div className="h-full bg-red-500 rounded-full transition-all" style={{ width: `${progress}%` }} />
                  </div>
                  <span className="text-white/60 text-sm">8:15</span>
                </div>

                {/* Controls */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="icon">
                      <SkipBack className="h-4 w-4" />
                    </Button>
                    <Button variant="glass" size="icon" onClick={() => setIsPlaying(!isPlaying)}>
                      {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
                    </Button>
                    <Button variant="ghost" size="icon">
                      <SkipForward className="h-4 w-4" />
                    </Button>
                  </div>

                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="icon" onClick={() => setIsMuted(!isMuted)}>
                      {isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
                    </Button>

                    <div className="w-20 h-1 bg-white/20 rounded-full">
                      <div className="h-full bg-white rounded-full" style={{ width: `${isMuted ? 0 : _volume}%` }} />
                    </div>

                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Video Thumbnails */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Превью видео</h4>
            <div className="grid grid-cols-3 gap-4">
              {[1, 2, 3].map((video) => (
                <div
                  key={video}
                  className="glass-card rounded-lg border border-white/10 overflow-hidden cursor-pointer group"
                >
                  <div className="relative h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center">
                    <Video className="h-8 w-8 text-white/40" />

                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <Play className="h-8 w-8 text-white" />
                    </div>

                    <div className="absolute bottom-2 right-2">
                      <Badge className="bg-black/70 text-white text-xs">5:23</Badge>
                    </div>
                  </div>

                  <div className="p-3">
                    <div className="text-white font-medium text-sm mb-1">Видео презентация {video}</div>
                    <div className="text-white/60 text-xs">1080p • 12.5 MB</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
