'use client';

/**
 * "Passwort vergessen"-Seite (plan.md Abschnitt 11).
 * Antwortet immer mit Erfolgsmeldung (kein Account-Enumeration).
 */
import { appFetch } from '@/lib/client-fetch';
import { useState } from 'react';
import Link from 'next/link';
import { Button, Card, ErrorMessage, Input, Label } from '@/components/ui/ui';

export default function ForgotPasswordPage() {
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(true);
    setError(null);

    const formData = new FormData(event.currentTarget);
    try {
      const response = await appFetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: formData.get('email') }),
      });
      if (!response.ok) {
        const data = (await response.json()) as { error?: string };
        setError(data.error ?? 'Anfrage fehlgeschlagen.');
        return;
      }
      setSubmitted(true);
    } catch {
      setError('Netzwerkfehler. Bitte erneut versuchen.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-4">
      <h1 className="mb-6 text-center text-2xl font-bold">Passwort vergessen</h1>
      <Card>
        {submitted ? (
          <p className="rounded-md bg-slate-100 px-3 py-2 text-sm text-slate-700 dark:bg-slate-800 dark:text-slate-300">
            Falls die E-Mail registriert ist, wurde ein Reset-Link erstellt.
          </p>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-4">
            <ErrorMessage message={error} />
            <div>
              <Label htmlFor="email">E-Mail</Label>
              <Input id="email" name="email" type="email" required />
            </div>
            <Button disabled={busy}>{busy ? 'Senden …' : 'Reset-Link anfordern'}</Button>
          </form>
        )}
        <p className="mt-4 text-sm">
          <Link href="/login" className="text-slate-700 underline hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">
            Zurueck zur Anmeldung
          </Link>
        </p>
      </Card>
    </main>
  );
}