import { db } from "@/db";
import Link from "next/link";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { HtmlDisplay } from "@/components/html-display";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getGuildMemberRoles } from "@/app/actions/discord";

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)],
  });

  const session = await getServerSession(authOptions);
  const discordId = (session?.user as { discordId?: string })?.discordId;

  // Only fetch roles if at least one form has role restrictions
  const hasRoleRestrictions = formsList.some(
    (f) => (f.allowedRoles?.length ?? 0) > 0 || (f.deniedRoles?.length ?? 0) > 0
  );

  let userRoles: string[] = [];
  if (discordId && hasRoleRestrictions) {
    try {
      userRoles = await getGuildMemberRoles(discordId);
    } catch (e) {
      console.error(e);
    }
  }

  const visibleForms = formsList.filter((form) => {
    const allowedRoles = form.allowedRoles || [];
    const deniedRoles = form.deniedRoles || [];

    if (allowedRoles.length === 0 && deniedRoles.length === 0) return true;

    // If user is not logged in but there are role restrictions, hide it.
    if (!discordId) return false;

    let isAllowed = allowedRoles.length === 0;
    if (allowedRoles.length > 0) {
      isAllowed = userRoles.some(r => allowedRoles.includes(r));
    }

    let isDenied = false;
    if (deniedRoles.length > 0) {
      isDenied = userRoles.some(r => deniedRoles.includes(r));
    }

    return isAllowed && !isDenied;
  });

  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>
      {visibleForms.length === 0 ? (
        <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
      ) : (
        <div className="flex flex-col gap-4">
          {visibleForms.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 && (
                    <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
                      <HtmlDisplay html={form.description} />
                    </div>
                  )}
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}