import { useEffect, useState, useCallback } from 'react';
import userServices from '../../services/userServices';
import bookingServices from '../../services/bookingServices';
import authServices from '../../services/authServices';
import { Link, useNavigate } from 'react-router-dom';
import CountdownTimer from '../../components/CountdownTimer';
import { format, parse } from 'date-fns';
import MetaTags from '../../components/MetaTags';

const MyAccount = () => {
    const { getAllUsers, deleteUserById } = userServices;
    const { logoutUser } = authServices;
    const { getFilteredBookings } = bookingServices;
    const [user, setUser] = useState(null);
    const [userBookings, setUserBookings] = useState([]);
    const [isAdmin, setIsAdmin] = useState(false);
    const navigate = useNavigate();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [confirmDelete, setConfirmDelete] = useState(false);
    const [userToDelete, setUserToDelete] = useState(null);

    const fetchUserData = useCallback(async () => {
        setError(null);
        setIsLoading(true);
        try {
            const response = await getAllUsers();
            const fetchedUser = response[0];
            setUser(fetchedUser);
            if (fetchedUser?.type === 'ADMIN') {
                setIsAdmin(true);
            }
        } catch (error) {
            setError(error);
        } finally {
            setIsLoading(false);
        }
    }, []);

    const fetchUserBookings = useCallback(async () => {
        if (!user) return;
        setError(null);
        setIsLoading(true);
        try {
            const response = await getFilteredBookings(`user=${user.id}`);
            setUserBookings(response);
        } catch (error) {
            setError(error);
        } finally {
            setIsLoading(false);
        }
    }, [user]);

    useEffect(() => {
        fetchUserData();
    }, [fetchUserData]);

    useEffect(() => {
        fetchUserBookings();
    }, [user, fetchUserBookings]);

    const logoutHandler = async () => {
        setIsLoading(true);
        setError(null);
        try {
            await logoutUser();
            navigate('/');
        } catch (error) {
            setError(error);
        } finally {
            setIsLoading(false);
        }
    };

    const handleDelete = async () => {
        setIsLoading(true);
        setError(null);
        try {
            await deleteUserById(userToDelete);
            navigate('/');
        } catch (error) {
            setError(error);
        } finally {
            setIsLoading(false);
        }
    };

    const expired = (createdAt) => {
        const [day, month, year, hour, minute] = createdAt.match(/\d+/g).map(Number);
        const startDate = new Date(year, month - 1, day, hour, minute);
        const endDate = new Date(startDate.getTime() + 2 * 60 * 60 * 1000 + 10 * 60 * 1000); // 2 hours and 10 minutes after
        const now = new Date();
        return endDate - now <= 0;
    };

    const addTwoHours = (dataStr) => {
        const data = parse(dataStr, 'dd-MM-yyyy HH:mm', new Date());
        const nuovaData = new Date(data.getTime() + 2 * 60 * 60 * 1000);
        return format(nuovaData, 'dd-MM-yyyy HH:mm');
    };

    return (
        <>
            <MetaTags
                title="My Account - GMapartments"
                description="Case vacanze, affiti e bed and breakfast in Puglia a Pulsano, Taranto, sul mare"
                keywords="Case vacanze, affiti, bed and breakfast, b&b, Puglia, Pulsano, Taranto, mare"
                robotsContent="noindex, nofollow"
            />
            {confirmDelete && (
                <div className="confirm-delete-bg">
                    <div className="confirm-delete">
                        <h3>Conferma la cancellazione dell{"'"}account?</h3>
                        {error && <p className="error">{error.message}</p>}
                        <div className="buttons-container">
                            {!isLoading ? (
                                <button className="delete-btn" onClick={handleDelete}>
                                    Si
                                </button>
                            ) : (
                                <button className="delete-btn" disabled>
                                    Loading...
                                </button>
                            )}
                            <button className="modify-btn" onClick={() => setConfirmDelete(false)}>
                                No
                            </button>
                        </div>
                    </div>
                </div>
            )}
            {error && <p>{error.message}</p>}
            {isLoading && <div className="loader-container"><span className="loader"></span></div>}
            {!isLoading && (
                <div style={{ marginTop: '120px' }}>
                    <div className="grid text-center">
                        <div className="col-100">
                            <h2 className="font-title">Ciao {user?.first_name}</h2>
                        </div>
                    </div>
                    <div className="grid">
                        <div className="col-100">
                            <h3>Informazioni Personali</h3>
                            <p>Nome: {user?.first_name}</p>
                            <p>Cognome: {user?.last_name}</p>
                            <p>Email: {user?.email}</p>
                            <p>Telefono: {user?.telephone}</p>
                        </div>
                    </div>
                    <div className="grid mt-3">
                        <div className="col-100">
                            <h3>Le Tue Prenotazioni</h3>
                            {userBookings.length > 0 ? (
                                userBookings.map((booking) => (
                                    <div key={booking.id} className="booking mb-2" style={{ borderBottom: '2px solid var(--light-blue)', paddingBottom: '20px' }}>
                                        <p>Camera: {booking.room.name}</p>
                                        <p>
                                            Nome sulla Prenotazione: {booking.first_name_on_reservation} {booking.last_name_on_reservation}
                                        </p>
                                        <p>E-mail sulla prenotazione: {booking.email_on_reservation}</p>
                                        <p>Cellulare sulla prenotazione: {booking.phone_on_reservation}</p>
                                        <p>Da: {booking.check_in} - A: {booking.check_out}</p>
                                        <p>Costo: {booking.total_cost}€</p>
                                        <p>Creata il: {addTwoHours(booking.created_at)}</p>
                                        <p>Status: {booking.status}</p>
                                        {booking.status !== 'PAID' && booking.status !== 'CANCELED' && (
                                            <p className="error">
                                                Scade tra: <CountdownTimer createdAt={booking.created_at} />
                                            </p>
                                        )}
                                        {booking.status === 'PAID' && (
                                            <Link to={`/delete-booking/${booking.reservation_id}`} className="delete-booking font-body delete-btn">
                                                Cancella Prenotazione
                                            </Link>
                                        )}
                                        {!expired(booking.created_at) && booking.status !== 'PAID' && booking.status !== 'CANCELED' && (
                                            <Link to={`/booking/${booking.reservation_id}/payment`} className="delete-booking font-body delete-btn">
                                                Ritenta il pagamento
                                            </Link>
                                        )}
                                    </div>
                                ))
                            ) : (
                                <p>Nessuna Prenotazione</p>
                            )}
                        </div>
                    </div>
                    <div className="grid mt-3">
                        <div className="col-100 mt-2">
                            {isAdmin && (
                                <Link to="/dashboard" className="button2">
                                    Vai alla Dashboard
                                </Link>
                            )}
                        </div>
                        <div className="col-100 mt-2">
                            {!isLoading && (
                                <button className="delete-btn" onClick={logoutHandler}>
                                    Logout
                                </button>
                            )}
                            {isLoading && (
                                <button className="delete-btn" disabled>
                                    Loading...
                                </button>
                            )}
                        </div>
                        <div className="col-100 mt-4">
                            <button className="delete-btn" onClick={() => setConfirmDelete(true)}>
                                Elimina il mio account
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default MyAccount;