'use client'

import {
  CheckCircle,
  AlertTriangle,
  XCircle,
  Info,
  Clock,
  Loader,
  Wifi,
  WifiOff,
  Battery,
  BatteryLow,
  Play,
  ArrowUp,
  ArrowDown,
  Minus,
  TrendingUp,
  TrendingDown,
  Activity,
  Users,
  Package,
  DollarSign,
} from 'lucide-react'
import { useState } from 'react'

import { Alert, AlertDescription } from '@/components/ui/alert'
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 StatesDemo() {
  const [connectionStatus, setConnectionStatus] = useState<'online' | 'offline' | 'connecting'>('online')
  const [taskStatus, setTaskStatus] = useState<'pending' | 'running' | 'completed' | 'failed'>('pending')
  const [batteryLevel, setBatteryLevel] = useState(75)

  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">
          {/* Success States */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Состояния успеха</h4>
            <div className="grid grid-cols-2 gap-4">
              <Alert className="border-green-500/30 bg-green-500/10">
                <CheckCircle className="h-4 w-4 text-green-400" />
                <AlertDescription className="text-green-300">Операция выполнена успешно</AlertDescription>
              </Alert>

              <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">
                  <CheckCircle className="h-5 w-5 text-green-400" />
                  <div>
                    <div className="text-green-300 font-medium text-sm">Заказ создан</div>
                    <div className="text-green-400/70 text-xs">#12345 успешно обработан</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-4 gap-2 mt-4">
              <Badge className="bg-green-500/20 text-green-300 border-green-500/30">Завершено</Badge>
              <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Активно</Badge>
              <Badge className="bg-emerald-500/20 text-emerald-300 border-emerald-500/30">Подтверждено</Badge>
              <Badge className="bg-teal-500/20 text-teal-300 border-teal-500/30">Проверено</Badge>
            </div>
          </div>

          {/* Warning States */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Предупреждения</h4>
            <div className="grid grid-cols-2 gap-4">
              <Alert className="border-yellow-500/30 bg-yellow-500/10">
                <AlertTriangle className="h-4 w-4 text-yellow-400" />
                <AlertDescription className="text-yellow-300">Требуется внимание пользователя</AlertDescription>
              </Alert>

              <div className="glass-card p-4 rounded-lg border border-yellow-500/30 bg-yellow-500/10">
                <div className="flex items-center space-x-3">
                  <AlertTriangle className="h-5 w-5 text-yellow-400" />
                  <div>
                    <div className="text-yellow-300 font-medium text-sm">Низкий остаток</div>
                    <div className="text-yellow-400/70 text-xs">Товар заканчивается на складе</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-4 gap-2 mt-4">
              <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">Предупреждение</Badge>
              <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">Внимание</Badge>
              <Badge className="bg-amber-500/20 text-amber-300 border-amber-500/30">Ожидание</Badge>
              <Badge className="bg-lime-500/20 text-lime-300 border-lime-500/30">Черновик</Badge>
            </div>
          </div>

          {/* Error States */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Ошибки</h4>
            <div className="grid grid-cols-2 gap-4">
              <Alert className="border-red-500/30 bg-red-500/10">
                <XCircle className="h-4 w-4 text-red-400" />
                <AlertDescription className="text-red-300">Произошла критическая ошибка</AlertDescription>
              </Alert>

              <div className="glass-card p-4 rounded-lg border border-red-500/30 bg-red-500/10">
                <div className="flex items-center space-x-3">
                  <XCircle className="h-5 w-5 text-red-400" />
                  <div>
                    <div className="text-red-300 font-medium text-sm">Ошибка платежа</div>
                    <div className="text-red-400/70 text-xs">Недостаточно средств на счету</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-4 gap-2 mt-4">
              <Badge className="bg-red-500/20 text-red-300 border-red-500/30">Ошибка</Badge>
              <Badge className="bg-rose-500/20 text-rose-300 border-rose-500/30">Отклонено</Badge>
              <Badge className="bg-pink-500/20 text-pink-300 border-pink-500/30">Неактивно</Badge>
              <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">Заблокировано</Badge>
            </div>
          </div>

          {/* Info States */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Информационные состояния</h4>
            <div className="grid grid-cols-2 gap-4">
              <Alert className="border-blue-500/30 bg-blue-500/10">
                <Info className="h-4 w-4 text-blue-400" />
                <AlertDescription className="text-blue-300">
                  Дополнительная информация для пользователя
                </AlertDescription>
              </Alert>

              <div className="glass-card p-4 rounded-lg border border-blue-500/30 bg-blue-500/10">
                <div className="flex items-center space-x-3">
                  <Info className="h-5 w-5 text-blue-400" />
                  <div>
                    <div className="text-blue-300 font-medium text-sm">Новая версия</div>
                    <div className="text-blue-400/70 text-xs">Доступно обновление системы</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-4 gap-2 mt-4">
              <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Информация</Badge>
              <Badge className="bg-indigo-500/20 text-indigo-300 border-indigo-500/30">Новое</Badge>
              <Badge className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30">Обновлено</Badge>
              <Badge className="bg-sky-500/20 text-sky-300 border-sky-500/30">Синхронизировано</Badge>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Индикаторы загрузки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Индикаторы загрузки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Progress Bars */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Прогресс-бары</h4>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span className="text-white">Загрузка файлов</span>
                  <span className="text-white/60">75%</span>
                </div>
                <Progress value={75} className="h-2" />
              </div>

              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span className="text-white">Обработка данных</span>
                  <span className="text-green-300">100%</span>
                </div>
                <Progress value={100} className="h-2 [&>div]:bg-green-500" />
              </div>

              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span className="text-white">Синхронизация</span>
                  <span className="text-yellow-300">45%</span>
                </div>
                <Progress value={45} className="h-2 [&>div]:bg-yellow-500" />
              </div>

              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span className="text-white">Ошибка загрузки</span>
                  <span className="text-red-300">35%</span>
                </div>
                <Progress value={35} className="h-2 [&>div]:bg-red-500" />
              </div>
            </div>
          </div>

          {/* Loading Spinners */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Спиннеры загрузки</h4>
            <div className="grid grid-cols-4 gap-4">
              <div className="glass-card p-4 rounded-lg border border-white/10 text-center">
                <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin mx-auto mb-2"></div>
                <p className="text-white/70 text-xs">Загрузка</p>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10 text-center">
                <Loader className="w-8 h-8 text-blue-400 animate-spin mx-auto mb-2" />
                <p className="text-white/70 text-xs">Обработка</p>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10 text-center">
                <div className="flex space-x-1 justify-center mb-2">
                  <div className="w-2 h-2 bg-white rounded-full animate-bounce"></div>
                  <div
                    className="w-2 h-2 bg-white rounded-full animate-bounce"
                    style={{ animationDelay: '0.1s' }}
                  ></div>
                  <div
                    className="w-2 h-2 bg-white rounded-full animate-bounce"
                    style={{ animationDelay: '0.2s' }}
                  ></div>
                </div>
                <p className="text-white/70 text-xs">Ожидание</p>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10 text-center">
                <div className="relative w-8 h-8 mx-auto mb-2">
                  <div className="absolute inset-0 border-2 border-purple-500/30 rounded-full"></div>
                  <div className="absolute inset-0 border-2 border-transparent border-t-purple-500 rounded-full animate-spin"></div>
                </div>
                <p className="text-white/70 text-xs">Прогресс</p>
              </div>
            </div>
          </div>

          {/* Loading States */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Состояния загрузки</h4>
            <div className="space-y-3">
              <div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
                <Clock className="h-5 w-5 text-blue-400" />
                <div className="flex-1">
                  <div className="text-white font-medium text-sm">Подготовка к загрузке</div>
                  <div className="text-blue-300/70 text-xs">Инициализация процесса...</div>
                </div>
                <Badge className="bg-blue-500/20 text-blue-300 text-xs">Ожидание</Badge>
              </div>

              <div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
                <Loader className="h-5 w-5 text-purple-400 animate-spin" />
                <div className="flex-1">
                  <div className="text-white font-medium text-sm">Загрузка данных</div>
                  <div className="text-purple-300/70 text-xs">Получение информации с сервера...</div>
                </div>
                <Badge className="bg-purple-500/20 text-purple-300 text-xs">В процессе</Badge>
              </div>

              <div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
                <CheckCircle className="h-5 w-5 text-green-400" />
                <div className="flex-1">
                  <div className="text-white font-medium text-sm">Загрузка завершена</div>
                  <div className="text-green-300/70 text-xs">Все данные успешно получены</div>
                </div>
                <Badge className="bg-green-500/20 text-green-300 text-xs">Готово</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">
          {/* Connection Status */}
          <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 mb-4">
                <span className="text-white text-sm">Статус сети</span>
                <div className="flex items-center space-x-2">
                  <Button
                    variant={connectionStatus === 'online' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setConnectionStatus('online')}
                  >
                    Online
                  </Button>
                  <Button
                    variant={connectionStatus === 'connecting' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setConnectionStatus('connecting')}
                  >
                    Connecting
                  </Button>
                  <Button
                    variant={connectionStatus === 'offline' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setConnectionStatus('offline')}
                  >
                    Offline
                  </Button>
                </div>
              </div>

              <div className="flex items-center space-x-3">
                {connectionStatus === 'online' && (
                  <>
                    <Wifi className="h-6 w-6 text-green-400" />
                    <div>
                      <div className="text-green-300 font-medium">Подключено</div>
                      <div className="text-green-400/70 text-sm">Стабильное соединение</div>
                    </div>
                    <div className="ml-auto">
                      <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                  </>
                )}

                {connectionStatus === 'connecting' && (
                  <>
                    <div className="relative">
                      <Wifi className="h-6 w-6 text-yellow-400" />
                      <div className="absolute inset-0">
                        <div className="w-6 h-6 border-2 border-transparent border-t-yellow-400 rounded-full animate-spin"></div>
                      </div>
                    </div>
                    <div>
                      <div className="text-yellow-300 font-medium">Подключение</div>
                      <div className="text-yellow-400/70 text-sm">Установка соединения...</div>
                    </div>
                    <div className="ml-auto">
                      <div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
                    </div>
                  </>
                )}

                {connectionStatus === 'offline' && (
                  <>
                    <WifiOff className="h-6 w-6 text-red-400" />
                    <div>
                      <div className="text-red-300 font-medium">Отключено</div>
                      <div className="text-red-400/70 text-sm">Нет подключения к сети</div>
                    </div>
                    <div className="ml-auto">
                      <div className="w-2 h-2 bg-red-400 rounded-full"></div>
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>

          {/* Task Status */}
          <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 mb-4">
                <span className="text-white text-sm">Выполнение задачи</span>
                <div className="flex items-center space-x-2">
                  <Button
                    variant={taskStatus === 'pending' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setTaskStatus('pending')}
                  >
                    Pending
                  </Button>
                  <Button
                    variant={taskStatus === 'running' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setTaskStatus('running')}
                  >
                    Running
                  </Button>
                  <Button
                    variant={taskStatus === 'completed' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setTaskStatus('completed')}
                  >
                    Completed
                  </Button>
                  <Button
                    variant={taskStatus === 'failed' ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => setTaskStatus('failed')}
                  >
                    Failed
                  </Button>
                </div>
              </div>

              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  {taskStatus === 'pending' && <Clock className="h-5 w-5 text-gray-400" />}
                  {taskStatus === 'running' && <Play className="h-5 w-5 text-blue-400" />}
                  {taskStatus === 'completed' && <CheckCircle className="h-5 w-5 text-green-400" />}
                  {taskStatus === 'failed' && <XCircle className="h-5 w-5 text-red-400" />}

                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Обработка заказа #12345</div>
                    <div className="text-white/60 text-xs">
                      {taskStatus === 'pending' && 'Ожидает выполнения'}
                      {taskStatus === 'running' && 'Выполняется...'}
                      {taskStatus === 'completed' && 'Успешно завершено'}
                      {taskStatus === 'failed' && 'Ошибка выполнения'}
                    </div>
                  </div>

                  <Badge
                    className={
                      taskStatus === 'pending'
                        ? 'bg-gray-500/20 text-gray-300'
                        : taskStatus === 'running'
                          ? 'bg-blue-500/20 text-blue-300'
                          : taskStatus === 'completed'
                            ? 'bg-green-500/20 text-green-300'
                            : 'bg-red-500/20 text-red-300'
                    }
                  >
                    {taskStatus === 'pending' && 'Ожидание'}
                    {taskStatus === 'running' && 'Выполняется'}
                    {taskStatus === 'completed' && 'Завершено'}
                    {taskStatus === 'failed' && 'Ошибка'}
                  </Badge>
                </div>

                {taskStatus === 'running' && <Progress value={65} className="h-1" />}
              </div>
            </div>
          </div>

          {/* Battery Level */}
          <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 mb-4">
                <span className="text-white text-sm">Батарея устройства</span>
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="sm" onClick={() => setBatteryLevel(Math.max(0, batteryLevel - 25))}>
                    -25%
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => setBatteryLevel(Math.min(100, batteryLevel + 25))}>
                    +25%
                  </Button>
                </div>
              </div>

              <div className="flex items-center space-x-3">
                {batteryLevel > 20 ? (
                  <Battery className={`h-6 w-6 ${batteryLevel > 50 ? 'text-green-400' : 'text-yellow-400'}`} />
                ) : (
                  <BatteryLow className="h-6 w-6 text-red-400" />
                )}

                <div className="flex-1">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-white text-sm">Заряд батареи</span>
                    <span
                      className={`text-sm ${
                        batteryLevel > 50 ? 'text-green-300' : batteryLevel > 20 ? 'text-yellow-300' : 'text-red-300'
                      }`}
                    >
                      {batteryLevel}%
                    </span>
                  </div>
                  <Progress
                    value={batteryLevel}
                    className={`h-2 ${
                      batteryLevel > 50
                        ? '[&>div]:bg-green-500'
                        : batteryLevel > 20
                          ? '[&>div]:bg-yellow-500'
                          : '[&>div]:bg-red-500'
                    }`}
                  />
                </div>

                <Badge
                  className={
                    batteryLevel > 50
                      ? 'bg-green-500/20 text-green-300'
                      : batteryLevel > 20
                        ? 'bg-yellow-500/20 text-yellow-300'
                        : 'bg-red-500/20 text-red-300'
                  }
                >
                  {batteryLevel > 50 ? 'Заряжена' : batteryLevel > 20 ? 'Средний' : 'Низкий'}
                </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">
          {/* Metric Cards */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Карточки метрик</h4>
            <div className="grid grid-cols-4 gap-4">
              <div className="glass-card p-4 rounded-lg border border-white/10">
                <div className="flex items-center justify-between mb-2">
                  <Users className="h-5 w-5 text-blue-400" />
                  <TrendingUp className="h-4 w-4 text-green-400" />
                </div>
                <div className="text-2xl font-bold text-white">1,234</div>
                <div className="text-white/60 text-sm">Пользователи</div>
                <div className="flex items-center space-x-1 mt-1">
                  <ArrowUp className="h-3 w-3 text-green-400" />
                  <span className="text-green-400 text-xs">+12%</span>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10">
                <div className="flex items-center justify-between mb-2">
                  <Package className="h-5 w-5 text-purple-400" />
                  <TrendingDown className="h-4 w-4 text-red-400" />
                </div>
                <div className="text-2xl font-bold text-white">856</div>
                <div className="text-white/60 text-sm">Заказы</div>
                <div className="flex items-center space-x-1 mt-1">
                  <ArrowDown className="h-3 w-3 text-red-400" />
                  <span className="text-red-400 text-xs">-5%</span>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10">
                <div className="flex items-center justify-between mb-2">
                  <DollarSign className="h-5 w-5 text-green-400" />
                  <Minus className="h-4 w-4 text-white/60" />
                </div>
                <div className="text-2xl font-bold text-white">₽45,678</div>
                <div className="text-white/60 text-sm">Доход</div>
                <div className="flex items-center space-x-1 mt-1">
                  <span className="text-white/60 text-xs">Без изменений</span>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10">
                <div className="flex items-center justify-between mb-2">
                  <Activity className="h-5 w-5 text-orange-400" />
                  <TrendingUp className="h-4 w-4 text-green-400" />
                </div>
                <div className="text-2xl font-bold text-white">98.5%</div>
                <div className="text-white/60 text-sm">Uptime</div>
                <div className="flex items-center space-x-1 mt-1">
                  <ArrowUp className="h-3 w-3 text-green-400" />
                  <span className="text-green-400 text-xs">+0.2%</span>
                </div>
              </div>
            </div>
          </div>

          {/* Status Dots */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Точечные индикаторы</h4>
            <div className="grid grid-cols-2 gap-4">
              <div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-green-400 rounded-full"></div>
                  <span className="text-white text-sm">Сервер 1 - Онлайн</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                  <span className="text-white text-sm">Сервер 2 - Активен</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
                  <span className="text-white text-sm">Сервер 3 - Обслуживание</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-red-400 rounded-full"></div>
                  <span className="text-white text-sm">Сервер 4 - Недоступен</span>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-white text-sm">Задача 1</span>
                  <CheckCircle className="h-4 w-4 text-green-400" />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white text-sm">Задача 2</span>
                  <Loader className="h-4 w-4 text-blue-400 animate-spin" />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white text-sm">Задача 3</span>
                  <Clock className="h-4 w-4 text-yellow-400" />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white text-sm">Задача 4</span>
                  <XCircle className="h-4 w-4 text-red-400" />
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
