import { db } from "@/db";
import Link from "next/link";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";

export const dynamic = "force-dynamic";

export default async function FormsListingPage() {
  const formsList = await db.query.forms.findMany({
    where: (f, { eq }) => eq(f.isOpen, true),
    orderBy: (f, { desc }) => [desc(f.createdAt)],
  });

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
      <h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
      {formsList.length === 0 ? (
        <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {formsList.map((form) => (
            <Link key={form.id} href={`/form/${form.id}`}>
              <Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
                <CardHeader>
                  <CardTitle>{form.title}</CardTitle>
                  {form.description && (
                    <CardDescription className="line-clamp-3">
                      {form.description}
                    </CardDescription>
                  )}
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}