import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { formatDate } from "@/lib/format";
import { unblockCustomer } from "@/lib/actions/customers";
import CustomersTabs from "@/components/admin/CustomersTabs";

export default async function AdminBlockedCustomersPage() {
  const customers = await prisma.customer.findMany({
    where: { blocked: true },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Blocked Customers</h1>
      <p className="mt-1 text-sm text-stone-500">
        Blocked accounts can&apos;t sign in or request a new login code. Guest checkout under the same email isn&apos;t restricted yet.
      </p>

      <CustomersTabs active="/iv-manage-84x2/customers/blocked" />

      {customers.length === 0 ? (
        <p className="rounded-lg border border-rose-100 bg-white p-4 text-sm text-stone-500">No blocked customers.</p>
      ) : (
        <div className="overflow-hidden rounded-lg border border-rose-100 bg-white">
          <table className="w-full text-sm">
            <thead className="bg-rose-50/60 text-left text-xs uppercase text-stone-500">
              <tr>
                <th className="p-3">Email</th>
                <th className="p-3">Reason</th>
                <th className="p-3">Blocked since</th>
                <th className="p-3"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {customers.map((c) => (
                <tr key={c.id}>
                  <td className="p-3">
                    <Link href={`/iv-manage-84x2/customers/${c.id}`} className="font-medium text-rose-700 hover:underline">
                      {c.email}
                    </Link>
                  </td>
                  <td className="p-3 text-stone-600">{c.blockedReason ?? "—"}</td>
                  <td className="p-3 text-stone-500">{formatDate(c.createdAt)}</td>
                  <td className="p-3 text-right">
                    <form action={unblockCustomer.bind(null, c.id)}>
                      <button type="submit" className="text-xs font-medium text-rose-700 hover:underline">
                        Unblock
                      </button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}