import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import i18next from "i18next";
import React, { useEffect, useState } from "react";
import AccountType, { User } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung

type LoginDialogProps = {
    open: boolean;
    onClose: () => void;
    onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
    loginData: { email: string; password: string };
    setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string, customerId: number }>>;
};

const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, setLoginData, onSubmit }) => {
    const { login } = useAccount();
    const [showRegister, setShowRegister] = useState(false);
    const [registerData, setRegisterData] = useState<AccountType>({ email: "", password: "", id: 0, customer: { id: 0, name: "", surname: "", address: "", country: "", zip: "" }, langI18n: i18next.language, admin: false });
    const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
    const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung

    useEffect(() => {
        if (open) {
          const active = document.activeElement as HTMLElement | null;
          if (active && typeof active.blur === "function") {
            active.blur();
          }
        }
      }, [open]);
      
      

    // useQuery für Login
    const { refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin } = useQuery({
        queryKey: ["submitLogin", loginData],
        queryFn: () => submitLogin(loginData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    const { refetch: refetchAccount } = useQuery({
        queryKey: ["fetchAccount", loginData],
        queryFn: () => fetchAccount(loginData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    // useQuery für Registrierung
    const { refetch: refetchRegister, isLoading: isLoadingRegister, error: errorRegister } = useQuery({
        queryKey: ["submitRegister", registerData],
        queryFn: () => submitRegister(registerData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    const handleLogin = async () => {
        try {
            setShowErrorLogin(false); // Fehlermeldung zurücksetzen
            const response = await refetchLogin(); // Anfrage auslösen
            if (response.status === "success") {
                const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
                const customerData = (await refetchAccount()).data; 
                const user: User = {
                    email: customerData.email,
                    password: customerData.password,
                    customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
                    session: session, // Setze die Session aus der Login-Antwort
                };
                login(user);
                setShowRegister(false); // Zurück zum Login wechseln
                onSubmit(); // Dialog schließen
            } else {
                setShowErrorLogin(true); // Fehlermeldung anzeigen
            }
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        } catch (error) {
            setShowErrorLogin(true); // Fehlermeldung anzeigen
        }
    };

    const handleRegister = async () => {
        try {
            setShowErrorRegister(false); // Fehlermeldung zurücksetzen
            await refetchRegister(); // Beispiel für den Refetch-Aufruf
            // Erfolgslogik hier
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        } catch (error) {
            setShowErrorRegister(true); // Fehlermeldung anzeigen
        }
    };

    return (
        <Dialog open={open} onClose={onClose} disableEnforceFocus>
            <DialogTitle>{showRegister ? "Registrieren" : "Login"}</DialogTitle>
            <DialogContent>
                {showRegister ? (
                    <>
                        <TextField
                            margin="dense"
                            label="E-Mail"
                            type="email"
                            fullWidth
                            value={registerData.email}
                            onChange={e => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label="Passwort"
                            type="password"
                            fullWidth
                            value={registerData.password}
                            onChange={e => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label="Vorname"
                            type="text"
                            fullWidth
                            value={registerData.customer.name}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, name: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label="Nachname"
                            type="text"
                            fullWidth
                            value={registerData.customer.surname}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, surname: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label="Adresse"
                            type="text"
                            fullWidth
                            value={registerData.customer.address}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, address: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label="Land"
                            type="text"
                            fullWidth
                            value={registerData.customer.country}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, country: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label="PLZ"
                            type="text"
                            fullWidth
                            value={registerData.customer.zip}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, zip: e.target.value },
                            }))}
                        />
                    </>
                ) : (
                    <>
                        <TextField
                            margin="dense"
                            label="E-Mail"
                            type="email"
                            fullWidth
                            value={loginData.email}
                            onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label="Passwort"
                            type="password"
                            fullWidth
                            value={loginData.password}
                            onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
                        />
                    </>
                )}
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose}>Abbrechen</Button>
                {showRegister ? (
                    <Button onClick={handleRegister} disabled={isLoadingRegister}>
                        {isLoadingRegister ? "Lädt..." : "Registrieren"}
                    </Button>
                ) : (
                    <Button onClick={handleLogin} disabled={isLoadingLogin}>
                        {isLoadingLogin ? "Lädt..." : "Login"}
                    </Button>
                )}
            </DialogActions>
            {showErrorLogin && errorLogin && (
                <Box color="error.main">Login fehlgeschlagen</Box>
            )}
            {showErrorRegister && errorRegister !== null && (
                <Box color="error.main">Registrierung fehlgeschlagen</Box>
            )}
            {showRegister ? (
                <Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
                    <Link
                        component="button"
                        variant="body2"
                        onClick={() => setShowRegister(false)}
                        color="primary"
                        underline="hover"
                    >
                        Zurück zum Login
                    </Link>
                </Box>
            ) : (
                <Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
                    <Link
                        component="button"
                        variant="body2"
                        onClick={() => setShowRegister(true)}
                        color="primary"
                        underline="hover"
                    >
                        Noch kein Konto? Registrieren
                    </Link>
                </Box>
            )}
        </Dialog>
    );
};

export default LoginDialog;