"use client";

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

const formSchema = z.object({
  name: z.string().min(1, {
    message: "Name ist erforderlich.",
  }),
  percentage: z.coerce.number().min(0).max(100),
});

interface TaxClassFormProps {
  initialData?: {
    id: string;
    name: string;
    percentage: number;
  };
}

export function TaxClassForm({ initialData }: TaxClassFormProps) {
  const router = useRouter();

  const { form, isPending, onSubmit, handleSubmit } = useServerActionForm({
    schema: formSchema,
    defaultValues: {
      name: initialData?.name || "",
      percentage: initialData?.percentage || 0,
    },
    serverAction: async (values) => {
      return initialData
        ? await updateTaxClass({ id: initialData.id, data: values })
        : await createTaxClass(values);
    },
    onSuccess: () => {
      router.push("/dashboard/tax-classes/overview");
      router.refresh();
    },
  });

  return (
    <EntityFormWrapper
      title={initialData ? "Steuerklasse bearbeiten" : "Neue Steuerklasse"}
    >
      <ServerActionForm
        form={form}
        isPending={isPending}
        onSubmit={onSubmit}
        handleSubmit={handleSubmit}
      >
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <TextField
            form={form}
            name="name"
            label="Name"
            placeholder="z.B. Standard 19%"
            required
          />
          <NumberField
            form={form}
            name="percentage"
            label="Prozentsatz (%)"
            placeholder="19"
            required
            min={0}
            max={100}
            step={0.01}
          />
        </div>

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