/* ============================================================
   SIDEBAR — Luxsin X9 Controller
   Design: Dark glass sidebar with cyan active states
   ============================================================ */
import { useDevice } from "@/contexts/DeviceContext";
import { cn } from "@/lib/utils";
import {
  ChevronRight,
  Gauge,
  Layers,
  LayoutDashboard,
  Settings,
  Sliders,
  Volume2,
} from "lucide-react";
import { Link, useLocation } from "wouter";

interface NavItem {
  path: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  label: string;
}

const NAV_ITEMS: NavItem[] = [
  { path: "/", icon: LayoutDashboard, label: "Dashboard" },
  { path: "/audio", icon: Volume2, label: "Audio" },
  { path: "/eq", icon: Sliders, label: "Parametric EQ" },
  { path: "/effects", icon: Layers, label: "Effects" },
  { path: "/system", icon: Settings, label: "System" },
];

export default function Sidebar() {
  const [location] = useLocation();
  const { deviceState, isConnected, isDemoMode } = useDevice();

  return (
    <aside className="glass-sidebar sticky top-0 z-40 flex h-screen w-[220px] shrink-0 flex-col self-start lg:border-r lg:border-white/[0.06]">
      {/* Logo */}
      <div className="px-5 pt-6 pb-4">
        <div className="flex items-center gap-3">
          <div className="relative">
            <div className="w-9 h-9 rounded-xl glass-cyan flex items-center justify-center">
              <Gauge size={18} className="text-[#00FFF6]" />
            </div>
            <div className={cn(
              "absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[#0d1117]",
              isConnected ? "bg-[#00FFF6]" : "bg-white/20"
            )} />
          </div>
          <div>
            <div className="text-white font-bold text-sm leading-tight tracking-wide" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
              LUXSIN
            </div>
            <div className="text-[#00FFF6] text-[10px] font-semibold tracking-[0.2em] opacity-80">
              X9 CTRL
            </div>
          </div>
        </div>
      </div>

      <div className="divider-glass mx-4 mb-3" />

      {/* Nav */}
      <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
        {NAV_ITEMS.map((item) => {
          const isActive = location === item.path;
          const Icon = item.icon;
          return (
            <Link key={item.path} href={item.path}>
              <div
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-[14px] transition-all duration-200 group relative",
                  isActive
                    ? "glass-cyan"
                    : "hover:bg-white/5"
                )}
              >
                {isActive && (
                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-[#00FFF6] rounded-r-full shadow-[0_0_8px_#00FFF6]" />
                )}
                <Icon
                  size={16}
                  className={cn(
                    "transition-colors duration-200 flex-shrink-0",
                    isActive ? "text-[#00FFF6]" : "text-white/40 group-hover:text-white/70"
                  )}
                />
                <span
                  className={cn(
                    "text-[13px] font-medium transition-colors duration-200",
                    isActive ? "text-[#00FFF6]" : "text-white/50 group-hover:text-white/80"
                  )}
                  style={{ fontFamily: "'Space Grotesk', sans-serif" }}
                >
                  {item.label}
                </span>
                {isActive && (
                  <ChevronRight size={12} className="ml-auto text-[#00FFF6] opacity-60" />
                )}
              </div>
            </Link>
          );
        })}
      </nav>

      <div className="divider-glass mx-4 mt-3 mb-3" />

      {/* Bottom status */}
      <div className="px-4 pb-5">
        <div className="glass-card p-3 rounded-[14px]">
          <div className="flex items-center gap-2 mb-2">
            <div className={cn("w-1.5 h-1.5 rounded-full", isConnected ? "bg-[#00FFF6] shadow-[0_0_6px_#00FFF6]" : "bg-white/20")} />
            <span className="section-label text-[10px]">
              {isConnected ? (isDemoMode ? "Demo Mode" : "Live") : "Offline"}
            </span>
          </div>
          {deviceState ? (
            <>
              <div className="text-white/60 text-[11px] font-medium truncate" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
                {deviceState.device}
              </div>
              <div className="text-white/30 text-[10px] mt-0.5" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
                v{deviceState.version}
              </div>
            </>
          ) : (
            <div className="text-white/30 text-[11px]">Not connected</div>
          )}
        </div>
      </div>
    </aside>
  );
}