import { test, expect } from '../../../playwright';
import { closeAllCollections, createCollection } from '../../utils/page';

test.describe('Draft indicator in collection and folder settings', () => {
  test.afterAll(async ({ page }) => {
    // cleanup: close all collections
    await closeAllCollections(page);
  });

  test('Verify draft indicator appears when changing collection settings - Headers', async ({ page, createTmpDir }) => {
    const collectionName = 'test-draft';

    // Create a new collection
    await createCollection(page, collectionName, await createTmpDir());

    // Verify the collection settings tab is open
    await expect(page.locator('.request-tab .tab-label').filter({ hasText: 'Collection' })).toBeVisible();

    // Verify initially there is NO draft indicator (close icon is present)
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();

    await page.locator('.tab.headers').click();

    const headerTable = page.locator('table').first();
    const headerRow = headerTable.locator('tbody tr').first();

    const nameEditor = headerRow.locator('.CodeMirror').first();
    await nameEditor.click();
    await page.keyboard.type('X-Custom-Header');

    const valueEditor = headerRow.locator('.CodeMirror').nth(1);
    await valueEditor.click();
    await page.keyboard.type('custom-value');

    // Verify draft indicator appears in the tab
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing collection settings - Auth', async ({ page }) => {
    // Verify the collection settings tab is open
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });
    await expect(collectionTab).toBeVisible();

    // Verify initially there is NO draft indicator
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();

    // Click on Auth tab
    await page.locator('.tab.auth').click();

    // Change auth mode from 'none' to 'bearer' by clicking the dropdown
    await page.locator('.auth-mode-label').click();
    await page.locator('.dropdown-item').filter({ hasText: 'Bearer Token' }).click();

    // Verify draft indicator appears in the tab
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing collection settings - Protobuf', async ({ page }) => {
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });
    await expect(collectionTab).toBeVisible();

    // Verify initially there is NO draft indicator
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();

    // Click on Protobuf tab
    await page.locator('.tab.protobuf').click();

    // Add a new proto file - handle file picker dialog
    const fileChooserPromise = page.waitForEvent('filechooser');
    await page.getByTestId('protobuf-add-file-button').click();
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles('./tests/collection/draft/fixtures/grpcbin.proto');

    // Wait for the file to be processed and added to the table
    // The file goes through IPC to get the path, then Redux to update state
    const protoFilesTable = page.getByTestId('protobuf-proto-file-name');
    await expect(protoFilesTable.getByText('grpcbin.proto')).toBeVisible();

    // Verify draft indicator appears
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing client certificate settings', async ({ page }) => {
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });
    await expect(collectionTab).toBeVisible();

    // Verify initially there is NO draft indicator
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();

    // Click on Client Certificates tab
    await page.locator('.tab.clientCert').click();

    // Fill domain
    await page.locator('#domain').fill('test.com');

    // Select cert file using file picker (using grpcbin.proto as a dummy file)
    const certFileChooserPromise = page.waitForEvent('filechooser');
    await page.locator('input#certFilePath[type="file"]').click();
    const certFileChooser = await certFileChooserPromise;
    await certFileChooser.setFiles('./tests/collection/draft/fixtures/grpcbin.proto');

    // Select key file using file picker (using grpcbin.proto as a dummy file)
    const keyFileChooserPromise = page.waitForEvent('filechooser');
    await page.locator('input#keyFilePath[type="file"]').click();
    const keyFileChooser = await keyFileChooserPromise;
    await keyFileChooser.setFiles('./tests/collection/draft/fixtures/grpcbin.proto');

    // Click Add button
    await page.getByTestId('add-client-cert').click();

    // Verify draft indicator appears
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing proxy settings', async ({ page }) => {
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });
    await expect(collectionTab).toBeVisible();

    // Verify initially there is NO draft indicator
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();

    // Click on Proxy tab
    await page.locator('.tab.proxy').click();

    // Enable proxy - select "enabled" radio button
    await page.locator('input[name="enabled"][value="true"]').check();

    // Fill in hostname and port
    await page.locator('#hostname').fill('localhost');
    await page.locator('#port').fill('8080');

    // Verify draft indicator appears
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing collection settings - Vars', async ({ page }) => {
    const collectionTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'Collection' }) });

    // Verify initially there is NO draft indicator
    await expect(collectionTab.locator('.close-icon')).toBeVisible();

    await page.locator('.tab.vars').click();

    const varsTable = page.locator('table').first();
    const varRow = varsTable.locator('tbody tr').first();

    const varNameInput = varRow.locator('input[type="text"]');
    await varNameInput.click();
    await varNameInput.fill('testVar');

    const varValueEditor = varRow.locator('.CodeMirror');
    await varValueEditor.click();
    await page.keyboard.type('testValue');

    // Verify draft indicator appears
    await expect(collectionTab.locator('.has-changes-icon')).toBeVisible();
    await expect(collectionTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(collectionTab.locator('.close-icon')).toBeVisible();
    await expect(collectionTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing folder settings - Headers', async ({ page }) => {
    const collectionName = 'test-draft';

    // Create a folder in the collection
    const collection = page.locator('.collection-name').filter({ hasText: collectionName });
    await collection.hover(); // Hover on collection to reveal action buttons
    await collection.locator('.collection-actions .icon').click();
    await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();

    // Fill folder name
    await expect(page.locator('#folder-name')).toBeVisible();
    await page.locator('#folder-name').fill('test-folder');
    await page.getByRole('button', { name: 'Create' }).click();

    await expect(page.locator('.collection-item-name').filter({ hasText: 'test-folder' })).toBeVisible();

    // Open folder settings by double-clicking the folder
    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).dblclick();

    // Verify folder settings tab is open
    const folderTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'test-folder' }) });
    await expect(folderTab).toBeVisible();

    await expect(folderTab.locator('.close-icon')).toBeVisible();
    await expect(folderTab.locator('.has-changes-icon')).not.toBeVisible();

    const headerTable = page.locator('table').first();
    const headerRow = headerTable.locator('tbody tr').first();

    const nameEditor = headerRow.locator('.CodeMirror').first();
    await nameEditor.click();
    await page.keyboard.type('X-Folder-Header');

    const valueEditor = headerRow.locator('.CodeMirror').nth(1);
    await valueEditor.click();
    await page.keyboard.type('folder-value');

    // Verify draft indicator appears in the folder tab
    await expect(folderTab.locator('.has-changes-icon')).toBeVisible();
    await expect(folderTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone after saving
    await expect(folderTab.locator('.close-icon')).toBeVisible();
    await expect(folderTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing folder settings - Auth', async ({ page }) => {
    // Open folder settings by double-clicking the folder from previous test
    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).dblclick();

    // Verify folder settings tab is open
    const folderTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'test-folder' }) });
    await expect(folderTab).toBeVisible();

    // Verify initially no draft indicator
    await expect(folderTab.locator('.close-icon')).toBeVisible();

    // Click on Auth tab
    await page.locator('.tab.auth').click();

    // Change auth mode by clicking the dropdown
    await page.locator('.auth-mode-label').click();
    await page.locator('.dropdown-item').filter({ hasText: 'Bearer Token' }).click();

    // Verify draft indicator appears
    await expect(folderTab.locator('.has-changes-icon')).toBeVisible();
    await expect(folderTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone
    await expect(folderTab.locator('.close-icon')).toBeVisible();
    await expect(folderTab.locator('.has-changes-icon')).not.toBeVisible();
  });

  test('Verify draft indicator appears when changing folder settings - Vars', async ({ page }) => {
    // Open folder settings by double-clicking the folder from previous test
    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).dblclick();

    // Verify folder settings tab is open
    const folderTab = page.locator('.request-tab').filter({ has: page.locator('.tab-label', { hasText: 'test-folder' }) });
    await expect(folderTab).toBeVisible();

    await expect(folderTab.locator('.close-icon')).toBeVisible();

    await page.locator('.tab.vars').click();

    const varsTable = page.locator('table').first();
    const varRow = varsTable.locator('tbody tr').first();

    const varNameInput = varRow.locator('input[type="text"]');
    await varNameInput.click();
    await varNameInput.fill('folderVar');

    const folderVarValueEditor = varRow.locator('.CodeMirror');
    await folderVarValueEditor.click();
    await page.keyboard.type('folderValue');

    // Verify draft indicator appears
    await expect(folderTab.locator('.has-changes-icon')).toBeVisible();
    await expect(folderTab.locator('.close-icon')).not.toBeVisible();

    // Save the changes
    await page.getByRole('button', { name: 'Save' }).click();

    // Verify draft indicator is gone
    await expect(folderTab.locator('.close-icon')).toBeVisible();
    await expect(folderTab.locator('.has-changes-icon')).not.toBeVisible();
  });
});