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

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

export default function NamePopup({ open, onClose }: Props) {
    const { data: session, update } = useSession();

    const [newName, setNewName] = useState(session?.user?.name || "");
    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState("");

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

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

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

            await update({ name: data.user.name });

            setMessage("Name 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}>
            <form onSubmit={handleNameUpdate}>
                <div className={loginStyles.formGroup}>
                    <h2>Name ändern</h2>
                    <input
                        className={loginStyles.formInput}
                        type="text"
                        value={newName}
                        onChange={(e) => setNewName(e.target.value)}
                    />
                </div>

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

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