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

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",
};

const STATE_LABEL: Record<SocketState, string> = {
  disconnected: "Disconnected",
  connecting: "Connecting\u2026",
  connected: "Connected",
  reconnecting: "Reconnecting\u2026",
  ended: "Session Ended",
  error: "Error",
};

export function SessionControls() {
  const activeTab = useWorkspaceStore((s) => s.tabs.find((t) => t.id === s.activeTabId));
  const connectionState: SocketState = useWorkspaceStore((s) => s.connectionStates[s.activeTabId] ?? "disconnected");
  const isSharedSession = useWorkspaceStore((s) => s.isSharedSession);
  const reconnect = useWorkspaceStore((s) => s.reconnect);
  const newSession = useWorkspaceStore((s) => s.newSession);
  const resetSession = useWorkspaceStore((s) => s.resetSession);

  const socketBusy = connectionState === "connecting" || connectionState === "reconnecting";

  return (
    <header className="shrink-0">
      {isSharedSession && (
        <div
          className="px-4 py-1 bg-amber-500 text-zinc-950 text-xs font-semibold text-center"
          role="alert"
          aria-live="assertive"
        >
          Shared session — other users may be connected and can send input
        </div>
      )}

      <div className="flex items-center flex-wrap gap-4 px-4 py-1.5 bg-zinc-900 border-b border-zinc-800/60 text-[13px] min-h-9">
        {/* ---- identifiers ---- */}
        <div className="flex items-center gap-1.5 overflow-hidden">
          <span className="text-zinc-500 shrink-0">Workspace</span>
          <span className="text-zinc-300 font-mono text-xs max-w-40 truncate">default</span>
          <span className="text-zinc-700 mx-0.5" aria-hidden="true">
            |
          </span>
          <span className="text-zinc-500 shrink-0">Session</span>
          <span className="text-zinc-300 font-mono text-xs max-w-40 truncate" title={activeTab?.sessionId ?? ""}>
            {activeTab?.sessionId ?? ""}
          </span>
        </div>

        {/* ---- connection state ---- */}
        <div className="flex items-center gap-1.5 ml-auto shrink-0" role="status" aria-live="polite">
          <span className={`size-2 rounded-full shrink-0 ${STATE_DOT_CLASS[connectionState]}`} />
          <span>{STATE_LABEL[connectionState]}</span>
        </div>

        {/* ---- actions ---- */}
        <div className="flex gap-1.5 shrink-0 flex-wrap">
          <Button
            variant="ghost"
            size="sm"
            icon={<RefreshCw size={12} />}
            onClick={reconnect}
            disabled={socketBusy}
            aria-label="Reconnect to session"
          >
            Reconnect
          </Button>
          <Button
            variant="ghost"
            size="sm"
            icon={<RotateCcw size={12} />}
            onClick={resetSession}
            disabled={socketBusy}
            aria-label="Reset current session"
          >
            Reset Session
          </Button>
          <Button
            variant="ghost"
            size="sm"
            icon={<Plus size={12} />}
            onClick={newSession}
            aria-label="Create new session"
          >
            New Session
          </Button>
        </div>
      </div>
    </header>
  );
}