import type { Metadata } from "next";
import Link from "next/link";
import { db, reports, users, eq, desc, count } from "@epicure/db";
import { ReportsQueue } from "@/components/admin/reports-queue";

export const metadata: Metadata = {};

const PAGE_SIZE = 100;

interface PageProps {
  searchParams: Promise<{ page?: string }>;
}

export default async function AdminReportsPage({ searchParams }: PageProps) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
  const offset = (page - 1) * PAGE_SIZE;

  const [rows, totalRow] = await Promise.all([
    db
      .select({
        id: reports.id,
        targetType: reports.targetType,
        targetId: reports.targetId,
        reason: reports.reason,
        createdAt: reports.createdAt,
        reporterName: users.name,
        reporterEmail: users.email,
      })
      .from(reports)
      .innerJoin(users, eq(reports.reporterId, users.id))
      .where(eq(reports.status, "pending"))
      .orderBy(desc(reports.createdAt))
      .limit(PAGE_SIZE)
      .offset(offset),
    db.select({ count: count() }).from(reports).where(eq(reports.status, "pending")),
  ]);
  const total = totalRow[0]?.count ?? 0;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Reports</h1>
        <p className="text-muted-foreground text-sm mt-1">
          Content flagged by users. Dismiss if unfounded, or review and take action manually.
        </p>
      </div>
      <ReportsQueue
        reports={rows.map((r) => ({ ...r, createdAt: r.createdAt.toISOString() }))}
      />

      <div className="flex gap-2">
        {page > 1 && (
          <Link
            href={`/admin/reports?page=${page - 1}`}
            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
          >
            Previous
          </Link>
        )}
        {offset + rows.length < total && (
          <Link
            href={`/admin/reports?page=${page + 1}`}
            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
          >
            Next
          </Link>
        )}
      </div>
    </div>
  );
}