import { useNavigate, Link } from "react-router-dom";
import { removeCurrentUser, getCurrentUser } from "../../utils/tokenService";
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser, faBars } from "@fortawesome/free-solid-svg-icons";
import {
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  DropdownToggle,
  Navbar,
  Nav,
  Media,
} from "reactstrap";
import "./AdminNavbar.css";
import "bootstrap-icons/font/bootstrap-icons.css";

const AdminNavbar = ({ brandText }) => {
  const [submenuOpen, setSubmenuOpen] = useState(false);

  const navigate = useNavigate();
  const [currentUser, setCurrentUser] = useState();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    const user = getCurrentUser();
    setCurrentUser(user);
    if (!user) navigate("/login");
  }, []);

  const handleLogout = () => {
    removeCurrentUser();
    navigate("/login");
  };

  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);

  return (
    <>
      <Navbar className="navbar-top navbar-dark" expand={false} id="navbar-main">
     
        <div className="navbar-container container-fluid">
          {/* Toggle sidebar on small screens */}
          <button className="mobile-sidebar-toggle" onClick={toggleSidebar}>
            <FontAwesomeIcon icon={faBars} />
          </button>    

          <Link className="brand_name h4 mb-0 text-white text-uppercase" to="/">
            {brandText}
          </Link>

          <div className="nav-icons d-none d-lg-flex">
            <Link to="/admin/index" className="nav-icon">
              <i className="fas fa-home" />
            </Link>
            <Link to="/admin/setting" className="nav-icon">
              <i className="ni ni-settings-gear-65" />
            </Link>
            <Link to="/admin/dashboard-runner-all" className="nav-icon">
              <i className="bi bi-grid" />
            </Link>
            <Link to="/admin/report-runner" className="nav-icon">
              <i className="ni ni-chart-bar-32" />
            </Link>
            <Link to="/admin/user-report" className="nav-icon">
              <i className="ni ni-grid" />
            </Link>
          </div>



          {/* Right Sidebar for larger screens */}
          <div className="nav-right d-none d-lg-flex align-items-center">
            <Nav className="align-items-center" navbar>
              <UncontrolledDropdown nav>
                <DropdownToggle className="pr-0" nav>
                  <Media className="align-items-center">
                    <span className="avatar avatar-sm rounded-circle">
                      <FontAwesomeIcon icon={faUser} />
                    </span>
                    <Media className="ml-2 d-none d-lg-block">
                      <span className="brand_name mb-0 text-sm font-weight-bold text-white-50">
                        {currentUser ? currentUser.fullname : "Guest"}
                      </span>
                    </Media>
                  </Media>
                </DropdownToggle>
                <DropdownMenu className="dropdown-menu-arrow" right>
                <DropdownItem header tag="div">
                  <h6 className="text-overflow m-0">Welcome!</h6>
                </DropdownItem>
               <DropdownItem to="/admin/about" tag={Link}>
                <i className="fas fa-info-circle" /> {/* Font Awesome alternative */}
                <span>About</span>
              </DropdownItem>
               <DropdownItem to="/admin/profile" tag={Link}>
                  <i className="ni ni-single-02" />
                  <span>My profile</span>
                </DropdownItem>
                <DropdownItem to="/admin/dashboard-runner-all" tag={Link}>
                  <i className="ni ni-calendar-grid-58" />
                  <span>Activity</span>
                </DropdownItem>

                {/* Nested Language Dropdown */}
                <div
                    className="dropdown-submenu"
                    onMouseEnter={() => setSubmenuOpen(true)}
                    onMouseLeave={() => setSubmenuOpen(false)}
                  >
                    <DropdownItem
                      className="dropdown-toggle"
                      toggle={false}
                      onClick={() => setSubmenuOpen(!submenuOpen)}
                    >
                      <i className="ni ni-world" />
                      <span>Choose Language</span>
                    </DropdownItem>

                    {submenuOpen && (
                      <div className="dropdown-menu show">
                        <DropdownItem onClick={() => handleLanguageSelect("en")}>English</DropdownItem>
                        <DropdownItem onClick={() => handleLanguageSelect("hi")}>Hindi</DropdownItem>
                        <DropdownItem onClick={() => handleLanguageSelect("ta")}>Tamil</DropdownItem>
                        <DropdownItem onClick={() => handleLanguageSelect("te")}>Telugu</DropdownItem>
                      </div>
                    )}
                  </div>

                <DropdownItem to="/admin/resetpassword" tag={Link}>
                  <i className="ni ni-lock-circle-open" />
                  <span>Reset Password</span>
                </DropdownItem>
                <DropdownItem divider />
                <DropdownItem onClick={handleLogout}>
                  <i className="ni ni-user-run" />
                  <span>Logout</span>
                </DropdownItem>

                </DropdownMenu>
              </UncontrolledDropdown>
                  
            </Nav>
          </div>



          { /* Mobile Right Sidebar */}
          <div className="nav-right-mobile d-flex d-lg-none align-items-center ml-auto">
              <Nav className="align-items-center" navbar>
                <UncontrolledDropdown nav>
                  <DropdownToggle className="pr-0" nav>
                    <Media className="align-items-center">
                      <span className="avatar avatar-sm rounded-circle">
                        <FontAwesomeIcon icon={faUser} />
                      </span>
                    </Media>
                  </DropdownToggle>
                  <DropdownMenu className="dropdown-menu-arrow" right>
                    <DropdownItem header tag="div">
                      <h6 className="text-overflow m-0">Welcome!</h6>
                    </DropdownItem>
                    <DropdownItem to="/admin/profile" tag={Link}>
                      <i className="ni ni-single-02" />
                      <span>My profile</span>
                    </DropdownItem>
                    <DropdownItem to="/admin/dashboard-runner-all" tag={Link}>
                      <i className="ni ni-calendar-grid-58" />
                      <span>Activity</span>
                    </DropdownItem>
                    <DropdownItem to="/admin/resetpassword" tag={Link}>
                      <i className="ni ni-lock-circle-open" />
                      <span>Reset Password</span>
                    </DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem onClick={handleLogout}>
                      <i className="ni ni-user-run" />
                      <span>Logout</span>
                    </DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Nav>
            </div>
        </div>
      </Navbar>
          
      {/* Mobile Sidebar */}
          <div className={`mobile-right-sidebar ${sidebarOpen ? 'open' : ''}`}>
             <Link to="/admin/index" className="nav-icon" onClick={toggleSidebar}>
                <i className="fas fa-home" /> 
              </Link>
              <Link to="/admin/setting" className="nav-icon" onClick={toggleSidebar}>
                <i className="ni ni-settings-gear-65" /> </Link>
              <Link to="/admin/dashboard-runner-all" className="nav-icon" onClick={toggleSidebar}>
                <i className="bi bi-grid" />
              </Link>
              <Link to="/admin/report-runner" className="nav-icon" onClick={toggleSidebar}>
                <i className="ni ni-chart-bar-32" />
              </Link>
              <Link to="/admin/user-report" className="nav-icon" onClick={toggleSidebar}>
                <i className="ni ni-grid" /> 
              </Link>
              
            </div>
          
      
    </>
  );
  const handleLanguageSelect = (lang) => {
    localStorage.setItem("appLanguage", lang);
    setSubmenuOpen(false);        // Close submenu
    document.body.click();        // Close parent dropdown
    window.location.reload();     // Or use i18n if configured
  };
  
};


export default AdminNavbar;
