"use client";
import { useRouter } from "next/navigation";
import { type FormEvent, useState } from "react";
import { type ApiError, api, setCsrf } from "@/lib/client/api";

export default function ChangePasswordPage() {
  const router = useRouter();
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setBusy(true);
    setErr(null);
    const fd = new FormData(e.currentTarget);
    try {
      const r = await api<{ csrfToken: string }>("/api/admin/auth/change-password", {
        json: {
          currentPassword: fd.get("currentPassword"),
          newPassword: fd.get("newPassword"),
          confirm: fd.get("confirm"),
        },
      });
      setCsrf(r.csrfToken);
      router.replace("/admin");
      router.refresh();
    } catch (e2) {
      const ae = e2 as ApiError;
      setErr(
        Array.isArray(ae.details) && typeof ae.details[0] === "string"
          ? `${ae.message}`
          : (ae.message ?? "Failed"),
      );
    } finally {
      setBusy(false);
    }
  }
  return (
    <main className="mx-auto flex min-h-dvh max-w-sm flex-col justify-center px-4">
      <p className="eyebrow">Security</p>
      <h1 className="title-2 mt-1">Set a new password</h1>
      <p className="muted mt-1 text-sm">
        The bootstrap password only works once. Choose at least 12 characters with three character classes; it
        must not be a well-known password or contain your username.
      </p>
      <form onSubmit={submit} className="mt-6 space-y-4">
        <div>
          <label htmlFor="currentPassword" className="label mb-1">
            Current password
          </label>
          <input
            id="currentPassword"
            name="currentPassword"
            type="password"
            autoComplete="current-password"
            required
            className="input"
          />
        </div>
        <div>
          <label htmlFor="newPassword" className="label mb-1">
            New password
          </label>
          <input
            id="newPassword"
            name="newPassword"
            type="password"
            autoComplete="new-password"
            minLength={12}
            required
            className="input"
          />
        </div>
        <div>
          <label htmlFor="confirm" className="label mb-1">
            Confirm new password
          </label>
          <input
            id="confirm"
            name="confirm"
            type="password"
            autoComplete="new-password"
            minLength={12}
            required
            className="input"
          />
        </div>
        {err && (
          <p role="alert" className="text-sm" style={{ color: "var(--color-danger-500)" }}>
            {err}
          </p>
        )}
        <button type="submit" className="btn btn-primary w-full" disabled={busy}>
          {busy ? "Saving…" : "Change password"}
        </button>
      </form>
    </main>
  );
}