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

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

  const [paidOrders, shippedOrders] = await Promise.all([
    prisma.order.findMany({
      where: { status: "paid", ...(createdAt ? { createdAt } : {}) },
      select: { shippingFee: true },
    }),
    prisma.order.findMany({
      where: { status: { in: ["shipped", "delivered"] }, ...(createdAt ? { createdAt } : {}) },
      include: { courierPartner: true },
    }),
  ]);

  const shippingCollected = paidOrders.reduce((sum, o) => sum + o.shippingFee, 0);
  const freeShippingCount = paidOrders.filter((o) => o.shippingFee === 0).length;
  const avgShippingFee = paidOrders.length > 0 ? Math.round(shippingCollected / paidOrders.length) : 0;

  const byCourier = new Map<string, number>();
  for (const o of shippedOrders) {
    const key = o.courierPartner?.name ?? "No courier recorded";
    byCourier.set(key, (byCourier.get(key) ?? 0) + 1);
  }
  const courierRows = [...byCourier.entries()].sort((a, b) => b[1] - a[1]);

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Shipping Report</h1>
      <p className="mt-1 text-sm text-stone-500">Shipping fees collected and shipment volume by courier. Leave dates blank for all-time.</p>

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

      <div className="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">Paid orders</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{paidOrders.length}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Shipping collected</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{formatPaise(shippingCollected)}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Avg. shipping fee</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{formatPaise(avgShippingFee)}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Free-shipping orders</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{freeShippingCount}</p>
        </div>
      </div>

      <h2 className="mt-8 text-sm font-semibold text-stone-700">Shipments by courier ({shippedOrders.length} shipped or delivered)</h2>
      <div className="mt-3 overflow-hidden rounded-lg border border-rose-100 bg-white">
        {courierRows.length === 0 ? (
          <p className="p-4 text-sm text-stone-500">Nothing shipped in this range 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">Courier</th>
                <th className="p-3">Shipments</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {courierRows.map(([name, count]) => (
                <tr key={name}>
                  <td className="p-3 font-medium text-stone-800">{name}</td>
                  <td className="p-3 text-stone-600">{count}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}