import React, { useRef } from 'react';
import { ImagePlus, X } from 'lucide-react';
import axios from 'axios';
import { imageResolutions } from '../../config/imageResolutions';

interface CoverImageUploadProps {
  coverImage: string;
  articleId: string;
  onImageUpload: (url: string) => void;
  onError: (error: string) => void;
  allowUpload?: boolean;
}

export function CoverImageUpload({ coverImage, articleId, onImageUpload, onError, allowUpload = true }: CoverImageUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      // Проверка разрешения изображения
      const resolution = imageResolutions.find(r => r.id === 'large');
      if (!resolution)
        throw new Error('Invalid resolution');

      const formData = new FormData();
      formData.append('file', file);
      formData.append('resolutionId', resolution.id);
      formData.append('folder', 'articles/' + articleId);

      // Отправка запроса на сервер
      const response = await axios.post('/api/images/upload-url', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `Bearer ${localStorage.getItem('token')}`, // Передача токена аутентификации
        },
      });

      if (response.data?.fileUrl) {
        onImageUpload(response.data.fileUrl); // Передача URL загруженного изображения
      }
    } catch (error) {
      onError('Ошибка загрузки изображения. Попробуйте еще раз.');
      console.error('Upload error:', error);
    }

    // Сброс значения input для повторного выбора того же файла
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleClearImage = () => {
    onImageUpload('');
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  return (
      <div>
        <label htmlFor="coverImage" className="block text-sm font-medium text-gray-700">
          <span className="italic font-bold">Обложка</span>
        </label>
        <div className="mt-1 space-y-4">
          {coverImage && (
              <div className="relative w-48 h-32 rounded-lg overflow-hidden group">
                <img
                    src={coverImage}
                    alt="Превью обложки"
                    className="w-full h-full object-cover"
                />
                {allowUpload && (
                  <button
                    type="button"
                    onClick={handleClearImage}
                    className="absolute top-2 right-2 p-1 bg-white rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <X size={16} className="text-gray-600" />
                  </button>
                )}
                <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all" />
              </div>
          )}
          <div className="flex rounded-md shadow-sm">
            <input
                type="text"
                id="coverImage"
                value={coverImage}
                readOnly
                className="hidden px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
                placeholder="URL изображения будет здесь после загрузки"
            />
            {allowUpload && (
              <label
                htmlFor="coverImageUpload"
                className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-r-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                <ImagePlus size={18} className="mr-2" />
                Загрузка
              </label>
            )}
            <input
                ref={fileInputRef}
                type="file"
                id="coverImageUpload"
                className="hidden"
                accept="image/*"
                onChange={handleFileSelect}
            />
          </div>
          <p className="text-sm text-gray-500">
            Рекомендуемый размер: 1920x1080px. Поддерживаются PNG, JPG, JPEG или WebP до 10MB.
          </p>
        </div>
      </div>
  );
}
