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

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

  return (
    <div>
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-heading">
            Klien &amp; Mitra
          </h1>
          <p className="mt-1 text-sm text-body">
            Kelola daftar logo klien dan mitra.
          </p>
        </div>
        <Link
          href="/admin/clients/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 Klien
        </Link>
      </div>

      <div className="mt-6 overflow-hidden rounded-2xl bg-white shadow-sm">
        {clients.length === 0 ? (
          <EmptyState message="Belum ada klien atau mitra." icon={Building2} />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full min-w-[520px] text-left text-sm">
              <thead className="bg-bg-light text-xs uppercase text-muted">
                <tr>
                  <th className="px-6 py-3">Logo</th>
                  <th className="px-6 py-3">Nama</th>
                  <th className="px-6 py-3">Unggulan</th>
                  <th className="px-6 py-3 text-right">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {clients.map((client) => (
                  <tr key={client.id}>
                    <td className="px-6 py-4">
                      <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-bg-light">
                        {client.logoUrl ? (
                          <img
                            src={client.logoUrl}
                            alt={client.name}
                            className="h-full w-full object-contain"
                          />
                        ) : (
                          <Building2 className="h-5 w-5 text-gray-300" />
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 font-medium text-heading">
                      {client.name}
                    </td>
                    <td className="px-6 py-4">
                      {client.isFeatured ? (
                        <span className="rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-merah-ranata">
                          Unggulan
                        </span>
                      ) : (
                        <span className="text-muted">-</span>
                      )}
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center justify-end gap-2">
                        <Link
                          href={`/admin/clients/${client.id}/edit`}
                          className="rounded-lg p-2 text-gray-500 transition hover:bg-bg-light hover:text-heading"
                          aria-label="Edit"
                        >
                          <Pencil className="h-4 w-4" />
                        </Link>
                        <DeleteButton
                          action={deleteClient.bind(null, client.id)}
                          confirmMessage={`Hapus klien "${client.name}"?`}
                        />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}