import { CategoryForm } from "@/components/dashboard/catalog/CategoryForm";
import { EditLockIndicator } from "@/components/dashboard/EditLockIndicator";
import { getCategoryById, getAllCategories } from "@/actions/catalog";
import { notFound } from "next/navigation";

export default async function EditCategoryPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  if (!id) {
    return notFound();
  }

  const [catResponse, allCatsResponse] = await Promise.all([
    getCategoryById(id),
    getAllCategories({}),
  ]);

  if (!catResponse.success || !catResponse.data) {
    return notFound();
  }

  const category = catResponse.data;
  const allCategories = (allCatsResponse.success ? allCatsResponse.data : [])
    .filter((c): c is { id: string; name: string } => !!c.id && !!c.name)
    .map(c => ({
      id: c.id,
      name: c.name
    }));

  return (
    <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div className="mb-8 text-center">
        <h1 className="text-2xl font-bold">Kategorie bearbeiten</h1>
        <p className="text-muted-foreground">
          Ändern Sie die Details der Kategorie &quot;{category.name}&quot;.
        </p>
      </div>

      <EditLockIndicator entityType="category" entityId={id} />

      <CategoryForm initialData={category} categories={allCategories} />
    </div>
  );
}