import Popup from "@/components/PopUp";
import Button from "@/components/Button";
import loginStyles from "@/styles/login.module.css";
import { useState } from "react";

interface Props {
    open: boolean;
    onClose: () => void;
}

export default function PasswordPopup({ open, onClose }: Props) {
    const [oldPassword, setOldPassword] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");

    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState("");

    async function handlePasswordUpdate(e: React.FormEvent) {
        e.preventDefault();
        setLoading(true);
        setMessage("");

        try {
            const res = await fetch("/api/user/update-password", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ oldPassword, newPassword, confirmPassword }),
            });

            const data = await res.json();
            if (!res.ok) throw new Error(data.error || "Fehler beim Aktualisieren.");

            setMessage("Passwort erfolgreich geändert.");
            setTimeout(onClose, 1000);
        } catch (err: unknown) {
            setMessage(err instanceof Error ? err.message : "Unbekannter Fehler");
        } finally {
            setLoading(false);
        }
    }

    return (
        <Popup isOpen={open} onClose={onClose}>
            <h2>Passwort ändern</h2>
            <form onSubmit={handlePasswordUpdate} className={loginStyles.gapMd}>

                <div className={loginStyles.formGroup}>
                    <input
                        placeholder="Altes Passwort"
                        className={loginStyles.formInput}
                        type="password"
                        value={oldPassword}
                        onChange={(e) => setOldPassword(e.target.value)}
                    />
                </div>

                <div className={loginStyles.formGroup}>
                    <input
                        placeholder="Neues Passwort"
                        className={loginStyles.formInput}
                        type="password"
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                    />
                </div>

                <div className={loginStyles.formGroup}>
                    <input
                        placeholder="Neues Passwort bestätigen"
                        className={loginStyles.formInput}
                        type="password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                    />
                </div>

                <Button type="submit" disabled={loading}>
                    {loading ? "Speichern..." : "Speichern"}
                </Button>

                {message && <p style={{ color: "var(--color-contrast)" }}>{message}</p>}
            </form>
        </Popup>
    );
}