import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { formatPaise, formatDate } from "@/lib/format";
import StatusBadge from "@/components/admin/StatusBadge";

export default async function AdminCustomerDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const customer = await prisma.customer.findUnique({
    where: { id },
    include: {
      group: true,
      orders: { orderBy: { createdAt: "desc" } },
    },
  });
  if (!customer) notFound();

  const paidTotal = customer.orders.filter((o) => o.status === "paid").reduce((sum, o) => sum + o.total, 0);

  return (
    <div>
      <Link href="/iv-manage-84x2/customers" className="text-sm text-rose-700 hover:underline">
        ← All customers
      </Link>

      <div className="mt-2 flex items-center justify-between">
        <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">{customer.email}</h1>
        {customer.blocked && <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">Blocked</span>}
      </div>
      {customer.blocked && customer.blockedReason && <p className="mt-1 text-sm text-red-700">Reason: {customer.blockedReason}</p>}

      <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Group</p>
          <p className="mt-1 text-sm font-semibold text-stone-800">{customer.group?.name ?? "No group"}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Orders</p>
          <p className="mt-1 text-sm font-semibold text-stone-800">{customer.orders.length}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Total spent</p>
          <p className="mt-1 text-sm font-semibold text-stone-800">{formatPaise(paidTotal)}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Joined</p>
          <p className="mt-1 text-sm font-semibold text-stone-800">{formatDate(customer.createdAt)}</p>
        </div>
      </div>

      <h2 className="mt-8 text-lg font-semibold text-stone-800">Order history</h2>
      <div className="mt-3 overflow-hidden rounded-lg border border-rose-100 bg-white">
        {customer.orders.length === 0 ? (
          <p className="p-4 text-sm text-stone-500">No orders yet.</p>
        ) : (
          <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">Order</th>
                <th className="p-3">Total</th>
                <th className="p-3">Status</th>
                <th className="p-3">Date</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {customer.orders.map((o) => (
                <tr key={o.id}>
                  <td className="p-3">
                    <Link href={`/iv-manage-84x2/orders/${o.id}`} className="font-medium text-rose-700 hover:underline">
                      {o.orderNumber}
                    </Link>
                  </td>
                  <td className="p-3 text-stone-600">{formatPaise(o.total)}</td>
                  <td className="p-3"><StatusBadge status={o.status} /></td>
                  <td className="p-3 text-stone-500">{formatDate(o.createdAt)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}