"use client";
import { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import styles from "@/styles/login.module.css";

function Register() {
  const router = useRouter();
  const [Benutzername, setBenutzername] = useState("");
  const [Passwort, setPasswort] = useState("");
  const [PasswortWiederholung, setPasswortWiederholung] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    // Passwort-Abgleich
    if (Passwort !== PasswortWiederholung) {
      setError("Die Passwörter stimmen nicht überein.");
      return;
    }

    setLoading(true);
    const res = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ Benutzername, Passwort }),
    });
    setLoading(false);

    if (res.ok) {
      alert("Registrierung erfolgreich! Du kannst dich jetzt einloggen.");
      router.push("/login");
    } else {
      const data = await res.json().catch(() => ({}));
      setError(data.error || "Fehler bei der Registrierung.");
    }
  };

  return (
    <div className={styles.loginContainer}>
      <form onSubmit={handleRegister} className={styles.loginForm}>
        <h2 className={styles.loginTitle}>Registrieren</h2>

        <div className={styles.formGroup}>
          <label htmlFor="username">Benutzername</label>
          <input
            id="username"
            placeholder="Dein Benutzername"
            value={Benutzername}
            onChange={(e) => setBenutzername(e.target.value)}
            className={styles.formInput}
            required
          />
        </div>

        <div className={styles.formGroup}>
          <label htmlFor="password">Passwort</label>
          <input
            id="password"
            type="password"
            placeholder="••••••••"
            value={Passwort}
            onChange={(e) => setPasswort(e.target.value)}
            className={styles.formInput}
            required
          />
        </div>

        <div className={styles.formGroup}>
          <label htmlFor="passwordRepeat">Passwort wiederholen</label>
          <input
            id="passwordRepeat"
            type="password"
            placeholder="••••••••"
            value={PasswortWiederholung}
            onChange={(e) => setPasswortWiederholung(e.target.value)}
            className={styles.formInput}
            required
          />
        </div>

        {error && <p className={styles.errorText}>{error}</p>}

        <button
          type="submit"
          disabled={loading}
          className="btn btn-primary"
        >
          {loading ? "Registriere..." : "Registrieren"}
        </button>

        <p className={styles.registerHint}>
          Hast du schon einen Account?{" "}
          <Link href="/login" className={styles.registerLink}>
            Jetzt einloggen
          </Link>
        </p>
      </form>
    </div>
  );
}

export default Register;