"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import Image from "next/image";

import flag from "@/src/assets/images/flag.svg";
import logo from "@/src/assets/images/logo.png";
import langImage from "@/src/assets/images/lang.svg";
import userImage from "@/src/assets/images/userIcon.svg";
import cheveron from "@/src/assets/images/cheveron.svg";
import notificationImage from "@/src/assets/images/bill.svg";
import bars from "@/src/assets/images/bars.svg";

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { t } from "@/lib/i18n";
import { Button } from "@/components/ui/button";

import LogoutModal from "./LogoutModal";
import DeleteAccountModal from "./DeleteAccountModal";

import about from "@/src/assets/images/profileDropDown/about.svg";
import terms from "@/src/assets/images/profileDropDown/terms.svg";
import user from "@/src/assets/images/profileDropDown/user.svg";
import wallet from "@/src/assets/images/profileDropDown/wallet.svg";
import contact from "@/src/assets/images/profileDropDown/contact.svg";
import settings from "@/src/assets/images/settings.svg";
import order from "@/src/assets/images/orders.svg";
import cmplaint from "@/src/assets/images/cmplaint.svg";

import CongatsCard from "../global/CongatsCard";
import { useGetProfile } from "../Requests/useGetProfile";
import Cookies from "js-cookie";

const navItems = [
    { label: "الرئيسية", href: "/", lable_en: "Home" },
    { label: "المزادات", href: "/auctions", lable_en: "Auctions" },
    { label: "البطولات", href: "/championships", lable_en: "Championships" },
    { label: "الخدمات", href: "/services", lable_en: "Services" },
    { label: "الأندية", href: "/clubs", lable_en: "Clubs" },
    { label: "الأخبار", href: "/news", lable_en: "News" },
    { label: "المقالات", href: "/articles", lable_en: "Articles" },
];

// Dropdown items under "عن اللجنة"
const aboutCommitteeItems = [
    { labelKey: "vision_mission", href: "/about", fallbackAr: "الرؤية والرسالة", fallbackEn: "Vision & Mission" },
    { labelKey: "selection_standards", href: "/standards", fallbackAr: "معايير الاختيار", fallbackEn: "Selection Standards" },
    { labelKey: "committees_link", href: "/committees", fallbackAr: "اللجان", fallbackEn: "Committees" },
    { labelKey: "footer_menu_regulations", href: "/regulations", fallbackAr: "اللوائح", fallbackEn: "Regulations" },
    { labelKey: "media_library", href: "/gallery", fallbackAr: "مكتبة الصور", fallbackEn: "Media Library" },
];

