"use client";

import { useState } from "react";
import { TextField } from "@nexarch/shl";
import { requestPasswordReset } from "../../../lib/api";

export default function PasswordResetRequestPage() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitting(true);
    try {
      // Antwort ist absichtlich IMMER dieselbe (Backend-Garantie,
      // Akzeptanzkriterium 3) — das Frontend erfindet keine differenzierte
      // Anzeige je nachdem ob das Konto existiert.
      const result = await requestPasswordReset(email);
      setMessage(result.message);
    } catch {
      setMessage("Falls ein Konto mit dieser E-Mail-Adresse existiert, wurde eine Nachricht mit weiteren Schritten verschickt.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main style={{ maxWidth: 400, margin: "80px auto", padding: "0 16px" }}>
      <h1>Passwort zurücksetzen</h1>
      {message ? (
        <p role="status">{message}</p>
      ) : (
        <form onSubmit={onSubmit} noValidate>
          <TextField
            label="E-Mail-Adresse"
            type="email"
            autoComplete="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <button type="submit" disabled={submitting}>
            {submitting ? "Wird gesendet…" : "Link anfordern"}
          </button>
        </form>
      )}
      <p>
        <a href="/login">Zurück zur Anmeldung</a>
      </p>
    </main>
  );
}