import { z } from "zod";

export const projectSchema = z.object({
  slug: z.string().min(2).regex(/^[a-z0-9-]+$/, "Slug must be kebab-case"),
  titleEn: z.string().min(1, "English title is required"),
  order: z.coerce.number().int().default(0), // FormData values are always strings — coerce them
});

"use server";

export type ActionState = {
  success: boolean;
  message?: string;
  fieldErrors?: Record<string, string[]>;
};

export async function createProject(
  _prev: ActionState,
  formData: FormData
): Promise<ActionState> {
  const parsed = projectSchema.safeParse({
    slug: formData.get("slug"),
    titleEn: formData.get("titleEn"),
    order: formData.get("order") ?? 0,
  });

  if (!parsed.success) {
    return {
      success: false,
      message: "Please fix the highlighted fields.",
      fieldErrors: parsed.error.flatten().fieldErrors,
    };
  }

  await projectRepository.create(parsed.data);
  return { success: true };
}

"use client";
import { useActionState } from "react";
import { useFormStatus } from "react-dom";

const INITIAL_STATE: ActionState = { success: false };

function SubmitButton() {
  const { pending } = useFormStatus(); // reads the pending state of the nearest parent <form>
  return <button disabled={pending}>{pending ? "Saving…" : "Create"}</button>;
}

export default function ProjectForm() {
  const [state, formAction] = useActionState(createProject, INITIAL_STATE);

  return (
    <form action={formAction}>
      <input name="titleEn" />
      {state.fieldErrors?.titleEn && <p>{state.fieldErrors.titleEn[0]}</p>}
      <SubmitButton />
    </form>
  );
}

useEffect(() => {
  if (state.success) {
    router.push("/admin/projects");
    router.refresh(); // re-fetches the destination page’s server data
  }
}, [state.success, router]);