"use client";

import React from "react";
import { z } from "zod";
import { useRouter } from "next/navigation";
import { createBrand, updateBrand } from "@/actions/catalog";
import { BrandDTOSchema } from "@/lib/db/schemas/api";
import {
  useServerActionForm,
  EntityFormWrapper,
  ServerActionForm,
  FormActions,
  TextField,
  TextAreaField,
} from "../entity-detail/shared";

const formSchema = z.object({
  name: z.string().min(1, "Name ist erforderlich"),
  description: z.string().optional(),
});

interface BrandFormProps {
  initialData?: z.infer<typeof BrandDTOSchema>;
}

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

  const { form, isPending, onSubmit, handleSubmit } = useServerActionForm({
    schema: formSchema,
    defaultValues: {
      name: initialData?.name || "",
      description: initialData?.description || "",
    },
    // We wrap the server actions to handle both create and update scenarios
    serverAction: async (values) => {
      return initialData
        ? await updateBrand({ id: initialData.id, data: values })
        : await createBrand(values);
    },
    onSuccess: () => {
      router.push("/dashboard/brands/overview");
      router.refresh();
    },
    // We let useServerActionForm handle toast notifications using the standard action response
  });

  return (
    <EntityFormWrapper
      title={initialData ? "Marke bearbeiten" : "Neue Marke"}
    >
      <ServerActionForm
        form={form}
        isPending={isPending}
        onSubmit={onSubmit}
        handleSubmit={handleSubmit}
      >
        <TextField
          form={form}
          name="name"
          label="Name"
          placeholder="z.B. Apple"
          required
        />

        <TextAreaField
          form={form}
          name="description"
          label="Beschreibung"
          placeholder="Optionale Beschreibung der Marke"
        />

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