import { db } from "@/db";
import { forms } from "@/db/schema";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Plus } from "lucide-react";
import { redirect } from "next/navigation";

export const dynamic = "force-dynamic";

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

  return (
    <div className="space-y-6 max-w-4xl mx-auto p-4 md:p-6 pb-12">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Forms</h1>
          <p className="text-muted-foreground mt-1">
            Manage your custom forms and view submissions.
          </p>
        </div>
        <form action={async () => {
          "use server";
          const [newForm] = await db.insert(forms).values({
            title: "New Form",
            description: "",
          }).returning();
          redirect(`/admin/form/${newForm.id}`);
        }}>
          <Button type="submit">
            <Plus className="mr-2 h-4 w-4" />
            Create Form
          </Button>
        </form>
      </div>

      <div className="border rounded-md">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Title</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {formsList.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className="h-24 text-center text-muted-foreground">
                  No forms found. Create one to get started.
                </TableCell>
              </TableRow>
            ) : (
              formsList.map((form) => (
                <TableRow key={form.id}>
                  <TableCell className="font-medium">{form.title}</TableCell>
                  <TableCell>
                    {form.isOpen ? (
                      <Badge variant="default">Open</Badge>
                    ) : (
                      <Badge variant="secondary">Closed</Badge>
                    )}
                  </TableCell>
                  <TableCell>
                    {form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
                  </TableCell>
                  <TableCell className="text-right space-x-2">
                    <Button variant="outline" asChild size="sm">
                      <Link href={`/admin/form/${form.id}`}>Edit</Link>
                    </Button>
                    <Button variant="outline" asChild size="sm">
                      <Link href={`/admin/form/${form.id}/result`}>Results</Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}