import Link from "next/link";
import { getSession } from "@/lib/auth/session";
import { prisma } from "@/lib/prisma";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

const PAGE_SIZE = 10;

export default async function PanelReadingsPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const session = await getSession();
  if (!session?.user?.id) return null;
  const { page } = await searchParams;
  const pageNum = Math.max(1, parseInt(page ?? "1", 10) || 1);
  const skip = (pageNum - 1) * PAGE_SIZE;

  const [readings, total] = await Promise.all([
    prisma.reading.findMany({
      where: { userId: session.user.id },
      orderBy: { createdAt: "desc" },
      skip,
      take: PAGE_SIZE,
      select: {
        id: true,
        spreadType: true,
        status: true,
        createdAt: true,
      },
    }),
    prisma.reading.count({ where: { userId: session.user.id } }),
  ]);

  const totalPages = Math.ceil(total / PAGE_SIZE);

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">فال‌های من</h1>
      {readings.length === 0 ? (
        <Card>
          <CardContent className="py-12 text-center text-muted-foreground">
            هنوز فالی ندارید. برای گرفتن فال از{" "}
            <Link href="/reading" className="underline">
              اینجا
            </Link>{" "}
            شروع کنید.
          </CardContent>
        </Card>
      ) : (
        <>
          <ul className="space-y-4">
            {readings.map((r) => (
              <li key={r.id}>
                <Card>
                  <CardContent className="py-4 flex flex-wrap items-center justify-between gap-4">
                    <div>
                      <p className="font-medium">{r.spreadType}</p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(r.createdAt).toLocaleDateString("fa-IR")} — وضعیت:{" "}
                        {r.status === "PAID" ? "در انتظار پاسخ تیم" : r.status}
                      </p>
                    </div>
                    <Button asChild variant="outline" size="sm">
                      <Link href={`/panel/readings/${r.id}`}>مشاهده</Link>
                    </Button>
                  </CardContent>
                </Card>
              </li>
            ))}
          </ul>
          {totalPages > 1 && (
            <div className="flex justify-center gap-2 mt-8">
              {pageNum > 1 && (
                <Button asChild variant="outline" size="sm">
                  <Link href={`/panel/readings?page=${pageNum - 1}`}>قبلی</Link>
                </Button>
              )}
              <span className="py-2 text-sm text-muted-foreground">
                صفحه {pageNum} از {totalPages}
              </span>
              {pageNum < totalPages && (
                <Button asChild variant="outline" size="sm">
                  <Link href={`/panel/readings?page=${pageNum + 1}`}>بعدی</Link>
                </Button>
              )}
            </div>
          )}
        </>
      )}
    </div>
  );
}