'use client'

import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import navigation from "../../../../../../public/assets/Images/Icons/navigation_icons.svg";
import general from "../../../../../../public/assets/Images/Icons/general_icons.svg";
import pawMenuHeader from "../../../../../../public/assets/Images/Icons/pawMenuHeader.svg";
import whatsAppSecundary from "../../../../../../public/assets/Images/Icons/whatsAppIcon.svg";
import { useWebContext } from "@/app/(site)/providers";
import { MdOutlineKeyboardArrowRight } from "react-icons/md";

interface LinkNavProps {
    label: string;
    navigate: string;
    activeLink?: string;
    onClick: (label: string) => void;
    isDropdown?: boolean;
    isClientSuport?: boolean;
    isSuport?: boolean;
    isClientArea?: boolean
}


function LinkNav({ label, navigate, activeLink, onClick, isDropdown, isClientSuport, isSuport, isClientArea }: LinkNavProps) {
    const isActive = activeLink === label;

    const areaCliente = (label == 'Área do Cliente' ? 'rounded-t-2xl' : '');

    const areaConsultor = (label == 'Área do Consultor' ? 'rounded-b-2xl' : '');

    const segundoBoleto = (label == '2º via de boleto' ? 'rounded-t-lg' : '');

    const duvidaSugestoes = (label == 'Dúvidas e Sugestões' ? 'rounded-b-lg' : '');

    return (
        <li className={`relative group ${isDropdown ? `hover:bg-plamev-blue-200 bg-opacity-55 ${areaCliente} ${areaConsultor} ${segundoBoleto} ${duvidaSugestoes}` : ''} ${isDropdown ? 'w-full' : ''}`}>
            <Link
                href={navigate}
                className={`${!isDropdown ? 'flex items-center transition transform duration-200 ease-in hover:translate-x-[15px]' : ''} inline-block px-1 xl:px-2 py-3 text-[11px] xl:text-[13px] font-medium w-full whitespace-nowrap ${isActive ? 'text-[--primary]' : 'text-gray-700'} `}
                onClick={() => onClick(label)}
            >
                {isClientSuport && (
                    <div className="absolute ms-1">
                        <Image
                            src={whatsAppSecundary}
                            alt="Paw"
                            width={24}
                            height={24}
                        />
                    </div>
                )}

                {!isDropdown && (
                    <div
                        className={`transform opacity-0 
                        ${isActive ? 'opacity-100' : 'group-hover:opacity-100'} transition-opacity duration-300 ease-in-out z-20`}
                    >
                        <Image
                            src={pawMenuHeader}
                            alt="Paw"
                            width={23}
                            height={23}
                            className={`mr-2 transition-transform transform duration-300 ease-in-out -rotate-12 
                                ${isActive ? 'rotate-[5deg] scale-[1.5]' : 'group-hover:rotate-[5deg] group-hover:scale-[1.5] scale-100'}`}
                        />
                    </div>
                )}

                <div className={`flex justify-between items-center ${!isClientArea ? 'ml-1' : ''}`}>
                    <span
                        className={`relative z-10 text-[13px] font-normal ${isActive ? 'font-semibold' : ''} ${isClientSuport ? 'ml-7' : ''}`}>
                        {label}
                    </span>

                    {isDropdown && <MdOutlineKeyboardArrowRight />}
                </div>
            </Link>
        </li>
    );
}


