import Link from "next/link";
import { AdminPageHeader } from "@/components/admin/AdminBreadcrumbs";
import { AdminTable } from "@/components/admin/AdminTable";
import { EmptyState } from "@/components/admin/EmptyState";
import { StatusBadge } from "@/components/admin/StatusBadge";
import { formatDate, pluralize } from "@/lib/client-api";
import { templateService } from "@/modules/templates";
import { Button } from "@/components/ui/button";

export const dynamic = "force-dynamic";
export const metadata = { title: "Templates · Admin" };

export default async function AdminTemplatesPage() {
  const result = await templateService.list({
    q: undefined,
    category: undefined,
    status: undefined,
    sort: "newest",
    page: 1,
    pageSize: 50,
  });
  const { items, total } = result;

  return (
    <div className="space-y-6">
      <AdminPageHeader
        breadcrumbs={[{ label: "Admin", href: "/admin" }, { label: "Templates" }]}
        title="Templates"
        description="Define the templates that customers use to build events."
        actions={
          <Link href="/admin/templates/create">
            <Button size="sm">+ New template</Button>
          </Link>
        }
      />

      {items.length === 0 ? (
        <EmptyState
          title="No templates yet"
          description="Create your first template to get started."
          action={
            <Link href="/admin/templates/create">
              <Button size="sm">Create template</Button>
            </Link>
          }
        />
      ) : (
        <AdminTable
          rows={items}
          rowKey={(t) => t.id}
          columns={[
            {
              key: "name",
              header: "Name",
              render: (t) => (
                <Link
                  href={`/admin/templates/${t.id}`}
                  className="font-medium text-foreground hover:text-primary"
                >
                  {t.name}
                </Link>
              ),
            },
            {
              key: "category",
              header: "Category",
              render: (t) => (
                <span className="text-xs capitalize">{t.category}</span>
              ),
            },
            {
              key: "status",
              header: "Status",
              render: (t) => <StatusBadge status={t.status} />,
            },
            {
              key: "version",
              header: "Version",
              render: (t) => (
                <span className="text-xs text-muted">v{t.version}</span>
              ),
            },
            {
              key: "modules",
              header: "Modules",
              render: (t) => (
                <span className="text-xs text-muted">
                  {pluralize(t.modules.filter((m) => m.enabled).length, "module")}
                </span>
              ),
            },
            {
              key: "created",
              header: "Created",
              render: (t) => (
                <span className="text-xs text-muted">
                  {formatDate(t.createdAt)}
                </span>
              ),
            },
            {
              key: "updated",
              header: "Updated",
              render: (t) => (
                <span className="text-xs text-muted">
                  {formatDate(t.updatedAt)}
                </span>
              ),
            },
          ]}
        />
      )}

      <p className="text-xs text-muted">
        {total} total template{total === 1 ? "" : "s"}
      </p>
    </div>
  );
}