"use client";

import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  ShoppingCart, 
  Plus, 
  Minus, 
  Eye, 
  Heart, 
  Package,
  Building2,
  Calendar,
  Users,
  Search,
  Star,
  Truck
} from "lucide-react";

export function SuppliesDemo() {
  const [selectedQuantity, setSelectedQuantity] = useState(1);
  const [cartItems, setCartItems] = useState(3);
  const [cartTotal, setCartTotal] = useState(15750);

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0
    }).format(amount);
  };

  const mockProduct = {
    id: "1",
    name: "Футболка мужская базовая хлопок 100%",
    brand: "BASIC",
    price: 1299,
    discount: 15,
    quantity: 47,
    color: "Черный",
    size: "L",
    mainImage: "/api/placeholder/300/300",
    isNew: true,
    isBestseller: false
  };

  const mockWholesaler = {
    id: "w1",
    name: "ТекстильПром ООО",
    rating: 4.8,
    reviewsCount: 1247,
    location: "Москва",
    specialization: "Текстиль и одежда",
    verified: true
  };

  const discountedPrice = mockProduct.discount 
    ? mockProduct.price * (1 - mockProduct.discount / 100)
    : mockProduct.price;

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-white mb-4">Поставки - Компоненты</h2>
        <p className="text-white/70 mb-6">
          Демонстрация компонентов системы управления поставками
        </p>
      </div>

      <Tabs defaultValue="product-cards" className="w-full">
        <TabsList className="grid grid-cols-4 bg-white/5 backdrop-blur border-white/10 mb-6">
          <TabsTrigger value="product-cards">Карточки товаров</TabsTrigger>
          <TabsTrigger value="wholesaler-cards">Карточки поставщиков</TabsTrigger>
          <TabsTrigger value="floating-cart">Плавающая корзина</TabsTrigger>
          <TabsTrigger value="supply-types">Типы поставок</TabsTrigger>
        </TabsList>

        <TabsContent value="product-cards" className="space-y-6">
          <div>
            <h3 className="text-xl font-semibold text-white mb-4">Карточки товаров</h3>
            <p className="text-white/60 mb-6">
              Интерактивные карточки товаров с возможностью управления количеством
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Обычная карточка товара */}
              <Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden group hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
                <div className="aspect-square relative bg-white/5 overflow-hidden">
                  <div className="w-full h-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
                    <Package className="h-16 w-16 text-white/40" />
                  </div>
                  
                  {/* Количество в наличии */}
                  <div className="absolute top-2 right-2">
                    <Badge className={`${
                      mockProduct.quantity > 50 
                        ? 'bg-green-500/80' 
                        : mockProduct.quantity > 10 
                          ? 'bg-yellow-500/80' 
                          : 'bg-red-500/80'
                    } text-white border-0 backdrop-blur text-xs`}>
                      {mockProduct.quantity}
                    </Badge>
                  </div>

                  {/* Скидка */}
                  {mockProduct.discount && (
                    <div className="absolute top-2 left-2">
                      <Badge className="bg-red-500/80 text-white border-0 backdrop-blur text-xs">
                        -{mockProduct.discount}%
                      </Badge>
                    </div>
                  )}

                  {/* Overlay с кнопками */}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <div className="flex space-x-2">
                      <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="secondary" className="bg-white/20 backdrop-blur text-white border-white/30 hover:bg-white/30">
                        <Heart className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
                
                <div className="p-3 space-y-3">
                  {/* Заголовок и бренд */}
                  <div>
                    <div className="flex items-center justify-between mb-1">
                      {mockProduct.brand && (
                        <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
                          {mockProduct.brand}
                        </Badge>
                      )}
                      <div className="flex items-center space-x-1">
                        {mockProduct.isNew && (
                          <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
                            NEW
                          </Badge>
                        )}
                        {mockProduct.isBestseller && (
                          <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
                            HIT
                          </Badge>
                        )}
                      </div>
                    </div>
                    <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
                      {mockProduct.name}
                    </h3>
                  </div>

                  {/* Основная характеристика */}
                  <div className="text-white/60 text-xs">
                    {mockProduct.color && <span className="text-white">{mockProduct.color}</span>}
                    {mockProduct.size && <span className="text-white ml-2">{mockProduct.size}</span>}
                  </div>

                  {/* Цена */}
                  <div className="pt-2 border-t border-white/10">
                    <div className="flex items-center space-x-2">
                      <div className="text-white font-bold text-lg">
                        {formatCurrency(discountedPrice)}
                      </div>
                      {mockProduct.discount && (
                        <div className="text-white/40 text-sm line-through">
                          {formatCurrency(mockProduct.price)}
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Управление количеством */}
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setSelectedQuantity(Math.max(0, selectedQuantity - 1))}
                      disabled={selectedQuantity === 0}
                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
                    >
                      <Minus className="h-3 w-3" />
                    </Button>
                    <Input
                      type="text"
                      value={selectedQuantity}
                      onChange={(e) => {
                        const value = e.target.value.replace(/[^0-9]/g, '');
                        const numValue = parseInt(value) || 0;
                        setSelectedQuantity(Math.min(mockProduct.quantity, numValue));
                      }}
                      className="h-8 w-12 text-center bg-white/10 border-white/20 text-white text-sm"
                    />
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setSelectedQuantity(Math.min(mockProduct.quantity, selectedQuantity + 1))}
                      disabled={selectedQuantity >= mockProduct.quantity}
                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                    
                    {selectedQuantity > 0 && (
                      <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
                        <ShoppingCart className="h-3 w-3 mr-1" />
                        {selectedQuantity}
                      </Badge>
                    )}
                  </div>

                  {/* Сумма для выбранного товара */}
                  {selectedQuantity > 0 && (
                    <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
                      <div className="text-green-300 text-xs font-medium text-center">
                        {formatCurrency(discountedPrice * selectedQuantity)}
                      </div>
                    </div>
                  )}
                </div>
              </Card>

              {/* Компактная карточка товара */}
              <Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
                <div className="flex items-center space-x-3">
                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded flex items-center justify-center">
                    <Package className="h-8 w-8 text-white/40" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="text-white font-medium text-sm truncate">Товар компактно</h4>
                    <p className="text-white/60 text-xs">Краткое описание</p>
                    <div className="flex items-center justify-between mt-2">
                      <span className="text-white font-bold text-sm">{formatCurrency(1599)}</span>
                      <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
                        В наличии
                      </Badge>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Карточка товара со статусом */}
              <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-xs">
                      Ожидается
                    </Badge>
                    <span className="text-white/60 text-xs">Арт: TB-001</span>
                  </div>
                  <h4 className="text-white font-medium text-sm">Товар с уведомлением</h4>
                  <div className="text-white/60 text-xs">
                    <p>Поступление: 15 марта</p>
                    <p>Количество: ~200 шт</p>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-white font-bold">{formatCurrency(899)}</span>
                    <Button size="sm" variant="outline" className="border-white/20 text-white text-xs">
                      Уведомить
                    </Button>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="wholesaler-cards" className="space-y-6">
          <div>
            <h3 className="text-xl font-semibold text-white mb-4">Карточки поставщиков</h3>
            <p className="text-white/60 mb-6">
              Информационные карточки поставщиков и поставщиков
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Главная карточка поставщика */}
              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 hover:bg-white/15 hover:border-white/30 transition-all duration-300 hover:scale-105">
                <div className="space-y-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
                        <Building2 className="h-6 w-6 text-white" />
                      </div>
                      <div>
                        <h3 className="text-white font-semibold text-lg">
                          {mockWholesaler.name}
                        </h3>
                        <p className="text-white/60 text-sm">
                          {mockWholesaler.specialization}
                        </p>
                      </div>
                    </div>
                    {mockWholesaler.verified && (
                      <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                        Верифицирован
                      </Badge>
                    )}
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-white/60 text-sm">Рейтинг:</span>
                      <div className="flex items-center space-x-1">
                        <div className="flex">
                          {Array.from({ length: 5 }, (_, i) => (
                            <Star 
                              key={i} 
                              className={`h-4 w-4 ${
                                i < Math.floor(mockWholesaler.rating) 
                                  ? 'text-yellow-400 fill-current' 
                                  : 'text-gray-400'
                              }`} 
                            />
                          ))}
                        </div>
                        <span className="text-white text-sm font-medium">
                          {mockWholesaler.rating}
                        </span>
                      </div>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <span className="text-white/60 text-sm">Отзывы:</span>
                      <span className="text-white text-sm">
                        {mockWholesaler.reviewsCount.toLocaleString('ru-RU')}
                      </span>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <span className="text-white/60 text-sm">Местоположение:</span>
                      <span className="text-white text-sm">{mockWholesaler.location}</span>
                    </div>
                  </div>

                  <div className="flex space-x-2">
                    <Button 
                      size="sm" 
                      className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
                    >
                      <Package className="h-4 w-4 mr-2" />
                      Товары
                    </Button>
                    <Button 
                      size="sm" 
                      variant="outline" 
                      className="border-white/20 text-white hover:bg-white/10"
                    >
                      <Eye className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </Card>

              {/* Компактная карточка поставщика */}
              <Card className="bg-white/10 backdrop-blur border-white/20 p-4 hover:bg-white/15 transition-colors">
                <div className="flex items-center space-x-3">
                  <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center">
                    <Truck className="h-5 w-5 text-white" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="text-white font-medium text-sm">Логистический партнер</h4>
                    <p className="text-white/60 text-xs">Быстрая доставка</p>
                    <div className="flex items-center mt-1">
                      <div className="flex">
                        {Array.from({ length: 5 }, (_, i) => (
                          <Star key={i} className="h-3 w-3 text-yellow-400 fill-current" />
                        ))}
                      </div>
                      <span className="text-white/60 text-xs ml-1">(4.9)</span>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Карточка нового поставщика */}
              <Card className="bg-gradient-to-br from-blue-500/10 to-cyan-500/10 backdrop-blur border-blue-500/30 p-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
                      Новый партнер
                    </Badge>
                    <Users className="h-5 w-5 text-blue-400" />
                  </div>
                  <h4 className="text-white font-medium">ТехноТрейд ООО</h4>
                  <p className="text-white/60 text-sm">
                    Электроника и техника
                  </p>
                  <div className="flex items-center justify-between">
                    <span className="text-white/60 text-xs">Заявка на партнерство</span>
                    <Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 text-xs">
                      Рассмотреть
                    </Button>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="floating-cart" className="space-y-6">
          <div>
            <h3 className="text-xl font-semibold text-white mb-4">Плавающая корзина</h3>
            <p className="text-white/60 mb-6">
              Плавающий элемент для быстрого доступа к корзине
            </p>
            
            <div className="space-y-6">
              {/* Демонстрация плавающей корзины */}
              <div className="relative bg-gray-900/50 border border-white/10 rounded-lg p-8 min-h-[300px]">
                <p className="text-white/60 text-center">
                  Область контента страницы
                  <br />
                  <span className="text-xs">Плавающая корзина появляется в правом нижнем углу</span>
                </p>
                
                {/* Демо плавающей корзины */}
                <div className="absolute bottom-4 right-4">
                  <Button 
                    size="lg"
                    className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
                    onClick={() => {
                      setCartItems(cartItems + 1);
                      setCartTotal(cartTotal + 1299);
                    }}
                  >
                    <ShoppingCart className="h-5 w-5 mr-2" />
                    {cartItems} • {formatCurrency(cartTotal)}
                  </Button>
                </div>
              </div>

              {/* Различные варианты плавающих кнопок */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
                  <h4 className="text-white font-medium mb-3">Стандартная корзина</h4>
                  <Button 
                    className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
                  >
                    <ShoppingCart className="h-4 w-4 mr-2" />
                    3 • {formatCurrency(cartTotal)}
                  </Button>
                </Card>

                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
                  <h4 className="text-white font-medium mb-3">Компактная</h4>
                  <Button size="sm" className="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white">
                    <ShoppingCart className="h-4 w-4 mr-1" />
                    {formatCurrency(cartTotal)}
                  </Button>
                </Card>

                <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
                  <h4 className="text-white font-medium mb-3">С индикатором</h4>
                  <div className="relative">
                    <Button className="w-full bg-gradient-to-r from-orange-500 to-red-500 text-white">
                      <ShoppingCart className="h-4 w-4 mr-2" />
                      Корзина
                    </Button>
                    <Badge className="absolute -top-2 -right-2 bg-red-500 text-white text-xs">
                      {cartItems}
                    </Badge>
                  </div>
                </Card>
              </div>

              {/* Кнопки управления демо */}
              <div className="flex justify-center space-x-4">
                <Button 
                  variant="outline" 
                  size="sm"
                  className="border-white/20 text-white"
                  onClick={() => {
                    setCartItems(Math.max(0, cartItems - 1));
                    setCartTotal(Math.max(0, cartTotal - 1299));
                  }}
                >
                  <Minus className="h-4 w-4 mr-1" />
                  Убрать товар
                </Button>
                <Button 
                  variant="outline" 
                  size="sm"
                  className="border-white/20 text-white"
                  onClick={() => {
                    setCartItems(cartItems + 1);
                    setCartTotal(cartTotal + 1299);
                  }}
                >
                  <Plus className="h-4 w-4 mr-1" />
                  Добавить товар
                </Button>
                <Button 
                  variant="outline" 
                  size="sm"
                  className="border-red-500/30 text-red-300"
                  onClick={() => {
                    setCartItems(0);
                    setCartTotal(0);
                  }}
                >
                  Очистить корзину
                </Button>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="supply-types" className="space-y-6">
          <div>
            <h3 className="text-xl font-semibold text-white mb-4">Типы поставок</h3>
            <p className="text-white/60 mb-6">
              Различные варианты выбора типа поставки
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Вариант 1: Карточки */}
              <Card 
                className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
              >
                <div className="text-center space-y-4">
                  <div className="p-4 bg-blue-500/20 rounded-lg w-fit mx-auto">
                    <ShoppingCart className="h-8 w-8 text-blue-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-2">Карточки</h3>
                    <p className="text-white/60 text-sm">
                      Создание поставки через выбор товаров по карточкам
                    </p>
                  </div>
                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                    Доступно
                  </Badge>
                </div>
              </Card>

              {/* Вариант 2: Поставщик */}
              <Card 
                className="bg-white/10 backdrop-blur border-white/20 p-6 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30"
              >
                <div className="text-center space-y-4">
                  <div className="p-4 bg-green-500/20 rounded-lg w-fit mx-auto">
                    <Users className="h-8 w-8 text-green-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-2">Поставщик</h3>
                    <p className="text-white/60 text-sm">
                      Создание поставки через выбор товаров у поставщиков
                    </p>
                  </div>
                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                    Доступно
                  </Badge>
                </div>
              </Card>

              {/* Дополнительные типы */}
              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
                <div className="text-center space-y-4">
                  <div className="p-4 bg-gray-500/20 rounded-lg w-fit mx-auto">
                    <Package className="h-8 w-8 text-gray-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-2">Импорт</h3>
                    <p className="text-white/60 text-sm">
                      Массовый импорт товаров из файла
                    </p>
                  </div>
                  <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
                    Скоро
                  </Badge>
                </div>
              </Card>

              <Card className="bg-white/10 backdrop-blur border-white/20 p-6 opacity-60">
                <div className="text-center space-y-4">
                  <div className="p-4 bg-purple-500/20 rounded-lg w-fit mx-auto">
                    <Calendar className="h-8 w-8 text-purple-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-2">Регулярные</h3>
                    <p className="text-white/60 text-sm">
                      Автоматические поставки по расписанию
                    </p>
                  </div>
                  <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">
                    В разработке
                  </Badge>
                </div>
              </Card>
            </div>

            {/* Статусы поставок */}
            <div className="mt-8">
              <h4 className="text-lg font-semibold text-white mb-4">Статусы поставок</h4>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="text-center space-y-2">
                  <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">
                    Подготовка
                  </Badge>
                  <p className="text-white/60 text-xs">Сбор товаров</p>
                </div>
                <div className="text-center space-y-2">
                  <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">
                    В пути
                  </Badge>
                  <p className="text-white/60 text-xs">Доставка</p>
                </div>
                <div className="text-center space-y-2">
                  <Badge className="bg-green-500/20 text-green-300 border-green-500/30">
                    Доставлено
                  </Badge>
                  <p className="text-white/60 text-xs">Успешно</p>
                </div>
                <div className="text-center space-y-2">
                  <Badge className="bg-red-500/20 text-red-300 border-red-500/30">
                    Ошибка
                  </Badge>
                  <p className="text-white/60 text-xs">Требует внимания</p>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}