import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { HiX, HiPlus, HiOutlineLink, HiOutlineUpload } from 'react-icons/hi'
import classNames from 'classnames'

export interface MediaItem {
  id: string
  type: 'image' | 'video'
  url: string
  file?: File
}

interface MediaManagerProps {
  media: MediaItem[]
  onChange: (media: MediaItem[]) => void
  onClose: () => void
}

const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose }) => {
  const [activeTab, setActiveTab] = useState<'upload' | 'url'>('upload')
  const [urlInput, setUrlInput] = useState('')
  const [mediaType, setMediaType] = useState<'image' | 'video'>('image')

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files) return

    const newMedia: MediaItem[] = Array.from(files).map((file) => ({
      id: Math.random().toString(36).substr(2, 9),
      type: file.type.startsWith('video/') ? 'video' : 'image',
      url: URL.createObjectURL(file),
      file
    }))

    onChange([...media, ...newMedia])
    e.target.value = ''
  }

  const handleUrlAdd = () => {
    if (!urlInput.trim()) return

    const newMedia: MediaItem = {
      id: Math.random().toString(36).substr(2, 9),
      type: mediaType,
      url: urlInput
    }

    onChange([...media, newMedia])
    setUrlInput('')
  }

  const removeMedia = (id: string) => {
    onChange(media.filter((m) => m.id !== id))
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.9 }}
        className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden"
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white">Medya Ekle</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors"
          >
            <HiX className="w-5 h-5 text-gray-500 dark:text-gray-400" />
          </button>
        </div>

        {/* Tabs */}
        <div className="flex border-b border-gray-200 dark:border-gray-700 px-4">
          <button
            onClick={() => setActiveTab('upload')}
            className={classNames(
              'px-4 py-3 font-medium border-b-2 transition-colors',
              activeTab === 'upload'
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            )}
          >
            <div className="flex items-center gap-2">
              <HiOutlineUpload className="w-5 h-5" />
              <span>Bilgisayarımdan Seç</span>
            </div>
          </button>
          <button
            onClick={() => setActiveTab('url')}
            className={classNames(
              'px-4 py-3 font-medium border-b-2 transition-colors',
              activeTab === 'url'
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            )}
          >
            <div className="flex items-center gap-2">
              <HiOutlineLink className="w-5 h-5" />
              <span>URL ile Ekle</span>
            </div>
          </button>
        </div>

        {/* Content */}
        <div className="p-4 overflow-y-auto max-h-[calc(90vh-240px)]">
          {activeTab === 'upload' ? (
            <div>
              <label className="block">
                <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors cursor-pointer">
                  <HiOutlineUpload className="w-12 h-12 mx-auto mb-4 text-gray-400" />
                  <p className="text-gray-700 dark:text-gray-300 font-medium mb-1">
                    Dosya seçmek için tıklayın
                  </p>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Resim veya Video (PNG, JPG, GIF, MP4, MOV)
                  </p>
                </div>
                <input
                  type="file"
                  accept="image/*,video/*"
                  multiple
                  onChange={handleFileSelect}
                  className="hidden"
                />
              </label>
            </div>
          ) : (
            <div>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Medya Tipi
                </label>
                <div className="flex gap-2">
                  <button
                    onClick={() => setMediaType('image')}
                    className={classNames(
                      'flex-1 py-2 px-4 rounded-lg font-medium transition-colors',
                      mediaType === 'image'
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    )}
                  >
                    Resim
                  </button>
                  <button
                    onClick={() => setMediaType('video')}
                    className={classNames(
                      'flex-1 py-2 px-4 rounded-lg font-medium transition-colors',
                      mediaType === 'video'
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    )}
                  >
                    Video
                  </button>
                </div>
              </div>
              <div className="flex gap-2">
                <input
                  type="url"
                  value={urlInput}
                  onChange={(e) => setUrlInput(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && handleUrlAdd()}
                  placeholder={`${mediaType === 'image' ? 'Resim' : 'Video'} URL'si girin`}
                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <button
                  onClick={handleUrlAdd}
                  disabled={!urlInput.trim()}
                  className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
                >
                  Ekle
                </button>
              </div>
            </div>
          )}

          {/* Media Preview */}
          {media.length > 0 && (
            <div className="mt-6">
              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                Eklenen Medyalar ({media.length})
              </h3>
              <div className="grid grid-cols-4 gap-3">
                {media.map((item) => (
                  <div key={item.id} className="relative group">
                    {item.type === 'image' ? (
                      <img
                        src={item.url}
                        alt="Media preview"
                        className="w-full h-24 object-cover rounded-lg"
                      />
                    ) : (
                      <div className="w-full h-24 bg-gray-900 rounded-lg flex items-center justify-center">
                        <video src={item.url} className="w-full h-full object-cover rounded-lg" />
                        <div className="absolute inset-0 flex items-center justify-center">
                          <div className="w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
                            <div className="w-0 h-0 border-t-8 border-t-transparent border-l-12 border-l-white border-b-8 border-b-transparent ml-1"></div>
                          </div>
                        </div>
                      </div>
                    )}
                    <button
                      onClick={() => removeMedia(item.id)}
                      className="absolute -top-2 -right-2 p-1 bg-red-600 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <HiX className="w-4 h-4" />
                    </button>
                    <div className="absolute bottom-1 left-1 px-2 py-0.5 bg-black bg-opacity-70 text-white text-xs rounded">
                      {item.type === 'image' ? '📷' : '🎥'}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            İptal
          </button>
          <button
            onClick={onClose}
            disabled={media.length === 0}
            className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
          >
            Tamam ({media.length})
          </button>
        </div>
      </motion.div>
    </div>
  )
}

export default MediaManager