import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Menu, X as CloseIcon } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

const Header = ({ navLinks, handleLogoClick: originalHandleLogoClick, isMobileMenuOpen, toggleMobileMenu, setIsMobileMenuOpen, toggleAdminPanel: triggerAdminPanelAction }) => {
  const [logoClickCount, setLogoClickCount] = useState(0);
  const [clickTimer, setClickTimer] = useState(null);

  const mobileMenuVariants = {
    hidden: {
      x: '-100%',
      opacity: 0,
    },
    visible: {
      x: 0,
      opacity: 1,
      transition: {
        type: 'spring',
        stiffness: 260,
        damping: 30,
      },
    },
    exit: {
      x: '-100%',
      opacity: 0,
      transition: {
        duration: 0.3,
      },
    },
  };

  const mobileNavLinks = [
    { href: "https://alogapedia.com", text: "Home" },
    { href: "/", text: "Deals" },
    { href: "https://alogapedia.com/product-reviews/", text: "Reviews" },
    { href: "https://alogapedia.com/recommendations/", text: "Recommendations" },
    { href: "https://alogapedia.com/about/", text: "About" }
  ];
  
  const handleExtendedLogoClick = () => {
    const newCount = logoClickCount + 1;
    setLogoClickCount(newCount);

    if (clickTimer) {
      clearTimeout(clickTimer);
    }

    if (newCount >= 5) {
      if (triggerAdminPanelAction) triggerAdminPanelAction();
      setLogoClickCount(0); 
      setClickTimer(null);
    } else {
      const newTimer = setTimeout(() => {
        if (newCount === 1 && originalHandleLogoClick) {
          originalHandleLogoClick();
        }
        setLogoClickCount(0); 
      }, newCount === 1 ? 300 : 2000); 
      setClickTimer(newTimer);
    }
  };
  
  useEffect(() => {
    return () => {
      if (clickTimer) {
        clearTimeout(clickTimer);
      }
    };
  }, [clickTimer]);


  return (
    <header className="alogapedia-header" role="banner">
      <div className="container mx-auto px-4">
        <div className="md:hidden flex flex-col items-center py-4 space-y-3">
          <img 
            src="https://storage.googleapis.com/hostinger-horizons-assets-prod/093f4a4a-2a94-489f-a913-bf271f8a8e51/2f9190358dee4fc802387edcbea70bcf.png"
            alt="Alogapedia Logo" 
            className="h-28 w-auto cursor-pointer" 
            onClick={handleExtendedLogoClick}
            width="112" 
            height="112" 
            loading="eager"
            fetchpriority="high"
          />
          <div className="flex items-center space-x-2">
            <Button 
              variant="ghost" 
              size="icon" 
              onClick={toggleMobileMenu}
              aria-expanded={isMobileMenuOpen}
              aria-controls="mobile-menu-panel"
              aria-label={isMobileMenuOpen ? "Tutup menu" : "Buka menu"}
              className="text-black" 
            >
              <Menu className="h-10 w-10" aria-hidden="true" />
            </Button>
          </div>
        </div>

        <div className="hidden md:flex md:flex-col md:items-center md:py-4">
           <div className="relative w-full flex justify-center">
            <img 
              src="https://storage.googleapis.com/hostinger-horizons-assets-prod/093f4a4a-2a94-489f-a913-bf271f8a8e51/2f9190358dee4fc802387edcbea70bcf.png"
              alt="Alogapedia Logo" 
              className="h-[200px] lg:h-[220px] w-auto cursor-pointer mb-4" 
              onClick={handleExtendedLogoClick}
              width="220" 
              height="220" 
              loading="eager"
              fetchpriority="high"
            />
           </div>
          <nav className="alogapedia-nav flex" role="navigation" aria-label="Menu utama"> 
            {navLinks.map(link => (
              <a 
                key={link.text} 
                href={link.href} 
                className={`alogapedia-nav-link ${link.active ? 'active' : ''}`}
                aria-current={link.active ? 'page' : undefined}
              >
                {link.text}
              </a>
            ))}
          </nav>
        </div>
        
        <AnimatePresence>
          {isMobileMenuOpen && (
            <motion.div
              id="mobile-menu-panel"
              className="fixed inset-0 z-40 md:hidden" 
              initial="hidden"
              animate="visible"
              exit="exit"
            >
              <motion.div 
                className="fixed inset-0 bg-black/30 backdrop-blur-sm" 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                onClick={toggleMobileMenu}
              />
              <motion.nav
                className="fixed top-0 left-0 bottom-0 w-4/5 max-w-xs bg-[#2A5850] shadow-xl flex flex-col py-8 px-6 space-y-2" 
                variants={mobileMenuVariants}
                role="navigation"
                aria-label="Menu mobile"
              >
                <div className="flex justify-between items-center mb-8">
                  <span className="text-xl font-semibold text-[#F2A758]">Main Menu</span>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    onClick={toggleMobileMenu}
                    aria-label="Tutup menu"
                    className="text-[#F2A758]"
                  >
                    <CloseIcon className="h-7 w-7" aria-hidden="true" />
                  </Button>
                </div>
                {mobileNavLinks.map(link => (
                  <a 
                    key={link.text} 
                    href={link.href} 
                    className={`alogapedia-mobile-nav-link ${link.href === window.location.pathname || (link.href === "/" && window.location.pathname.startsWith("/deal")) ? 'active' : ''}`}
                    onClick={() => setIsMobileMenuOpen(false)}
                    aria-current={link.href === window.location.pathname ? 'page' : undefined}
                  >
                    {link.text}
                  </a>
                ))}
              </motion.nav>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </header>
  );
};

export default React.memo(Header);