import { routes } from "@/src/config/routes";
import { quickLinks } from "@/src/constants/data/quick-links";
import Link from "next/link";
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { useRouter } from "next/navigation";
import useAuth from "@/src/server_api/hooks/useAuth";
import { useDispatch, useSelector } from "react-redux";
import { setUser } from "@/src/redux/slice/user-slice";
import { setCart } from "@/src/redux/slice/cart-slice";
import { getToken } from "@/src/server_api/storage";
import { useEffect, useState } from "react";
import { useAppSelector } from "@/src/redux/hooks";
import { setGuestUser } from "@/src/redux/slice/guest-user-slice";

interface AccountModalProps {
    accountOpen: boolean;
    setAccountOpen: (value: boolean) => void;
}

export default function AccountModal({
    accountOpen,
    setAccountOpen
}: AccountModalProps) {
    const router = useRouter()
    const dispatch = useDispatch()
    const { setLogOut } = useAuth();

    const user = useAppSelector((state: any) => state.user);
    const isGuestUser = useSelector(
        (state: any) => state.cart.isGuestUser
    );
    const [token, setToken] = useState()

    const initial =
        user?.firstName?.charAt(0)?.toUpperCase() ||
        user?.name?.charAt(0)?.toUpperCase() ||
        user?.email?.charAt(0)?.toUpperCase() ||
        "?";

    useEffect(() => {
        const loadToken = async () => {
            const authToken = await getToken();
            setToken(authToken)
        };
        loadToken();
    }, [token]);

    const handleLogout = async () => {
        try {
            await setLogOut();
            dispatch(
                setUser(null)
            );
            dispatch(
                setCart(null)
            );
            dispatch(setGuestUser(null))
            setAccountOpen(false);
            router.push(routes.auth.login);
        } catch (error) {
            console.log("Logout error:", error);
        }
    };

    if (!accountOpen) return null;

    return (
        <div className="fixed inset-0 z-[9999]">
            <div
                className="absolute inset-0 bg-black/50"
                onClick={() => setAccountOpen(false)}
            />
            <div
                className="
        absolute
        right-0
        top-0
        h-full
        w-[85%]
        sm:w-[350px]
        bg-white
        shadow-2xl
        p-6
        animate-slide-in
        flex
        flex-col
    "
            >
                <div className="-mx-6 flex items-center justify-between border-b border-gray-100 px-6 pb-5">
                    <h5 className="text-lg font-semibold text-primary">
                        Account
                    </h5>
                    <button
                        onClick={() => setAccountOpen(false)}
                        className="
                            text-3xl
                            text-gray-500
                            hover:text-black
                            transition
                        "
                    >
                        ×
                    </button>
                </div>
                {token && user && Object.keys(user).length > 0 && (
                    <div className="mt-6 mb-6 flex items-center gap-4 rounded-xl bg-gray-50 p-4">
                        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-xl font-bold text-white">
                            {initial}
                        </div>

                        <div className="min-w-0 flex-1">
                            <h4 className="truncate text-base font-semibold text-primary">
                                {user?.firstName || user?.name}
                            </h4>

                            <p className="truncate text-sm text-gray-500">
                                {user?.email}
                            </p>
                        </div>
                    </div>
                )}
                <div className="space-y-5 py-4">
                    {Object.keys(user)?.length === 0 ?
                        <>
                            <Link
                                href={routes.auth.login}
                                onClick={() => setAccountOpen(false)}
                                className="
                            block
                            rounded-md
                            bg-secondary
                            py-3
                            text-center
                            font-semibold
                            text-white
                            transition
                            hover:bg-black
                        "
                            >
                                Sign In
                            </Link>
                            <Link
                                href={routes.auth.signup}
                                onClick={() => setAccountOpen(false)}
                                className="
                            block
                            rounded-md
                            border
                            border-[#000000]
                            py-3
                            text-center
                            font-semibold
                            text-[#000000]
                            transition
                            hover:bg-[#000000]
                            hover:text-white
                        "
                            >
                                Create Account
                            </Link>
                        </> :

                        <>
                            <Link
                                href={routes.account.profile}
                                onClick={() => setAccountOpen(false)}
                                className="
                            block
                            rounded-md
                            border
                            border-primary
                            py-3
                            text-center
                            font-semibold
                            text-primary
                            transition
                            hover:bg-primary
                            hover:text-white
                        "
                            >
                                Manage Account
                            </Link>
                            <Link
                                href={routes.account.address}
                                onClick={() => setAccountOpen(false)}
                                className="
                            block
                            rounded-md
                            border
                            border-primary
                            py-3
                            text-center
                            font-semibold
                            text-primary
                            transition
                            hover:bg-primary
                            hover:text-white
                        "
                            >
                                Manage Address
                            </Link>
                        </>}
                </div>
                {isGuestUser === undefined && user && Object.keys(user).length > 0 &&
                    <div className="flex-1 overflow-y-auto py-6 border-t border-gray-200 -mx-6">
                        <h6 className="mb-4 px-6 text-md font-semibold text-primary">
                            Quick Links
                        </h6>
                        {quickLinks.map((item) => {
                            const Icon = item.icon;
                            return (
                                <Link
                                    key={item.title}
                                    href={item.href}
                                    onClick={() => setAccountOpen(false)}
                                    className="
                                flex
                                items-center
                                justify-between
                                rounded-md
                                px-6
                                py-2.5
                                text-sm
                                font-medium
                                text-gray-700
                                transition
                                hover:bg-gray-100
                                hover:text-primary
                            "
                                >
                                    <div className="flex items-center gap-3">
                                        <Icon
                                            sx={{ fontSize: 18 }}
                                            className="text-gray-500"
                                        />

                                        <span>
                                            {item.title}
                                        </span>
                                    </div>

                                    <ArrowForwardIosIcon
                                        sx={{ fontSize: 14 }}
                                        className="text-gray-500"
                                    />
                                </Link>
                            );
                        })}

                    </div>}
                {isGuestUser === undefined && user && Object.keys(user).length > 0 &&
                    <div className="mt-0 pt-0 sm:mt-0 lg:mt-5 sm:pt-0 lg:pt-5">

                        <button
                            onClick={handleLogout}
                            className="
                        flex
                        w-full
                        items-center
                        justify-center
                        rounded-md
                        px-3
                        py-3
                        text-sm
                        font-medium
                        text-red-700
                        transition
                        hover:bg-red-50
                        border
                        border-text-red-700
                        gap-2
                    "
                        >
                            <LogoutOutlinedIcon fontSize="small" />
                            Logout
                        </button>
                    </div>}
            </div>
        </div>
    );
}