// @vitest-environment jsdom
/**
 * Component tests for ConsoleTabStrip — the per-task strip of SSH console
 * session tabs. Verifies both tabs render with their labels, the agent-active
 * indicator only shows on the session with agent_active:true, the close (✕)
 * button is hidden when can_close:false, clicking a tab fires onSelect with
 * its connection_id, clicking the add-connection button fires onAddConnection,
 * and clicking a close button fires onClose without also firing onSelect.
 */
import '../../../../test/dom-setup';
import { describe, it, expect, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders } from '../../../../test/render-helpers';
import i18n from '../../../../i18n';
import type { ConsoleSessionSummary } from '../../../../lib/ssh-console-types';
import { ConsoleTabStrip } from './ConsoleTabStrip';

const t = i18n.getFixedT('en', 'detail');

function makeSession(overrides: Partial<ConsoleSessionSummary> = {}): ConsoleSessionSummary {
  return {
    connection_id: 'conn-a',
    connection_label: 'Prod DB',
    started_at: '2026-07-03T00:00:00Z',
    last_activity_at: '2026-07-03T00:05:00Z',
    status: 'connected',
    can_write: true,
    can_close: true,
    agent_active: false,
    ...overrides,
  };
}

describe('ConsoleTabStrip', () => {
  it('renders a tab per session with its label', () => {
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB', agent_active: true }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging', can_close: false }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={() => {}}
        onClose={() => {}}
        onAddConnection={() => {}}
      />,
    );
    expect(screen.getByText('Prod DB')).toBeInTheDocument();
    expect(screen.getByText('Staging')).toBeInTheDocument();
  });

  it('shows the agent-active indicator only on the session with agent_active:true', () => {
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB', agent_active: true }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging', agent_active: false }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={() => {}}
        onClose={() => {}}
        onAddConnection={() => {}}
      />,
    );
    const agentLabel = t('console.agentActive');
    expect(screen.getAllByLabelText(agentLabel)).toHaveLength(1);
  });

  it('hides the close button when can_close is false, shows it when true', () => {
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB', can_close: true }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging', can_close: false }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={() => {}}
        onClose={() => {}}
        onAddConnection={() => {}}
      />,
    );
    const closeLabel = t('console.closeSession');
    expect(screen.getAllByLabelText(closeLabel)).toHaveLength(1);
  });

  it('calls onSelect with the connection_id when a tab is clicked', async () => {
    const user = userEvent.setup();
    const onSelect = vi.fn();
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB' }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging' }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={onSelect}
        onClose={() => {}}
        onAddConnection={() => {}}
      />,
    );
    await user.click(screen.getByText('Staging'));
    expect(onSelect).toHaveBeenCalledWith('conn-b');
  });

  it('calls onAddConnection when the add-connection button is clicked', async () => {
    const user = userEvent.setup();
    const onAddConnection = vi.fn();
    renderWithProviders(
      <ConsoleTabStrip
        sessions={[makeSession()]}
        selectedConnectionId="conn-a"
        onSelect={() => {}}
        onClose={() => {}}
        onAddConnection={onAddConnection}
      />,
    );
    await user.click(screen.getByText(t('console.addConnection')));
    expect(onAddConnection).toHaveBeenCalledTimes(1);
  });

  it('calls onClose with the right connection_id and does not also fire onSelect', async () => {
    const user = userEvent.setup();
    const onSelect = vi.fn();
    const onClose = vi.fn();
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB', can_close: true }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging', can_close: false }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={onSelect}
        onClose={onClose}
        onAddConnection={() => {}}
      />,
    );
    const closeLabel = t('console.closeSession');
    await user.click(screen.getByLabelText(closeLabel));
    expect(onClose).toHaveBeenCalledWith('conn-a');
    expect(onSelect).not.toHaveBeenCalled();
  });

  it('calls onSelect when Enter/Space is pressed on the tab itself', async () => {
    const user = userEvent.setup();
    const onSelect = vi.fn();
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB' }),
      makeSession({ connection_id: 'conn-b', connection_label: 'Staging' }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={onSelect}
        onClose={() => {}}
        onAddConnection={() => {}}
      />,
    );
    const tab = screen.getByText('Staging').closest('[role="button"]') as HTMLElement;
    tab.focus();
    await user.keyboard('{Enter}');
    expect(onSelect).toHaveBeenCalledWith('conn-b');
  });

  it('does not fire onSelect when the close button is activated via keyboard', async () => {
    const user = userEvent.setup();
    const onSelect = vi.fn();
    const onClose = vi.fn();
    const sessions = [
      makeSession({ connection_id: 'conn-a', connection_label: 'Prod DB', can_close: true }),
    ];
    renderWithProviders(
      <ConsoleTabStrip
        sessions={sessions}
        selectedConnectionId="conn-a"
        onSelect={onSelect}
        onClose={onClose}
        onAddConnection={() => {}}
      />,
    );
    const closeLabel = t('console.closeSession');
    const closeButton = screen.getByLabelText(closeLabel);
    closeButton.focus();
    await user.keyboard('{Enter}');
    expect(onClose).toHaveBeenCalledWith('conn-a');
    expect(onSelect).not.toHaveBeenCalled();
  });
});
