import { AdminRowActions } from "@/admin/components/AdminRowActions";
import { CategoryForm } from "@/admin/components/CategoryForm";
import { AdminAutoLayout } from "@/admin/layout/AdminAutoLayout";
import { deleteCategoryAction } from "@/lib/actions";
import { requireSuperAdmin } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

type AdminCategoriesPageProps = {
  searchParams: Promise<{ error?: string }>;
};

const errorMessages: Record<string, string> = {
  required: "Please enter a category name with at least 2 characters."
};

export default async function AdminCategoriesPage({ searchParams }: AdminCategoriesPageProps) {
  await requireSuperAdmin();
  const params = await searchParams;
  const categories = await prisma.category.findMany({ orderBy: { name: "asc" } });

  return (
    <AdminAutoLayout
      description="Organize articles and videos so visitors can browse content easily."
      error={params.error}
      errorMessages={errorMessages}
      eyebrow="Discovery taxonomy"
      title="Categories"
      width="full"
    >
      <div className="main-layout">
        <CategoryForm />

        <section className="glass-panel admin-staff-panel">
          <div className="admin-panel-heading">
            <div>
              <span className="pill">{categories.length} total</span>
              <h2>Existing categories</h2>
            </div>
          </div>

          <div className="admin-staff-list">
            {categories.map((category) => (
              <article className="admin-staff-card" key={category.id}>
                <header className="admin-staff-card__head">
                  <span className="pill">Category</span>
                  <h3>{category.name}</h3>
                  <p className="muted admin-staff-card__bio">
                    {category.description || "No description yet."}
                  </p>
                </header>

                <CategoryForm category={category} embedded />

                <div className="admin-staff-card__actions">
                  <AdminRowActions
                    deleteAction={deleteCategoryAction}
                    deleteConfirm={`Delete category "${category.name}"?`}
                    deleteId={category.id}
                    viewHref={`/admin/categories/${category.id}/view`}
                  />
                </div>
              </article>
            ))}
            {categories.length === 0 ? (
              <p className="admin-empty-state">No categories yet. Create your first one on the left.</p>
            ) : null}
          </div>
        </section>
      </div>
    </AdminAutoLayout>
  );
}