"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Plus, Edit, Trash2, X, Loader2 } from "lucide-react";

interface GalleryItem {
  id: string;
  title?: string;
  image: string;
  album?: string;
}

export default function AdminGallery() {
  const router = useRouter();
  const [images, setImages] = useState<GalleryItem[]>([]);
  const [deleting, setDeleting] = useState<string | null>(null);
  const [editTarget, setEditTarget] = useState<GalleryItem | null>(null);
  const [editTitle, setEditTitle] = useState("");
  const [saving, setSaving] = useState(false);

  const token = typeof window !== "undefined" ? localStorage.getItem("auth_token") : null;

  const load = () => {
    fetch("/api/gallery", {
      headers: token ? { Authorization: `Bearer ${token}` } : {},
    })
      .then((r) => r.json())
      .then((data) => { if (Array.isArray(data)) setImages(data); })
      .catch(() => {});
  };

  useEffect(load, []);

  const handleDelete = async (id: string) => {
    if (!confirm("آیا از حذف این تصویر اطمینان دارید؟")) return;
    setDeleting(id);
    await fetch(`/api/gallery/${id}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` } });
    setDeleting(null);
    load();
  };

  const handleEdit = (img: GalleryItem) => {
    setEditTarget(img);
    setEditTitle(img.title || "");
  };

  const handleSaveEdit = async () => {
    if (!editTarget) return;
    setSaving(true);
    await fetch(`/api/gallery/${editTarget.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
      body: JSON.stringify({ title: editTitle.trim() || null }),
    });
    setSaving(false);
    setEditTarget(null);
    load();
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-gray-900">مدیریت گالری</h1>
        <Button className="bg-[#2563EB] hover:bg-[#1D4ED8]" onClick={() => router.push("/dashboard/admin/gallery/new")}>
          <Plus className="h-4 w-4 ml-1" />
          تصویر جدید
        </Button>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {images.map((img) => (
          <div key={img.id} className="group relative aspect-square rounded-xl overflow-hidden border bg-gray-100">
            <img src={img.image} alt={img.title || ""} className="w-full h-full object-cover" />
            <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
              <Button
                variant="ghost"
                size="icon-xs"
                className="bg-black/50 hover:bg-black/70"
                onClick={() => handleEdit(img)}
              >
                <Edit className="h-3.5 w-3.5 text-white" />
              </Button>
              <Button
                variant="ghost"
                size="icon-xs"
                className="bg-black/50 hover:bg-black/70"
                onClick={() => handleDelete(img.id)}
                disabled={deleting === img.id}
              >
                <Trash2 className="h-3.5 w-3.5 text-white" />
              </Button>
            </div>
            {img.title && (
              <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 p-2">
                <p className="text-white text-xs truncate">{img.title}</p>
              </div>
            )}
          </div>
        ))}
      </div>

      {images.length === 0 && (
        <div className="text-center py-12 bg-white rounded-xl border">
          <p className="text-gray-500">تصویری آپلود نشده است</p>
        </div>
      )}
      {/* Edit Modal */}
      {editTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
          <div className="bg-white rounded-xl p-6 w-full max-w-sm mx-4 shadow-xl">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900">ویرایش تصویر</h2>
              <button onClick={() => { setEditTarget(null); }}>
                <X className="h-5 w-5 text-gray-400 hover:text-gray-600" />
              </button>
            </div>
            <img src={editTarget.image} alt="" className="w-full h-40 object-cover rounded-lg mb-4" />
            <input
              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB] mb-4"
              placeholder="توضیحات"
              value={editTitle}
              onChange={(e) => setEditTitle(e.target.value)}
            />
            <div className="flex gap-3">
              <Button className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white flex-1" onClick={handleSaveEdit} disabled={saving}>
                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "ذخیره"}
              </Button>
              <Button variant="outline" className="flex-1" onClick={() => { setEditTarget(null); }}>
                انصراف
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}