import React from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { frontendConfig } from "../change";

export default function Sidebar({ onLogout }) {
  const navigate = useNavigate();
  const location = useLocation();
  const activeUser = localStorage.getItem("username") || "User";

  const handleLogout = () => {
    localStorage.clear();
    if (onLogout) onLogout();
    navigate("/login", { replace: true });
  };

  return (
    <aside className="w-64 h-screen bg-slate-950 text-slate-200 flex flex-col sticky top-0 left-0 border-r border-slate-900 shadow-2xl z-50">
      
      {/* Brand Section */}
      <div className="p-8">
        <Link to="/dashboard" className="flex items-center gap-3">
          <div className="bg-indigo-600 p-2.5 rounded-xl text-white font-black text-sm shadow-lg shadow-indigo-600/30">
            {frontendConfig.appName ? frontendConfig.appName.charAt(0) : "S"}
          </div>
          <div className="flex flex-col">
            <span className="font-bold text-white tracking-tight">
                {frontendConfig.appName}
            </span>
            <span className="text-[9px] text-slate-500 font-black uppercase tracking-[0.2em]">
                Control Center
            </span>
          </div>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-grow px-4 space-y-1.5 mt-2">
        {frontendConfig.menuItems?.map((item) => {
          const targetPath = item === "Dashboard" ? "/dashboard" : `/${item}`;
          const isActive = 
            location.pathname.toLowerCase() === targetPath.toLowerCase() || 
            (item === "Dashboard" && location.pathname === "/");

          return (
            <Link 
              key={item} 
              to={targetPath} 
              className={`flex items-center gap-3 px-4 py-3 rounded-xl text-[13px] font-bold transition-all duration-300 ${
                isActive 
                  ? "bg-indigo-600 text-white shadow-lg shadow-indigo-900/50" 
                  : "text-slate-400 hover:bg-slate-900 hover:text-white"
              }`}
            >
              <div className={`w-1.5 h-1.5 rounded-full ${isActive ? "bg-white" : "bg-slate-600"}`} />
              {item}
            </Link>
          );
        })}
      </nav>

      {/* User Section */}
      <div className="p-6 border-t border-slate-900">
        <div className="flex items-center gap-3 mb-4">
             <div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center text-indigo-400 font-black text-sm border border-slate-800">
                {activeUser.charAt(0).toUpperCase()}
             </div>
             <div className="flex flex-col">
                <span className="text-xs font-bold text-white">{activeUser}</span>
                <span className="text-[10px] text-slate-500 uppercase font-black tracking-wider">Administrator</span>
             </div>
        </div>

        <button 
          onClick={handleLogout} 
          className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[10px] font-black text-slate-500 uppercase tracking-widest hover:text-rose-400 transition-colors border border-slate-900 hover:border-slate-800"
        >
          Sign Out
        </button>
      </div>
    </aside>
  );
}