function NavLink() {
    const [isDropdownOpen, setDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLLIElement>(null);
    const [activeLink, setActiveLink] = useState("");

    const handleLinkClick = (label: string) => {
        setActiveLink(label);
    };

    const handleLinkClickAndToggleDropdown = (_label: string) => {
        setDropdownOpen(!isDropdownOpen);
    };

    const toggleDropdown = () => {
        setDropdownOpen(!isDropdownOpen);
    };

    const handleClickOutside = (event: MouseEvent) => {
        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
            setDropdownOpen(false);
        }
    };

    useEffect(() => {
        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);


    return (
        <nav className="w-full">
            <ul className="flex flex-col md:flex-row text-[--text-color] items-center justify-center">
                <LinkNav
                    label="Nossos Planos"
                    navigate="/nossos-planos"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="Planos para empresa"
                    navigate="/planos-para-empresas"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="Seja Credenciado"
                    navigate="/seja-credenciado"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="Rede Credenciada"
                    navigate="/rede"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="Quem Somos"
                    navigate="/quem-somos"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="Blog"
                    navigate="/blog"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <LinkNav
                    label="2º via de boleto"
                    navigate="/segunda-via-boleto"
                    activeLink={activeLink}
                    onClick={handleLinkClick}
                />

                <span ref={dropdownRef}>
                    <LinkNav
                        label="Ajuda"
                        navigate="#"
                        activeLink={activeLink}
                        onClick={handleLinkClickAndToggleDropdown}
                    />

                    {isDropdownOpen && (
                        <>
                            <ul className="absolute mt-2 bg-white rounded-lg w-[230px] z-10 shadow-lg">
                                <LinkNav
                                    label="Trabalhe conosco"
                                    navigate="/trabalhe-conosco"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isSuport={true}
                                />

                                <LinkNav
                                    label="Suporte ao cliente"
                                    navigate="https://wa.link/c9xasi"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientSuport={true}
                                    isSuport={true}
                                />

                                <LinkNav
                                    label="Suporte ao Credenciado"
                                    navigate="https://plamev.pet/WhastAppSuporteCrede"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientSuport={true}
                                    isSuport={true}
                                />

                                <LinkNav
                                    label="Dúvidas e Sugestões"
                                    navigate="/duvidas-sugestoes"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isSuport={true}
                                />
                            </ul>
                        </>
                    )}
                </span>
            </ul>
        </nav>
    );

}

export default function HeaderWeb() {
    const { setIsModalStateOpen } = useWebContext();
    const [isDropdownOpen, setDropdownOpen] = useState(false);

    const [activeLink, setActiveLink] = useState("");

    const handleLinkClick = (label: string) => {
        setActiveLink(label);
    };
    ;

    const toggleDropdown = () => {
        setDropdownOpen(!isDropdownOpen);
    };

    return (
        <>
            <div className="flex-grow flex items-center justify-center mt-4 md:mt-0 z-[50]">
                <NavLink />
            </div>

            <div
                className="flex flex-col md:flex-row items-center justify-center w-full md:w-auto gap-2 mt-4 md:mt-0 relative z-[10]">
                <button
                    onClick={() => setIsModalStateOpen(true)}
                    title="Sua localização"
                    className="ml-3 border bg-[#FFFDFA] border-[#E9ECED] text-[--text-color] rounded-lg px-3 py-2 flex items-center justify-center w-[44px] xl:w-auto h-[44px] xl:h-[56px] transition-colors duration-200 ease-in-out hover:bg-[#F4F4F4]"
                >
                    <Image
                        src={navigation}
                        alt="Sua Localização"
                        className="w-5 h-auto"
                    />
                    <span className="hidden xl:inline ml-2 text-[13px] font-semibold whitespace-nowrap">Sua localização</span>
                </button>

                <div className="relative">
                    <button
                        onClick={toggleDropdown}
                        title="Área do Cliente"
                        className="border bg-[#1DA1C2] border-[#E9ECED] rounded-lg px-3 py-2 flex items-center justify-center w-[44px] xl:w-auto h-[44px] xl:h-[56px] text-white hover:bg-[#168ABF]"
                    >
                        <Image src={general} alt="Área do Cliente" className="w-5 h-auto" />
                        <span className="hidden xl:inline ml-2 text-[13px] font-semibold whitespace-nowrap">Área do Cliente</span>
                    </button>

                    {isDropdownOpen && (
                        <>
                            <div
                                className="fixed inset-0 bg-black bg-opacity-50 z-0"
                                onClick={toggleDropdown}
                            ></div>

                            <ul className="absolute -ml-14 bg-white rounded-2xl w-[250px] z-10 flex justify-center flex-col items-start">
                                <LinkNav
                                    label="Área do Cliente"
                                    navigate="https://cliente.plamev.com.br/"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientArea={true}
                                />

                                <LinkNav
                                    label="Área do Credenciado"
                                    navigate="https://credenciado.plamev.com.br/"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientArea={true}
                                />

                                <LinkNav
                                    label="Área do Veterinário"
                                    navigate="https://veterinario.plamev.com.br/"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientArea={true}
                                />

                                <LinkNav
                                    label="Área do Consultor"
                                    navigate="https://escritorio.plamev.com.br/"
                                    activeLink={activeLink}
                                    onClick={handleLinkClick}
                                    isDropdown={isDropdownOpen}
                                    isClientArea={true}
                                />
                            </ul>
                        </>
                    )}
                </div>
            </div>
        </>
    );
}