"use client";

import Link from "next/link";
import { useState, useEffect } from "react";
import { GiSpray } from "react-icons/gi";
import { HiOutlineMail, HiOutlinePhone, HiOutlineLocationMarker } from "react-icons/hi";
import { IoIosClose } from "react-icons/io";
import { FaAngleDown, FaAngleRight } from "react-icons/fa6";
import { HiMenu, HiX } from "react-icons/hi";
import { getProducts, getSiteInfo } from "@/app/lib/api";
import SocialIcons from "./SocialIcons";

export default function Nav() {
    const [products, setProducts] = useState([]);
    const [siteInfo, setSiteInfo] = useState({});
    const [isOpen, setIsOpen] = useState(false);
    const [dropdown, setDropdown] = useState(false);
    const [scroll, setScroll] = useState(false);


    useEffect(() => {
        async function loadData() {
            const p = await getProducts();
            const s = await getSiteInfo();

            setProducts(p || []);
            setSiteInfo(s || {});
        }

        loadData();

        const handleScroll = () => {
            setScroll(window.scrollY > 100);
        };

        window.addEventListener("scroll", handleScroll);

        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <header className="w-full relative z-20">

            {/* TOP BAR */}
            <div className="bg-white ">
                <div className="container-fluid flex items-center justify-center ">

                    {/* Info */}
                    <div className="hidden lg:flex justify-center items-center gap-10">

                        <div className="hidden xl:flex items-center gap-3 border-r pr-10 relative py-4">
                            <span className="absolute left-0 top-0 bg-amber-500 w-11 h-14 z-0 rounded-b-full"></span>
                            <div className="bg-[#6112a0] text-white p-3 rounded-full relative z-[1]">
                                <HiOutlineLocationMarker size={20} />
                            </div>

                            <div>
                                <p className="text-xs text-gray-500">Company Location</p>
                                <p className="text-[15px]">
                                 Ghaziabad, UP-245101</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-3 border-r pr-10 py-4 relative">
                            <span className="absolute left-0 top-0 bg-amber-500 w-11 h-14 z-0 rounded-b-full"></span>
                            <div className="bg-[#6112a0] text-white p-3 rounded-full relative z-[1]">
                                <HiOutlineMail size={20} />
                            </div>

                            <div>
                                <p className="text-xs text-gray-500">Email Address</p>
                                <a className="text-[15px]" href={`mailto:${siteInfo?.primaryEmail}`}>
                                    {siteInfo?.primaryEmail}
                                </a>
                            </div>
                        </div>

                        <div className="flex items-center gap-3 py-4 relative">
                            <span className="absolute left-0 top-0 bg-amber-500 w-11 h-14 z-0 rounded-b-full"></span>
                            <div className="bg-[#6112a0] text-white p-3 rounded-full relative z-[1]">
                                <HiOutlinePhone size={20} />
                            </div>

                            <div>
                                <p className="text-xs text-gray-500">Phone Number</p>
                                <a className="text-[14px]" href={`tel:${siteInfo?.primaryPhone}`}>
                                    {siteInfo?.primaryPhone}
                                </a>
                            </div>
                        </div>

                        {/* Social */}
                        {/* <div className="flex gap-5 bg-[#e3ebe4] px-6 py-3 rounded-md">
                            {
                                siteInfo?.facebook &&
                                <a href={siteInfo?.facebook}>
                                    <FaFacebookF />
                                </a>
                            }
                            {
                                siteInfo?.twitter &&
                                <a href={siteInfo?.twitter}>
                                    <FaXTwitter />
                                </a>
                            }
                            {
                                siteInfo?.linkedin &&
                                <a href={siteInfo?.linkedin}>
                                    <FaLinkedinIn />
                                </a>
                            }
                            {
                                siteInfo?.instagram &&
                                <a href={siteInfo?.instagram}>
                                    <FaInstagram />
                                </a>
                            }
                        </div> */}
                        <div className="text-black">
                            <SocialIcons siteInfo={siteInfo} />
                        </div>

                    </div>


                </div>
            </div>

            {/* NAVBAR */}
            <div
                className={`w-full transition-all duration-300 bg-amber-500 ${scroll
                    ? "fixed top-0 left-0 z-50 shadow-lg sroll-nav"
                    : "relative"
                    }`}
            >

                <div className="container-fluid  ">
                    <div className=" flex items-center justify-between">

                        {/* LEFT WHITE SECTION */}
                        <div className=" relative bg-white px-6 py-2.5 ">
                            <Link href="/">
                                <img
                                    src={siteInfo?.logo}
                                    alt={siteInfo?.name}
                                    className="max-h-[53px]"
                                />
                            </Link>
                        </div>

                        {/* MENU */}
                        <nav className="hidden lg:flex items-center gap-8 text-black font-medium pl-6 xl:pl-0">

                            <Link href="#">Home</Link>
                            <Link href="#">Company Profile</Link>

                            {/* PRODUCTS DROPDOWN */}
                            <div
                                className="relative group lg:py-6"
                                onMouseEnter={() => setDropdown(true)}
                                onMouseLeave={() => setDropdown(false)}
                            >
                                <Link href="/" className="flex items-center gap-1">
                                    Our Products <FaAngleDown size={12} />
                                </Link>

                                <ul
                                    className={`absolute left-0 origin-top top-[100%] bg-white text-black shadow-xl min-w-[280px] py-3 transition-all duration-300 ${dropdown
                                        ? "scale-y-100"
                                        : "scale-y-0"
                                        }`}
                                >
                                    {products?.map((product) => (
                                        <li key={product._id}>
                                            <Link
                                                href="/"
                                                className="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 group/flower"
                                            >
                                                <GiSpray className="text-black group-hover/flower:animate-pulse" size={18} />
                                                {product.name}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            <Link href="#">Sitemap</Link>
                            <Link href="#">Contact</Link>

                        </nav>

                        {/* RIGHT SECTION */}
                        <div className="hidden lg:flex items-center text-white nav-right-shape px-8 py-4 gap-6">

                            {/* <div className="h-6 w-px bg-white opacity-40"></div> */}

                            <Link href={'/'} className="bg-gray-200 text-black px-6 py-2 rounded">
                                GET A QUOTE
                            </Link>

                        </div>

                        <button
                            className="lg:hidden text-2xl"
                            onClick={() => setIsOpen(!isOpen)}
                        >
                            {isOpen ? <HiX /> : <HiMenu />}
                        </button>

                    </div>

                </div>

                {/* MOBILE MENU */}
                {isOpen && (
                    <div
                        className={`fixed top-0 right-0 z-50 w-[80%] h-[100vh] overflow-y-auto bg-white shadow-xl transform transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"
                            } lg:hidden`}
                    >
                        <div
                            className="flex justify-end p-4 text-3xl cursor-pointer"
                            onClick={() => setIsOpen(false)}
                        >
                            <IoIosClose />
                        </div>

                        <ul className="px-6 space-y-5 text-gray-800 font-medium">
                            <li>
                                <Link href="/" onClick={() => setIsOpen(false)}>
                                    Home
                                </Link>
                            </li>

                            <li>
                                <Link href="/" onClick={() => setIsOpen(false)}>
                                    Company Profile
                                </Link>
                            </li>

                            <li>
                                <div
                                    className="flex justify-between items-center cursor-pointer"
                                    onClick={() => setDropdown(!dropdown)}
                                >
                                    Products <FaAngleDown />
                                </div>

                                {dropdown && (
                                    <ul className="mt-3 ml-3 border-l pl-3 space-y-2">
                                        {products?.map((product) => (
                                            <li key={product._id}>
                                                <Link
                                                    href="/"
                                                    onClick={() => setIsOpen(false)}
                                                    className="flex items-center gap-2"
                                                >
                                                    <FaAngleRight size={12} />
                                                    {product.name}
                                                </Link>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </li>

                            <li>
                                <Link href="/" onClick={() => setIsOpen(false)}>
                                    Sitemap
                                </Link>
                            </li>

                            <li>
                                <Link href="/" onClick={() => setIsOpen(false)}>
                                    Contact
                                </Link>
                            </li>
                        </ul>
                    </div>
                )}
            </div>

        </header>
    );
}