'use client';

/**
 * Registrierungsseite (plan.md Abschnitt 3 und 11).
 * Mit Invite-Token (aus URL) wird dem Kalender automatisch zugeordnet.
 */
import { Suspense, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Button, Card, ErrorMessage, Input, Label } from '@/components/ui/ui';

function RegisterForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const inviteToken = searchParams.get('token') ?? '';

  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);
    const password = String(formData.get('password') ?? '');
    const passwordRepeat = String(formData.get('passwordRepeat') ?? '');

    if (password !== passwordRepeat) {
      setError('Die Passwoerter stimmen nicht ueberein.');
      setBusy(false);
      return;
    }

    try {
      const username = String(formData.get('username') ?? '').trim();

      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: formData.get('email'),
          password,
          ...(username ? { username } : {}),
          ...(inviteToken ? { inviteToken } : {}),
        }),
      });

      if (!response.ok) {
        const data = (await response.json()) as { error?: string };
        setError(data.error ?? 'Registrierung fehlgeschlagen.');
        return;
      }
      router.push('/dashboard');
      router.refresh();
    } catch {
      setError('Netzwerkfehler. Bitte erneut versuchen.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <Card>
      {inviteToken && (
        <p className="mb-4 rounded-md bg-slate-100 px-3 py-2 text-sm text-slate-700 dark:bg-slate-800 dark:text-slate-300">
          Du wurdest zu einem Kalender eingeladen. Nach der Registrierung siehst du
          ausschliesslich diesen Kalender.
        </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 autoComplete="email" />
        </div>
        <div>
          <Label htmlFor="username">Benutzername (optional)</Label>
          <Input
            id="username"
            name="username"
            type="text"
            maxLength={32}
            autoComplete="username"
            placeholder="z. B. max_mustermann"
          />
          <p className="mt-1 text-xs text-slate-500">
            2-32 Zeichen; Buchstaben, Ziffern, _ - . erlaubt.
          </p>
        </div>
        <div>
          <Label htmlFor="password">Passwort</Label>
          <Input
            id="password"
            name="password"
            type="password"
            required
            minLength={10}
            autoComplete="new-password"
          />
          <p className="mt-1 text-xs text-slate-500">
            Mindestens 10 Zeichen mit Gross-/Kleinbuchstabe und Ziffer.
          </p>
        </div>
        <div>
          <Label htmlFor="passwordRepeat">Passwort wiederholen</Label>
          <Input
            id="passwordRepeat"
            name="passwordRepeat"
            type="password"
            required
            autoComplete="new-password"
          />
        </div>
        <Button disabled={busy}>{busy ? 'Registrieren …' : 'Registrieren'}</Button>
      </form>
      <p className="mt-4 text-sm">
        Bereits registriert?{' '}
        <Link href="/login" className="text-slate-700 underline hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">
          Anmelden
        </Link>
      </p>
    </Card>
  );
}

export default function RegisterPage() {
  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">Konto erstellen</h1>
      <Suspense fallback={<Card>Wird geladen …</Card>}>
        <RegisterForm />
      </Suspense>
    </main>
  );
}