'use client';

import { useState, useEffect, useRef } from 'react';
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogDescription, 
  DialogFooter 
} from '@/components/ui/dialog';
import { 
  Tabs, 
  TabsContent, 
  TabsList, 
  TabsTrigger 
} from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Card, CardContent } from '@/components/ui/card';
import { 
  fetchProduct, 
  updateProduct, 
  createProduct, 
  Product, 
  fetchSizes, 
  Size, 
  getImageUrl,
  uploadProductImage,
  deleteProductImage,
  setProductImageAsPrimary
} from '@/lib/api';
import { fetchCategories, Category } from '@/lib/catalog-admin';
import { Upload, X, Plus, Minus, Star, StarOff } from 'lucide-react';

// Типы для работы с изображениями
interface ProductImage {
  id: number;
  image_url: string;
  is_primary?: boolean;
  alt_text?: string;
}

// Тип для локального изображения, ожидающего загрузки
interface LocalImage {
  file: File;
  preview: string;
  isLocal: true;
  isPrimary?: boolean;
}

interface EditProductDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  productId?: number; // Если не указан, то это создание нового товара
  onComplete: () => void;
}

export default function EditProductDialog({ 
  isOpen, 
  onOpenChange, 
  productId, 
  onComplete 
}: EditProductDialogProps) {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState('general');
  
  // Данные
  const [product, setProduct] = useState<Product | null>(null);
  const [categories, setCategories] = useState<Category[]>([]);
  const [sizes, setSizes] = useState<Size[]>([]);
  
  // Основные данные формы
  const [formData, setFormData] = useState({
    name: '',
    slug: '',
    description: '',
    price: 0,
    discount_price: null as number | null,
    care_instructions: {} as Record<string, string>,
    is_active: true,
    category_id: '',
    collection_id: '',
    images: [] as Array<string | ProductImage | LocalImage>
  });
  
  // Состояние для загрузки файлов
  const [isUploading, setIsUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  // Варианты размеров
  const [variantSizes, setVariantSizes] = useState<{
    size_id: number;
    stock: number;
    checked: boolean;
  }[]>([]);
  
  // Загрузка данных товара
  useEffect(() => {
    if (isOpen && productId) {
      const loadProduct = async () => {
        try {
          setLoading(true);
          const response = await fetchProduct(productId);
          
          // Проверяем структуру ответа
          console.log('Ответ API при загрузке товара:', response);
          
          // Получаем данные товара в зависимости от структуры ответа
          let productData: Product | null = null;
          if (response.data) {
            if (typeof response.data === 'object' && 'product' in response.data) {
              // Новая структура API: { data: { product: {...}, success: true } }
              productData = response.data.product as Product;
            } else {
              // Старая структура API: { data: {...} }
              productData = response.data as Product;
            }
          }
          
          if (productData) {
            console.log('Загруженные данные товара:', productData);
            
            // Обработка изображений
            let productImages: Array<string | ProductImage> = [];
            if (productData.images) {
              productImages = Array.isArray(productData.images) 
                ? productData.images.map((img: any) => {
                    // Сохраняем объект изображения как есть
                    if (typeof img === 'object' && img !== null && img.image_url) {
                      return {
                        id: img.id || 0,
                        image_url: img.image_url,
                        is_primary: img.is_primary || false,
                        alt_text: img.alt_text || ''
                      } as ProductImage;
                    }
                    // Для строк возвращаем строку
                    return typeof img === 'string' ? img : '';
                  }).filter(Boolean)
                : [];
            }
            
            // Обработка care_instructions
            let careInstructions: Record<string, string> = {};
            if (productData.care_instructions) {
              if (typeof productData.care_instructions === 'string') {
                try {
                  // Пробуем распарсить строку как JSON
                  careInstructions = JSON.parse(productData.care_instructions);
                } catch (e) {
                  // Если не получилось, сохраняем как текст
                  careInstructions = { text: productData.care_instructions };
                }
              } else if (typeof productData.care_instructions === 'object') {
                careInstructions = productData.care_instructions as Record<string, string>;
              }
            }
            
            setProduct(productData);
            setFormData({
              name: productData.name || '',
              slug: productData.slug || '',
              description: productData.description || '',
              price: typeof productData.price === 'number' ? productData.price : 0,
              discount_price: productData.discount_price || null,
              care_instructions: careInstructions,
              is_active: productData.is_active !== false, // По умолчанию true
              category_id: productData.category?.id?.toString() || 
                          (productData.category_id ? productData.category_id.toString() : 'none'),
              collection_id: productData.collection?.id?.toString() || 
                          (productData.collection_id ? productData.collection_id.toString() : 'none'),
              images: productImages
            });
            
            // Если есть варианты размеров, загрузим их
            if (productData.variants && Array.isArray(productData.variants)) {
              // Инициализируем варианты при загрузке размеров
              console.log('Загружены варианты товара:', productData.variants);
            }
          }
        } catch (err) {
          console.error('Ошибка при загрузке товара:', err);
          setError('Не удалось загрузить товар');
        } finally {
          setLoading(false);
        }
      };

      loadProduct();
    } else if (isOpen) {
      // Сброс формы для создания нового товара
      setFormData({
        name: '',
        slug: '',
        description: '',
        price: 0,
        discount_price: null,
        care_instructions: {},
        is_active: true,
        category_id: 'none',
        collection_id: 'none',
        images: []
      });
      setProduct(null);
    }
  }, [isOpen, productId]);
  
  // Загрузка категорий и размеров
  useEffect(() => {
    if (isOpen) {
      const loadData = async () => {
        try {
          // Загрузка категорий
          const categoriesResponse = await fetchCategories();
          if (categoriesResponse.data && Array.isArray(categoriesResponse.data)) {
            setCategories(categoriesResponse.data);
          }
          
          // Загрузка размеров
          const sizesResponse = await fetchSizes();
          if (sizesResponse.data && Array.isArray(sizesResponse.data)) {
            setSizes(sizesResponse.data);
            
            // Подготовка вариантов размеров
            const initialVariants = sizesResponse.data.map(size => {
              // Если редактируем товар и у него есть варианты
              let existingVariant = null;
              if (product?.variants && Array.isArray(product.variants)) {
                existingVariant = product.variants.find(v => v.size_id === size.id);
              }
              
              return {
                size_id: size.id,
                stock: existingVariant?.stock || 0,
                checked: !!existingVariant // Отмечаем, если вариант существует
              };
            });
            
            console.log('Инициализированы варианты размеров:', initialVariants);
            setVariantSizes(initialVariants);
          }
        } catch (err) {
          console.error('Ошибка при загрузке данных:', err);
        }
      };
      
      loadData();
    }
  }, [isOpen, product]);
  
  // Обработчик изменения полей формы
  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    const { name, value, type } = e.target;
    
    if (name === 'care_instructions') {
      try {
        // Пытаемся распарсить JSON если пользователь ввел валидный JSON
        const jsonValue = value.trim() ? JSON.parse(value) : {};
        setFormData(prev => ({
          ...prev,
          [name]: jsonValue
        }));
      } catch (error) {
        // Иначе сохраняем как строку в объекте
        setFormData(prev => ({
          ...prev,
          [name]: { text: value }
        }));
      }
    } else {
      setFormData(prev => ({
        ...prev,
        [name]: type === 'number' 
          ? (value ? parseFloat(value) : 0) 
          : value
      }));
    }
  };
  
  // Обработчик изменения чекбокса
  const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData(prev => ({
      ...prev,
      [name]: checked
    }));
  };
  
  // Обработчик изменения variant size
  const handleVariantSizeChange = (sizeId: number, checked: boolean) => {
    setVariantSizes(prev => 
      prev.map(item => 
        item.size_id === sizeId 
          ? { ...item, checked } 
          : item
      )
    );
  };
  
  // Обработчик изменения stock варианта
  const handleVariantStockChange = (sizeId: number, stock: number) => {
    setVariantSizes(prev => 
      prev.map(item => 
        item.size_id === sizeId 
          ? { ...item, stock } 
          : item
      )
    );
  };
  
  // Обработчик загрузки изображения
  const handleImageUpload = () => {
    console.log('Открытие диалога выбора файла');
    if (fileInputRef.current) {
      fileInputRef.current.click();
    } else {
      console.error('Отсутствует ссылка на элемент для загрузки файла');
    }
  };
  
  // Обработчик выбора файла - с локальным предпросмотром перед отправкой
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    console.log('Выбраны файлы:', files);
    
    if (!files || files.length === 0) {
      console.error('Не выбраны файлы');
      return;
    }
    
    try {
      setError(null);
      
      // Создаем локальные копии изображений для предпросмотра
      Array.from(files).forEach((file, index) => {
        // Создаем URL для предпросмотра
        const previewUrl = URL.createObjectURL(file);
        
        // Добавляем изображение в состояние с пометкой, что оно локальное
        const localImage: LocalImage = {
          file,
          preview: previewUrl,
          isLocal: true,
          isPrimary: formData.images.length === 0 && index === 0 // Первое изображение будет основным, если нет других
        };
        
        setFormData(prev => ({
          ...prev,
          images: [...prev.images, localImage]
        }));
        
        console.log(`Добавлен предпросмотр ${index + 1}:`, file.name);
      });
    } catch (error) {
      console.error('Ошибка при добавлении файлов:', error);
      setError('Не удалось добавить выбранные изображения');
    } finally {
      // Сбрасываем input для возможности повторной загрузки тех же файлов
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };
  
  // Обработчик удаления изображения
  const handleRemoveImage = async (index: number) => {
    const image = formData.images[index];
    
    // Удаление с сервера если это серверное изображение (ProductImage)
    if (productId && typeof image === 'object' && 'id' in image) {
      try {
        const response = await deleteProductImage(productId, image.id);
        if (response.status !== 200 && response.status !== 204) {
          console.error('Ошибка при удалении изображения с сервера');
          return;
        }
      } catch (err) {
        console.error('Ошибка при удалении изображения:', err);
        return;
      }
    }
    
    // Для локальных изображений освобождаем URL
    if (typeof image === 'object' && 'isLocal' in image && image.isLocal) {
      URL.revokeObjectURL(image.preview);
    }
    
    // Обновление состояния
    setFormData(prev => ({
      ...prev,
      images: prev.images.filter((_, i) => i !== index)
    }));
  };
  
  // Обработчик установки изображения как основного
  const handleSetPrimary = async (index: number) => {
    const image = formData.images[index];
    
    // Для серверных изображений делаем API-запрос
    if (productId && typeof image === 'object' && 'id' in image) {
      try {
        const response = await setProductImageAsPrimary(productId, image.id);
        
        if (response.status !== 200 && response.status !== 204) {
          console.error('Ошибка при установке основного изображения');
          return;
        }
      } catch (err) {
        console.error('Ошибка при установке основного изображения:', err);
        return;
      }
    }
    
    // Обновляем все изображения, устанавливая is_primary/isPrimary только для выбранного
    setFormData(prev => ({
      ...prev,
      images: prev.images.map((img, i) => {
        if (typeof img === 'object') {
          if ('isLocal' in img && img.isLocal) {
            // Локальное изображение
            return {
              ...img,
              isPrimary: i === index
            };
          } else if ('id' in img) {
            // Серверное изображение
            return {
              ...img,
              is_primary: i === index
            };
          }
        }
        return img;
      })
    }));
  };
  
  // Функция для загрузки локальных файлов на сервер
  const uploadLocalImages = async (newProductId: number) => {
    const localImages = formData.images.filter(
      (img): img is LocalImage => typeof img === 'object' && 'isLocal' in img && img.isLocal
    );
    
    if (localImages.length === 0) {
      return { success: true };
    }
    
    console.log(`Загрузка ${localImages.length} локальных изображений на сервер`);
    setIsUploading(true);
    
    try {
      for (const image of localImages) {
        console.log(`Загрузка файла ${image.file.name}`);
        
        const response = await uploadProductImage(newProductId, image.file);
        
        if (response.status !== 201 || !response.data) {
          console.error('Ошибка при загрузке изображения:', response);
          return { 
            success: false, 
            error: response.error || `Не удалось загрузить изображение (код ${response.status})`
          };
        }
        
        // Если изображение было отмечено как основное, устанавливаем его основным на сервере
        const uploadedImageData = response.data;
        if (image.isPrimary && uploadedImageData && typeof uploadedImageData === 'object') {
          // Получаем ID изображения в зависимости от структуры ответа
          const imageId = 'id' in uploadedImageData ? 
            uploadedImageData.id : 
            (uploadedImageData.product && typeof uploadedImageData.product === 'object' && 'id' in uploadedImageData.product ? 
              uploadedImageData.product.id : null);
          
          if (imageId) {
            await setProductImageAsPrimary(newProductId, imageId);
          }
        }
      }
      
      return { success: true };
    } catch (err: any) {
      console.error('Ошибка при загрузке изображений:', err);
      return { 
        success: false, 
        error: err.message || 'Ошибка при загрузке изображений'
      };
    } finally {
      setIsUploading(false);
    }
  };
  
  // Обработчик сохранения
  const handleSave = async () => {
    try {
      setSaving(true);
      setError(null);
      
      // Подготовка данных для API
      const productData = {
        name: formData.name,
        slug: formData.slug || formData.name.toLowerCase().replace(/\s+/g, '-'),
        description: formData.description,
        price: formData.price,
        discount_price: formData.discount_price,
        care_instructions: formData.care_instructions,
        is_active: formData.is_active,
        category_id: formData.category_id && formData.category_id !== "none" 
          ? parseInt(formData.category_id) 
          : undefined,
        collection_id: formData.collection_id && formData.collection_id !== "none" 
          ? parseInt(formData.collection_id) 
          : undefined
        // Изображения обрабатываются отдельно через API загрузки изображений
      };
      
      let response;
      if (productId) {
        // Обновление существующего товара
        response = await updateProduct(productId, productData);
      } else {
        // Создание нового товара
        response = await createProduct(productData);
      }
      
      if (response.status === 200 || response.status === 201) {
        // Успешное сохранение
        console.log('Товар успешно сохранен:', response.data);
        
        // Получаем ID созданного или обновленного товара
        const savedProductId = productId || 
          (response.data && typeof response.data === 'object' ? 
            ('id' in response.data ? 
              (response.data as Product).id : 
              (response.data.product && typeof response.data.product === 'object' && 'id' in response.data.product ?
                response.data.product.id : null)) 
            : null);
        
        if (savedProductId) {
          // Загружаем локальные изображения на сервер
          const uploadResult = await uploadLocalImages(savedProductId);
          
          if (!uploadResult.success) {
            setError(uploadResult.error || 'Не удалось загрузить изображения');
            return;
          }
        }
        
        // Успешно сохранено и загружены изображения
        onComplete();
        onOpenChange(false);
      } else {
        throw new Error(`Ошибка сохранения: ${response.status}`);
      }
    } catch (err) {
      console.error('Ошибка при сохранении товара:', err);
      setError('Не удалось сохранить товар');
    } finally {
      setSaving(false);
    }
  };

  // Очистка локальных превью при закрытии диалога
  useEffect(() => {
    if (!isOpen) {
      // Освобождаем URL-ы для предпросмотра при закрытии диалога
      formData.images.forEach(image => {
        if (typeof image === 'object' && 'isLocal' in image && image.isLocal) {
          URL.revokeObjectURL(image.preview);
        }
      });
    }
  }, [isOpen, formData.images]);

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {productId ? 'Редактирование товара' : 'Создание нового товара'}
          </DialogTitle>
          <DialogDescription>
            Заполните информацию о товаре и его вариантах
          </DialogDescription>
        </DialogHeader>
        
        {loading ? (
          <div className="py-6 text-center">
            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full mx-auto"></div>
            <p className="mt-2 text-sm text-gray-500">Загрузка данных...</p>
          </div>
        ) : (
          <>
            <Tabs defaultValue="general" value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid grid-cols-3 mb-6">
                <TabsTrigger value="general">Основная информация</TabsTrigger>
                <TabsTrigger value="variants">Варианты и размеры</TabsTrigger>
                <TabsTrigger value="images">Изображения</TabsTrigger>
              </TabsList>
              
              {/* Основная информация */}
              <TabsContent value="general" className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Название товара*</Label>
                    <Input
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="slug">URL-slug (автоматически)</Label>
                    <Input
                      id="slug"
                      name="slug"
                      value={formData.slug}
                      onChange={handleChange}
                      placeholder="auto-generated-from-name"
                    />
                  </div>
                </div>
                
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="price">Цена (₽)*</Label>
                    <Input
                      id="price"
                      name="price"
                      type="number"
                      value={formData.price}
                      onChange={handleChange}
                      min="0"
                      step="0.01"
                      required
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="discount_price">Цена со скидкой (₽)</Label>
                    <Input
                      id="discount_price"
                      name="discount_price"
                      type="number"
                      value={formData.discount_price || ''}
                      onChange={handleChange}
                      min="0"
                      step="0.01"
                      placeholder="Не указана"
                    />
                  </div>
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="category_id">Категория*</Label>
                  <Select 
                    name="category_id" 
                    value={formData.category_id} 
                    onValueChange={(value) => setFormData(prev => ({ ...prev, category_id: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Выберите категорию" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">Не выбрано</SelectItem>
                      {categories.map(category => (
                        <SelectItem key={category.id} value={category.id.toString()}>
                          {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="description">Описание</Label>
                  <Textarea
                    id="description"
                    name="description"
                    value={formData.description}
                    onChange={handleChange}
                    rows={4}
                  />
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="care_instructions">Инструкции по уходу (JSON)</Label>
                  <Textarea
                    id="care_instructions"
                    name="care_instructions"
                    value={
                      typeof formData.care_instructions === 'string' 
                        ? formData.care_instructions 
                        : formData.care_instructions.text || 
                          JSON.stringify(formData.care_instructions, null, 2)
                    }
                    onChange={handleChange}
                    rows={5}
                    placeholder='Например: {"стирка": "30°C", "глажка": "Средняя температура"}'
                    className="font-mono text-sm"
                  />
                  <div className="text-xs text-gray-500 space-y-1">
                    <p>Введите инструкции по уходу в формате JSON-объекта:</p>
                    <ul className="list-disc pl-5 space-y-1">
                      <li>Используйте двойные кавычки для ключей и значений</li>
                      <li>Разделяйте пары ключ-значение запятыми</li>
                      <li>Пример: {`{"стирка": "30°C", "глажка": "Средняя температура"}`}</li>
                    </ul>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <Checkbox 
                    id="is_active"
                    checked={formData.is_active}
                    onCheckedChange={(checked) => 
                      handleCheckboxChange('is_active', !!checked)
                    }
                  />
                  <Label htmlFor="is_active">Товар активен</Label>
                </div>
              </TabsContent>
              
              {/* Варианты товара */}
              <TabsContent value="variants" className="space-y-4">
                <div className="bg-muted/50 p-4 rounded-md">
                  <h3 className="font-medium mb-2">Доступные размеры</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    Выберите размеры, в которых доступен товар, и укажите количество.
                  </p>
                  
                  <div className="space-y-3">
                    {variantSizes.map((variant) => {
                      const size = sizes.find(s => s.id === variant.size_id);
                      return (
                        <div key={variant.size_id} className="flex items-center space-x-4 p-2 rounded border bg-card">
                          <Checkbox 
                            id={`size-${variant.size_id}`}
                            checked={variant.checked}
                            onCheckedChange={(checked) => 
                              handleVariantSizeChange(variant.size_id, !!checked)
                            }
                          />
                          <Label 
                            htmlFor={`size-${variant.size_id}`}
                            className="flex-grow font-medium"
                          >
                            {size?.name || `Размер ${variant.size_id}`}
                          </Label>
                          
                          <div className="flex items-center space-x-1">
                            <Label htmlFor={`stock-${variant.size_id}`} className="text-sm">
                              Остаток:
                            </Label>
                            <div className="flex items-center">
                              <Button
                                type="button"
                                size="icon"
                                variant="outline"
                                className="h-8 w-8 rounded-r-none"
                                onClick={() => handleVariantStockChange(
                                  variant.size_id, 
                                  Math.max(0, variant.stock - 1)
                                )}
                                disabled={!variant.checked}
                              >
                                <Minus className="h-3 w-3" />
                              </Button>
                              <Input
                                id={`stock-${variant.size_id}`}
                                type="number"
                                min="0"
                                value={variant.stock}
                                onChange={(e) => handleVariantStockChange(
                                  variant.size_id, 
                                  parseInt(e.target.value) || 0
                                )}
                                className="w-16 h-8 rounded-none text-center"
                                disabled={!variant.checked}
                              />
                              <Button
                                type="button"
                                size="icon"
                                variant="outline"
                                className="h-8 w-8 rounded-l-none"
                                onClick={() => handleVariantStockChange(
                                  variant.size_id, 
                                  variant.stock + 1
                                )}
                                disabled={!variant.checked}
                              >
                                <Plus className="h-3 w-3" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                    
                    {variantSizes.length === 0 && (
                      <p className="text-sm text-muted-foreground italic">
                        Нет доступных размеров. Добавьте размеры в разделе "Размеры".
                      </p>
                    )}
                  </div>
                </div>
              </TabsContent>
              
              {/* Изображения */}
              <TabsContent value="images" className="space-y-4">
                <div className="bg-muted/50 p-4 rounded-md">
                  <h3 className="font-medium mb-2">Изображения товара</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    Загрузите фотографии товара. Установите основное изображение, которое будет отображаться первым.
                  </p>
                
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                    {formData.images.map((image, index) => {
                      // Определение URL изображения в зависимости от типа
                      let imageUrl = '';
                      let isPrimary = false;
                      let altText = '';
                      
                      if (typeof image === 'object' && 'isLocal' in image && image.isLocal) {
                        // Локальный файл с превью
                        imageUrl = image.preview;
                        isPrimary = image.isPrimary || false;
                        altText = image.file.name;
                      } else if (typeof image === 'object' && 'image_url' in image) {
                        // Изображение с сервера
                        imageUrl = getImageUrl(image.image_url);
                        isPrimary = image.is_primary || false;
                        altText = image.alt_text || `Изображение ${index + 1}`;
                      } else if (typeof image === 'string') {
                        // Просто URL строка
                        imageUrl = getImageUrl(image);
                        altText = `Изображение ${index + 1}`;
                      }
                      
                      return (
                        <div key={index} className="relative group">
                          <div className={`relative border rounded-md overflow-hidden ${isPrimary ? 'ring-2 ring-primary ring-offset-1' : ''}`}>
                            <img
                              src={imageUrl}
                              alt={altText}
                              className="h-32 w-full object-cover"
                            />
                            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                              <div className="flex gap-2">
                                {isPrimary ? (
                                  <span className="p-1.5 bg-primary text-white rounded-full shadow-sm">
                                    <Star className="h-4 w-4" />
                                  </span>
                                ) : (
                                  <button
                                    type="button"
                                    onClick={() => handleSetPrimary(index)}
                                    className="p-1.5 bg-white/80 hover:bg-white text-gray-700 rounded-full transition-colors shadow-sm"
                                    title="Сделать основным"
                                  >
                                    <StarOff className="h-4 w-4" />
                                  </button>
                                )}
                                <button
                                  type="button"
                                  onClick={() => handleRemoveImage(index)}
                                  className="p-1.5 bg-red-500/80 hover:bg-red-500 text-white rounded-full transition-colors shadow-sm"
                                  title="Удалить"
                                >
                                  <X className="h-4 w-4" />
                                </button>
                              </div>
                            </div>
                          </div>
                          {isPrimary && (
                            <div className="absolute bottom-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded-sm shadow-sm">
                              Основное
                            </div>
                          )}
                        </div>
                      );
                    })}
                    
                    <button
                      type="button"
                      onClick={handleImageUpload}
                      disabled={isUploading}
                      className="h-32 border-2 border-dashed border-gray-300 rounded-md flex flex-col items-center justify-center text-gray-500 hover:bg-gray-50 transition-colors"
                    >
                      {isUploading ? (
                        <>
                          <div className="h-6 w-6 mb-2 animate-spin border-2 border-current border-t-transparent rounded-full"></div>
                          <span className="text-sm font-medium">Загрузка...</span>
                        </>
                      ) : (
                        <>
                          <Upload className="mx-auto h-6 w-6 mb-2" />
                          <span className="text-sm font-medium">Добавить изображение</span>
                        </>
                      )}
                    </button>
                    
                    {/* Скрытый input для выбора файлов */}
                    <input 
                      type="file" 
                      ref={fileInputRef}
                      className="hidden"
                      accept="image/*"
                      multiple
                      onChange={handleFileChange}
                    />
                  </div>
                  
                  {formData.images.length === 0 && (
                    <p className="text-sm text-muted-foreground italic text-center mt-4">
                      Нет изображений. Добавьте хотя бы одно изображение товара.
                    </p>
                  )}
                </div>
              </TabsContent>
            </Tabs>
            
            {error && (
              <div className="bg-destructive/10 text-destructive p-3 rounded-md text-sm">
                {error}
              </div>
            )}
            
            <DialogFooter className="mt-6">
              <Button variant="outline" onClick={() => onOpenChange(false)}>
                Отмена
              </Button>
              <Button onClick={handleSave} disabled={saving}>
                {saving ? (
                  <>
                    <div className="h-4 w-4 mr-2 animate-spin border-2 border-current border-t-transparent rounded-full"></div>
                    Сохранение...
                  </>
                ) : (
                  'Сохранить'
                )}
              </Button>
            </DialogFooter>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
} 