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

/**
 * Integration tests for refactored GamemasterManager component
 * Tests useAsyncState composable and api-client integration
 */
describe('GamemasterManager - Integration Tests', () => {
  let wrapper;

  beforeEach(() => {
    // Mock fetch globally
    global.fetch = vi.fn();

    // Mock router-link component
    vi.stubGlobal('RouterLink', {
      name: 'RouterLink',
      template: '<a><slot /></a>',
      props: ['to']
    });
  });

  afterEach(() => {
    if (wrapper) {
      wrapper.unmount();
    }
    vi.clearAllMocks();
  });

  it('renders the gamemaster manager page', () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    expect(wrapper.find('.gamemaster-manager').exists()).toBe(true);
    expect(wrapper.find('h1').text()).toBe('Gamemaster Manager');
  });

  it('has three main sections', () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    const sections = wrapper.findAll('.section');
    // At least 3 sections: fetch, break up, save to server
    expect(sections.length).toBeGreaterThanOrEqual(3);
  });

  it('has fetch button with loading state', async () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    const buttons = wrapper.findAll('button');
    const fetchButton = buttons.find(b => b.text().includes('Fetch'));
    
    expect(fetchButton).toBeDefined();
    expect(fetchButton.attributes('disabled')).toBeUndefined();
  });

  it('displays description text', () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    const description = wrapper.find('.description');
    expect(description.text()).toContain('PokeMiners');
  });

  it('uses useAsyncState pattern for loading states', async () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    // Component should have computed loading property
    expect(wrapper.vm.loading).toBeDefined();
    expect(typeof wrapper.vm.loading).toBe('boolean');
  });

  it('uses computed error property for error handling', () => {
    wrapper = mount(GamemasterManager, {
      global: {
        stubs: {
          RouterLink: true
        }
      }
    });

    // Component should have computed error property
    expect(wrapper.vm.error).toBeDefined();
  });
});