dashboard/src/components/shared/Header.tsx

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 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 (
    <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">
          {/* Left: Logo */}
          <div className="flex items-center justify-between w-full md:w-auto">
            <Link to="/" className="flex items-center space-x-2">
              {/* <img
                src={logo}
                alt="logo"
                className="w-auto h-8 sm:h-10 hover:scale-105 transition-all duration-300"
              /> */}
              <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;