import { Link, useLocation } from 'react-router-dom'

const Sidebar = ({ isOpen, setIsOpen }) => {
  const location = useLocation()

  const menuItems = [
    { path: '/', label: 'Home', icon: '🏠' },
    { path: '/spaces', label: 'Spaces', icon: '📁' },
    { path: '/impressum', label: 'Impressum', icon: 'ℹ️' },
  ]

  const isActive = (path) => {
    if (path === '/') {
      return location.pathname === '/'
    }
    return location.pathname.startsWith(path)
  }

  return (
    <>
      {/* Overlay for mobile */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300"
          onClick={() => setIsOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed lg:static top-0 left-0 h-full z-40 transform transition-all duration-300 ease-in-out bg-slate-800/95 backdrop-blur-sm border-r border-slate-600/50 shadow-xl ${
          isOpen ? 'w-64 translate-x-0' : 'w-16 -translate-x-0 lg:translate-x-0'
        }`}
      >
        <div className="p-4 border-b border-slate-700/50 flex items-center justify-between h-16">
          {isOpen && (
            <h1 className="text-xl font-bold text-white whitespace-nowrap overflow-hidden">
              Certigo Addon
            </h1>
          )}
          {/* Burger Menu Button - rechts in der Sidebar */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="ml-auto p-2 rounded-lg transition-all duration-200 flex-shrink-0 bg-slate-700/50 hover:bg-slate-700 text-white"
            aria-label="Toggle menu"
          >
            <div className="w-5 h-4 relative flex flex-col justify-between">
              <span
                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
                  isOpen ? 'rotate-45 translate-y-1.5' : ''
                }`}
              />
              <span
                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
                  isOpen ? 'opacity-0' : 'opacity-100'
                }`}
              />
              <span
                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
                  isOpen ? '-rotate-45 -translate-y-1.5' : ''
                }`}
              />
            </div>
          </button>
        </div>
        <nav className="px-2 py-4 overflow-hidden">
          <ul className="space-y-2">
            {menuItems.map((item) => (
              <li key={item.path}>
                <Link
                  to={item.path}
                  className={`flex items-center px-3 py-3 rounded-lg transition-all duration-200 ${
                    isActive(item.path)
                      ? 'bg-slate-700 text-white font-semibold shadow-md'
                      : 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
                  }`}
                  title={!isOpen ? item.label : ''}
                >
                  <span className={`text-xl flex-shrink-0 ${isOpen ? 'mr-3' : 'mx-auto'}`}>
                    {item.icon}
                  </span>
                  {isOpen && (
                    <span className="whitespace-nowrap overflow-hidden">
                      {item.label}
                    </span>
                  )}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
    </>
  )
}

export default Sidebar

