import { X, Plus } from "lucide-react";
import { useWorkspaceStore } from "../workspace/store";
import type { SocketState } from "../terminal/socket";

const STATE_DOT_CLASS: Record<SocketState, string> = {
  disconnected: "bg-zinc-500",
  connecting: "bg-amber-500",
  connected: "bg-emerald-500",
  reconnecting: "bg-amber-500",
  ended: "bg-red-500",
  error: "bg-red-500",
};

export function TabStrip() {
  const tabs = useWorkspaceStore((s) => s.tabs);
  const activeTabId = useWorkspaceStore((s) => s.activeTabId);
  const connectionStates = useWorkspaceStore((s) => s.connectionStates);
  const switchTab = useWorkspaceStore((s) => s.switchTab);
  const closeTab = useWorkspaceStore((s) => s.closeTab);
  const newTab = useWorkspaceStore((s) => s.newTab);

  return (
    <nav
      className="flex items-center bg-zinc-900 border-b border-zinc-800/60 min-h-8 px-2 shrink-0"
      aria-label="Terminal tabs"
    >
      <div className="flex overflow-x-auto gap-0.5 scrollbar-none" role="tablist">
        {tabs.map((tab) => {
          const isActive = tab.id === activeTabId;
          const state: SocketState = connectionStates[tab.id] ?? "disconnected";

          return (
            <div
              key={tab.id}
              role="presentation"
              className={`group flex items-center rounded-t max-w-[180px] min-w-[80px] transition-colors ${
                isActive ? "bg-canvas" : "hover:bg-zinc-800/50"
              }`}
            >
              <button
                type="button"
                role="tab"
                aria-selected={isActive}
                tabIndex={isActive ? 0 : -1}
                className={`flex min-w-0 flex-1 items-center gap-1.5 px-2.5 py-1 rounded-t text-xs whitespace-nowrap transition-colors ${
                  isActive ? "text-zinc-300" : "text-zinc-500 hover:text-zinc-400"
                }`}
                onClick={() => switchTab(tab.id)}
              >
                <span className={`size-1.5 rounded-full shrink-0 ${STATE_DOT_CLASS[state]}`} />
                <span className="truncate">{tab.title}</span>
              </button>
              <button
                type="button"
                className="shrink-0 size-4 mr-1 flex items-center justify-center rounded opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 text-zinc-500 hover:text-red-400 hover:bg-red-500/15 transition-opacity"
                aria-label={`Close ${tab.title}`}
                title="Detach tab (session stays alive)"
                onClick={(e) => {
                  e.stopPropagation();
                  closeTab(tab.id);
                }}
              >
                <X size={12} aria-hidden="true" />
              </button>
            </div>
          );
        })}
      </div>
      <button
        type="button"
        className="shrink-0 size-7 flex items-center justify-center rounded border border-zinc-800/60 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50 ml-1 transition-colors"
        onClick={newTab}
        aria-label="New terminal tab"
      >
        <Plus size={14} aria-hidden="true" />
      </button>
    </nav>
  );
}