import prisma from "@/lib/prisma";
import ReportActions from "./ReportActions";

export default async function AdminReportsPage() {
  const reports = await prisma.report.findMany({
    orderBy: { created_at: "desc" },
  });

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Reports Management</h1>

      {reports.length === 0 ? (
        <div className="bg-surface rounded-lg p-8 text-center text-text-muted">
          No reports found.
        </div>
      ) : (
        <div className="bg-surface rounded-lg overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead>
                <tr className="border-b border-surface-light text-text-muted text-sm">
                  <th className="p-4 font-medium">ID</th>
                  <th className="p-4 font-medium">Reporter (User ID)</th>
                  <th className="p-4 font-medium">Target Type</th>
                  <th className="p-4 font-medium">Target ID</th>
                  <th className="p-4 font-medium">Reason</th>
                  <th className="p-4 font-medium">Date</th>
                  <th className="p-4 font-medium">Actions</th>
                </tr>
              </thead>
              <tbody>
                {reports.map((report) => (
                  <tr
                    key={report.id}
                    className="border-b border-surface-light last:border-0 hover:bg-surface-light/50"
                  >
                    <td className="p-4 text-text-muted font-mono text-sm">
                      {report.id}
                    </td>
                    <td className="p-4 text-sm">{report.user_id}</td>
                    <td className="p-4">
                      <span className="inline-block px-2 py-0.5 rounded text-xs font-medium bg-blue-500/20 text-blue-400">
                        {report.reportable_type}
                      </span>
                    </td>
                    <td className="p-4 text-text-muted font-mono text-sm">
                      {report.reportable_id}
                    </td>
                    <td className="p-4 text-sm text-text-muted max-w-xs truncate">
                      {report.reason ?? "-"}
                    </td>
                    <td className="p-4 text-text-muted text-sm">
                      {new Date(report.created_at).toLocaleString()}
                    </td>
                    <td className="p-4">
                      <ReportActions reportId={report.id} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}