"use client"

import { useState, useEffect, useCallback } from "react"
import { Plus, Pencil, Trash2, Image, FolderOpen, Calendar, X, Upload } from "lucide-react"
import ImageUpload from "@/components/admin/ImageUpload"

interface GalleryItem {
  id: string
  title: string
  description: string
  imageUrl: string
  thumbnailUrl: string
  album: string
  tags: string
  createdAt: string
}

const albumOptions = ["general", "conferences", "events", "campus"] as const

const emptyForm = {
  title: "",
  description: "",
  imageUrl: "",
  thumbnailUrl: "",
  album: "general",
  tags: "",
}

export default function GalleryManagement() {
  const [items, setItems] = useState<GalleryItem[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [selectedAlbum, setSelectedAlbum] = useState<string>("All")
  const [modalOpen, setModalOpen] = useState(false)
  const [editingItem, setEditingItem] = useState<GalleryItem | null>(null)
  const [form, setForm] = useState(emptyForm)
  const [saving, setSaving] = useState(false)
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)

  const fetchItems = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)
      const res = await fetch("/api/admin/gallery")
      if (!res.ok) throw new Error("فشل في جلب عناصر المعرض")
      const data = await res.json()
      setItems(data.data ?? data ?? [])
    } catch (err) {
      setError(err instanceof Error ? err.message : "حدث خطأ ما")
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchItems()
  }, [fetchItems])

  const filteredItems =
    selectedAlbum === "All"
      ? items
      : items.filter((item) => item.album === selectedAlbum)

  function openCreateModal() {
    setEditingItem(null)
    setForm(emptyForm)
    setModalOpen(true)
  }

  function openEditModal(item: GalleryItem) {
    setEditingItem(item)
    setForm({
      title: item.title,
      description: item.description,
      imageUrl: item.imageUrl,
      thumbnailUrl: item.thumbnailUrl,
      album: item.album,
      tags: item.tags,
    })
    setModalOpen(true)
  }

  function closeModal() {
    setModalOpen(false)
    setEditingItem(null)
    setForm(emptyForm)
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)

    try {
      if (editingItem) {
        const res = await fetch(`/api/admin/gallery/${editingItem.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(form),
        })
        if (!res.ok) throw new Error("فشل في تحديث العنصر")
      } else {
        const res = await fetch("/api/admin/gallery", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(form),
        })
        if (!res.ok) throw new Error("فشل في إنشاء العنصر")
      }
      await fetchItems()
      closeModal()
    } catch (err) {
      setError(err instanceof Error ? err.message : "حدث خطأ ما")
    } finally {
      setSaving(false)
    }
  }

  async function handleDelete(id: string) {
    try {
      const res = await fetch(`/api/admin/gallery/${id}`, {
        method: "DELETE",
      })
      if (!res.ok) throw new Error("فشل في حذف العنصر")
      setDeleteConfirm(null)
      await fetchItems()
    } catch (err) {
      setError(err instanceof Error ? err.message : "حدث خطأ ما")
    }
  }

  function formatDate(dateStr: string) {
    try {
      return new Date(dateStr).toLocaleDateString("ar-SA", {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
    } catch {
      return dateStr
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6 dark:bg-[#0b1120]">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-[#f1f5f9]">إدارة المعرض</h1>
          <button
            onClick={openCreateModal}
            className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Plus className="w-4 h-4" />
            إضافة صورة
          </button>
        </div>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4 flex justify-between items-center">
            <span>{error}</span>
            <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
              <X className="w-4 h-4" />
            </button>
          </div>
        )}

        <div className="flex flex-wrap gap-2 mb-6">
          <button
            onClick={() => setSelectedAlbum("All")}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              selectedAlbum === "All"
                ? "bg-blue-600 text-white"
                : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-[#1e2d42] dark:text-[#cbd5e1] dark:border-[#3b4f6b] dark:hover:bg-[#2a3d56]"
            }`}
          >
            الكل
          </button>
          {albumOptions.map((album) => (
            <button
              key={album}
              onClick={() => setSelectedAlbum(album)}
              className={`px-4 py-2 rounded-lg text-sm font-medium capitalize transition-colors ${
                selectedAlbum === album
                  ? "bg-blue-600 text-white"
                  : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-[#1e2d42] dark:text-[#cbd5e1] dark:border-[#3b4f6b] dark:hover:bg-[#2a3d56]"
              }`}
            >
              {album}
            </button>
          ))}
        </div>

        {loading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {[...Array(8)].map((_, i) => (
              <div key={i} className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse dark:bg-[#1a2332] dark:border-[#2a3d56]">
                <div className="aspect-square bg-gray-200" />
                <div className="p-4 space-y-2">
                  <div className="h-4 bg-gray-200 rounded w-3/4" />
                  <div className="h-3 bg-gray-200 rounded w-1/2" />
                  <div className="h-3 bg-gray-200 rounded w-1/3" />
                </div>
              </div>
            ))}
          </div>
        ) : filteredItems.length === 0 ? (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center dark:bg-[#1a2332] dark:border-[#2a3d56]">
            <Image className="w-12 h-12 text-gray-400 dark:text-[#3b4f6b] mx-auto mb-4" />
            <p className="text-gray-500 text-lg dark:text-[#94a3b8]">لا توجد صور</p>
            <p className="text-gray-400 text-sm mt-1">
              {selectedAlbum !== "All"
                ? "جرب اختيار ألبوم مختلف أو أضف صور جديدة."
                : "اضغط 'إضافة صورة' لرفع أول صورة."}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {filteredItems.map((item) => (
              <div
                key={item.id}
                className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow dark:bg-[#1a2332] dark:border-[#2a3d56]"
              >
                <div className="aspect-square bg-gray-100 relative overflow-hidden">
                  {item.thumbnailUrl || item.imageUrl ? (
                    <img
                      src={item.thumbnailUrl || item.imageUrl}
                      alt={item.title}
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement
                        target.style.display = "none"
                        const parent = target.parentElement
                        if (parent) {
                          const placeholder = document.createElement("div")
                          placeholder.className =
                            "w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500"
                          placeholder.innerHTML =
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'
                          parent.appendChild(placeholder)
                        }
                      }}
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500">
                      <Image className="w-12 h-12 text-white" />
                    </div>
                  )}
                </div>

                <div className="p-4">
                  <h3 className="font-semibold text-gray-900 text-sm truncate mb-1 dark:text-[#f1f5f9]">{item.title}</h3>

                  <div className="flex items-center gap-1.5 text-xs text-gray-500 mb-1 dark:text-[#94a3b8]">
                    <FolderOpen className="w-3 h-3" />
                    <span className="capitalize">{item.album}</span>
                  </div>

                  <div className="flex items-center gap-1.5 text-xs text-gray-500 mb-3 dark:text-[#94a3b8]">
                    <Calendar className="w-3 h-3" />
                    <span>{formatDate(item.createdAt)}</span>
                  </div>

                  {item.description && (
                    <p className="text-xs text-gray-400 truncate mb-3">{item.description}</p>
                  )}

                  <div className="flex gap-2">
                    <button
                      onClick={() => openEditModal(item)}
                      className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 font-medium transition-colors"
                    >
                      <Pencil className="w-3 h-3" />
                      تعديل
                    </button>
                    <button
                      onClick={() => setDeleteConfirm(item.id)}
                      className="inline-flex items-center gap-1 text-xs text-red-600 hover:text-red-800 font-medium transition-colors"
                    >
                      <Trash2 className="w-3 h-3" />
                      حذف
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {modalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50" onClick={closeModal} />
          <div className="relative bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto dark:bg-[#1a2332] dark:border dark:border-[#2a3d56]">
            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-[#2a3d56]">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-[#f1f5f9]">
                {editingItem ? "تعديل صورة" : "إضافة صورة"}
              </h2>
              <button
                onClick={closeModal}
                className="text-gray-400 hover:text-gray-600 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-6 space-y-4">
              <div>
                <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1 dark:text-[#cbd5e1]">
                  العنوان
                </label>
                <input
                  type="text"
                  id="title"
                  required
                  value={form.title}
                  onChange={(e) => setForm({ ...form, title: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-[#111927] dark:border-[#3b4f6b] dark:text-[#f1f5f9]"
                  placeholder="أدخل عنوان الصورة"
                />
              </div>

              <div>
                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
                  الوصف
                </label>
                <textarea
                  id="description"
                  rows={3}
                  value={form.description}
                  onChange={(e) => setForm({ ...form, description: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
                  placeholder="أدخل وصف الصورة"
                />
              </div>

              <div>
                <ImageUpload
                  value={form.imageUrl}
                  onChange={(url) => { setForm(prev => ({ ...prev, imageUrl: url })) }}
                  folder="gallery"
                  label="رابط الصورة"
                />
              </div>

              <div>
                <ImageUpload
                  value={form.thumbnailUrl}
                  onChange={(url) => { setForm(prev => ({ ...prev, thumbnailUrl: url })) }}
                  folder="gallery"
                  label="رابط الصورة المصغرة"
                />
              </div>

              <div>
                <label htmlFor="album" className="block text-sm font-medium text-gray-700 mb-1">
                  الألبوم
                </label>
                <select
                  id="album"
                  value={form.album}
                  onChange={(e) => setForm({ ...form, album: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  {albumOptions.map((album) => (
                    <option key={album} value={album}>
                      {album.charAt(0).toUpperCase() + album.slice(1)}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
                  الوسوم
                </label>
                <input
                  type="text"
                  id="tags"
                  value={form.tags}
                  onChange={(e) => setForm({ ...form, tags: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="طبي، مناظر طبيعية، حرم جامعي"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={closeModal}
                  className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  disabled={saving}
                  className="flex-1 inline-flex items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Upload className="w-4 h-4" />
                  {saving ? "جاري الحفظ..." : editingItem ? "تحديث" : "إنشاء"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {deleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50" onClick={() => setDeleteConfirm(null)} />
          <div className="relative bg-white rounded-xl shadow-xl w-full max-w-sm p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                <Trash2 className="w-5 h-5 text-red-600" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">حذف الصورة</h3>
                <p className="text-sm text-gray-500">لا يمكن التراجع عن هذا الإجراء.</p>
              </div>
            </div>

            <p className="text-sm text-gray-600 mb-6">
              هل أنت متأكد من حذف هذه الصورة؟ سيتم إزيلتها نهائياً من المعرض.
            </p>

            <div className="flex gap-3">
              <button
                onClick={() => setDeleteConfirm(null)}
                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium"
              >
                إلغاء
              </button>
              <button
                onClick={() => handleDelete(deleteConfirm)}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
              >
                حذف
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}