import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ApiKeyManager from '../../../src/views/ApiKeyManager.vue';

/**
 * Integration tests for refactored ApiKeyManager component
 * Tests the use of BaseModal and refactored state management
 */
describe('ApiKeyManager - Integration Tests', () => {
  let wrapper;

  beforeEach(() => {
    // Create target element for Teleport (BaseModal uses Teleport)
    const el = document.createElement('div');
    el.id = 'modal-target';
    document.body.appendChild(el);

    // Mock localStorage
    global.localStorage = {
      getItem: vi.fn(),
      setItem: vi.fn(),
      removeItem: vi.fn(),
      clear: vi.fn()
    };
  });

  afterEach(() => {
    if (wrapper) {
      wrapper.unmount();
    }
    document.body.innerHTML = '';
    vi.clearAllMocks();
  });

  it('renders the API key manager page', () => {
    wrapper = mount(ApiKeyManager);
    expect(wrapper.find('.api-key-manager').exists()).toBe(true);
    expect(wrapper.find('h1').text()).toBe('API Key Manager');
  });

  it('shows delete confirmation modal using BaseModal', async () => {
    wrapper = mount(ApiKeyManager);

    // Find the button that triggers the delete modal
    const deleteButton = wrapper
      .findAll('button')
      .find(
        b =>
          b.text().includes('Clear Stored Key') || b.text().includes('Delete')
      );

    // Modal should not be visible initially
    expect(document.querySelector('.modal-overlay')).toBeFalsy();
  });

  it('contains ChallongeApiKeyGuide component', () => {
    wrapper = mount(ApiKeyManager);
    // The guide component is conditionally rendered
    expect(
      wrapper.findComponent({ name: 'ChallongeApiKeyGuide' }).exists()
    ).toBe(true);
  });

  it('has proper form structure for API key input', () => {
    wrapper = mount(ApiKeyManager);

    const input = wrapper.find('#api-key');
    expect(input.exists()).toBe(true);
    expect(input.attributes('type')).toBe('password');
  });
});