'use client';
import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

type NavChild = {
  href: string; // siempre string
  label: string;
};

type NavItem =
  | { href: string; label: string } // items normales
  | { label: string; children: NavChild[] }; // items con submenu

const Navbar: React.FC = () => {
  const pathname = usePathname();
  const tipo_usuario = sessionStorage.getItem('axxxd')?.replace(/"/g, '') || '';

  const navItemsAdmin: NavItem[] = [
    { href: '/', label: 'Inicio' },
    { href: '/user/eventos', label: 'Eventos' },
    { href: '/user/qr', label: 'Lector de QRs' },
    { href: '/user/eventos/crear', label: 'Crear Evento' },
    {
      label: 'Carga Masiva',
      children: [
        { href: '/user/eventos/carga_masiva', label: 'Carga Masiva Eventos' },
        {
          href: '/user/eventos/carga_masiva_banner',
          label: 'Carga Masiva Imagenes',
        },
        {
          href: '/user/carga_masiva_usuarios',
          label: 'Carga Masiva Usuarios',
        },
      ],
    },
    { href: '/user/usuarios', label: 'Usuarios' },
    { href: '/login', label: 'Cerrar sesión' },
  ];

  const navItemsUser: NavItem[] = [
    { href: '/user/eventos', label: 'Eventos' },
    { href: '/user/qr', label: 'Lector de QRs' },
    { href: '/login', label: 'Cerrar sesión' },
  ];

  const navItems =
    tipo_usuario === 'administrador' ? navItemsAdmin : navItemsUser;

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-azul">
      <div className="container">
        <button
          className="navbar-toggler border-0 ms-auto"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div
          className="offcanvas offcanvas-end"
          tabIndex={-1}
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div className="offcanvas-header bg-azul text-white">
            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">
              Menu
            </h5>
            <button
              type="button"
              className="btn-close"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
            ></button>
          </div>
          <div className="offcanvas-body align-items-center justify-content-between bg-azul">
            <h2 className="h5 mb-0 text-white">
              Sistema de Registro de Eventos
            </h2>
            <ul className="navbar-nav gap-lg-5">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className="nav-item"
                  data-bs-dismiss="offcanvas"
                >
                  {'href' in item ? (
                    <Link
                      className={`nav-link ${
                        pathname === item.href ? 'text-white' : ''
                      }`}
                      href={item.href}
                    >
                      {item.label}
                    </Link>
                  ) : (
                    <div className="nav-item dropdown">
                      <a
                        className="nav-link dropdown-toggle"
                        href="#"
                        role="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                      >
                        {item.label}
                      </a>
                      <ul className="dropdown-menu">
                        {item.children.map((child: NavChild, idx: number) => (
                          <li key={idx}>
                            <Link className="dropdown-item" href={child.href}>
                              {child.label}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
