"use client";

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

export function RequestResetForm() {
  const [state, formAction, pending] = useActionState<ResetState, FormData>(
    requestResetAction,
    {},
  );

  if (state.success) {
    return (
      <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)" }}
          />
          E-Mail unterwegs
        </div>
        <p className="text-muted mt-1">
          Falls ein Konto mit dieser Adresse existiert, haben wir einen Link zum
          Zurücksetzen verschickt. Bitte prüfe dein Postfach.
        </p>
      </div>
    );
  }

  return (
    <form action={formAction} className="flex flex-col gap-4" noValidate>
      {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="email">
          E-Mail-Adresse
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="username"
          required
          className="input"
          placeholder="name@avaria.media"
        />
      </div>

      <button type="submit" className="btn btn-primary btn-block" disabled={pending}>
        {pending ? "Senden …" : "Link anfordern"}
      </button>
    </form>
  );
}