"use client";

import { AnimatePresence } from "framer-motion";
import Image from "next/image";
import LocaleLink from "@/components/ui/LocaleLink";
import { redirect, usePathname } from "next/navigation";
import { useEffect, useMemo, useRef, useState } from "react";

import { useClickOutside } from "@/hooks/useClickOutside";
import { useTranslation } from "@/hooks/useTranslation";
import { useAppDispatch } from "@/libs/redux/store";
import User from "@/models/user";
import { ProfileStatItem } from "@/types/profileStat";
import Cookies from "js-cookie";
import ProfileDropdown from "./ProfileDropdown";

export default function DashboardNavbar({ initialUser, invalidToken }: { initialUser: User, invalidToken?: boolean }) {
    const user = initialUser;
    const isLoggedIn = Cookies.get("isLoggedIn");
    const dispatch = useAppDispatch();
    const pathname = usePathname();
    const { language } = useTranslation();

    const [open, setOpen] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

      useEffect(() => {
        if (invalidToken) {
          Cookies.remove("token");
          Cookies.remove("user");
          Cookies.remove("isLoggedIn");
        }
      }, [invalidToken]);

    useClickOutside(ref, () => setOpen(false));

    useEffect(() => setOpen(false), [pathname]);

    const avatarUrl: string = useMemo(() => {
        if (user?.avatar) return user.avatar;

        return `https://ui-avatars.com/api/?name=${encodeURIComponent(
            user?.name ?? "User"
        )}&background=0D8ABC&color=fff`;
    }, [user?.avatar, user?.name]);

    const stats: readonly ProfileStatItem[] = useMemo(
        () => [
            { label: "Coin", value: user?.totalTopupCoins ?? 0, icon: "GoldCoin.png" },
            { label: "Point", value: user?.totalPoints ?? 0, icon: "BlueCoin.png" },
            { label: "Goldflea", value: user?.totalGoldflea ?? 0, icon: "GoldFlea.png" },
            { label: "Income", value: user?.totalIncome ?? 0, icon: "GreenCoin.png" },
        ],
        [
            user?.totalTopupCoins,
            user?.totalPoints,
            user?.totalGoldflea,
            user?.totalIncome,
        ]
    );

    return (
        <header className="fixed top-0 z-20 w-full bg-white px-4 lg:px-10 h-24 flex items-center">
            <div className="w-full flex justify-between items-center pl-10 lg:pl-0">
                <LocaleLink href="/" className="shrink-0">
                    <Image
                        src="/assets/Main/Logo/logo kutubuku.png"
                        alt="KutuBuku"
                        width={96}
                        height={40}
                        className="h-auto w-20 lg:w-24"
                    />
                </LocaleLink>

                {isLoggedIn && user ? (
                    <div ref={ref} className="relative">
                        <button
                            onClick={() => setOpen(v => !v)}
                            className="flex items-center gap-3"
                        >
                            <img
                                src={avatarUrl}
                                alt={user.name}
                                className="w-10 h-10 rounded-full cursor-pointer border-2 border-transparent hover:border-gray-300"
                            />
                            <div className="text-left">
                                <p className="text-sm font-semibold">{user.name}</p>
                                <span className="text-xs text-green-500">
                                    Lihat akun
                                </span>
                            </div>
                        </button>

                        <AnimatePresence>
                            {open && (
                                <ProfileDropdown
                                    stats={stats}
                                    onClose={() => setOpen(false)}
                                    onLogout={() => redirect(`/${language}/auth/logout?callbackUrl=/${language}/auth/login`)}
                                />
                            )}
                        </AnimatePresence>
                    </div>
                ) : (
                    <LocaleLink
                        href="/auth/login"
                        className="bg-green-500 text-white px-5 py-2 rounded-full"
                    >
                        Login
                    </LocaleLink>
                )}
            </div>
        </header>
    );
}