"use client";

import { useActionState } from "react";
import {
  createCategoryAction,
  updateCategoryAction,
  type CategoryFormState,
} from "@/lib/admin-actions";

const INITIAL: CategoryFormState = { errors: {}, values: {}, message: "" };

export interface CategoryFormInitial {
  name?: string;
  slug?: string;
  blurb?: string;
}

interface CategoryFormProps {
  initial?: CategoryFormInitial;
  categoryId?: number;
  submitLabel: string;
}

/** Create/rename form for categories (uncontrolled + server validation). */
export function CategoryForm({ initial, categoryId, submitLabel }: CategoryFormProps) {
  const action =
    categoryId === undefined
      ? createCategoryAction
      : updateCategoryAction.bind(null, categoryId);
  const [state, formAction, pending] = useActionState(action, INITIAL);
  const v = (name: keyof CategoryFormInitial): string | undefined =>
    state.values[name] !== undefined ? state.values[name] : undefined;

  const inputCls =
    "h-11 w-full rounded-xl border border-slate-700 bg-slate-950 px-4 text-sm text-white placeholder:text-slate-600 focus:border-brand-500 focus:outline-none";

  return (
    <form action={formAction} className="space-y-4">
      {state.message ? (
        <p role="alert" className="rounded-xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-300">
          {state.message}
        </p>
      ) : null}
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="cat-name" className="mb-1 block text-sm font-medium text-slate-300">
            Name *
          </label>
          <input
            id="cat-name"
            name="name"
            required
            maxLength={60}
            defaultValue={v("name") ?? initial?.name ?? ""}
            className={inputCls}
          />
          {state.errors.name ? (
            <p role="alert" className="mt-1 text-xs text-red-400">{state.errors.name}</p>
          ) : null}
        </div>
        <div>
          <label htmlFor="cat-slug" className="mb-1 block text-sm font-medium text-slate-300">
            Slug <span className="text-slate-500">(blank = auto)</span>
          </label>
          <input
            id="cat-slug"
            name="slug"
            defaultValue={v("slug") ?? initial?.slug ?? ""}
            placeholder="my-category"
            className={inputCls}
          />
          {state.errors.slug ? (
            <p role="alert" className="mt-1 text-xs text-red-400">{state.errors.slug}</p>
          ) : null}
        </div>
      </div>
      <div>
        <label htmlFor="cat-blurb" className="mb-1 block text-sm font-medium text-slate-300">
          Blurb
        </label>
        <input
          id="cat-blurb"
          name="blurb"
          maxLength={300}
          defaultValue={v("blurb") ?? initial?.blurb ?? ""}
          placeholder="One-line description"
          className={inputCls}
        />
        {state.errors.blurb ? (
          <p role="alert" className="mt-1 text-xs text-red-400">{state.errors.blurb}</p>
        ) : null}
      </div>
      <button
        type="submit"
        disabled={pending}
        className="inline-flex h-10 items-center rounded-xl bg-brand-600 px-5 text-sm font-semibold text-white hover:bg-brand-500 disabled:opacity-60"
      >
        {pending ? "Saving…" : submitLabel}
      </button>
    </form>
  );
}