"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

function Icon({ name, className = "" }: { name: string; className?: string }) {
  return (
    <span className={`material-symbols-outlined ${className}`}>{name}</span>
  );
}

const NAV_ITEMS = [
  { icon: "dashboard", label: "Dashboard", href: "/dashboard" },
  { icon: "history", label: "History", href: "/history" },
  { icon: "analytics", label: "Analytics", href: "/analytics" },
  { icon: "settings", label: "Preferences", href: "/preferences" },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="hidden md:flex w-60 flex-col bg-black/40 backdrop-blur-xl border-r border-white/5 relative z-20 shrink-0">
      {/* Logo */}
      <div className="flex h-16 items-center gap-3 px-5 border-b border-white/5">
        <div className="flex items-center justify-center size-8 rounded-lg bg-[#B7A6FB]/10 border border-[#B7A6FB]/20 text-[#B7A6FB]">
          <Icon name="hub" className="text-xl" />
        </div>
        <div>
          <h1 className="text-white text-sm font-bold tracking-tight">
            Agent<span className="text-[#B7A6FB] font-light">Mesh</span>
          </h1>
          <p className="text-[10px] text-slate-600 font-mono">v2.4.0</p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex flex-col gap-1 p-3 flex-1">
        {NAV_ITEMS.map(({ icon, label, href }) => {
          const isActive =
            href === "/dashboard" ? pathname === "/dashboard" : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              className={`group flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm ${
                isActive
                  ? "bg-white/5 border border-white/10 text-white"
                  : "text-slate-500 hover:text-white hover:bg-white/5"
              }`}
            >
              <Icon
                name={icon}
                className={`text-[18px] ${
                  isActive
                    ? "text-[#B7A6FB]"
                    : "group-hover:text-[#B7A6FB] transition-colors"
                }`}
              />
              <span className="font-medium">{label}</span>
            </Link>
          );
        })}
      </nav>

      {/* System status footer */}
      <div className="p-3 border-t border-white/5">
        <div className="rounded-lg bg-gradient-to-b from-white/5 to-transparent border border-white/5 p-3 relative overflow-hidden">
          <div className="absolute -right-4 -top-4 w-16 h-16 bg-[#B7A6FB]/10 blur-2xl rounded-full" />
          <div className="flex items-center gap-2 mb-2 relative z-10">
            <Icon name="bolt" className="text-[#B7A6FB] text-base" />
            <span className="text-[10px] font-bold text-white tracking-wide">
              System Status
            </span>
          </div>
          <div className="w-full bg-white/10 h-0.5 rounded-full mb-2 overflow-hidden">
            <div className="bg-[#B7A6FB] h-full w-3/4 shadow-[0_0_8px_#B7A6FB]" />
          </div>
          <p className="text-[9px] text-slate-500 font-mono">
            LATENCY: <span className="text-[#B7A6FB]">12ms</span> ·{" "}
            <span className="text-emerald-400">OPERATIONAL</span>
          </p>
        </div>
      </div>
    </aside>
  );
}