"use client";

import React from "react";
import { z } from "zod";
import { useRouter } from "next/navigation";
import { createAttribute, updateAttribute } from "@/actions/catalog";
import {
  useServerActionForm,
  EntityFormWrapper,
  ServerActionForm,
  FormActions,
  TextField,
} from "../entity-detail/shared";

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Name muss mindestens 2 Zeichen lang sein.",
  }),
});

interface AttributeFormProps {
  initialData?: {
    id: string;
    name: string;
  };
}

/**
 * 🎨 Composer Refactor: Standardized AttributeForm
 * Uses shared entity-detail primitives to reduce boilerplate and ensure consistent UI/UX.
 */
export function AttributeForm({ initialData }: AttributeFormProps) {
  const router = useRouter();

  const { form, isPending, onSubmit, handleSubmit } = useServerActionForm({
    schema: formSchema,
    defaultValues: {
      name: initialData?.name || "",
    },
    serverAction: async (values) => {
      return initialData
        ? await updateAttribute({ id: initialData.id, data: values })
        : await createAttribute({ ...values, type: "text" });
    },
    onSuccess: () => {
      router.push("/dashboard/attributes/overview");
      router.refresh();
    },
    // We let useServerActionForm handle toast notifications using the standard action response
  });

  return (
    <EntityFormWrapper
      title={initialData ? "Attribut bearbeiten" : "Neues Attribut"}
    >
      <ServerActionForm
        form={form}
        isPending={isPending}
        onSubmit={onSubmit}
        handleSubmit={handleSubmit}
      >
        <TextField
          form={form}
          name="name"
          label="Name"
          placeholder="z.B. Farbe, Größe..."
          required
        />

        <FormActions
          isPending={isPending}
          onCancel={() => router.push("/dashboard/attributes/overview")}
          submitLabel={initialData ? "Aktualisieren" : "Erstellen"}
        />
      </ServerActionForm>
    </EntityFormWrapper>
  );
}