import Image from "next/image";
import { ChevronsLeft } from "lucide-react";
import LiquidGlass from "liquid-glass-react";
import { cn } from "@/lib/utils";
import {
  primaryWorkspaceNavItems,
  settingsWorkspaceNavItem,
  type DashboardSection,
} from "@/components/dashboard/workspaceNavigation";

type WorkspaceSidebarProps = {
  activeSection: DashboardSection;
  onSelectSection: (section: DashboardSection) => void;
};

export function WorkspaceSidebar({ activeSection, onSelectSection }: WorkspaceSidebarProps) {
  const SettingsIcon = settingsWorkspaceNavItem.icon;

  return (
    <LiquidGlass
      blurAmount={0.03}
      saturation={110}
      elasticity={0.12}
      displacementScale={24}
      aberrationIntensity={1.0}
      cornerRadius={0}
      mode="standard"
      className="hidden h-svh w-[92px] shrink-0 flex-col border-r border-white/[0.075] bg-black/40 px-3 py-4 shadow-[12px_0_38px_rgba(0,0,0,0.3)] lg:flex"
    >
      <button
        type="button"
        onClick={() => onSelectSection("home")}
        aria-label="DocDoe AI home"
        className="mx-auto grid size-12 cursor-pointer place-items-center overflow-hidden rounded-2xl border border-white/[0.14] bg-[#030303] shadow-[0_0_24px_rgba(255,255,255,0.09)] transition hover:border-white/25 hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25"
      >
        <Image
          src="/docdoe-logo-mark.png"
          alt=""
          width={30}
          height={30}
          className="scale-[1.08] object-contain"
          priority
        />
      </button>

      <nav className="mt-6 flex flex-1 flex-col items-stretch gap-1" aria-label="Workspace navigation">
        {primaryWorkspaceNavItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeSection === item.id;

          return (
            <button
              key={item.label}
              type="button"
              aria-pressed={isActive}
              onClick={() => onSelectSection(item.id)}
              className={cn(
                "group flex h-[58px] cursor-pointer flex-col items-center justify-center gap-1.5 rounded-2xl border text-[10.75px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25",
                isActive
                  ? "border-white/22 bg-white/[0.08] text-white shadow-[0_0_24px_rgba(255,255,255,0.08),inset_0_1px_0_rgba(255,255,255,0.08)]"
                  : "border-transparent text-white/58 hover:border-white/10 hover:bg-white/[0.05] hover:text-white/88",
              )}
            >
              <Icon
                className={cn(
                  "size-[18px] transition",
                  isActive ? "text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.35)]" : "text-current",
                )}
                strokeWidth={1.9}
                aria-hidden="true"
              />
              <span>{item.label}</span>
            </button>
          );
        })}
      </nav>

      <div className="mt-auto flex flex-col gap-2 border-t border-white/[0.07] pt-3">
        <button
          type="button"
          aria-label="Settings"
          aria-pressed={activeSection === "settings"}
          onClick={() => onSelectSection("settings")}
          className={cn(
            "grid h-10 cursor-pointer place-items-center rounded-2xl border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300/55",
            activeSection === "settings"
              ? "border-violet-300/34 bg-violet-500/[0.14] text-white shadow-[0_0_28px_rgba(124,58,237,0.26)]"
              : "border-white/10 bg-white/[0.04] text-white/64 hover:border-violet-300/25 hover:text-white",
          )}
        >
          <SettingsIcon className="size-5" strokeWidth={1.8} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="grid h-10 cursor-pointer place-items-center rounded-2xl border border-white/10 bg-white/[0.03] text-white/44 transition hover:border-white/16 hover:text-white/76 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20"
          aria-label="Collapse sidebar"
        >
          <ChevronsLeft className="size-5" strokeWidth={1.8} aria-hidden="true" />
        </button>
      </div>
    </LiquidGlass>
  );
}