export default function Header() {
    const pathname = usePathname();
    const router = useRouter();

    const [lang, setLang] = useState("ar");
    const [showLogoutModal, setShowLogoutModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [showSuccessCard, setShowSuccessCard] = useState(false);

    // ✅ open states (for overlay)
    const [profileOpen, setProfileOpen] = useState(false);
    const [mobileOpen, setMobileOpen] = useState(false);
    const [mobileAboutOpen, setMobileAboutOpen] = useState(false);

    const [hasToken, setHasToken] = useState(false);
    const { data: profile, isLoading: profileLoading } = useGetProfile(lang, hasToken);

    const profileMenuItems = useMemo(
        () => [
            { labelKey: "my_orders_page", href: "/my-orders", icon: order, iconAlt: "orders" },
            { labelKey: "settings_page", href: "/settings", icon: settings, iconAlt: "settings" },
            { labelKey: "profile", href: "/profile", icon: user, iconAlt: "profile" },
            { labelKey: "my_wallet", href: "/wallet", icon: wallet, iconAlt: "wallet" },
            { labelKey: "complaints", href: "/complaints", icon: cmplaint, iconAlt: "complaints" },
            { labelKey: "terms_and_conditions", href: "/terms-and-conditions", icon: terms, iconAlt: "terms" },
            { labelKey: "privacy-policy", href: "/privacy-policy", icon: terms, iconAlt: "privacy-policy" },
            { labelKey: "about-us", href: "/about", icon: about, iconAlt: "about" },
            { labelKey: "footer_contact_us", href: "/contact", icon: contact, iconAlt: "contact" },
        ],
        []
    );

    const [isLoggedIn, setIsLoggedIn] = useState(null);

    useEffect(() => {
        try {
            if (typeof window !== "undefined") {
                const saved = localStorage.getItem("lang");
                if (saved) setLang(saved);
                else {
                    localStorage.setItem("lang", "ar");
                    setLang("ar");
                }
            }
        } catch (error) {
            console.error("Header localStorage error:", error);
        }
    }, []);

    useEffect(() => {
        const token = !!Cookies.get("token");
        setIsLoggedIn(token);
        setHasToken(token);
    }, []);

    // Listen for session-expired event from useGetProfile
    useEffect(() => {
        const handleSessionExpired = () => {
            console.warn("[Header] Session expired event received - updating UI");
            setIsLoggedIn(false);
            setHasToken(false);
        };
        window.addEventListener("session-expired", handleSessionExpired);
        return () => window.removeEventListener("session-expired", handleSessionExpired);
    }, []);

    // auto-hide success card
    useEffect(() => {
        if (!showSuccessCard) return;
        const timer = setTimeout(() => setShowSuccessCard(false), 3000);
        return () => clearTimeout(timer);
    }, [showSuccessCard]);


    // ✅ lock scroll when overlay visible
    useEffect(() => {
        const isAnyOpen = profileOpen || mobileOpen;
        if (!isAnyOpen) return;
        document.body.style.overflow = "hidden";
        return () => {
            document.body.style.overflow = "";
        };
    }, [profileOpen, mobileOpen]);

    const closeAllMenus = useCallback(() => {
        setProfileOpen(false);
        setMobileOpen(false);
        setMobileAboutOpen(false);
    }, []);

    const handleLogoutClick = useCallback(() => {
        closeAllMenus();
        setShowLogoutModal(true);
    }, [closeAllMenus]);

    const handleLogoutConfirm = () => {
        setShowLogoutModal(false);
        setShowSuccessCard(true);
    };

    const toggleLang = () => {
        try {
            if (typeof window === "undefined") return;
            const next = lang === "ar" ? "en" : "ar";
            localStorage.setItem("lang", next);
            setLang(next);
            window.location.reload();
        } catch (error) {
            console.error("Header toggleLang error:", error);
        }
    };

    const isOverlayVisible = profileOpen || mobileOpen;

    return (
        <header className={"header"} style={{ direction: lang === "ar" ? "rtl" : "ltr" }}>
            {/* ✅ Overlay */}
            {isOverlayVisible && (
                <div className="header-dropdown-overlay" onClick={closeAllMenus} aria-hidden="true" />
            )}

            <div className={"topBar"}>
                <div className={"container"}>
                    <div className={"topBarInner"}>
                        <Image src={flag} alt="flag" className={"govFlag"} width={20} height={20} />
                        <span className={"govText"}>{t(lang, "website_title")}</span>
                    </div>
                </div>
            </div>

            <div className={"navBar"}>
                <div className="container">
                    <div className={"navInner"}>
                        <div className="flex items-center gap-6">
                            <Link href="/" onClick={closeAllMenus}>
                                <Image src={logo} alt="logo" className={"logo"} width={500} height={500} />
                            </Link>

                            <nav className={"navMenu"} aria-label="Main navigation">
                                {navItems.slice(0, 1).map((item, index) => {
                                    const isActive =
                                        item.href === "/" ? pathname === "/" : pathname?.startsWith(item.href);
                                    return (
                                        <Link
                                            href={item.href}
                                            key={index}
                                            className={`navItem ${isActive ? "active-link" : ""}`}
                                            onClick={closeAllMenus}
                                        >
                                            {lang === "ar" ? item.label : item.lable_en}
                                        </Link>
                                    );
                                })}

                                {(() => {
                                    const isAboutActive =
                                        pathname === "/about" ||
                                        pathname?.startsWith("/standards") ||
                                        pathname?.startsWith("/committees") ||
                                        pathname?.startsWith("/regulations") ||
                                        pathname?.startsWith("/gallery");
                                    const aboutLabel = t(lang, "committee_about") || (lang === "ar" ? "عن اللجنة" : "About Committee");

                                    return (
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <button
                                                    type="button"
                                                    className={`navItem ${isAboutActive ? "active-link" : ""}`}
                                                    aria-label={aboutLabel}
                                                >
                                                    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                                                        {aboutLabel}
                                                        <Image
                                                            src={cheveron}
                                                            alt="cheveron"
                                                            width={12}
                                                            height={12}
                                                            style={{ opacity: 0.9 }}
                                                        />
                                                    </span>
                                                </button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent
                                                dir={lang === "ar" ? "rtl" : "ltr"}
                                                className="w-56 header-dropdown-content"
                                            >
                                                <DropdownMenuGroup>
                                                    {aboutCommitteeItems.map((it, idx) => {
                                                        const translated = t(lang, it.labelKey);
                                                        const label =
                                                            translated && translated !== it.labelKey
                                                                ? translated
                                                                : lang === "ar"
                                                                  ? it.fallbackAr
                                                                  : it.fallbackEn;

                                                        return (
                                                            <DropdownMenuItem key={`about-${idx}`} className="cursor-pointer">
                                                                <Link href={it.href} className="w-full" onClick={closeAllMenus}>
                                                                    {label}
                                                                </Link>
                                                            </DropdownMenuItem>
                                                        );
                                                    })}
                                                </DropdownMenuGroup>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    );
                                })()}

                                {navItems.slice(1).map((item, index) => {
                                    const isActive =
                                        item.href === "/" ? pathname === "/" : pathname?.startsWith(item.href);
                                    return (
                                        <Link
                                            href={item.href}
                                            key={`n-${index}`}
                                            className={`navItem ${isActive ? "active-link" : ""}`}
                                            onClick={closeAllMenus}
                                        >
                                            {lang === "ar" ? item.label : item.lable_en}
                                        </Link>
                                    );
                                })}
                            </nav>
                        </div>

                        <div className={"navActions"}>
                            <button className={"langBtn"} type="button" onClick={toggleLang}>
                                <Image src={langImage} alt="lang" className={"langImage"} />
                                <span className={"langText"}>{lang === "ar" ? "English" : "العربية"}</span>
                            </button>

                            {isLoggedIn === null ? (
                                <div className="loginBtn" style={{ opacity: 0.6 }}>
                                    <Image src={userImage} alt="user" className={"loginIcon"} />
                                    <span className={"loginText"}>{t(lang, "login")}</span>
                                </div>
                            ) : !isLoggedIn ? (
                                <Link href="/login" className={"loginBtn"} onClick={closeAllMenus}>
                                    <Image src={userImage} alt="user" className={"loginIcon"} />
                                    <span className={"loginText"}>{t(lang, "login")}</span>
                                </Link>
                            ) : (
                                <>
                                    {profile && (
                                        <DropdownMenu open={profileOpen} onOpenChange={setProfileOpen}>
                                            <DropdownMenuTrigger className={"profileBtn"}>
                                                <Image src={userImage} alt="user" className={"loginIcon"} />
                                                <span className="username">{profile?.name}</span>
                                                <Image
                                                    src={cheveron}
                                                    alt="cheveron"
                                                    className={"cheveronIcon"}
                                                    width={15}
                                                    height={15}
                                                />
                                            </DropdownMenuTrigger>

                                            <DropdownMenuContent
                                                dir={lang === "ar" ? "rtl" : "ltr"}
                                                className="w-60 user-dropdown profile-dropdown header-dropdown-content"
                                            >
                                                <DropdownMenuLabel className="text-center">
                                                    {t(lang, "welcome")}
                                                </DropdownMenuLabel>
                                                <DropdownMenuSeparator />

                                                <DropdownMenuGroup>
                                                    {profileMenuItems.map((item, index) => (
                                                        <DropdownMenuItem key={index} className="cursor-pointer">
                                                            <Link
                                                                href={item.href}
                                                                className="w-full flex items-center gap-2"
                                                                onClick={closeAllMenus}
                                                            >
                                                                <div className="flex-shrink-0 w-7 h-7 bg-primary rounded-lg flex items-center justify-center">
                                                                    <Image src={item.icon} alt={item.iconAlt} width={13} height={13} />
                                                                </div>
                                                                <span className="text-base">{t(lang, item.labelKey)}</span>
                                                            </Link>
                                                        </DropdownMenuItem>
                                                    ))}

                                                    <DropdownMenuItem className="p-0">
                                                        <Button onClick={handleLogoutClick} className="logoutBtn-in-drop-header">
                                                            {t(lang, "logout")}
                                                        </Button>
                                                    </DropdownMenuItem>
                                                </DropdownMenuGroup>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    )}

                                    {profile && (
                                        <Link
                                            href="/notifications"
                                            onClick={closeAllMenus}
                                            className={`notification-cont ${profile?.notifyCount > 0 ? "has-notification" : ""
                                                }`}
                                        >
                                            <Image
                                                src={notificationImage}
                                                alt="notification"
                                                className={"notificationIcon"}
                                                width={100}
                                                height={100}
                                            />
                                        </Link>
                                    )}
                                </>
                            )}

                            <div className="mob-menue">
                                <button
                                    type="button"
                                    className={"profileBtn"}
                                    aria-label="Menu"
                                    onClick={() => setMobileOpen((v) => !v)}
                                >
                                    <Image src={bars} alt="bars" className={"barsIcon"} />
                                </button>

                                {mobileOpen && (
                                    <div
                                        className="mobile-drawer"
                                        role="dialog"
                                        aria-modal="true"
                                        dir={lang === "ar" ? "rtl" : "ltr"}
                                        onClick={closeAllMenus}
                                    >
                                        <div className="mobile-drawer-panel" onClick={(e) => e.stopPropagation()}>
                                            <div className="mobile-drawer-header">
                                                <button
                                                    type="button"
                                                    className="mobile-drawer-close"
                                                    aria-label="Close menu"
                                                    onClick={closeAllMenus}
                                                >
                                                    ×
                                                </button>
                                            </div>

                                            <div className="mobile-drawer-list">
                                                <button
                                                    type="button"
                                                    className="mobile-drawer-item mobile-accordion-trigger"
                                                    onClick={() => setMobileAboutOpen((v) => !v)}
                                                >
                                                    <span className="mobile-drawer-text">
                                                        {t(lang, "committee_about") || (lang === "ar" ? "عن اللجنة" : "About Committee")}
                                                    </span>
                                                    <span className={`mobile-drawer-chevron ${mobileAboutOpen ? "open" : ""}`}>
                                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                                            <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                        </svg>
                                                    </span>
                                                </button>

                                                {mobileAboutOpen && (
                                                    <div className="mobile-accordion-content">
                                                        {aboutCommitteeItems.map((it, idx) => {
                                                            const translated = t(lang, it.labelKey);
                                                            const label =
                                                                translated && translated !== it.labelKey
                                                                    ? translated
                                                                    : lang === "ar"
                                                                      ? it.fallbackAr
                                                                      : it.fallbackEn;
                                                            return (
                                                                <Link
                                                                    key={`m-about-${idx}`}
                                                                    href={it.href}
                                                                    className="mobile-subitem"
                                                                    onClick={closeAllMenus}
                                                                >
                                                                    {label}
                                                                </Link>
                                                            );
                                                        })}
                                                    </div>
                                                )}

                                                {navItems.map((item, index) => (
                                                    <Link
                                                        href={item.href}
                                                        key={index}
                                                        className="mobile-drawer-item mobile-link"
                                                        onClick={closeAllMenus}
                                                    >
                                                        {lang === "ar" ? item.label : item.lable_en}
                                                    </Link>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <LogoutModal
                isOpen={showLogoutModal}
                onClose={() => setShowLogoutModal(false)}
                onConfirm={handleLogoutConfirm}
                lang={lang}
            />

            <DeleteAccountModal
                isOpen={showDeleteModal}
                onClose={() => setShowDeleteModal(false)}
                lang={lang}
            />

            {showSuccessCard && (
                <CongatsCard
                    title={t(lang, "logout_success_title")}
                    description={t(lang, "logout_success_desc")}
                />
            )}
        </header>
    );
}