"use client";

import { useActionState } from "react";
import { confirmResetAction, type ResetState } from "../actions";

export function ConfirmResetForm({ token }: { token: string }) {
  const [state, formAction, pending] = useActionState<ResetState, FormData>(
    confirmResetAction,
    {},
  );

  if (state.success) {
    return (
      <div className="flex flex-col gap-4">
        <div
          className="rounded-2xl border px-4 py-4 text-sm"
          style={{ borderColor: "var(--line)", background: "rgba(13,19,42,.4)" }}
        >
          <div className="flex items-center gap-2 font-bold">
            <span
              className="inline-block h-2 w-2 rounded-full"
              style={{ background: "var(--blue)", boxShadow: "0 0 10px 1px rgba(158,215,255,.7)" }}
            />
            Passwort aktualisiert
          </div>
          <p className="text-muted mt-1">
            Dein Passwort wurde geändert. Du kannst dich jetzt anmelden.
          </p>
        </div>
        <a href="/login" className="btn btn-primary btn-block">
          Zur Anmeldung
        </a>
      </div>
    );
  }

  return (
    <form action={formAction} className="flex flex-col gap-4" noValidate>
      <input type="hidden" name="token" value={token} />

      {state.error ? (
        <div
          role="alert"
          className="rounded-2xl border px-4 py-3 text-sm font-semibold"
          style={{
            borderColor: "rgba(255,159,215,.32)",
            background: "rgba(255,159,215,.08)",
            color: "#ffd0ec",
          }}
        >
          {state.error}
        </div>
      ) : null}

      <div className="field">
        <label className="label" htmlFor="newPassword">
          Neues Passwort
        </label>
        <input
          id="newPassword"
          name="newPassword"
          type="password"
          autoComplete="new-password"
          required
          className="input"
          placeholder="Mind. 10 Zeichen, Groß/Klein + Zahl"
        />
      </div>

      <div className="field">
        <label className="label" htmlFor="confirmPassword">
          Passwort bestätigen
        </label>
        <input
          id="confirmPassword"
          name="confirmPassword"
          type="password"
          autoComplete="new-password"
          required
          className="input"
        />
      </div>

      <button type="submit" className="btn btn-primary btn-block" disabled={pending}>
        {pending ? "Speichern …" : "Passwort speichern"}
      </button>
    </form>
  );
}