"use client";

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useSidebar } from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
import type { SidebarPanel, SidebarPanelId } from "@/navigation/sidebar/frontend-items";

interface SidebarPanelRailProps {
  panels: readonly SidebarPanel[];
  activePanel: SidebarPanelId;
  onPanelChange: (panelId: SidebarPanelId) => void;
}

export function SidebarPanelRail({ panels, activePanel, onPanelChange }: SidebarPanelRailProps) {
  const { state, isMobile, setOpen } = useSidebar();
  const isCollapsed = state === "collapsed" && !isMobile;

  const handlePanelClick = (panelId: SidebarPanelId) => {
    onPanelChange(panelId);
    if (isCollapsed) {
      setOpen(true);
    }
  };

  return (
    <div
      className={cn(
        "flex w-12 shrink-0 flex-col items-center gap-1 border-r border-sidebar-border bg-sidebar-accent/30 py-3",
        isCollapsed && "w-full border-r-0",
      )}
    >
      {panels.map((panel) => {
        const Icon = panel.icon;
        const isActive = activePanel === panel.id;

        return (
          <Tooltip key={panel.id}>
            <TooltipTrigger asChild>
              <button
                type="button"
                onClick={() => handlePanelClick(panel.id)}
                aria-label={panel.label}
                aria-current={isActive ? "true" : undefined}
                className={cn(
                  "flex size-9 items-center justify-center rounded-lg transition-all duration-200 ease-out",
                  isActive
                    ? "bg-background text-sidebar-primary shadow-md ring-1 ring-sidebar-border"
                    : "text-sidebar-foreground/55 hover:scale-105 hover:bg-background hover:text-sidebar-accent-foreground hover:shadow-sm active:scale-95",
                )}
              >
                <Icon className="size-4" />
              </button>
            </TooltipTrigger>
            <TooltipContent side="right" align="center" hidden={!isCollapsed}>
              {panel.label}
            </TooltipContent>
          </Tooltip>
        );
      })}
    </div>
  );
}