import type { Metadata } from "next";
import Link from "next/link";
import { PageContainer } from "@/components/layout/PageContainer";
import { EmptyState } from "@/components/admin/EmptyState";
import { UseTemplateButton } from "@/components/dashboard/UseTemplateButton";
import { FavoriteTemplateButton } from "@/components/templates/FavoriteTemplateButton";
import { TemplateCard } from "@/components/templates/TemplateCard";
import { getCurrentUser } from "@/modules/auth";
import { favoriteTemplateService } from "@/modules/favorites";
import { templateService } from "@/modules/templates";

export const dynamic = "force-dynamic";
export const metadata: Metadata = {
  title: "Templates · Event Manager",
};

export default async function TemplatesPage() {
  const templates = await templateService.listPublished();
  const user = await getCurrentUser();
  const favoriteIds = user
    ? new Set(await favoriteTemplateService.listTemplateIds(user.id))
    : new Set<string>();
  return (
    <PageContainer>
      <header className="mx-auto max-w-2xl text-center">
        <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
          Templates for every occasion
        </h1>
        <p className="mt-3 text-muted">
          Pick a template configured by our team to start planning your event
          in minutes.
        </p>
      </header>

      {templates.length === 0 ? (
        <div className="mt-12">
          <EmptyState
            title="No published templates yet"
            description="Once the admin publishes templates they'll appear here."
          />
        </div>
      ) : (
        <ul className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {templates.map((t) => {
            const isFav = favoriteIds.has(t.id);
            const favoriteButton = user ? (
              <FavoriteTemplateButton
                templateId={t.id}
                initialFavorited={isFav}
                className="absolute right-3 top-3 z-20"
              />
            ) : null;
            const actions = (
              <>
                <UseTemplateButton
                  templateId={t.id}
                  templateName={t.name}
                  requireEventDate={t.settings.requireEventDate}
                  requireLocation={t.settings.requireLocation}
                />
                <Link
                  href={`/events`}
                  className="mt-2 block text-center text-xs text-muted hover:text-foreground"
                >
                  My events
                </Link>
              </>
            );
            return (
              <li key={t.id} className="h-full">
                <TemplateCard
                  template={t as never}
                  isFavorited={isFav}
                  favoriteButton={favoriteButton}
                  actions={actions}
                />
              </li>
            );
          })}
        </ul>
      )}
    </PageContainer>
  );
}