'use client';

import { useState, useEffect, useRef } from "react";
import { useWebContext } from "@/app/(site)/providers";
import Image from "next/image";
import navigation from "../../../../../../public/assets/Images/Icons/navigation_icons.svg";
import pawMenuHeader from "../../../../../../public/assets/Images/Icons/pawMenuHeader.svg";
import general from "../../../../../../public/assets/Images/Icons/general_icons.svg";
import { useCredentialContext } from "@/hooks/credenciado";
import Link from "next/link";

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

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

    return (
        <li className={`relative group py-4`}>
            <Link
                href={navigate}
                className={`inline-block px-2 py-1 text-sm md:text-base lg:text-lg font-medium w-full`}
                onClick={() => {
                    onClick(label)
                    if (isSuport) {
                        setCloseMenu(true)
                    }
                }}
            >

                <div className="flex justify-start items-center ml-2">
                    <span className={`relative z-10 ml-3 text-[14px] font-[16px]`}>
                        {label}
                    </span>
                </div>
            </Link>
        </li>
    );
}

function DropdownNav({ closeDropdown, isClientArea }: { closeDropdown: () => void, isClientArea?: boolean }) {
    const { setIsModalStateOpen } = useWebContext();
    const [isDropdownOpen, setDropdownOpen] = useState(false);
    const [isDropdownOpenClient, setDropdownOpeCliente] = useState(false);
    const [activeLink, setActiveLink] = useState("");

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

    const toggleDropdown = () => {
        setDropdownOpeCliente(!isDropdownOpenClient);
    };

    return (
        <div
            id="dropdownMenu"
            className="fixed inset-0 top-[80px] bg-white rounded w-full p-4 z-[9999] overflow-y-auto"
        >
            <div className="text-[--text-color]">
                <ul>
                    <LinkNav
                        label="Nossos Planos"
                        navigate="/nossos-planos"
                        onClick={closeDropdown}
                    />

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

                    <hr className="border-[#FDF8ED]" />

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

                    <hr className="border-[#FDF8ED]" />

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

                    <hr className="border-[#FDF8ED]" />

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

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

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

                    <hr className="border-[#FDF8ED]" />

                    {/* <LinkNav
                        label="Suporte"
                        navigate="https://api.whatsapp.com/send/?phone=5531991262600&text&type=phone_number&app_absent=0"
                        onClick={closeDropdown}
                    /> */}

                    <li className="relative group py-4">
                        <button
                            className="inline-block px-2 py-1 text-sm font-medium w-full text-left"
                            onClick={() => setDropdownOpen(!isDropdownOpen)}
                        >
                            <div className="flex justify-between items-center ml-2">
                                <span className="relative z-10 ml-3 text-[14px]">Ajuda</span>
                                <span className="mr-2 text-gray-400">{isDropdownOpen ? '▲' : '▼'}</span>
                            </div>
                        </button>

                        {isDropdownOpen && (
                            <ul className="pl-6 bg-gray-50 rounded-lg mt-1">
                                <LinkNav
                                    label="Trabalhe conosco"
                                    navigate="/trabalhe-conosco"
                                    activeLink={activeLink}
                                    onClick={closeDropdown}
                                    isSuport={true}
                                />

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

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

                                <LinkNav
                                    label="Dúvidas e Sugestões"
                                    navigate="/duvidas-sugestoes"
                                    activeLink={activeLink}
                                    onClick={closeDropdown}
                                    isSuport={true}
                                />
                            </ul>
                        )}
                    </li>
                </ul>
            </div>

            <div className="flex justify-center items-start gap-4 flex-col">
                <button
                    onClick={() => setIsModalStateOpen(true)}
                    className="border bg-[#FFFDFA] border-[#E9ECED] text-[--text-color] rounded-lg px-3 py-2 flex items-center w-full md:w-auto h-[44px] transition-colors duration-200 ease-in-out hover:bg-[#F4F4F4]"
                >
                    <Image src={navigation} alt="Sua Localização" className="w-5 h-auto" />
                    <span className="ml-2 text-[13px] font-semibold">
                        {window.localStorage.getItem('Estados')}
                    </span>
                </button>

                <a
                    href="https://cliente.plamev.com.br/"
                    target="_blank"
                    onClick={toggleDropdown}
                    className="border bg-[#1DA1C2] border-[#E9ECED] text-white rounded-lg px-3 py-2 flex items-center w-full md:w-auto h-[44px] transition-colors duration-200 ease-in-out hover:bg-[#168ABF]"
                >
                    <Image src={general} alt="Área do Cliente" className="w-5 h-auto" />
                    <span className="ml-2 text-[13px] font-semibold">Área do Cliente</span>
                </a>
            </div>
        </div>
    );
}

export default function HeaderMobile() {
    const [isDropdownOpen, setDropdownOpen] = useState(false);
    const { closeMenu, setCloseMenu } = useCredentialContext();

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

    const closeDropdown = (event?: any) => {
        if (event && (event.target.closest('#dropdownButton') || event.target.closest('#dropdownMenu'))) {
            setDropdownOpen(false);
        }
    };

    useEffect(() => {
        if (isDropdownOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
        return () => {
            document.body.style.overflow = '';
        };
    }, [isDropdownOpen]);

    return (
        <>
            <div className="flex-grow flex items-center justify-end w-1/5 px-4 relative z-[50]">
                <button
                    id="dropdownButton"
                    className="border border-none rounded px-4 py-2 flex items-center"
                    onClick={() => setCloseMenu(!closeMenu)}
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-[28px] w-[28px] mr-2"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M4 6h16M4 12h16M4 18h16"
                        />
                    </svg>
                </button>
            </div>

            {!closeMenu && <DropdownNav closeDropdown={closeDropdown} />}
        </>
    );
}