import { useState, useEffect, useRef } from "react";
import { productsApi } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Loader2, Upload, X, Check, AlertCircle, Image as ImageIcon } from "lucide-react";
import { toast } from "sonner";

// Интерфейсы
interface ProductImage {
  id: string;
  url: string;
  is_primary: boolean;
  alt_text?: string;
}

interface ProductImagesProps {
  productId: string;
  productName: string;
}

export function ProductImages({ productId, productName }: ProductImagesProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  const [images, setImages] = useState<ProductImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [imageToDelete, setImageToDelete] = useState<string | null>(null);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [currentImage, setCurrentImage] = useState<ProductImage | null>(null);
  const [altText, setAltText] = useState("");
  
  // Загрузка изображений продукта
  useEffect(() => {
    const fetchImages = async () => {
      try {
        setLoading(true);
        const response = await productsApi.getImages(productId);
        
        if (response.status === 200 && response.data) {
          setImages(response.data as ProductImage[]);
        } else {
          throw new Error("Не удалось загрузить изображения");
        }
      } catch (error) {
        console.error("Ошибка при загрузке изображений:", error);
        toast("Ошибка", {
          description: "Не удалось загрузить изображения продукта",
        });
      } finally {
        setLoading(false);
      }
    };
    
    fetchImages();
  }, [productId]);
  
  // Обработчик выбора файла
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;
    
    try {
      setUploading(true);
      
      const formData = new FormData();
      formData.append('file', files[0]);
      formData.append('is_primary', images.length === 0 ? 'true' : 'false');
      
      const response = await productsApi.uploadImage(productId, formData);
      
      if (response.status === 201 && response.data) {
        // Добавляем новое изображение в список
        setImages(prev => [...prev, response.data as ProductImage]);
        toast("Успех", {
          description: "Изображение успешно загружено",
        });
      } else {
        throw new Error(response.error || "Не удалось загрузить изображение");
      }
    } catch (error) {
      console.error("Ошибка при загрузке изображения:", error);
      toast("Ошибка", {
        description: "Не удалось загрузить изображение",
      });
    } finally {
      setUploading(false);
      // Сбрасываем значение input, чтобы можно было загрузить тот же файл повторно
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };
  
  // Установка изображения как основного
  const setAsPrimary = async (imageId: string) => {
    try {
      const response = await productsApi.updateImage(imageId, { is_primary: true });
      
      if (response.status === 200 && response.data) {
        // Обновляем список изображений
        setImages(prev => 
          prev.map(img => ({
            ...img,
            is_primary: img.id === imageId
          }))
        );
        
        toast("Успех", {
          description: "Основное изображение обновлено",
        });
      } else {
        throw new Error(response.error || "Не удалось обновить изображение");
      }
    } catch (error) {
      console.error("Ошибка при обновлении изображения:", error);
      toast("Ошибка", {
        description: "Не удалось установить изображение как основное",
      });
    }
  };
  
  // Открытие диалога редактирования
  const openEditDialog = (image: ProductImage) => {
    setCurrentImage(image);
    setAltText(image.alt_text || "");
    setEditDialogOpen(true);
  };
  
  // Обновление alt-текста изображения
  const updateImageAltText = async () => {
    if (!currentImage) return;
    
    try {
      const response = await productsApi.updateImage(currentImage.id, { 
        alt_text: altText,
        is_primary: currentImage.is_primary
      });
      
      if (response.status === 200 && response.data) {
        // Обновляем изображение в списке
        setImages(prev => 
          prev.map(img => img.id === currentImage.id ? {
            ...img,
            alt_text: altText
          } : img)
        );
        
        toast("Успех", {
          description: "Описание изображения обновлено",
        });
        
        setEditDialogOpen(false);
      } else {
        throw new Error(response.error || "Не удалось обновить изображение");
      }
    } catch (error) {
      console.error("Ошибка при обновлении изображения:", error);
      toast("Ошибка", {
        description: "Не удалось обновить описание изображения",
      });
    }
  };
  
  // Открытие диалога удаления
  const openDeleteDialog = (imageId: string) => {
    setImageToDelete(imageId);
    setDeleteDialogOpen(true);
  };
  
  // Удаление изображения
  const deleteImage = async () => {
    if (!imageToDelete) return;
    
    try {
      const response = await productsApi.deleteImage(imageToDelete);
      
      if (response.status === 204 || response.status === 200) {
        // Удаляем изображение из списка
        const newImages = images.filter(img => img.id !== imageToDelete);
        setImages(newImages);
        
        // Если удалили основное изображение и есть другие изображения, делаем первое основным
        if (images.find(img => img.id === imageToDelete)?.is_primary && newImages.length > 0) {
          await setAsPrimary(newImages[0].id);
        }
        
        toast("Успех", {
          description: "Изображение успешно удалено",
        });
        
        setDeleteDialogOpen(false);
      } else {
        throw new Error(response.error || "Не удалось удалить изображение");
      }
    } catch (error) {
      console.error("Ошибка при удалении изображения:", error);
      toast("Ошибка", {
        description: "Не удалось удалить изображение",
      });
    }
  };
  
  return (
    <Card className="mt-6">
      <CardHeader>
        <CardTitle>Изображения продукта</CardTitle>
        <CardDescription>
          Управление изображениями товара "{productName}"
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-6">
          <Label htmlFor="image-upload" className="mb-2 block">
            Загрузить новое изображение
          </Label>
          <div className="flex items-center gap-4">
            <Input
              id="image-upload"
              type="file"
              accept="image/*"
              ref={fileInputRef}
              onChange={handleFileChange}
              disabled={uploading}
              className="max-w-md"
            />
            {uploading && (
              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
            )}
          </div>
          <p className="mt-2 text-sm text-muted-foreground">
            Поддерживаемые форматы: JPG, PNG, WebP. Максимальный размер: 5 МБ.
          </p>
        </div>
        
        {loading ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        ) : images.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <ImageIcon className="h-12 w-12 text-muted-foreground mb-4" />
            <p className="text-lg font-medium">Нет изображений</p>
            <p className="text-sm text-muted-foreground mb-4">
              У этого продукта еще нет изображений. Загрузите изображения, чтобы покупатели могли увидеть товар.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {images.map((image) => (
              <div 
                key={image.id} 
                className={`relative rounded-lg overflow-hidden border ${
                  image.is_primary ? 'ring-2 ring-primary' : ''
                }`}
              >
                <div className="aspect-square relative">
                  <img
                    src={image.url}
                    alt={image.alt_text || productName}
                    className="object-cover w-full h-full"
                  />
                </div>
                
                <div className="absolute top-2 right-2 flex space-x-1">
                  {!image.is_primary && (
                    <Button
                      variant="secondary"
                      size="icon"
                      className="h-8 w-8 bg-white/80 hover:bg-white"
                      onClick={() => setAsPrimary(image.id)}
                      title="Сделать основным"
                    >
                      <Check className="h-4 w-4" />
                    </Button>
                  )}
                  <Button
                    variant="secondary"
                    size="icon"
                    className="h-8 w-8 bg-white/80 hover:bg-white"
                    onClick={() => openEditDialog(image)}
                    title="Редактировать описание"
                  >
                    <ImageIcon className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="destructive"
                    size="icon"
                    className="h-8 w-8 bg-white/80 hover:bg-white"
                    onClick={() => openDeleteDialog(image.id)}
                    title="Удалить"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
                
                {image.is_primary && (
                  <div className="absolute top-2 left-2 bg-primary text-primary-foreground px-2 py-1 text-xs rounded-md">
                    Основное
                  </div>
                )}
                
                {image.alt_text && (
                  <div className="p-2 text-sm truncate">
                    {image.alt_text}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
        
        {/* Диалог редактирования alt-текста */}
        <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Редактировать описание изображения</DialogTitle>
              <DialogDescription>
                Добавьте описание изображения для улучшения SEO и доступности
              </DialogDescription>
            </DialogHeader>
            
            <div className="py-4">
              <Label htmlFor="alt-text" className="mb-2 block">
                Описание изображения (alt-текст)
              </Label>
              <Input
                id="alt-text"
                value={altText}
                onChange={(e) => setAltText(e.target.value)}
                placeholder="Например: Черная футболка с принтом, вид спереди"
              />
              <p className="mt-2 text-sm text-muted-foreground">
                Опишите, что изображено на картинке. Это помогает поисковым системам и пользователям с нарушениями зрения.
              </p>
            </div>
            
            <DialogFooter>
              <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
                Отмена
              </Button>
              <Button onClick={updateImageAltText}>
                Сохранить
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        
        {/* Диалог подтверждения удаления */}
        <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Удалить изображение</DialogTitle>
              <DialogDescription>
                Вы уверены, что хотите удалить это изображение?
                Это действие нельзя отменить.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
                Отмена
              </Button>
              <Button variant="destructive" onClick={deleteImage}>
                Удалить
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  );
} 