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

export default async function AdminHeroImagesPage() {
  const heroImages = await prisma.heroImage.findMany({
    orderBy: { sortOrder: "asc" },
  });

  return (
    <div>
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-heading">
            Hero Images
          </h1>
          <p className="mt-1 text-sm text-body">
            Kelola gambar slider hero halaman Home.
          </p>
        </div>
        <Link
          href="/admin/hero-images/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 Gambar
        </Link>
      </div>

      <div className="mt-6">
        {heroImages.length === 0 ? (
          <div className="rounded-2xl bg-white shadow-sm">
            <EmptyState
              message="Belum ada gambar hero. Halaman Home akan memakai gambar bawaan."
              icon={ImageIcon}
            />
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            {heroImages.map((hero) => (
              <div
                key={hero.id}
                className="group relative overflow-hidden rounded-2xl bg-white shadow-sm"
              >
                <div className="aspect-video">
                  <img
                    src={hero.imageUrl}
                    alt=""
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="absolute inset-0 flex items-end justify-end bg-black/0 p-2 transition group-hover:bg-black/30">
                  <div className="opacity-0 transition group-hover:opacity-100">
                    <DeleteButton
                      action={deleteHeroImage.bind(null, hero.id)}
                      confirmMessage="Hapus gambar hero ini?"
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}