import React from "react";
import { NavLink } from "react-router-dom";

// menuData.js
export const MENU_ITEMS = [
  {
    title: "Dashboard",
    icon: "ri-dashboard-2-line",
    path: "/",
  },

  {
    title: "Projects",
    icon: "ri-building-2-fill",
    children: [
      {
        title: "Projects",
        path: "/ProjectList",
      },
      {
        title: "Archives",
        path: "/Archives",
      },
    ],
  },

  {
    title: "People",
    icon: "ri-team-fill",
    children: [
      {
        title: "Clients",
        path: "/Client",
      },
      {
        title: "Contractors",
        path: "/Contractor",
      },
      {
        title: "Consultants",
        path: "/Consultant",
      },
    ],
  },

  {
    title: "Documentation",
    icon: "mdi mdi-file-check",
    children: [
      {
        title: "Approvals",
        path: "/Approvals",
      },
      {
        title: "Document Requests",
        path: "/DocumentRequest",
      },
    ],
  },

  {
    title: "Masters",
    icon: "ri-apps-2-line",
    children: [
      {
        title: "Items",
        children: [
          {
            title: "Add Items",
            path: "/Items",
          },
          {
            title: "Add Item Categories",
            path: "/CreateCategories",
          },
        ],
      },
      {
        title: "Forms",
        children: [
          {
            title: "Create Form",
            path: "/InspectionForm",
          },
          {
            title: "Form List",
            path: "/InspectionFormList",
          },
        ],
      },
      {
        title: "Add Specialities",
        path: "/Speciality",
      },
      {
        title: "Request Template",
        path: "/RequestTamplate",
      },
      {
        title: "Add Profile",
        path: "/Profile",
      },
      {
        title: "Add User",
        path: "/User",
      },
    ],
  },
];

const Header = () => {

  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user_id");
    window.location.href = "/";
  };

  // Recursive Menu Renderer
  const renderMenu = (items, level = 0) => {
    return items.map((item, idx) => {
      const collapseId = `${item.title.replace(/\s+/g, "")}-${idx}-${level}`;

      if (item.children) {
        return (
          <li className="nav-item" key={idx}>
            <button
              className="nav-link menu-link"
              data-bs-toggle="collapse"
              data-bs-target={`#${collapseId}`}
            >
              {item.icon && <i className={item.icon} />}{" "}
              <span>{item.title}</span>
            </button>

            <div className="collapse menu-dropdown" id={collapseId}>
              <ul className="nav nav-sm flex-column">
                {renderMenu(item.children, level + 1)}
              </ul>
            </div>
          </li>
        );
      }

      return (
        <li className="nav-item" key={idx}>
          <NavLink className="nav-link" to={item.path}>
            {item.icon && <i className={item.icon} />} {item.title}
          </NavLink>
        </li>
      );
    });
  };

  return (
    <div>
      <header id="page-topbar" className="bg-white">
        <div className="layout-width">
          <div className="navbar-header d-flex justify-content-between">

            <div className="navbar-brand-box horizontal-logo">
              <NavLink to="/" className="logo logo-dark">
                <img src="/assets/images/new_logo.png" alt="" height={74} />
              </NavLink>
            </div>

            <div className="dropdown ms-sm-3 header-item topbar-user bg-light">
              <button
                type="button"
                className="btn"
                id="page-header-user-dropdown"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <span className="d-flex align-items-center">
                  <img
                    className="rounded-circle header-profile-user"
                    // src={`${process.env.REACT_APP_BASE_URL}assets/Image.jpg`}
                    src='/assets/Image.jpg'
                    alt="Header Avatar"
                  />
                  <span className="text-start ms-xl-2">
                    <span className="d-none d-xl-inline-block ms-1 fw-medium user-name-text">
                      Master Admin
                    </span>
                    <span className="d-none d-xl-block ms-1 fs-12 user-name-sub-text">
                      Profile
                    </span>
                  </span>
                </span>
              </button>

              <div className="dropdown-menu dropdown-menu-end">
                <h6 className="dropdown-header">Welcome Master Admin!</h6>

                <div className="dropdown-divider" />

                <NavLink
                  className="dropdown-item"
                  to="/"
                  onClick={handleLogout}
                >
                  <i className="mdi mdi-logout text-muted fs-16 align-middle me-1" />
                  <span className="align-middle" data-key="t-logout">
                    Logout
                  </span>
                </NavLink>
              </div>
            </div>

          </div>
        </div>
      </header>

      {/* SIDEBAR */}
      <div className="app-menu navbar-menu bg-light">
        <div id="scrollbar">
          <div className="container-fluid">
            <ul className="navbar-nav">
              {renderMenu(MENU_ITEMS)}
            </ul>
          </div>
        </div>
      </div>

      <div className="vertical-overlay"></div>
    </div>
  );
};

export default Header;