'use client'
import Link from "next/link";
import { useState, useEffect } from "react";
import { servicesList } from "@/utils/Services.utils";
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";
import Rehabilitation from "@/utils/Rehabilitation.utils";
import Accident from "@/utils/Accident.utils";

export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar }) {
  const [isActive, setIsActive] = useState({
    status: false,
    key: "",
    subMenuKey: "",
  });
  
  const [email, setEmail] = useState("");

  useEffect(() => {
    const user = "bloor";
    const domain = "rapharehab.ca";
    setEmail(`${user}@${domain}`);
  }, []);

  const handleToggle = (key, subMenuKey = "") => {
    if (isActive.key === key && isActive.subMenuKey === subMenuKey) {
      setIsActive({
        status: false,
        key: "",
        subMenuKey: "",
      });
    } else {
      setIsActive({
        status: true,
        key,
        subMenuKey,
      });
    }
  };

  // ✅ Always close menu after clicking a link
  const closeMenu = () => {
    if (typeof handleMobileMenu === "function") {
      handleMobileMenu(); 
    }
  };

  return (
    <>
      <div className="mobile-menu">
        {/* Backdrop */}
        <div className="menu-backdrop" onClick={closeMenu} />
        {/* Close button */}
        <div className="close-btn" onClick={closeMenu}>
          <span className="far fa-times" />
        </div>

        {/* Mobile Navigation */}
        <nav className="menu-box">
          {/* Header row (Logo left, Social icons right) */}
          <div className="nav-header">
            <div className="nav-logo">
              <Link href="/" onClick={closeMenu} aria-label="Logo2 image">
                <img src="/assets/images/logo-2.png" alt="Logo" />
              </Link>
            </div>
            <div className="nav-social">
              <ul className="clearfix">
                <li>
                  <Link href="https://www.instagram.com/elrapharehab/" aria-label="Instagram Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
                    <span className="fab fa-instagram"></span>
                  </Link>
                </li>
                <li>
                  <Link href="https://www.facebook.com/ELRaphaRehabCenter/" aria-label="Facebook Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
                    <span className="fab fa-facebook-square"></span>
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          {/* Menu Items */}
          <div className="menu-outer">
            <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
              <ul className="navigation clearfix">

                <li>
                  <Link href="/" onClick={closeMenu} aria-label="Home">Home</Link>
                </li>

                {/* About Us */}
                <li className={isActive.key == 1 ? "dropdown current" : "dropdown"}>
                  <Link href="/about-us" onClick={closeMenu} aria-label="About Us">About Us</Link>
                  <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
                    <li><Link href="/our-team-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Out Team">Our Team</Link></li>
                    <li><Link href="/ourapproach-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Our approach">Our Approach</Link></li>
                    <li><Link href="/gallery-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Gallery">Gallery</Link></li>
                    <li><Link href="/covid-19-updates" onClick={closeMenu} aria-label="Covid-19 Updates">Covid-19 Updates</Link></li>
                  </ul>
                  <div
                    className={isActive.key == 1 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(1)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Services */}
                <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
                  <Link href="/etobicoke-treatment-service" onClick={closeMenu} aria-label="Services">Services</Link>
                  <ul style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
                    {servicesList.map((item) => (
                      <li key={item.id}>
                        <Link href={`/etobicoke-treatment-service/${item.slug}`} onClick={closeMenu} aria-label="Etobicoke Treatment Service">
                          {item.shortTitle}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 2 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(2)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Area of Injury */}
                <li className={isActive.key == 3 ? "dropdown current" : "dropdown"}>
                  <Link href="/area-of-injury" onClick={closeMenu} aria-label="Area of injury">Area of Injury</Link>
                  <ul style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
                    {areaOfInjuryData.map((item) => (
                      <li key={item.id}>
                        <Link href={`/area-of-injury/${item.slug}`} onClick={closeMenu} aria-label="Area of injury title">
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 3 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(3)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Rehabilitation */}
                <li className={isActive.key == 4 ? "dropdown current" : "dropdown"}>
                  <Link href="/rehabilitation" onClick={closeMenu} aria-label="Rehabilitation">Rehabilitation</Link>
                  <ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
                    {Rehabilitation.map((item) => (
                      <li key={item.id}>
                        <Link href={`/rehabilitation/${item.slug}`} onClick={closeMenu} aria-label="Rehabilitation title">
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 4 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(4)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Accident */}
                <li className={isActive.key == 5 ? "dropdown current" : "dropdown"}>
                  <Link href="/accident" onClick={closeMenu} aria-label="Accident">Accident</Link>
                  <ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
                    {Accident.map((item) => (
                      <li key={item.id}>
                        <Link href={`/accident/${item.slug}`} onClick={closeMenu} aria-label="Accident title">
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 5 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(5)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Other Links */}
                <li><Link href="/contact" onClick={closeMenu} aria-label="Contact">Contact</Link></li>
                <li><Link href="/blog" onClick={closeMenu} aria-label="Blog">Blog</Link></li>
                <li><Link href="/why-rapha-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Why Us">Why Us</Link></li>
                <li><Link href="/faq-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Faq">Faq</Link></li>
                <li><Link href="/what-to-expect" onClick={closeMenu} aria-label="What to expect">What To Expect</Link></li>
                <li><Link href="/payment-insurance" onClick={closeMenu} aria-label="Payment and insurance">Payment And Insurance</Link></li>
                {/* <li><Link href="/refugee-physiotherapy" onClick={closeMenu}>Refugee Physiotherapy</Link></li> */}
              </ul>
            </div>
          </div>

          {/* Contact Info */}
          <div className="contact-info">
            <h4>Contact Info</h4>
            <ul>
              <li>5 – 4335 Bloor Street West Etobicoke, M9C 2A5</li>
              <li>
                <Link href="tel:+647-722-3434, +416-622-2873" onClick={closeMenu} aria-label="+647-722-3434">
                  +647-722-3434, +416-622-2873
                </Link>
              </li>
              <li>
                {email ? (
                  <Link href={`mailto:${email}`} onClick={closeMenu} aria-label={email}>
                    {email}
                  </Link>
                ) : (
                  <span>Loading...</span>
                )}
              </li>
            </ul>
          </div>
        </nav>
      </div>

      {/* Sidebar Overlay */}
      <div
        className="nav-overlay"
        style={{ display: `${isSidebar ? "block" : "none"}` }}
        onClick={handleSidebar}
      />
    </>
  );
}