"use client";

import { useRef, useCallback } from "react";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { getAppDisplayName } from "@/lib/appNames";

interface McpAppToolbarProps {
  appIds: string[];
  activeAppId?: string | null;
  activeAppIds?: Set<string>;
  onSelectApp: (appId: string | null) => void;
}

export function McpAppToolbar({
  appIds,
  activeAppId,
  activeAppIds: activeAppIdsProp,
  onSelectApp,
}: McpAppToolbarProps) {
  // Support both single activeAppId (string) and multi activeAppIds (Set)
  const activeAppIds = activeAppIdsProp ?? new Set(activeAppId ? [activeAppId] : []);
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = useCallback((direction: "left" | "right") => {
    if (!scrollRef.current) return;
    const amount = 200;
    scrollRef.current.scrollBy({
      left: direction === "left" ? -amount : amount,
      behavior: "smooth",
    });
  }, []);

  if (!appIds || appIds.length === 0) return null;

  const hasAnyActive = activeAppIds.size > 0;

  return (
    <div
      className="flex items-center gap-1 px-2 shrink-0"
      style={{
        backgroundColor: "#1a1d23",
        borderBottom: "1px solid #2f3136",
        height: "40px",
        minHeight: "40px",
      }}
    >
      {/* Left scroll arrow */}
      <button
        onClick={() => scroll("left")}
        className="shrink-0 p-1 rounded hover:bg-[#383c44] transition-colors"
        style={{ color: "#72767d" }}
        aria-label="Scroll left"
      >
        <ChevronLeft className="w-3.5 h-3.5" />
      </button>

      {/* Scrollable pill container */}
      <div
        ref={scrollRef}
        className="flex items-center gap-1.5 overflow-x-auto flex-1 no-scrollbar"
        style={{
          scrollbarWidth: "none",
          msOverflowStyle: "none",
        }}
      >
        {appIds.map((appId) => {
          const { name, icon } = getAppDisplayName(appId);
          const isActive = activeAppIds.has(appId);

          return (
            <button
              key={appId}
              onClick={() => onSelectApp(appId)}
              className="shrink-0 flex items-center gap-1.5 px-2.5 rounded-full transition-all duration-150 select-none"
              style={{
                height: "28px",
                fontSize: "12px",
                fontWeight: isActive ? 600 : 500,
                backgroundColor: isActive ? "#ff6d5a" : "#2f3136",
                color: isActive ? "#ffffff" : "#dcddde",
                border: isActive
                  ? "1px solid #ff6d5a"
                  : "1px solid transparent",
              }}
              onMouseEnter={(e) => {
                if (!isActive) {
                  e.currentTarget.style.backgroundColor = "#383c44";
                }
              }}
              onMouseLeave={(e) => {
                if (!isActive) {
                  e.currentTarget.style.backgroundColor = "#2f3136";
                }
              }}
              title={name}
            >
              <span className="text-[11px] leading-none">{icon}</span>
              <span className="whitespace-nowrap">{name}</span>
            </button>
          );
        })}
      </div>

      {/* Right scroll arrow */}
      <button
        onClick={() => scroll("right")}
        className="shrink-0 p-1 rounded hover:bg-[#383c44] transition-colors"
        style={{ color: "#72767d" }}
        aria-label="Scroll right"
      >
        <ChevronRight className="w-3.5 h-3.5" />
      </button>

      {/* Close all active apps button */}
      {hasAnyActive && (
        <button
          onClick={() => onSelectApp(null)}
          className="shrink-0 p-1 rounded hover:bg-[#383c44] transition-colors ml-0.5"
          style={{ color: "#96989d" }}
          title="Close all app panels"
          aria-label="Close all active apps"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      )}
    </div>
  );
}
