"use client";
import { useToken } from "@/hooks/use-token";
import { clearToken } from "@/utils/get-token";
import LogoAr from "@/assets/used-images/logo-header.png";
import LogoEn from "@/assets/icons/logo-en.png";
import { useState } from "react";
import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
import {
    ChevronDown,
    Menu,
    User2Icon,
    UserCheck2,
    UserCircle2,
    BookType,
    Boxes,
    Edit,
    Package,
    LogOut,
    FileArchive,
    ChevronsUpDownIcon
} from "lucide-react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    Sheet,
    SheetContent,
    SheetTrigger,
} from "@/components/ui/sheet";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";

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

import { SearchComponent } from "@/views/home/components/search";
import LanguageSwitcher from "@/views/home/components/language-switcher";


import { useTranslation } from "react-i18next";
import { useLanguage } from "@/store/language-context";
import { useIsMobile } from "@/hooks/use-mobile";

export default function Navbar() {
    const { t } = useTranslation();
    const { lang } = useLanguage();

    const navigate = useNavigate();
    const location = useLocation();
    const token = useToken();
    const isMobile = useIsMobile();

    const [openSheet, setOpenSheet] = useState(false);
    const [openPopOver, setOpenPopOver] = useState(false);

    const servicesRoutes = [
        { path: '/services/training', label: t('routes.training'), desc: t('nav.training') },
        { path: '/services/consulting', label: t('routes.consulting'), desc: t('nav.consulting') },
        { path: '/services/coaching', label: t('routes.coaching'), desc: t('nav.coaching') },
        { path: '/services/training-platforms', label: t('routes.platforms'), desc: t('nav.platforms') },
        { path: '/services/evaluations', label: t('routes.evaluations'), desc: t('nav.evaluations') },
        { path: '/services/training-kits', label: t('routes.training-kits'), desc: t('nav.training-kits') },
        {
            path: '/services/learning-solutions',
            label: t('routes.learning-solutions'),
            desc: t('nav.learning-solutions')
        },
        { path: '/services/third-sector', label: t('routes.third-sector'), desc: t('nav.third-sector') },
    ];

    const logout = () => {
        clearToken();
        window.location.reload();
    };

    const navigateToSection = (sectionNumber: number) => {
        navigate(`/profile?sec=${sectionNumber}`);
    };

    if (location.pathname === '/login' || location.pathname === '/otp-code' ||
        location.pathname === '/forget-password' || location.pathname === '/reset-password') {
        return null
    };

    return (
        <>
            <header className="relative z-30 w-full" dir={lang === "en" ? 'ltr' : 'rtl'}>
                <nav className="bg-primary-tw layout !py-3 flex justify-between items-center w-full text-white max-lg:px-2  max-md:gap-3 max-lg:flex-col">
                    <div className="flex items-center">
                        <NavLink to={'/privacy-policy'} className="text-gray-50 hover:text-gray-200">
                            {t('routes.privacy-policy')}
                        </NavLink>
                        <span className="mx-2 bg-white h-4 w-[1px] block"></span>
                        <NavLink to={'/contact-us'} className="text-gray-50 hover:text-gray-200">
                            {t('routes.contact-us')}
                        </NavLink>
                    </div>

                    <div className="flex items-center gap-1 flex-wrap justify-center">
                        <div className="flex items-center gap-2 my-2">
                            {
                                lang === 'ar' ?
                                    <Button asChild className="bg-secondary-tw/20 h-8 w-auto">
                                        <Link to={'https://ivorytraining.com/assets/ar-Dmxa2QzI.pdf'} target="_blank">
                                            <FileArchive /> الملف التعريفي
                                        </Link>
                                    </Button >
                                    :
                                    <Button asChild className="bg-secondary-tw/20 h-8 w-auto">
                                        <Link to={'https://ivorytraining.com/assets/en.pdf'} target="_blank">
                                            <FileArchive /> Profile
                                        </Link>
                                    </Button >
                            }
                        </div >
                        {
                            token ?
                                <DropdownMenu>
                                    < DropdownMenuTrigger asChild >
                                        <Button variant="outline" className="bg-secondary-tw/20 border-none h-8 [&_svg]:size-5">
                                            <UserCircle2 />
                                            <ChevronDown />
                                        </Button>
                                    </DropdownMenuTrigger >
                                    <DropdownMenuContent align="center" className="!bg-white relative z-[9999999999999999]">
                                        <DropdownMenuLabel className="rtl:text-right ltr:text-left">
                                            {t('routes.my-account')}
                                        </DropdownMenuLabel>
                                        <DropdownMenuSeparator className="bg-gray-300" />

                                        <DropdownMenuGroup>
                                            <DropdownMenuItem asChild>
                                                <Link to={'/profile'} className="hover:bg-secondary-tw/20 cursor-pointer rtl:flex-row-reverse">
                                                    <UserCheck2 />
                                                    {t('routes.profile')}
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem className="hover:bg-secondary-tw/20 cursor-pointer rtl:flex-row-reverse"
                                                onClick={() => navigateToSection(1)}>
                                                <Package />
                                                {t('routes.services')}
                                            </DropdownMenuItem>
                                            <DropdownMenuItem className="hover:bg-secondary-tw/20 cursor-pointer rtl:flex-row-reverse"
                                                onClick={() => navigateToSection(2)}>
                                                <BookType />
                                                {t('routes.training-courses')}
                                            </DropdownMenuItem>
                                            <DropdownMenuItem className="hover:bg-secondary-tw/20 cursor-pointer rtl:flex-row-reverse"
                                                onClick={() => navigateToSection(3)}>
                                                <Boxes />
                                                {t('routes.packages')}
                                            </DropdownMenuItem>
                                            <DropdownMenuItem className="hover:bg-secondary-tw/20 cursor-pointer rtl:flex-row-reverse"
                                                onClick={() => navigateToSection(5)}>
                                                <Edit />
                                                {t('routes.profile-edit')}
                                            </DropdownMenuItem>
                                            <DropdownMenuSeparator className="bg-gray-300" />
                                            <DropdownMenuItem asChild>
                                                <Button onClick={logout} className="hover:bg-red-50 cursor-pointer h-7 w-full justify-start text-red-500 rtl:flex-row-reverse">
                                                    <LogOut className="rotate-180 rtl:rotate-0" />
                                                    {t('custom.logout')}
                                                </Button>
                                            </DropdownMenuItem>
                                        </DropdownMenuGroup>

                                    </DropdownMenuContent>
                                </DropdownMenu >
                                :
                                <Button asChild className="bg-secondary-tw/20 h-8 w-auto text-base">
                                    <Link to={'/login'}>
                                        <span>
                                            <User2Icon size={20} className="text-transparent fill-secondary-tw" />
                                        </span>
                                        <span>
                                            {t('routes.login')}
                                        </span>
                                    </Link>
                                </Button>
                        }
                    </div >
                </nav >
                {
                    isMobile ?
                        <nav className="flex items-center layout !py-6 w-full gap-4 justify-between">
                            < Link to={'/'} className="lg:pr-2" >
                                <img
                                    src={lang === 'en' ? LogoEn : LogoAr}
                                    alt="Ivory"
                                    title="Ivory"
                                    className="w-28"
                                />
                            </Link >
                            <div className="flex items-center gap-2 w-full justify-end">

                                <LanguageSwitcher />
                                <Sheet open={openSheet} onOpenChange={setOpenSheet}>
                                    <SheetTrigger className="text-secondary-tw">
                                        <Menu />
                                    </SheetTrigger>
                                    <SheetContent className="bg-white" side={lang === "en" ? "left" : "right"}>
                                        <ul className="grid gap-4 place-items-center py-20">
                                            <li>
                                                <NavLink to={'/'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.home')}
                                                </NavLink>
                                            </li>
                                            <li>
                                                <NavLink to={'/about'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.about')}
                                                </NavLink>
                                            </li>
                                            <li className="relative z-30">
                                                <Popover open={openPopOver} onOpenChange={setOpenPopOver}>
                                                    <PopoverTrigger
                                                        className="text-[16px] gap-3 flex items-center"
                                                        dir={lang === "en" ? 'ltr' : 'rtl'}
                                                    >
                                                        {t('routes.services')} <ChevronsUpDownIcon size={15} />
                                                    </PopoverTrigger>
                                                    <PopoverContent className="bg-white">
                                                        <ul className="grid gap-2">
                                                            {servicesRoutes.map((route, i) => (
                                                                <li key={i}>
                                                                    <NavLink to={route.path}
                                                                        onClick={() => {
                                                                            setOpenPopOver(false);
                                                                            setOpenSheet(false);
                                                                        }}
                                                                    >
                                                                        {route.label}
                                                                    </NavLink>
                                                                </li>
                                                            ))}
                                                        </ul>
                                                    </PopoverContent>
                                                </Popover>
                                            </li>
                                            <li>
                                                <NavLink to={'/training-courses?page=1'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.training-courses')}
                                                </NavLink>
                                            </li>
                                            <li>
                                                <NavLink to={'/accreditations'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.accreditations')}
                                                </NavLink>
                                            </li>
                                            <li>
                                                <NavLink to={'/training-plans'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.training-plan')}
                                                </NavLink>
                                            </li>
                                            <li>
                                                <NavLink to={'/seminars'} className=" hover:text-secondary-tw"
                                                    onClick={() => setOpenSheet(false)}>
                                                    {t('routes.seminars')}
                                                </NavLink>
                                            </li>

                                            <li><SearchComponent /></li>
                                            <li>
                                                <LanguageSwitcher />
                                            </li>
                                        </ul>
                                    </SheetContent>
                                </Sheet>
                            </div>

                        </nav >
                        :
                        <nav className="flex lg:justify-between items-center layout !py-6 w-full gap-4">
                            <Link to={'/'} className="lg:pr-2">
                                <img
                                    src={lang === 'en' ? LogoEn : LogoAr}
                                    alt="Ivory"
                                    title="Ivory"
                                    className="w-28"
                                />
                            </Link>

                            <ul className={`flex justify-center font-medium items-center gap-4 text-common-text`}>
                                <li>
                                    <NavLink to={'/'} className=" hover:text-secondary-tw">
                                        {t('routes.home')}
                                    </NavLink>
                                </li>
                                <li>
                                    <NavLink to={'/about'} className=" hover:text-secondary-tw">
                                        {t('routes.about')}
                                    </NavLink>
                                </li>
                                <li className="relative z-[100]">
                                    <Popover>
                                        <PopoverTrigger asChild>
                                            <Button variant="ghost"
                                                className="text-base hover:bg-gray-100"
                                            >
                                                {t('routes.services')} <ChevronDown size={14} className="mt-1" />
                                            </Button>
                                        </PopoverTrigger>
                                        <PopoverContent className="bg-white w-fit">
                                            <ul className="grid w-44 h-full !z-[100] relative gap-1"
                                                dir={lang === "en" ? 'ltr' : 'rtl'}
                                            >
                                                {servicesRoutes.map((route, i) => (
                                                    <NavLink key={i} to={route.path} className={'w-full transition-all rounded-md group'}>
                                                        <span className=" group-hover:text-secondary-tw">
                                                            {route.label}
                                                        </span>
                                                    </NavLink>
                                                ))}
                                            </ul>
                                        </PopoverContent>
                                    </Popover>
                                </li>
                                <li>
                                    <NavLink to={'/training-courses?page=1'} className=" hover:text-secondary-tw">
                                        {t('routes.training-courses')}
                                    </NavLink>
                                </li>
                                <li>
                                    <NavLink to={'/accreditations'} className=" hover:text-secondary-tw">
                                        {t('routes.accreditations')}
                                    </NavLink>
                                </li>
                                <li>
                                    <NavLink to={'/training-plans'} className=" hover:text-secondary-tw">
                                        {t('routes.training-plan')}
                                    </NavLink>
                                </li>
                                <li>
                                    <NavLink to={'/seminars'} className=" hover:text-secondary-tw">
                                        {t('routes.seminars')}
                                    </NavLink>
                                </li>

                            </ul>

                            <div className="flex items-center gap-4">
                                <SearchComponent />
                                <LanguageSwitcher />
                            </div>
                        </nav>
                }
            </header >
        </>
    )
};