import { useTranslation } from 'react-i18next';
import type { ConsoleSessionSummary } from '../../../../lib/ssh-console-types';

export interface ConsoleTabStripProps {
  sessions: ConsoleSessionSummary[];
  selectedConnectionId: string | null;
  onSelect: (connectionId: string) => void;
  onClose: (connectionId: string) => void;
  onAddConnection: () => void;
}

const STATUS_DOT_CLASS: Record<ConsoleSessionSummary['status'], string> = {
  connected: 'bg-green-500',
  idle: 'bg-slate-400',
  closed: 'bg-red-500',
};

/**
 * Horizontal strip of SSH console session tabs for a task. Only the selected
 * tab's connection drives a live WS (via useConsoleSession in ConsoleTab) —
 * this component is purely presentational + event-emitting.
 */
export function ConsoleTabStrip({
  sessions,
  selectedConnectionId,
  onSelect,
  onClose,
  onAddConnection,
}: ConsoleTabStripProps) {
  const { t } = useTranslation('detail');

  return (
    <div className="flex items-center gap-1 px-2 py-1 border-b border-hairline bg-surface/40 overflow-x-auto">
      {sessions.map((session) => {
        const selected = session.connection_id === selectedConnectionId;
        return (
          <div
            key={session.connection_id}
            role="button"
            tabIndex={0}
            aria-selected={selected}
            onClick={() => onSelect(session.connection_id)}
            onKeyDown={(e) => {
              if (e.target !== e.currentTarget) return;
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onSelect(session.connection_id);
              }
            }}
            className={`flex items-center gap-1.5 px-2.5 h-7 rounded-md text-xs font-medium whitespace-nowrap cursor-pointer transition-colors border ${
              selected
                ? 'bg-accent-soft text-accent border-accent/60'
                : 'text-slate-300 border-transparent hover:bg-surface'
            }`}
          >
            <span
              className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${STATUS_DOT_CLASS[session.status]}`}
              aria-hidden="true"
            />
            <span className="truncate max-w-[10rem]">{session.connection_label}</span>
            {session.agent_active && (
              <span aria-label={t('console.agentActive')} title={t('console.agentActive')}>
                ⚡
              </span>
            )}
            {session.can_close && (
              <button
                type="button"
                aria-label={t('console.closeSession')}
                onClick={(e) => {
                  e.stopPropagation();
                  onClose(session.connection_id);
                }}
                className="ml-0.5 w-4 h-4 flex items-center justify-center rounded text-slate-400 hover:text-red-300 hover:bg-red-500/20"
              >
                ✕
              </button>
            )}
          </div>
        );
      })}
      <button
        type="button"
        onClick={onAddConnection}
        className="flex-shrink-0 flex items-center gap-1 px-2 h-7 rounded-md text-xs font-medium text-slate-400 border border-dashed border-hairline hover:text-slate-200 hover:bg-surface"
      >
        {t('console.addConnection')}
      </button>
    </div>
  );
}
