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

export const metadata: Metadata = { title: "Reports – Admin" };

export default async function AdminReportsPage() {
  const rows = await 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(100);

  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>
  );
}