'use client'

import { useState, useEffect, useRef } from 'react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import { Product } from '@/lib/products'

interface ProductEditorProps {
  product?: Product | null
  onSave?: () => void
  onCancel?: () => void
}

interface UploadedFile {
  url: string
  name: string
  size: number
  type: string
}

export default function ProductEditor({ product, onSave, onCancel }: ProductEditorProps) {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    price: '',
    images: [] as string[],
    videoUrl: '',
    featured: false,
  })
  const [uploadedImages, setUploadedImages] = useState<UploadedFile[]>([])
  const [uploadedVideo, setUploadedVideo] = useState<UploadedFile | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [uploadLoading, setUploadLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const router = useRouter()
  const isEditing = !!product
  const imageInputRef = useRef<HTMLInputElement>(null)
  const videoInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (product) {
      setFormData({
        name: product.name,
        description: product.description,
        price: product.price,
        images: product.images || [],
        videoUrl: product.videoUrl || '',
        featured: product.featured,
      })

      // Convert existing images to UploadedFile format
      const existingImages: UploadedFile[] = (product.images || []).map(img => ({
        url: img,
        name: img.split('/').pop() || 'image',
        size: 0,
        type: 'image/*'
      }))
      setUploadedImages(existingImages)

      // Convert existing video to UploadedFile format
      if (product.videoUrl) {
        setUploadedVideo({
          url: product.videoUrl,
          name: product.videoUrl.split('/').pop() || 'video',
          size: 0,
          type: 'video/*'
        })
      }
    }
  }, [product])

  const handleFileUpload = async (files: FileList, type: 'images' | 'video') => {
    if (!files || files.length === 0) return

    setUploadLoading(true)
    setError('')

    try {
      const formDataUpload = new FormData()

      if (type === 'images') {
        Array.from(files).forEach(file => {
          formDataUpload.append('images', file)
        })
      } else {
        formDataUpload.append('video', files[0])
      }

      const response = await fetch('/api/admin/upload', {
        method: 'POST',
        body: formDataUpload,
      })

      const data = await response.json()

      if (response.ok) {
        if (type === 'images' && data.files.images) {
          const newImages = data.files.images.map((url: string, index: number) => ({
            url,
            name: files[index].name,
            size: files[index].size,
            type: files[index].type
          }))
          setUploadedImages(prev => [...prev, ...newImages])
          setFormData(prev => ({
            ...prev,
            images: [...prev.images, ...data.files.images]
          }))
        } else if (type === 'video' && data.files.video) {
          const newVideo = {
            url: data.files.video,
            name: files[0].name,
            size: files[0].size,
            type: files[0].type
          }
          setUploadedVideo(newVideo)
          setFormData(prev => ({
            ...prev,
            videoUrl: data.files.video
          }))
        }
      } else {
        setError(data.message || 'Помилка при завантаженні файлу')
      }
    } catch (error) {
      setError('Мережева помилка при завантаженні файлу')
    } finally {
      setUploadLoading(false)
    }
  }

  const removeImage = (index: number) => {
    setUploadedImages(prev => prev.filter((_, i) => i !== index))
    setFormData(prev => ({
      ...prev,
      images: prev.images.filter((_, i) => i !== index)
    }))
  }

  const removeVideo = () => {
    setUploadedVideo(null)
    setFormData(prev => ({
      ...prev,
      videoUrl: ''
    }))
  }

  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError('')
    setSuccess('')

    try {
      const url = isEditing
        ? `/api/admin/products/${product.slug}`
        : '/api/admin/products'

      const method = isEditing ? 'PUT' : 'POST'

      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      const data = await response.json()

      if (response.ok) {
        setSuccess(isEditing ? 'Продукт оновлено успішно!' : 'Продукт створено успішно!')
        if (onSave) {
          onSave()
        } else {
          setTimeout(() => {
            router.push('/admin/products')
          }, 1500)
        }
      } else {
        setError(data.message || 'Помилка при збереженні продукту')
      }
    } catch (error) {
      setError('Мережева помилка. Спробуйте ще раз.')
    } finally {
      setIsLoading(false)
    }
  }

  const handleInputChange = (field: string, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value,
    }))
  }

  return (
    <div className="bg-white shadow rounded-lg">
      <div className="px-4 py-5 sm:p-6">
        <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
          {isEditing ? 'Редагувати продукт' : 'Створити новий продукт'}
        </h3>

        {error && (
          <div className="mb-4 bg-red-50 border border-red-200 rounded-md p-4">
            <div className="text-sm text-red-700">{error}</div>
          </div>
        )}

        {success && (
          <div className="mb-4 bg-green-50 border border-green-200 rounded-md p-4">
            <div className="text-sm text-green-700">{success}</div>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
              Назва продукту *
            </label>
            <input
              type="text"
              id="name"
              required
              className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
              value={formData.name}
              onChange={(e) => handleInputChange('name', e.target.value)}
            />
          </div>

          <div>
            <label htmlFor="description" className="block text-sm font-medium text-gray-700">
              Опис *
            </label>
            <textarea
              id="description"
              rows={4}
              required
              className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
              value={formData.description}
              onChange={(e) => handleInputChange('description', e.target.value)}
            />
          </div>

          <div>
            <label htmlFor="price" className="block text-sm font-medium text-gray-700">
              Ціна *
            </label>
            <input
              type="text"
              id="price"
              required
              placeholder="наприклад: 450 грн/м³"
              className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
              value={formData.price}
              onChange={(e) => handleInputChange('price', e.target.value)}
            />
          </div>

          {/* Image Upload Section */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Зображення продукту
            </label>

            {/* Display uploaded images */}
            {uploadedImages.length > 0 && (
              <div className="mb-4 grid grid-cols-2 md:grid-cols-3 gap-4">
                {uploadedImages.map((image, index) => (
                  <div key={index} className="relative group">
                    <div className="aspect-square relative overflow-hidden rounded-lg border border-gray-200">
                      <Image
                        src={image.url}
                        alt={`Uploaded ${index + 1}`}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => removeImage(index)}
                      className="absolute -top-2 -right-2 bg-red-600 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </button>
                    <div className="mt-1 text-xs text-gray-500 truncate">
                      {image.name} ({formatFileSize(image.size)})
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Upload button */}
            <div>
              <input
                ref={imageInputRef}
                type="file"
                multiple
                accept="image/*"
                onChange={(e) => e.target.files && handleFileUpload(e.target.files, 'images')}
                className="hidden"
              />
              <button
                type="button"
                onClick={() => imageInputRef.current?.click()}
                disabled={uploadLoading}
                className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
              >
                {uploadLoading ? 'Завантаження...' : 'Завантажити зображення'}
              </button>
            </div>
            <p className="mt-1 text-sm text-gray-500">
              Підтримуються формати: JPG, PNG, GIF. Максимальний розмір: 50MB на файл.
            </p>
          </div>

          {/* Video Upload Section */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Відео продукту (необов'язково)
            </label>

            {/* Display uploaded video */}
            {uploadedVideo && (
              <div className="mb-4">
                <div className="relative">
                  <video
                    src={uploadedVideo.url}
                    controls
                    className="w-full max-w-md rounded-lg border border-gray-200"
                    style={{ maxHeight: '200px' }}
                  />
                  <button
                    type="button"
                    onClick={removeVideo}
                    className="absolute -top-2 -right-2 bg-red-600 text-white rounded-full p-1"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
                <div className="mt-1 text-xs text-gray-500">
                  {uploadedVideo.name} ({formatFileSize(uploadedVideo.size)})
                </div>
              </div>
            )}

            {/* Upload button */}
            {!uploadedVideo && (
              <div>
                <input
                  ref={videoInputRef}
                  type="file"
                  accept="video/*"
                  onChange={(e) => e.target.files && handleFileUpload(e.target.files, 'video')}
                  className="hidden"
                />
                <button
                  type="button"
                  onClick={() => videoInputRef.current?.click()}
                  disabled={uploadLoading}
                  className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
                >
                  {uploadLoading ? 'Завантаження...' : 'Завантажити відео'}
                </button>
              </div>
            )}
            <p className="mt-1 text-sm text-gray-500">
              Підтримуються формати: MP4, AVI, MOV. Максимальний розмір: 50MB.
            </p>
          </div>

          <div className="flex items-center">
            <input
              id="featured"
              type="checkbox"
              className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
              checked={formData.featured}
              onChange={(e) => handleInputChange('featured', e.target.checked)}
            />
            <label htmlFor="featured" className="ml-2 block text-sm text-gray-900">
              Позначити як "В наявності"
            </label>
          </div>

          <div className="flex justify-end space-x-3">
            {onCancel && (
              <button
                type="button"
                onClick={onCancel}
                className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
              >
                Скасувати
              </button>
            )}
            <button
              type="submit"
              disabled={isLoading}
              className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-900 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
            >
              {isLoading ? 'Збереження...' : (isEditing ? 'Оновити продукт' : 'Створити продукт')}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}