import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [nestedOpen, setNestedOpen] = useState(false);

  // Close dropdown if menu closes
  useEffect(() => {
    if (!open) {
      setDropdownOpen(false);
      setNestedOpen(false);
    }
  }, [open]);

  // Close nested when parent dropdown closes
  useEffect(() => {
    if (!dropdownOpen) setNestedOpen(false);
  }, [dropdownOpen]);

  // Close all when clicking a link
  const handleLinkClick = () => {
    setOpen(false);
    setDropdownOpen(false);
    setNestedOpen(false);
  };

  return (
    <nav className="nav" role="navigation" aria-label="Primary Navigation">
      <div className="nav-inner container">
        {/* Logo */}
        <Link to="/" className="brand" onClick={handleLinkClick}>
          <img src="/images/logo.png" alt="Sanjaya Logo" />
          <div className="brand-text">
            <span>Sanjaya</span>
            <span className="tag">Fresh Export</span>
          </div>
        </Link>

        {/* Hamburger (mobile) */}
        <button
          onClick={() => setOpen(!open)}
          aria-label={open ? 'Close menu' : 'Open menu'}
          className="hamburger"
          aria-expanded={open}
          aria-controls="primary-menu"
        >
          {open ? '✖' : '☰'}
        </button>

        {/* Overlay for mobile */}
        {open && <div className="overlay" onClick={handleLinkClick}></div>}

        {/* Sidebar Menu */}
        <div className={`menu ${open ? 'open' : ''}`} id="primary-menu">
          <Link to="/" onClick={handleLinkClick}>Home</Link>
          <Link to="/about-us" onClick={handleLinkClick}>About Us</Link>
          <Link to="/products" onClick={handleLinkClick}>Products</Link>

          {/* Dropdown */}
          <div className="dropdown">
            <span
              className="menu-link"
              onClick={() => setDropdownOpen(!dropdownOpen)}
              aria-haspopup="true"
              aria-expanded={dropdownOpen}
            >
              Liner Bags ▾
            </span>

            {(dropdownOpen || window.innerWidth >= 769) && (
              <div className="dropdown-content">
                
                {/* Sanjaya Fresh Keeper with nested dropdown */}
                <div className="nested-dropdown">
                  <span
                    className="parent-link"
                    onClick={() => setNestedOpen(!nestedOpen)}
                    aria-haspopup="true"
                    aria-expanded={nestedOpen}
                  >
                    Sanjaya Fresh Keeper ▸
                  </span>

                  {(nestedOpen || window.innerWidth >= 769) && (
                    <div className="nested-content">
                      <Link to="/liner-bags/sanjaya-fresh-keeper/description" onClick={handleLinkClick}>
                        Description
                      </Link>
                      <Link to="/liner-bags/sanjaya-fresh-keeper/technologies" onClick={handleLinkClick}>
                        Technologies Used In Ethylene
                      </Link>
                      <Link to="/liner-bags/sanjaya-fresh-keeper/how-it-works" onClick={handleLinkClick}>
                        How Sanjaya Fresh Keeper Works
                      </Link>
                      <Link to="/liner-bags/sanjaya-fresh-keeper/effect" onClick={handleLinkClick}>
                        Effect Of Sanjaya Fresh Keeper
                      </Link>
                    </div>
                  )}
                </div>

                {/* Sanjaya Fresh Keeper Bio */}
                <Link to="/liner-bags/sanjaya-fresh-keeper-bio" onClick={handleLinkClick}>
                  Sanjaya Fresh Keeper Bio
                </Link>
              </div>
            )}
          </div>

          <Link to="/export" onClick={handleLinkClick}>Export</Link>
          <Link to="/contact-us" onClick={handleLinkClick}>Contact Us</Link>
        </div>
      </div>
    </nav>
  );
}
