import { db } from "@/db";
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";
import { DeleteFormButton } from "@/components/delete-buttons";
import { AdminShellServer } from "@/components/admin-shell-server";

export const dynamic = "force-dynamic";

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

  return (
    <AdminShellServer>
      <div className="space-y-6 p-4 md:p-6 pb-12 w-full">
        <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 { forms } = await import("@/db/schema");
            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} className="group hover:bg-muted/50 transition-colors">
                    <TableCell className="p-0 align-middle">
                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 font-medium h-full w-full">
                        {form.title}
                      </Link>
                    </TableCell>
                    <TableCell className="p-0 align-middle">
                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
                        {form.isOpen ? (
                          <Badge variant="default">Open</Badge>
                        ) : (
                          <Badge variant="secondary">Closed</Badge>
                        )}
                      </Link>
                    </TableCell>
                    <TableCell className="p-0 align-middle">
                      <Link href={`/admin/form/${form.id}`} className="flex items-center p-3 h-full w-full">
                        {form.createdAt ? new Date(form.createdAt).toLocaleDateString() : 'N/A'}
                      </Link>
                    </TableCell>
                    <TableCell className="text-right space-x-2 p-3">
                      <Button variant="outline" asChild size="sm">
                        <Link href={`/admin/form/${form.id}/result`}>Results</Link>
                      </Button>
                      <DeleteFormButton formId={form.id} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>
    </AdminShellServer>
  );
}