import Link from "next/link";
import { Plus, Pencil, Image as ImageIcon } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { DeleteButton } from "@/components/admin/DeleteButton";
import { EmptyState } from "@/components/ui/EmptyState";
import { deleteGallery } from "./actions";

export default async function AdminGalleriesPage() {
  const galleries = await prisma.gallery.findMany({
    orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
  });

  return (
    <div>
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-heading">Galeri</h1>
          <p className="mt-1 text-sm text-body">
            Kelola koleksi foto galeri.
          </p>
        </div>
        <Link
          href="/admin/galleries/create"
          className="flex items-center gap-2 rounded-full bg-merah-ranata px-4 py-2 text-sm font-semibold text-white transition hover:bg-merah-hover"
        >
          <Plus className="h-4 w-4" />
          Tambah Foto
        </Link>
      </div>

      <div className="mt-6">
        {galleries.length === 0 ? (
          <div className="rounded-2xl bg-white shadow-sm">
            <EmptyState message="Belum ada foto galeri." icon={ImageIcon} />
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            {galleries.map((photo) => (
              <div
                key={photo.id}
                className="group relative overflow-hidden rounded-2xl bg-white shadow-sm"
              >
                <div className="aspect-[4/3]">
                  <img
                    src={photo.imageUrl}
                    alt={photo.title ?? ""}
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/70 via-black/10 to-transparent opacity-0 transition group-hover:opacity-100">
                  <div className="flex w-full items-center justify-between p-3">
                    <span className="truncate text-xs font-medium text-white">
                      {photo.title ?? "Tanpa judul"}
                    </span>
                    <div className="flex shrink-0 items-center gap-1">
                      <Link
                        href={`/admin/galleries/${photo.id}/edit`}
                        className="rounded-lg bg-white/90 p-1.5 text-gray-700 transition hover:bg-white"
                        aria-label="Edit"
                      >
                        <Pencil className="h-3.5 w-3.5" />
                      </Link>
                      <DeleteButton
                        action={deleteGallery.bind(null, photo.id)}
                        confirmMessage={`Hapus foto "${photo.title ?? "ini"}"?`}
                      />
                    </div>
                  </div>
                </div>
                {photo.isFeatured && (
                  <span className="absolute left-2 top-2 rounded-full bg-merah-ranata px-2 py-0.5 text-[10px] font-semibold text-white">
                    Unggulan
                  </span>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}