"use client";

import { CircleAlert, LoaderCircle, ShieldCheck } from "lucide-react";
import { useActionState } from "react";
import { setupAdmin, type FormState } from "../auth-actions";

const inputClass =
  "rounded border border-zinc-300 bg-transparent px-2 py-1.5 dark:border-zinc-700";

export default function SetupForm() {
  const [state, action, pending] = useActionState<FormState, FormData>(setupAdmin, {});

  return (
    <form action={action} className="mt-6 flex flex-col gap-3 text-sm">
      <label className="flex flex-col gap-1">
        Setup code (from the server console)
        <input
          name="code"
          autoComplete="off"
          placeholder="XXXX-XXXX"
          required
          className={`${inputClass} font-mono uppercase`}
        />
      </label>
      <label className="flex flex-col gap-1">
        Admin username
        <input name="username" defaultValue="admin" autoComplete="username" required className={inputClass} />
      </label>
      <label className="flex flex-col gap-1">
        Password (at least 12 characters)
        <input
          name="password"
          type="password"
          autoComplete="new-password"
          minLength={12}
          required
          className={inputClass}
        />
      </label>
      <label className="flex flex-col gap-1">
        Repeat password
        <input
          name="confirm"
          type="password"
          autoComplete="new-password"
          minLength={12}
          required
          className={inputClass}
        />
      </label>
      {state.error && (
        <p role="alert" className="flex items-center gap-1.5 text-red-600">
          <CircleAlert aria-hidden className="size-4 shrink-0" />
          {state.error}
        </p>
      )}
      <button
        type="submit"
        disabled={pending}
        className="inline-flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 font-medium text-white disabled:opacity-50 dark:bg-white dark:text-black"
      >
        {pending ? (
          <LoaderCircle aria-hidden className="size-4 animate-spin motion-reduce:animate-none" />
        ) : (
          <ShieldCheck aria-hidden className="size-4" />
        )}
        {pending ? "Securing…" : "Create admin and sign in"}
      </button>
    </form>
  );
}