"use client";

import { useActionState } from "react";
import { FormField } from "@/components/admin/FormField";
import type { UserFormState } from "@/app/(admin-group)/admin/users/actions";
import type { User } from "@/generated/prisma/client";

interface UserFormProps {
  action: (state: UserFormState, formData: FormData) => Promise<UserFormState>;
  user?: User;
  submitLabel: string;
  isSelf?: boolean;
}

export function UserForm({ action, user, submitLabel, isSelf }: UserFormProps) {
  const [state, formAction, isPending] = useActionState<UserFormState, FormData>(
    action,
    undefined
  );

  return (
    <form action={formAction} className="space-y-5">
      <FormField
        label="Nama"
        name="name"
        defaultValue={user?.name}
        error={state?.errors?.name?.[0]}
        required
      />

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <FormField
          label="Username (opsional)"
          name="username"
          defaultValue={user?.username ?? ""}
        />
        <FormField
          label="Email"
          name="email"
          type="email"
          defaultValue={user?.email}
          error={state?.errors?.email?.[0]}
          required
        />
      </div>

      <FormField
        label={user ? "Password Baru (opsional)" : "Password"}
        name="password"
        type="password"
        error={state?.errors?.password?.[0]}
        placeholder={user ? "Biarkan kosong kalau tidak diubah" : undefined}
        required={!user}
      />

      <div>
        <label
          htmlFor="role"
          className="mb-1 block text-sm font-medium text-heading"
        >
          Role
        </label>
        <select
          id="role"
          name={isSelf ? undefined : "role"}
          defaultValue={user?.role ?? "member"}
          disabled={isSelf}
          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-merah-ranata focus:outline-none focus:ring-1 focus:ring-merah-ranata disabled:bg-bg-light disabled:text-muted"
        >
          <option value="admin">Admin</option>
          <option value="member">Member</option>
        </select>
        {isSelf && (
          <>
            <input type="hidden" name="role" value={user?.role ?? "admin"} />
            <p className="mt-1 text-xs text-muted">
              Anda tidak bisa mengubah role akun Anda sendiri.
            </p>
          </>
        )}
      </div>

      {state?.message && (
        <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
          {state.message}
        </p>
      )}

      <button
        type="submit"
        disabled={isPending}
        className="rounded-full bg-merah-ranata px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-merah-hover disabled:opacity-60"
      >
        {isPending ? "Menyimpan..." : submitLabel}
      </button>
    </form>
  );
}