"use client";

import React, { useState, useEffect, useRef } from 'react';
import styles from './Header.module.css';
import Link from 'next/link';
//import logo from '/logo.png';
import Image from 'next/image';
import { ChevronDown } from 'lucide-react';

interface NavLink {
    label: string;
    href: string;
    hasDropdown: boolean;
}

interface ProductLink {
    title: string;
    desc: string;
    iconChar: string;
    iconColor: string;
    href: string;
}

interface HeaderClientProps {
    navLinks: NavLink[];
    productDropdownLinks: ProductLink[];
}

const HeaderClient = ({ navLinks, productDropdownLinks }: HeaderClientProps) => {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
    const [activeMobileDropdown, setActiveMobileDropdown] = useState<string | null>(null);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Lock body scroll when mobile menu is open
    useEffect(() => {
        if (isMobileMenuOpen) {
            document.body.style.overflow = 'hidden';
            document.documentElement.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
            document.documentElement.style.overflow = '';
        }
        return () => {
            document.body.style.overflow = '';
            document.documentElement.style.overflow = '';
        };
    }, [isMobileMenuOpen]);

    // Handle clicks outside dropdown to close it
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setActiveDropdown(null);
            }
        };

        if (activeDropdown) {
            document.addEventListener('mousedown', handleClickOutside);
        } else {
            document.removeEventListener('mousedown', handleClickOutside);
        }

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [activeDropdown]);

    const toggleMobileMenu = () => {
        setIsMobileMenuOpen(!isMobileMenuOpen);
        setActiveMobileDropdown(null);
    };

    const toggleDropdown = (name: string) => {
        setActiveDropdown(activeDropdown === name ? null : name);
    };

    const toggleMobileDropdown = (name: string) => {
        setActiveMobileDropdown(activeMobileDropdown === name ? null : name);
    };

    const Chevron = ({ isOpen }: { isOpen: boolean }) => (
        <ChevronDown
            className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
            size={14}
        />
    );

    return (
        <header className={styles.header}>
            <div className={styles.container}>
                <div className={styles.logo}>
                    <Link href="/">
                        <Image src="/logo.png" alt="Logo" width={160} height={100} />
                    </Link>
                </div>

                <nav className={styles.desktopNav}>
                    <div className={styles.navItem} ref={dropdownRef}>
                        <button
                            className={`${styles.navLink} ${activeDropdown === 'product' ? styles.activeLink : ''}`}
                            onClick={() => toggleDropdown('product')}
                        >
                            Product <Chevron isOpen={activeDropdown === 'product'} />
                        </button>

                        <div className={`${styles.dropdown} ${activeDropdown === 'product' ? styles.dropdownVisible : ''}`}>
                            <div className={styles.dropdownInner}>
                                {productDropdownLinks.map((link, i) => (
                                    <Link key={i} href={link.href} className={styles.dropdownLink} onClick={() => setActiveDropdown(null)}>
                                        <div className={styles.iconPlaceholder} style={{ background: link.iconColor }}>{link.iconChar}</div>
                                        <div className={styles.linkContent}>
                                            <span className={styles.linkTitle}>{link.title}</span>
                                            <span className={styles.linkDesc}>{link.desc}</span>
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        </div>
                    </div>
                    {navLinks.filter(l => l.label !== 'Product').map((link, i) => (
                        <Link key={i} href={link.href} className={styles.navLink}>{link.label}</Link>
                    ))}
                </nav>

                <div className={styles.actions}>
                    <Link href="#" className={styles.loginBtn}>Log in</Link>
                    <Link href="#" className={styles.signupBtn}>Sign up</Link>

                    <button className={styles.mobileToggle} onClick={toggleMobileMenu}>
                        <div className={`${styles.burger} ${isMobileMenuOpen ? styles.burgerOpen : ''}`}>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </button>
                </div>

                <nav className={`${styles.mobileNav} ${isMobileMenuOpen ? styles.mobileNavOpen : ''}`}>
                    <div className={styles.mobileNavContent}>
                        <div className={styles.mobileItem}>
                            <button
                                className={styles.mobileNavLink}
                                onClick={() => toggleMobileDropdown('product')}
                            >
                                Product <Chevron isOpen={activeMobileDropdown === 'product'} />
                            </button>
                            {activeMobileDropdown === 'product' && (
                                <div className={styles.mobileDropdown}>
                                    {productDropdownLinks.map((link, i) => (
                                        <Link key={i} href={link.href} className={styles.mobileSubLink} onClick={toggleMobileMenu}>
                                            {link.title}
                                        </Link>
                                    ))}
                                </div>
                            )}
                        </div>

                        {navLinks.filter(l => l.label !== 'Product').map((link, i) => (
                            <Link key={i} href={link.href} className={styles.mobileNavLink} onClick={toggleMobileMenu}>
                                {link.label}
                            </Link>
                        ))}
                    </div>

                    <div className={styles.mobileActions}>
                        <Link href="#" className={styles.mobileBtn}>Log in</Link>
                        <Link href="#" className={styles.mobileBtnPrimary}>Sign up</Link>
                    </div>
                </nav>
            </div>
        </header>
    );
};

export default HeaderClient;