import React, { useState } from 'react';

function Sidebar({ activePage, setPage, handleLogout, username }) {
  const [isOpen, setIsOpen] = useState(false);

  // Added Dashboard to the master application page layouts navigation matrix
  const menuItems = [
    { id: 'dashboard', label: 'Operations Dashboard', icon: '🏠' },
    { id: 'products', label: 'Products Management', icon: '📦' },
    { id: 'sales', label: 'Sales Operations', icon: '🛒' },
    { id: 'stockstatus', label: 'Stock Status (CRUD)', icon: '📊' },
    { id: 'reports', label: 'Business Reports', icon: '📈' }
  ];

  const handleNavClick = (id) => {
    setPage(id);
    setIsOpen(false); // Auto-close drawer overlay menu on mobile screen selection
  };

  return (
    <div className="w-full md:w-64 bg-indigo-950 text-white md:min-h-screen border-r border-indigo-900/40 shadow-xl sticky top-0 z-50">
      
      {/* Mobile Header Bar Section */}
      <div className="flex items-center justify-between p-4 md:hidden border-b border-indigo-900 bg-indigo-950">
        <div>
          <h1 className="text-md font-black tracking-wider text-indigo-200">DAB ENTERPRISE</h1>
          <p className="text-[10px] text-indigo-400">User: <span className="text-white font-medium">{username}</span></p>
        </div>
        <button 
          onClick={() => setIsOpen(!isOpen)} 
          className="p-2 text-indigo-200 hover:text-white bg-indigo-900/60 rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 transition-all"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            {isOpen ? (
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M6 18L18 6M6 6l12 12" />
            ) : (
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 6h16M4 12h16M4 18h16" />
            )}
          </svg>
        </button>
      </div>

      {/* Main Core Body Shell Links (Collapsible drawer framework underneath mobile dimensions) */}
      <nav className={`p-5 flex flex-col justify-between absolute md:static left-0 right-0 top-[65px] md:top-0 bg-indigo-950/95 md:bg-transparent backdrop-blur-md md:backdrop-blur-none transition-all duration-300 md:h-screen md:flex border-b border-indigo-900 md:border-b-0 ${
        isOpen 
          ? 'opacity-100 visible translate-y-0 h-[calc(100vh-65px)] overflow-y-auto shadow-2xl' 
          : 'opacity-0 md:opacity-100 invisible md:visible -translate-y-2 md:translate-y-0'
      }`}>
        <div className="space-y-7">
          {/* Desktop Branding Display Header */}
          <div className="hidden md:block border-b border-indigo-900/80 pb-4">
            <h1 className="text-xl font-black tracking-wider text-indigo-200">DAB ENTERPRISE</h1>
            <p className="text-xs text-indigo-400 mt-1.5 flex items-center gap-1.5 bg-indigo-900/40 p-2 rounded-xl border border-indigo-900/40">
              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              <span>Active: <b className="text-white font-semibold">{username}</b></span>
            </p>
          </div>
          
          {/* Navigation Action Buttons Container Links */}
          <div className="flex flex-col space-y-1">
            {menuItems.map((item) => (
              <button
                key={item.id}
                onClick={() => handleNavClick(item.id)}
                className={`flex items-center gap-3 text-left px-4 py-3 rounded-xl font-semibold tracking-wide text-sm transition-all duration-200 ${
                  activePage === item.id 
                    ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 translate-x-1' 
                    : 'text-indigo-200/90 hover:bg-indigo-900 hover:text-white hover:translate-x-1'
                }`}
              >
                <span className="text-base">{item.icon}</span>
                <span>{item.label}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Secure Account Dismissal Logout Button */}
        <div className="pt-4 pb-4 md:pb-0 border-t border-indigo-900/60 mt-8 md:mt-0">
          <button 
            onClick={() => { setIsOpen(false); handleLogout(); }} 
            className="w-full bg-rose-600 hover:bg-rose-700 text-white font-bold text-sm py-2.5 px-4 rounded-xl shadow-md shadow-rose-950/20 transition-all flex items-center justify-center gap-2 tracking-wide"
          >
            <span>🚪</span>
            <span>Logout Account</span>
          </button>
        </div>
      </nav>
    </div>
  );
}

export default Sidebar;