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";

export default async function AdminSalesReportPage({
  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 } : {}) },
    orderBy: { createdAt: "asc" },
  });

  const revenue = orders.reduce((sum, o) => sum + o.total, 0);
  const discountGiven = orders.reduce((sum, o) => sum + o.discountAmount, 0);
  const shippingCollected = orders.reduce((sum, o) => sum + o.shippingFee, 0);
  const avgOrderValue = orders.length > 0 ? Math.round(revenue / orders.length) : 0;

  const byDay = new Map<string, { orders: number; revenue: number }>();
  for (const o of orders) {
    const key = o.createdAt.toISOString().slice(0, 10);
    const row = byDay.get(key) ?? { orders: 0, revenue: 0 };
    row.orders += 1;
    row.revenue += o.total;
    byDay.set(key, row);
  }
  const dailyRows = [...byDay.entries()].sort((a, b) => b[0].localeCompare(a[0]));

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Sales Report</h1>
      <p className="mt-1 text-sm text-stone-500">Paid orders only. Leave dates blank for all-time.</p>

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

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
        <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-xl font-bold text-stone-800">{orders.length}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Revenue</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{formatPaise(revenue)}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Avg order</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{formatPaise(avgOrderValue)}</p>
        </div>
        <div className="rounded-lg border border-rose-100 bg-white p-4">
          <p className="text-xs uppercase text-stone-500">Discounts given</p>
          <p className="mt-1 text-xl font-bold text-stone-800">{formatPaise(discountGiven)}</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>

      <div className="mt-6 overflow-hidden rounded-lg border border-rose-100 bg-white">
        {dailyRows.length === 0 ? (
          <p className="p-4 text-sm text-stone-500">No paid orders in this range.</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">Date</th>
                <th className="p-3">Orders</th>
                <th className="p-3">Revenue</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {dailyRows.map(([day, row]) => (
                <tr key={day}>
                  <td className="p-3 text-stone-700">{formatDate(new Date(`${day}T00:00:00`))}</td>
                  <td className="p-3 text-stone-600">{row.orders}</td>
                  <td className="p-3 font-medium text-stone-800">{formatPaise(row.revenue)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}