import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { registerUser } from "../services/authService";

const RegistrationScreen = () => {
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [errorMessage, setErrorMessage] = useState("");
    const navigate = useNavigate();

    const handleRegister = async () => {
        if (password !== confirmPassword) {
            setErrorMessage("Passwörter stimmen nicht überein.");
            return;
        }

        try {
            const result = await registerUser(email, password, username);
            if (result) {
                console.log("Registrierung erfolgreich!");
                navigate("/login");
            } else {
                setErrorMessage("Registrierung fehlgeschlagen.");
            }
        } catch (error) {
            console.error("Fehler bei der Registrierung:", error);
            setErrorMessage("Es gab ein Problem bei der Registrierung.");
        }
    };

    return (
        <div style={styles.container}>
            <h2 style={styles.title}>Registrierung</h2>

            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                style={styles.input}
            />
            <input
                type="email"
                placeholder="E-Mail"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                style={styles.input}
            />
            <input
                type="password"
                placeholder="Passwort"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                style={styles.input}
            />
            <input
                type="password"
                placeholder="Passwort bestätigen"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                style={styles.input}
            />

            {errorMessage && <p style={styles.errorText}>{errorMessage}</p>}

            <button onClick={handleRegister} style={styles.button}>
                Registrieren
            </button>

            <p onClick={() => navigate("/login")} style={styles.linkText}>
                Schon ein Konto? Einloggen
            </p>
        </div>
    );
};

const styles: { [key: string]: React.CSSProperties } = {
    container: {
        display: "flex",
        flexDirection: "column",
        maxWidth: "400px",
        margin: "100px auto",
        padding: "20px",
        border: "1px solid #ccc",
        borderRadius: "8px",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
    },
    title: {
        fontSize: "24px",
        marginBottom: "20px",
        textAlign: "center",
    },
    input: {
        padding: "10px",
        marginBottom: "10px",
        borderRadius: "5px",
        border: "1px solid #ccc",
        fontSize: "16px",
    },
    button: {
        padding: "10px",
        backgroundColor: "#007bff",
        color: "#fff",
        border: "none",
        borderRadius: "5px",
        cursor: "pointer",
        fontSize: "16px",
    },
    linkText: {
        marginTop: "10px",
        color: "#007bff",
        textAlign: "center",
        cursor: "pointer",
    },
    errorText: {
        color: "red",
        textAlign: "center",
        marginBottom: "10px",
    },
};

export default RegistrationScreen;