"use client";

import { useActionState, JSX } from "react";
import { addUserAction, FormState } from "../actions/UserActionsZod";
import SubmitButton from "./SubmitButton";

const initialState: FormState = {
  success: false,
  message: "",
};

export default function AddUserForm(): JSX.Element {
  // useActionState receives (action, initialState)
  const [state, formAction] = useActionState(addUserAction, initialState);

  return (
    <div className="card bg-base-100 shadow border border-base-300">
      <div className="card-body">
        <h2 className="card-title text-lg">
          Add New User using Zod Validation
        </h2>

        {/* Global Success / Failure Alerts */}
        {state.message && (
          <div
            className={`alert ${state.success ? "alert-success" : "alert-error"} text-sm py-2`}
          >
            <span>{state.message}</span>
          </div>
        )}

        <form action={formAction} className="space-y-4 mt-2">
          {/* Name Input */}
          <div className="form-control">
            <label className="label label-text font-medium">Name</label>
            <input
              type="text"
              name="name"
              placeholder="Jane Doe"
              className={`input input-bordered w-full ${state.errors?.name ? "input-error" : ""}`}
            />
            {state.errors?.name && (
              <span className="text-xs text-error mt-1">
                {state.errors.name[0]}
              </span>
            )}
          </div>

          {/* Email Input */}
          <div className="form-control">
            <label className="label label-text font-medium">Email</label>
            <input
              type="email"
              name="email"
              placeholder="jane@example.com"
              className={`input input-bordered w-full ${state.errors?.email ? "input-error" : ""}`}
            />
            {state.errors?.email && (
              <span className="text-xs text-error mt-1">
                {state.errors.email[0]}
              </span>
            )}
          </div>

          {/* Password Input */}
          <div className="form-control">
            <label className="label label-text font-medium">Password</label>
            <input
              type="password"
              name="pass"
              placeholder="••••••••"
              className={`input input-bordered w-full ${state.errors?.pass ? "input-error" : ""}`}
            />
            {state.errors?.pass && (
              <span className="text-xs text-error mt-1">
                {state.errors.pass[0]}
              </span>
            )}
          </div>

          {/* Submit Button with Loading Spinner */}
          <div className="flex justify-end pt-2">
            <SubmitButton label="Create Account" />
          </div>
        </form>
      </div>
    </div>
  );
}