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

/**
 * Filters Test Suite for SAWIS Business Intelligence Dashboard
 * Tests the sidebar filter functionality and data filtering
 */
test.describe('SAWIS Filters', () => {
  
  test.beforeEach(async ({ page }) => {
    // Navigate to the homepage before each test
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    // Wait for initial data to load
    await page.waitForTimeout(3000);
  });

  test('should display all filter sections', async ({ page }) => {
    // Check all filter sections are visible
    await expect(page.getByText('Year')).toBeVisible();
    await expect(page.getByText('Ending Month')).toBeVisible();
    await expect(page.getByText('Reporting Period (Months)')).toBeVisible();
    await expect(page.getByText('Product Type')).toBeVisible();
    await expect(page.getByText('Country')).toBeVisible();
    await expect(page.getByText('Package Type')).toBeVisible();
    await expect(page.getByText('Cultivar/Type')).toBeVisible();
  });

  test('should have functional year filter', async ({ page }) => {
    // Click on year dropdown
    await page.getByText('Year').locator('..').getByText('2025').click();
    
    // Verify dropdown opens
    await expect(page.getByText('2024')).toBeVisible();
    await expect(page.getByText('2023')).toBeVisible();
    await expect(page.getByText('2022')).toBeVisible();
    
    // Select a different year
    await page.getByText('2024').click();
    
    // Verify selection is updated
    await expect(page.getByText('Year').locator('..').getByText('2024')).toBeVisible();
  });

  test('should have functional ending month filter', async ({ page }) => {
    // Click on ending month dropdown
    await page.getByText('Ending Month').locator('..').getByText('06 - June').click();
    
    // Verify dropdown opens with months
    await expect(page.getByText('01 - January')).toBeVisible();
    await expect(page.getByText('02 - February')).toBeVisible();
    await expect(page.getByText('03 - March')).toBeVisible();
    
    // Select a different month
    await page.getByText('12 - December').click();
    
    // Verify selection is updated
    await expect(page.getByText('Ending Month').locator('..').getByText('12 - December')).toBeVisible();
  });

  test('should have functional reporting period slider', async ({ page }) => {
    // Find the reporting period slider
    const slider = page.locator('input[type="range"]');
    await expect(slider).toBeVisible();
    
    // Get current value
    const currentValue = await slider.inputValue();
    expect(currentValue).toBe('12'); // Default should be 12 months
    
    // Verify the display shows the current value
    await expect(page.getByText('12')).toBeVisible();
  });

  test('should have functional product type filter', async ({ page }) => {
    // Click on product type dropdown
    await page.getByText('Product Type').locator('..').getByText('7 options').click();
    
    // Verify dropdown opens with product types
    await expect(page.getByText('White')).toBeVisible();
    await expect(page.getByText('Red')).toBeVisible();
    await expect(page.getByText('Sparkling Wine')).toBeVisible();
    await expect(page.getByText('Fortified Wine')).toBeVisible();
    
    // Test search functionality
    const searchBox = page.getByRole('textbox', { name: 'Search' }).first();
    await searchBox.fill('White');
    await expect(page.getByText('White')).toBeVisible();
    
    // Select White
    await page.getByText('White').click();
    
    // Verify selection is updated
    await expect(page.getByText('Product Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have functional country filter', async ({ page }) => {
    // Click on country dropdown
    await page.getByText('Country').locator('..').getByText('194 options').click();
    
    // Verify dropdown opens with countries
    await expect(page.getByText('Albania')).toBeVisible();
    await expect(page.getByText('Germany')).toBeVisible();
    await expect(page.getByText('United Kingdom')).toBeVisible();
    await expect(page.getByText('U.S.A.')).toBeVisible();
    
    // Test search functionality
    const searchBox = page.getByRole('textbox', { name: 'Search' }).nth(1);
    await searchBox.fill('Germany');
    await expect(page.getByText('Germany')).toBeVisible();
    
    // Select Germany
    await page.getByText('Germany').click();
    
    // Verify selection is updated
    await expect(page.getByText('Country').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have functional package type filter', async ({ page }) => {
    // Click on package type dropdown
    await page.getByText('Package Type').locator('..').getByText('2 options').click();
    
    // Verify dropdown opens with package types
    await expect(page.getByText('Bulk')).toBeVisible();
    await expect(page.getByText('Packaged')).toBeVisible();
    
    // Select Bulk
    await page.getByText('Bulk').click();
    
    // Verify selection is updated
    await expect(page.getByText('Package Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have functional cultivar/type filter', async ({ page }) => {
    // Click on cultivar/type dropdown
    await page.getByText('Cultivar/Type').locator('..').getByText('20 options').click();
    
    // Verify dropdown opens with cultivars
    await expect(page.getByText('Chardonnay')).toBeVisible();
    await expect(page.getByText('Sauvignon Blanc')).toBeVisible();
    await expect(page.getByText('Cabernet Sauvignon')).toBeVisible();
    await expect(page.getByText('Shiraz')).toBeVisible();
    
    // Test search functionality
    const searchBox = page.getByRole('textbox', { name: 'Search' }).nth(2);
    await searchBox.fill('Chardonnay');
    await expect(page.getByText('Chardonnay')).toBeVisible();
    
    // Select Chardonnay
    await page.getByText('Chardonnay').click();
    
    // Verify selection is updated
    await expect(page.getByText('Cultivar/Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have functional apply and clear buttons', async ({ page }) => {
    // Check buttons are present
    const applyButton = page.getByRole('button', { name: 'Apply' });
    const clearButton = page.getByRole('button', { name: 'Clear' });
    
    await expect(applyButton).toBeVisible();
    await expect(clearButton).toBeVisible();
    
    // Test clear functionality
    await clearButton.click();
    
    // Verify filters are reset to defaults
    await expect(page.getByText('Year').locator('..').getByText('2025')).toBeVisible();
    await expect(page.getByText('Ending Month').locator('..').getByText('06 - June')).toBeVisible();
  });

  test('should have select all functionality for country filter', async ({ page }) => {
    // Click on country dropdown
    await page.getByText('Country').locator('..').getByText('194 options').click();
    
    // Click select all button
    await page.getByRole('button', { name: 'Select All' }).click();
    
    // Verify all countries are selected
    await expect(page.getByText('Country').locator('..').getByText('194 selected')).toBeVisible();
  });

  test('should handle multiple selections', async ({ page }) => {
    // Select multiple product types
    await page.getByText('Product Type').locator('..').getByText('7 options').click();
    await page.getByText('White').click();
    await page.getByText('Red').click();
    
    // Verify multiple selections are shown
    await expect(page.getByText('Product Type').locator('..').getByText('2 selected')).toBeVisible();
  });

  test('should update data when filters are applied', async ({ page }) => {
    // Get initial data
    const initialTotalExport = await page.getByText('Total Export (l)').locator('..').locator('text=/\\d+/').first().textContent();
    
    // Change year filter
    await page.getByText('Year').locator('..').getByText('2025').click();
    await page.getByText('2024').click();
    
    // Apply filters
    await page.getByRole('button', { name: 'Apply' }).click();
    
    // Wait for data to update
    await page.waitForTimeout(2000);
    
    // Get updated data
    const updatedTotalExport = await page.getByText('Total Export (l)').locator('..').locator('text=/\\d+/').first().textContent();
    
    // Verify data has changed (this may vary based on actual data)
    expect(updatedTotalExport).toBeDefined();
  });

  test('should handle filter combinations', async ({ page }) => {
    // Set multiple filters
    await page.getByText('Year').locator('..').getByText('2025').click();
    await page.getByText('2024').click();
    
    await page.getByText('Product Type').locator('..').getByText('7 options').click();
    await page.getByText('White').click();
    
    await page.getByText('Package Type').locator('..').getByText('2 options').click();
    await page.getByText('Packaged').click();
    
    // Apply filters
    await page.getByRole('button', { name: 'Apply' }).click();
    
    // Wait for data to update
    await page.waitForTimeout(2000);
    
    // Verify filters are applied
    await expect(page.getByText('Year').locator('..').getByText('2024')).toBeVisible();
    await expect(page.getByText('Product Type').locator('..').getByText('1 selected')).toBeVisible();
    await expect(page.getByText('Package Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have proper keyboard navigation in filters', async ({ page }) => {
    // Open product type dropdown
    await page.getByText('Product Type').locator('..').getByText('7 options').click();
    
    // Use keyboard navigation
    await page.keyboard.press('ArrowDown');
    await page.keyboard.press('Enter');
    
    // Verify selection is made
    await expect(page.getByText('Product Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should handle filter search with special characters', async ({ page }) => {
    // Open country dropdown
    await page.getByText('Country').locator('..').getByText('194 options').click();
    
    // Test search with special characters
    const searchBox = page.getByRole('textbox', { name: 'Search' }).nth(1);
    await searchBox.fill('U.S.A.');
    await expect(page.getByText('U.S.A.')).toBeVisible();
    
    // Test search with accented characters
    await searchBox.clear();
    await searchBox.fill('Côte');
    await expect(page.getByText("Cote D'ivoire")).toBeVisible();
  });

  test('should maintain filter state during navigation', async ({ page }) => {
    // Set a filter
    await page.getByText('Product Type').locator('..').getByText('7 options').click();
    await page.getByText('White').click();
    
    // Navigate to different tab
    await page.getByRole('button', { name: 'Volume' }).click();
    
    // Verify filter is still applied
    await expect(page.getByText('Product Type').locator('..').getByText('1 selected')).toBeVisible();
  });
});