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

function Login() {
    const router = useRouter();
    const [Benutzername, setBenutzername] = useState("");
    const [Passwort, setPasswort] = useState("");
    const [loading, setLoading] = useState(false);

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        const callbackUrl =
            typeof router.query.callbackUrl === "string" && router.query.callbackUrl
                ? router.query.callbackUrl
                : "/";
        const res = await signIn("credentials", {
            redirect: false,
            Benutzername,
            Passwort,
            callbackUrl,
        });
        setLoading(false);

        if (res?.ok) router.push(callbackUrl);
        else alert("Login fehlgeschlagen. Benutzername oder Passwort falsch.");
    };

    return (
        <div className={styles.loginContainer}>
            <form onSubmit={handleLogin} className={styles.loginForm}>
                <h2 className={styles.loginTitle}>Willkommen zurück!</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}
                    />
                </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}
                    />
                </div>

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

                <p className={styles.registerHint}>
                    Noch keinen Account?{" "}
                    <Link href="/register" className={styles.registerLink}>
                        Jetzt registrieren
                    </Link>
                </p>
            </form>
        </div>
    );
}

export default Login;