"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import styles from "./Header.module.css";
import {
  ChevronRight,
  Phone,
  Instagram,
  Linkedin,
  Menu,
  ChevronDown,
  X,
} from "lucide-react";
import { PROJECTS, type ProjectIcon } from "../../lib/data/projects";
import { UniNetLogo, CraftWave, TaskFlowLogo, MeliorateCRMLogo, Human2HumanLogo } from "../../lib/icons";

const productLogoMap: Record<ProjectIcon, React.ComponentType<{ size?: number }>> = {
  UniNetLogo,
  CraftWave,
  TaskFlowLogo,
  MeliorateCRMLogo,
  Human2HumanLogo,
};

export function Header() {
  const [isSticky, setIsSticky] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const headerRef = React.useRef<HTMLElement>(null);
  const [headerHeight, setHeaderHeight] = useState(0);

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

    window.addEventListener("scroll", handleScroll);

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

  useEffect(() => {
    if (headerRef.current) {
      setHeaderHeight(headerRef.current.offsetHeight);
    }
  }, []);

  useEffect(() => {
    document.body.style.overflow = isMobileMenuOpen ? "hidden" : "";

    return () => {
      document.body.style.overflow = "";
    };
  }, [isMobileMenuOpen]);

  const closeMobileMenu = () => {
    setIsMobileMenuOpen(false);
  };

  return (
    <>
      {/* Top Bar */}
      <div className={styles.headerTopBar}>
        <div className={styles.container}>
          <div className={`${styles.row} ${styles.alignItemsCenter}`}>
            <div className={`${styles.colLg4} ${styles.colMd12} ${styles.col12}`}>
              <div className={styles.headerLeft}>
                <p>
                  <Link href="/contact" className={styles.actionLink}>
                    Elevate your business, take action <ChevronRight size={14} className={styles.ml1} />
                  </Link>
                </p>
              </div>
            </div>
            <div className={`${styles.colLg8} ${styles.colMd12} ${styles.col12}`}>
              <div className={styles.headerRight}>
                <div className={styles.addressContent}>
                  <p>
                    <Phone size={14} className={styles.mr2} />
                    <span>
                      <a href="https://t.me/adrian_stavljenic" target="_blank" rel="noreferrer">
                        Telegram
                      </a>
                    </span>
                  </p>
                </div>
                <div className={styles.socialIconWrapper}>
                  <ul className={styles.socialIcon}>
                    <li><a href="https://www.instagram.com/meliorate.pro" target="_blank" rel="noreferrer"><Instagram size={16} /></a></li>
                    <li><a href="https://www.linkedin.com/company/73263460" target="_blank" rel="noreferrer"><Linkedin size={16} /></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Spacer to prevent layout jump when header becomes fixed */}
      {isSticky && <div style={{ height: headerHeight }} />}

      {/* Main Navigation Header */}
      <header ref={headerRef} className={`${styles.rainbowHeader} ${isSticky ? styles.headerSticky : ""}`}>
        <div className={styles.container}>
          <div className={`${styles.row} ${styles.alignItemsCenter}`}>
            <div className={styles.colLg3}>
              <Link href="/" onClick={closeMobileMenu}>
                <img src="/img/MeliorateH.svg" alt="Meliorate" width={160} height={32} className={styles.logoLight} />
              </Link>
            </div>

            <div className={styles.colLg9}>
              <div className={styles.headerRightMain}>
                <nav className={styles.desktopNav}>
                  <ul className={styles.mainMenu}>
                    <li><Link href="/">Home</Link></li>

                    <li className={styles.hasDropdown}>
                      <Link href="/#services" className={styles.menuItemWithIcon}>
                        Products <ChevronDown size={14} className={styles.dropdownIcon} />
                      </Link>

                      {/* Animated Dropdown */}
                      <ul className={styles.megaSubmenu}>
                        {PROJECTS.map((project) => {
                          const Logo = productLogoMap[project.icon];
                          return (
                            <li key={project.slug}>
                              <Link href={project.visitLink} target="_blank" className={styles.projectCard}>
                                <span className={styles.projectLogoWrapper} aria-hidden="true">
                                  {Logo ? <Logo /> : null}
                                </span>
                                <div className={styles.projectText}>
                                  <span className={styles.projectName}>{project.name}</span>
                                  <p className={styles.projectDesc}>{project.description}</p>
                                </div>
                              </Link>
                            </li>
                          );
                        })}
                      </ul>
                    </li>

                    <li><Link href="/case-studies">Work</Link></li>
                    <li><Link href="/blog">Blog</Link></li>
                    <li><Link href="/learn">Learn</Link></li>
                    <li><Link href="/about">About</Link></li>
                    <li><Link href="/contact">Contact</Link></li>
                  </ul>
                </nav>

                <button
                  className={styles.hambergerButton}
                  onClick={() => setIsMobileMenuOpen(true)}
                  aria-label="Open mobile menu"
                  aria-expanded={isMobileMenuOpen}
                >
                  <Menu size={24} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div
        className={`${styles.mobileMenuOverlay} ${isMobileMenuOpen ? styles.active : ""}`}
        onClick={closeMobileMenu}
        aria-hidden="true"
      />

      <aside
        className={`${styles.mobileMenuPanel} ${isMobileMenuOpen ? styles.active : ""}`}
        aria-hidden={!isMobileMenuOpen}
      >
        <div className={styles.mobileMenuHeader}>
          <img src="/img/MeliorateH.svg" alt="Meliorate" width={140} height={28} className={styles.mobileLogo} />
          <button className={styles.mobileCloseButton} onClick={closeMobileMenu} aria-label="Close mobile menu">
            <X size={20} />
          </button>
        </div>

        <nav>
          <ul className={styles.mobileMenuList}>
            <li><Link href="/" onClick={closeMobileMenu}>Home</Link></li>
            <li><Link href="/case-studies" onClick={closeMobileMenu}>Work</Link></li>
            <li><Link href="/blog" onClick={closeMobileMenu}>Blog</Link></li>
            <li><Link href="/learn" onClick={closeMobileMenu}>Learn</Link></li>
            <li><Link href="/about" onClick={closeMobileMenu}>About</Link></li>
            <li><Link href="/contact" onClick={closeMobileMenu}>Contact</Link></li>
          </ul>
        </nav>

        <div className={styles.mobileProjectsBlock}>
          <p className={styles.mobileProjectsTitle}>Projects</p>
          <ul className={styles.mobileProjectsList}>
            {PROJECTS.map((project) => (
              <li key={project.slug}>
                <Link href={project.visitLink} target="_blank" onClick={closeMobileMenu}>
                  {project.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </aside>
    </>
  );
}