'use client'

import {
  Play,
  Download,
  Heart,
  Settings,
  Trash2,
  Plus,
  Search,
  Filter,
  Loader2,
  Package,
  Wrench,
  RotateCcw,
} from 'lucide-react'

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

export function ButtonsDemo() {
  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">
          {/* Default */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Default</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="default">Обычная кнопка</Button>
              <Button variant="default" size="sm">
                Маленькая
              </Button>
              <Button variant="default" size="lg">
                Большая
              </Button>
              <Button variant="default" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;default&quot;</div>
          </div>

          {/* Glass */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Glass (Основная)</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass">Glass кнопка</Button>
              <Button variant="glass" size="sm">
                Маленькая
              </Button>
              <Button variant="glass" size="lg">
                Большая
              </Button>
              <Button variant="glass" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;glass&quot;</div>
          </div>

          {/* Glass Secondary */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Glass Secondary</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass-secondary">Вторичная glass</Button>
              <Button variant="glass-secondary" size="sm">
                Маленькая
              </Button>
              <Button variant="glass-secondary" size="lg">
                Большая
              </Button>
              <Button variant="glass-secondary" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;glass-secondary&quot;</div>
          </div>

          {/* Secondary */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Secondary</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="secondary">Вторичная</Button>
              <Button variant="secondary" size="sm">
                Маленькая
              </Button>
              <Button variant="secondary" size="lg">
                Большая
              </Button>
              <Button variant="secondary" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;secondary&quot;</div>
          </div>

          {/* Outline */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Outline</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="outline">Обводка</Button>
              <Button variant="outline" size="sm">
                Маленькая
              </Button>
              <Button variant="outline" size="lg">
                Большая
              </Button>
              <Button variant="outline" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;outline&quot;</div>
          </div>

          {/* Ghost */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Ghost</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="ghost">Призрачная</Button>
              <Button variant="ghost" size="sm">
                Маленькая
              </Button>
              <Button variant="ghost" size="lg">
                Большая
              </Button>
              <Button variant="ghost" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;ghost&quot;</div>
          </div>

          {/* Destructive */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Destructive</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="destructive">Удалить</Button>
              <Button variant="destructive" size="sm">
                Маленькая
              </Button>
              <Button variant="destructive" size="lg">
                Большая
              </Button>
              <Button variant="destructive" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;destructive&quot;</div>
          </div>

          {/* Link */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Link</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="link">Ссылка</Button>
              <Button variant="link" size="sm">
                Маленькая
              </Button>
              <Button variant="link" size="lg">
                Большая
              </Button>
              <Button variant="link" disabled>
                Отключена
              </Button>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">variant=&quot;link&quot;</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-3">Иконка слева</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass">
                <Play className="h-4 w-4 mr-2" />
                Воспроизвести
              </Button>
              <Button variant="glass-secondary">
                <Download className="h-4 w-4 mr-2" />
                Скачать
              </Button>
              <Button variant="outline">
                <Search className="h-4 w-4 mr-2" />
                Поиск
              </Button>
              <Button variant="destructive">
                <Trash2 className="h-4 w-4 mr-2" />
                Удалить
              </Button>
            </div>
          </div>

          {/* Иконка справа */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Иконка справа</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass">
                Настройки
                <Settings className="h-4 w-4 ml-2" />
              </Button>
              <Button variant="secondary">
                Фильтры
                <Filter className="h-4 w-4 ml-2" />
              </Button>
            </div>
          </div>

          {/* Только иконка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Только иконка</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass" size="icon">
                <Plus className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon">
                <Heart className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon">
                <Settings className="h-4 w-4" />
              </Button>
              <Button variant="destructive" size="icon">
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </div>

          {/* Загрузка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Состояние загрузки</h4>
            <div className="flex flex-wrap gap-3">
              <Button variant="glass" disabled>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Загрузка...
              </Button>
              <Button variant="outline" disabled>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Сохранение...
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Размеры */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Размеры</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap items-center gap-3">
            <Button variant="glass" size="sm">
              Маленькая (sm)
            </Button>
            <Button variant="glass" size="default">
              Обычная (default)
            </Button>
            <Button variant="glass" size="lg">
              Большая (lg)
            </Button>
          </div>
          <div className="text-xs text-white/60 font-mono">
            size=&quot;sm&quot; | &quot;default&quot; | &quot;lg&quot; | &quot;icon&quot;
          </div>
        </CardContent>
      </Card>

      {/* Кнопки из Fulfillment Supplies */}
      <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-3">Кнопки создания</h4>
            <div className="flex flex-wrap gap-3">
              <Button
                size="sm"
                className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white text-xs"
              >
                <Plus className="h-3 w-3 mr-1" />
                Создать
              </Button>
              <Button
                size="sm"
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-xs"
              >
                <Plus className="h-3 w-3 mr-1" />
                Создать
              </Button>
              <Button
                size="sm"
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
              >
                <Plus className="h-4 w-4 mr-2" />
                Создать поставку
              </Button>
            </div>
          </div>

          {/* Кнопки заказа */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Кнопки заказа</h4>
            <div className="flex flex-wrap gap-3">
              <Button
                size="sm"
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
              >
                <Plus className="h-4 w-4 mr-2" />
                Заказать
              </Button>
              <Button
                size="sm"
                className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
              >
                <Plus className="h-4 w-4 mr-2" />
                Заказать материалы
              </Button>
              <Button
                size="sm"
                className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
              >
                <Plus className="h-4 w-4 mr-2" />
                Запланировать сбор
              </Button>
            </div>
          </div>

          {/* Кнопки фильтров */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Кнопки фильтров (активные и неактивные)</h4>
            <div className="flex flex-wrap gap-1">
              <Button variant="secondary" size="sm" className="h-7 px-2 text-xs bg-white/20 text-white">
                Все
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="h-7 px-2 text-xs text-white/70 hover:bg-white/10 flex items-center gap-1"
              >
                <Package className="h-3 w-3" />
                Товары
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="h-7 px-2 text-xs text-white/70 hover:bg-white/10 flex items-center gap-1"
              >
                <Wrench className="h-3 w-3" />
                Расходники
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="h-7 px-2 text-xs text-white/70 hover:bg-white/10 flex items-center gap-1"
              >
                <RotateCcw className="h-3 w-3" />
                Возвраты
              </Button>
            </div>
          </div>

          {/* Кнопки маркетплейсов */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Кнопки маркетплейсов</h4>
            <div className="flex flex-wrap gap-2">
              <Button variant="secondary" size="sm" className="bg-white/20 text-white flex items-center gap-1">
                Все
              </Button>
              <Button variant="ghost" size="sm" className="text-white/70 hover:bg-white/10 flex items-center gap-1">
                <div className="w-3 h-3 bg-purple-400 rounded-full"></div>
                Wildberries
              </Button>
              <Button variant="ghost" size="sm" className="text-white/70 hover:bg-white/10 flex items-center gap-1">
                <div className="w-3 h-3 bg-blue-400 rounded-full"></div>
                Ozon
              </Button>
            </div>
          </div>

          {/* Навигационная кнопка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Навигация</h4>
            <div className="flex gap-2">
              <Button variant="ghost" size="sm" className="text-white/60 hover:text-white hover:bg-white/10">
                К поставкам
              </Button>
            </div>
          </div>

          {/* Специализированные кнопки по маркетплейсам */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Специализированные кнопки</h4>
            <div className="flex flex-wrap gap-3">
              <Button
                size="sm"
                className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white text-sm px-6 h-[60px] whitespace-nowrap"
              >
                <Plus className="h-4 w-4 mr-2" />
                Создать поставку (Ozon)
              </Button>
            </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-3">Группа действий</h4>
            <div className="flex gap-2">
              <Button variant="glass">
                <Plus className="h-4 w-4 mr-2" />
                Создать
              </Button>
              <Button variant="outline">Редактировать</Button>
              <Button variant="destructive">
                <Trash2 className="h-4 w-4 mr-2" />
                Удалить
              </Button>
            </div>
          </div>

          {/* Навигация */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Навигация</h4>
            <div className="flex gap-2">
              <Button variant="ghost">Назад</Button>
              <Button variant="glass">Продолжить</Button>
            </div>
          </div>

          {/* Формы */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Формы</h4>
            <div className="flex gap-2">
              <Button variant="outline">Отмена</Button>
              <Button variant="glass">Сохранить</Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
