import { prisma } from "@/lib/prisma";
import { formatPaise, formatDate } from "@/lib/format";
import { parseDateRange, dateRangeWhere } from "@/lib/reports";
import ReportsTabs from "@/components/admin/ReportsTabs";
import ReportDateFilter from "@/components/admin/ReportDateFilter";
import ScrollableTable from "@/components/admin/ScrollableTable";

export default async function AdminCustomerSalesReportPage({
  searchParams,
}: {
  searchParams: Promise<{ from?: string; to?: string }>;
}) {
  const params = await searchParams;
  const range = parseDateRange(params);
  const createdAt = dateRangeWhere(range);

  const orders = await prisma.order.findMany({
    where: { status: "paid", ...(createdAt ? { createdAt } : {}) },
    select: { email: true, customerName: true, total: true, createdAt: true },
  });

  type Row = { email: string; name: string; orders: number; revenue: number; lastOrder: Date };
  const byEmail = new Map<string, Row>();
  for (const o of orders) {
    const row = byEmail.get(o.email) ?? { email: o.email, name: o.customerName, orders: 0, revenue: 0, lastOrder: o.createdAt };
    row.orders += 1;
    row.revenue += o.total;
    if (o.createdAt > row.lastOrder) row.lastOrder = o.createdAt;
    byEmail.set(o.email, row);
  }
  const rows = [...byEmail.values()].sort((a, b) => b.revenue - a.revenue);

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Customer Sales</h1>
      <p className="mt-1 text-sm text-stone-500">Every customer with a paid order, ranked by revenue. Leave dates blank for all-time.</p>

      <ReportsTabs active="/iv-manage-84x2/reports/customers" />
      <ReportDateFilter action="/iv-manage-84x2/reports/customers" from={range.fromStr} to={range.toStr} />

      {rows.length === 0 ? (
        <p className="rounded-lg border border-rose-100 bg-white p-4 text-sm text-stone-500">No paid orders in this range.</p>
      ) : (
        <ScrollableTable>
          <table className="w-full min-w-[700px] text-sm">
            <thead className="sticky top-0 z-10 bg-rose-50 text-left text-xs uppercase text-stone-500">
              <tr>
                <th className="p-3">Customer</th>
                <th className="p-3">Orders</th>
                <th className="p-3">Revenue</th>
                <th className="p-3">Avg. order</th>
                <th className="p-3">Last order</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {rows.map((r) => (
                <tr key={r.email}>
                  <td className="whitespace-nowrap p-3">
                    <p className="font-medium text-stone-800">{r.name}</p>
                    <p className="text-xs text-stone-500">{r.email}</p>
                  </td>
                  <td className="whitespace-nowrap p-3 text-stone-600">{r.orders}</td>
                  <td className="whitespace-nowrap p-3 font-medium text-stone-800">{formatPaise(r.revenue)}</td>
                  <td className="whitespace-nowrap p-3 text-stone-600">{formatPaise(Math.round(r.revenue / r.orders))}</td>
                  <td className="whitespace-nowrap p-3 text-stone-500">{formatDate(r.lastOrder)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </ScrollableTable>
      )}
    </div>
  );
}