import { test, expect } from '@playwright/test';

test.describe('Inline Driver Selector', () => {
  test.beforeEach(async ({ page }) => {
    test.setTimeout(120000);

    // Login
    await page.goto('http://localhost:5173/login');
    await page.locator('button:has-text("Sign in with Auth0")').click();
    await page.waitForTimeout(2000);

    await page.locator('input[name="username"]').fill('test@test.com');
    await page.locator('input[name="password"]').fill('P@ssw0rd!');
    await page.locator('button[type="submit"][data-action-button-primary="true"]').click();

    await page.waitForURL('**/dashboard', { timeout: 30000 });
    console.log('✅ Logged in successfully');
  });

  test('should display and click driver selector on schedule page', async ({ page }) => {
    console.log('\n🔍 Testing inline driver selector');

    // Navigate to Schedule page
    await page.goto('http://localhost:5173/events');
    await page.waitForLoadState('networkidle');

    await page.screenshot({ path: 'test-results/driver-selector-01-schedule-page.png', fullPage: true });

    // Find the first event row
    const firstRow = page.locator('tbody tr').first();
    await expect(firstRow).toBeVisible();

    // Find driver cell in the first row
    const driverCell = firstRow.locator('td').nth(2); // Driver is 3rd column (0-indexed)
    console.log('📋 Driver cell text:', await driverCell.textContent());

    await page.screenshot({ path: 'test-results/driver-selector-02-before-click.png', fullPage: true });

    // Click on the driver selector button
    const driverButton = driverCell.locator('button');
    await expect(driverButton).toBeVisible({ timeout: 5000 });

    console.log('🖱️ Clicking driver selector button');
    await driverButton.click();
    await page.waitForTimeout(500);

    await page.screenshot({ path: 'test-results/driver-selector-03-after-click.png', fullPage: true });

    // Check if modal appeared
    const modal = page.locator('text=Assign Driver');
    const isModalVisible = await modal.isVisible({ timeout: 3000 }).catch(() => false);

    if (isModalVisible) {
      console.log('✅ Modal is visible');
      await page.screenshot({ path: 'test-results/driver-selector-04-modal-visible.png', fullPage: true });

      // Check drivers list
      const driversList = await page.locator('button').filter({ hasText: /John Smith|Jane Doe|Unassigned/ }).all();
      console.log(`✅ Found ${driversList.length} driver options in modal`);

      // Try to click "Unassigned"
      const unassignedOption = page.locator('button:has-text("Unassigned")').last();
      await unassignedOption.click();
      await page.waitForTimeout(1500);

      console.log('✅ Clicked Unassigned option');
      await page.screenshot({ path: 'test-results/driver-selector-05-after-selection.png', fullPage: true });
    } else {
      console.log('❌ Modal NOT visible after click');

      // Debug: Take screenshot
      await page.screenshot({ path: 'test-results/driver-selector-debug-no-modal.png', fullPage: true });
    }
  });

  test('should show conflict dialog when assigning conflicting driver', async ({ page }) => {
    console.log('\n🔍 Testing conflict detection');

    await page.goto('http://localhost:5173/events');
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'test-results/driver-selector-conflict-01-schedule.png', fullPage: true });

    // Get the first two events (they have the same time, so assigning same driver creates conflict)
    const rows = await page.locator('tbody tr').all();
    console.log(`📊 Found ${rows.length} events`);

    if (rows.length >= 2) {
      // Assign a driver to the first event
      console.log('🔹 Assigning driver to first event');
      const firstDriverCell = rows[0].locator('td').nth(2);
      await firstDriverCell.locator('button').click();
      await page.waitForTimeout(500);

      // Select Amanda Washington
      const amandaOption = page.locator('button').filter({ hasText: 'Amanda Washington' });
      await expect(amandaOption).toBeVisible();
      await amandaOption.click();
      await page.waitForTimeout(2000);

      console.log('✅ Assigned Amanda Washington to first event');
      await page.screenshot({ path: 'test-results/driver-selector-conflict-02-first-assigned.png', fullPage: true });

      // Now try to assign the same driver to the second event (same time = conflict!)
      console.log('🔹 Trying to assign same driver to second event');
      const secondDriverCell = rows[1].locator('td').nth(2);
      await secondDriverCell.locator('button').click();
      await page.waitForTimeout(500);

      await page.screenshot({ path: 'test-results/driver-selector-conflict-03-modal.png', fullPage: true });

      // Select Amanda Washington again
      const amandaOption2 = page.locator('button').filter({ hasText: 'Amanda Washington' });
      await amandaOption2.click();
      await page.waitForTimeout(1500);

      await page.screenshot({ path: 'test-results/driver-selector-conflict-04-after-select.png', fullPage: true });

      // Check for conflict dialog
      const conflictDialog = page.locator('text=Scheduling Conflict Detected');
      const hasConflict = await conflictDialog.isVisible({ timeout: 3000 }).catch(() => false);

      if (hasConflict) {
        console.log('✅ Conflict dialog appeared!');
        await page.screenshot({ path: 'test-results/driver-selector-conflict-05-dialog.png', fullPage: true });

        // Verify conflict details are shown
        const conflictTitle = await page.locator('.bg-yellow-50').first().textContent();
        console.log(`📋 Conflict details: ${conflictTitle}`);

        // Click "Assign Anyway"
        const assignAnywayButton = page.locator('button:has-text("Assign Anyway")');
        await assignAnywayButton.click();
        await page.waitForTimeout(1500);

        console.log('✅ Clicked Assign Anyway - driver should now be double-booked');
        await page.screenshot({ path: 'test-results/driver-selector-conflict-06-assigned.png', fullPage: true });

        // Verify both events now show Amanda Washington
        const firstEventDriver = await rows[0].locator('td').nth(2).textContent();
        const secondEventDriver = await rows[1].locator('td').nth(2).textContent();

        console.log(`✅ First event driver: ${firstEventDriver?.trim()}`);
        console.log(`✅ Second event driver: ${secondEventDriver?.trim()}`);
      } else {
        console.log('⚠️ No conflict dialog appeared - events may not have overlapping times');
        await page.screenshot({ path: 'test-results/driver-selector-no-conflict.png', fullPage: true });
      }
    } else {
      console.log('⚠️ Not enough events found - skipping conflict test');
    }
  });
});