import { useLocation } from "react-router-dom";
import {
  // LayoutDashboard,
  // BookOpen,
  // CalendarDays,
  Plus,
  User,
  Settings,
  CreditCard,
  HelpCircle,
  MessageCircle,
  LogOut,
  ChevronDown,
  Menu,
  X,
} from 'lucide-react';

import logo from "../../assets/logo.png";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Logo from "./Logo";
import Vector from "../../assets/icons/Vector.svg";
import Vector2 from "../../assets/icons/Vector2.svg";
import { LayoutDashboard, LayoutDashboardLight, BookOpen, BookOpenLight, CalendarDays, CalendarDaysLight, KeywordsIcon, KeywordsIconLight, AnalysisIcon, AnalysisIconLight } from '../icons/icons-header.tsx';

// const CalendarDays = () => {
//   return (

//   )}

const Header = () => {
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
  const isHeaderVisible = location.pathname !== '/';

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);

  const navLinks = [
    { name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
    { name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
    { name: 'Strategy', to: '/strategy', icon: CalendarDays, iconLight: CalendarDaysLight },
    { name: 'Analysis', to: '/analysis', icon: AnalysisIcon, iconLight: AnalysisIconLight },
    { name: 'Keywords', to: '/keywords', icon: KeywordsIcon, iconLight: KeywordsIconLight },
  ];


  const menuItems = [
    { name: 'Edit Profile', icon: User, to: '/profile' },
    { name: 'Settings', icon: Settings, to: '/settings' },
    { name: 'Billing', icon: CreditCard, to: '/billing' },
    { name: 'Help Desk', icon: HelpCircle, to: '/help-desk' },
    { name: 'Feature Request', icon: MessageCircle, to: '/feature-request' },
  ];

  useEffect(() => {
    setIsMenuOpen(false)
  }, [location.pathname]);


  return (
    <>
      {isHeaderVisible && (
        <header className="pb-20">
          <nav className="bg-[#E6ECFB] backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
            <div className="container mx-auto px-4 py-3 flex justify-between items-center">
              <div className="flex items-center justify-between w-full md:w-auto">
                <Link to="/" className="flex items-center space-x-2">
                  <Logo />
                </Link>

                {/* Mobile menu toggle */}
                <div className="md:hidden">
                  <button onClick={toggleMobileNav}>
                    {isMobileNavOpen ? <X size={24} /> : <Menu size={24} />}
                  </button>
                </div>
              </div>

              {/* Center Nav Links - Hidden on Mobile */}
              <div className="hidden md:flex md:justify-center md:items-center md:flex-grow">
                <div className="p-1 rounded-full bg-blue-100/70 shadow-inner flex">
                  {navLinks.map((link, index) => (
                    <Link
                      key={index}
                      to={link.to}
                      className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
                        ? 'bg-white blue-500/80 text-[#4C60E5] shadow-md'
                        : 'text-black/80 hover:bg-blue-200/50'
                        }`}
                    >
                      {
                        location.pathname === link.to ?
                          <link.iconLight />
                          :
                          <link.icon />
                      }
                      <span>{link.name}</span>
                    </Link>
                  ))}
                </div>
              </div>

              {/* Right Side - Desktop Only */}
              <div className="hidden md:flex items-center space-x-4 relative">
                {/* Add Keyword Button */}

                <button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-xl font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
                  <Plus size={18} />
                  <span>Add Keywords</span>
                </button>


                <div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>

                {/* Profile Dropdown */}
                <div className="relative">
                  <button
                    onClick={toggleMenu}
                    className="flex items-center space-x-2 rounded-full focus:outline-none"
                  >
                    <img
                      src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
                      alt="User avatar"
                      className="w-10 h-10 rounded-full  "
                    />
                    <ChevronDown
                      size={16}
                      className={`text-gray-500 transition-transform duration-200 ${isMenuOpen ? 'rotate-180' : 'rotate-0'
                        }`}
                    />
                  </button>

                  {/* Dropdown Menu */}
                  {isMenuOpen && (
                    <div className="absolute right-0 mt-3 w-64 bg-white rounded-xl shadow-2xl overflow-hidden py-2 text-gray-700 z-50">
                      <div className="px-4 py-3 flex items-center space-x-3 border-b border-gray-200">
                        <img
                          src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
                          alt="User avatar"
                          className="w-10 h-10 rounded-full"
                        />
                        <div>
                          <p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
                          <p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
                        </div>
                      </div>
                      <div className="py-2">
                        {menuItems.map((item, index) => (
                          <Link
                            key={index}
                            to={item.to}
                            className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200"
                          >
                            <item.icon size={20} className="text-gray-500" />
                            <span>{item.name}</span>
                          </Link>
                        ))}
                      </div>
                      <div className="border-t border-gray-200 pt-2">
                        <button className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                          <LogOut size={20} className="text-gray-500" />
                          <span>Log Out</span>
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Mobile nav - visible when toggled */}
            {isMobileNavOpen && (
              <div className="md:hidden px-4 pb-4">
                {/* Nav links */}
                <div className="flex flex-col gap-2 rounded-xl bg-blue-100/30 p-3 mt-2">
                  {navLinks.map((link, index) => (
                    <Link
                      key={index}
                      to={link.to}
                      className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${location.pathname === link.to
                        ? 'bg-blue-500/80 text-white shadow-md'
                        : 'text-black/80 hover:bg-blue-200/50'
                        }`}
                    >
                      <link.icon size={18} className="mr-2" />
                      <span>{link.name}</span>
                    </Link>
                  ))}
                </div>

                {/* Add Keyword Button */}
                {/* <button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
              <Plus size={18} />
              <span>Add Keyword</span>
              </button> */}



                <div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>


                {/* Profile menu */}
                <div className="mt-4 p-3 bg-white rounded-xl shadow-md">
                  <div className="flex items-center space-x-3 border-b pb-3 mb-2">
                    <img
                      src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
                      alt="User avatar"
                      className="w-10 h-10 rounded-full"
                    />
                    <div>
                      <p className="font-semibold text-sm text-gray-800">Mohammed Sukkar</p>
                      <p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
                    </div>
                  </div>
                  <div className="flex flex-col space-y-2">
                    {menuItems.map((item, index) => (
                      <Link
                        key={index}
                        to={item.to}
                        className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100"
                      >
                        <item.icon size={18} />
                        <span>{item.name}</span>
                      </Link>
                    ))}
                    <button className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100">
                      <LogOut size={18} />
                      <span>Log Out</span>
                    </button>
                  </div>
                </div>
              </div>
            )}
          </nav>
        </header>
      )}
    </>
  );
};

export default Header;
