import { describe, expect, it, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MitreTechniqueTag } from '@/components/MitreTechniqueTag';
import { renderWithProviders } from './utils';

const TECHNIQUE = { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] };

describe('MitreTechniqueTag', () => {
  it('renders id and name', () => {
    renderWithProviders(
      <MitreTechniqueTag technique={TECHNIQUE} onRemove={vi.fn()} />,
    );
    expect(screen.getByText('T1059')).toBeInTheDocument();
    expect(screen.getByText(/Command and Scripting Interpreter/)).toBeInTheDocument();
  });

  it('shows remove button when not disabled', () => {
    renderWithProviders(
      <MitreTechniqueTag technique={TECHNIQUE} onRemove={vi.fn()} />,
    );
    expect(screen.getByRole('button', { name: /Remove T1059/i })).toBeInTheDocument();
  });

  it('clicking × calls onRemove', async () => {
    const onRemove = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(
      <MitreTechniqueTag technique={TECHNIQUE} onRemove={onRemove} />,
    );
    await user.click(screen.getByRole('button', { name: /Remove T1059/i }));
    expect(onRemove).toHaveBeenCalledOnce();
  });

  it('hides remove button when disabled', () => {
    renderWithProviders(
      <MitreTechniqueTag technique={TECHNIQUE} onRemove={vi.fn()} disabled />,
    );
    expect(screen.queryByRole('button', { name: /Remove/i })).toBeNull();
  });
});