import { prisma } from "@/lib/prisma";
import { Card, CardContent } from "@/components/ui/card";
import { CommentActions } from "./comment-actions";

export default async function AdminCommentsPage({
  searchParams,
}: {
  searchParams: Promise<{ status?: string }>;
}) {
  const { status } = await searchParams;
  const where = status ? { status: status as "PENDING" | "APPROVED" | "REJECTED" } : {};
  const comments = await prisma.comment.findMany({
    where,
    orderBy: { createdAt: "desc" },
    include: {
      user: { select: { phone: true } },
      blogPost: { select: { titleFa: true, slug: true } },
    },
  });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">نظرات</h1>
      <div className="flex gap-2 mb-4">
        <a
          href="/admin/comments"
          className={`px-3 py-1 rounded text-sm ${!status ? "bg-primary text-primary-foreground" : "bg-muted"}`}
        >
          همه
        </a>
        <a
          href="/admin/comments?status=PENDING"
          className={`px-3 py-1 rounded text-sm ${status === "PENDING" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
        >
          در انتظار
        </a>
        <a
          href="/admin/comments?status=APPROVED"
          className={`px-3 py-1 rounded text-sm ${status === "APPROVED" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
        >
          تأیید شده
        </a>
        <a
          href="/admin/comments?status=REJECTED"
          className={`px-3 py-1 rounded text-sm ${status === "REJECTED" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
        >
          رد شده
        </a>
      </div>
      <Card>
        <CardContent className="p-0">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b">
                <th className="text-right p-4">کاربر</th>
                <th className="text-right p-4">مربوط به</th>
                <th className="text-right p-4">محتوا</th>
                <th className="text-right p-4">وضعیت</th>
                <th className="text-right p-4">تاریخ</th>
                <th className="text-right p-4">عملیات</th>
              </tr>
            </thead>
            <tbody>
              {comments.map((c) => (
                <tr key={c.id} className="border-b last:border-0">
                  <td className="p-4">{c.user.phone}</td>
                  <td className="p-4">
                    {c.blogPost ? `پست: ${c.blogPost.titleFa}` : `فال: ${c.readingId ?? "-"}`}
                  </td>
                  <td className="p-4 max-w-xs truncate">{c.content}</td>
                  <td className="p-4">{c.status}</td>
                  <td className="p-4">{new Date(c.createdAt).toLocaleDateString("fa-IR")}</td>
                  <td className="p-4">
                    <CommentActions commentId={c.id} status={c.status} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
}