import type { Category } from "@prisma/client";
import { AdminAutoTextarea } from "@/admin/components/AdminAutoTextarea";
import { AdminFormField, AdminFormSection } from "@/admin/components/AdminFormField";
import { saveCategoryAction } from "@/lib/actions";

type CategoryEditor = Pick<Category, "id" | "name" | "description">;

type CategoryFormProps = {
  category?: CategoryEditor | null;
  embedded?: boolean;
};

export function CategoryForm({ category, embedded = false }: CategoryFormProps) {
  const isEdit = Boolean(category);

  return (
    <form
      action={saveCategoryAction}
      className={`admin-form${embedded ? " admin-form--embedded" : " glass-panel"}`}
    >
      {category ? <input name="id" type="hidden" value={category.id} /> : null}

      <AdminFormSection title={isEdit ? "Edit category" : "New category"} />

      <AdminFormField hint="Shown on category pages and filters." label="Name">
        <input
          className="admin-form-control"
          defaultValue={category?.name}
          name="name"
          placeholder="Example: Culture, Places, Food"
          required
        />
      </AdminFormField>

      <AdminFormField
        hint="Optional summary for visitors browsing this topic."
        label="Description"
        span="full"
      >
        <AdminAutoTextarea
          defaultValue={category?.description ?? ""}
          name="description"
          placeholder="What kind of content belongs in this category?"
          variant="compact"
        />
      </AdminFormField>

      <button className="admin-btn admin-btn-modify admin-form__submit" type="submit">
        {isEdit ? "Save changes" : "Create category"}
      </button>
    </form>
  );
}