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

/**
 * Navigation Test Suite for SAWIS Business Intelligence Dashboard
 * Tests the main navigation tabs and page transitions
 */
test.describe('SAWIS Navigation', () => {
  
  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 main navigation tabs', async ({ page }) => {
    // Check all navigation tabs are visible
    await expect(page.getByRole('button', { name: 'Overview' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Volume' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Value' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Price Range' })).toBeVisible();
  });

  test('should have Overview tab as default active', async ({ page }) => {
    // Verify Overview tab is active by default
    const overviewButton = page.getByRole('button', { name: 'Overview' });
    await expect(overviewButton).toBeVisible();
    
    // Check for overview-specific content
    await expect(page.getByText('Export market per product type')).toBeVisible();
    await expect(page.getByText('Exports (L)')).toBeVisible();
    await expect(page.getByText('Cultivar / Type Exported')).toBeVisible();
  });

  test('should navigate to Volume tab', async ({ page }) => {
    // Click on Volume tab
    await page.getByRole('button', { name: 'Volume' }).click();
    
    // Wait for content to load
    await page.waitForTimeout(2000);
    
    // Verify Volume-specific content is displayed
    // Note: Content may vary, but we should see some volume-related data
    await expect(page.getByText('Total Export (l)')).toBeVisible();
    await expect(page.getByText('Packaged (l)')).toBeVisible();
    await expect(page.getByText('Bulk (l)')).toBeVisible();
  });

  test('should navigate to Value tab', async ({ page }) => {
    // Click on Value tab
    await page.getByRole('button', { name: 'Value' }).click();
    
    // Wait for content to load
    await page.waitForTimeout(2000);
    
    // Verify Value-specific content is displayed
    // The page should show value-related metrics and charts
    await expect(page.getByText('Total Export (l)')).toBeVisible();
  });

  test('should navigate to Price Range tab', async ({ page }) => {
    // Click on Price Range tab
    await page.getByRole('button', { name: 'Price Range' }).click();
    
    // Wait for content to load
    await page.waitForTimeout(2000);
    
    // Verify Price Range-specific content is displayed
    // The page should show price range related data
    await expect(page.getByText('Total Export (l)')).toBeVisible();
  });

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

  test('should handle rapid navigation between tabs', async ({ page }) => {
    // Rapidly click through all tabs
    await page.getByRole('button', { name: 'Volume' }).click();
    await page.waitForTimeout(500);
    
    await page.getByRole('button', { name: 'Value' }).click();
    await page.waitForTimeout(500);
    
    await page.getByRole('button', { name: 'Price Range' }).click();
    await page.waitForTimeout(500);
    
    await page.getByRole('button', { name: 'Overview' }).click();
    await page.waitForTimeout(500);
    
    // Verify we end up on Overview with content loaded
    await expect(page.getByText('Export market per product type')).toBeVisible();
  });

  test('should have proper keyboard navigation for tabs', async ({ page }) => {
    // Focus on Overview tab
    await page.getByRole('button', { name: 'Overview' }).focus();
    
    // Use arrow keys to navigate
    await page.keyboard.press('ArrowRight');
    await expect(page.getByRole('button', { name: 'Volume' })).toBeFocused();
    
    await page.keyboard.press('ArrowRight');
    await expect(page.getByRole('button', { name: 'Value' })).toBeFocused();
    
    await page.keyboard.press('ArrowRight');
    await expect(page.getByRole('button', { name: 'Price Range' })).toBeFocused();
    
    // Test wrap-around
    await page.keyboard.press('ArrowRight');
    await expect(page.getByRole('button', { name: 'Overview' })).toBeFocused();
  });

  test('should handle tab activation with Enter key', async ({ page }) => {
    // Focus on Volume tab
    await page.getByRole('button', { name: 'Volume' }).focus();
    
    // Activate with Enter key
    await page.keyboard.press('Enter');
    await page.waitForTimeout(2000);
    
    // Verify Volume tab is active
    await expect(page.getByText('Total Export (l)')).toBeVisible();
  });

  test('should handle tab activation with Space key', async ({ page }) => {
    // Focus on Value tab
    await page.getByRole('button', { name: 'Value' }).focus();
    
    // Activate with Space key
    await page.keyboard.press(' ');
    await page.waitForTimeout(2000);
    
    // Verify Value tab is active
    await expect(page.getByText('Total Export (l)')).toBeVisible();
  });

  test('should display loading states during navigation', async ({ page }) => {
    // Click on Volume tab
    await page.getByRole('button', { name: 'Volume' }).click();
    
    // Check for loading indicators (if any)
    // The page should show some loading state briefly
    await page.waitForTimeout(1000);
    
    // Verify content loads eventually
    await expect(page.getByText('Total Export (l)')).toBeVisible();
  });

  test('should handle navigation with active filters', 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();
    
    // Apply filters
    await page.getByRole('button', { name: 'Apply' }).click();
    await page.waitForTimeout(2000);
    
    // Navigate to different tabs
    await page.getByRole('button', { name: 'Volume' }).click();
    await page.waitForTimeout(2000);
    
    await page.getByRole('button', { name: 'Value' }).click();
    await page.waitForTimeout(2000);
    
    await page.getByRole('button', { name: 'Price Range' }).click();
    await page.waitForTimeout(2000);
    
    // Navigate back to Overview
    await page.getByRole('button', { name: 'Overview' }).click();
    await page.waitForTimeout(2000);
    
    // Verify filters are maintained
    await expect(page.getByText('Year').locator('..').getByText('2024')).toBeVisible();
    await expect(page.getByText('Product Type').locator('..').getByText('1 selected')).toBeVisible();
  });

  test('should have proper ARIA attributes for accessibility', async ({ page }) => {
    // Check for proper ARIA attributes on tabs
    const overviewTab = page.getByRole('button', { name: 'Overview' });
    const volumeTab = page.getByRole('button', { name: 'Volume' });
    const valueTab = page.getByRole('button', { name: 'Value' });
    const priceRangeTab = page.getByRole('button', { name: 'Price Range' });
    
    await expect(overviewTab).toBeVisible();
    await expect(volumeTab).toBeVisible();
    await expect(valueTab).toBeVisible();
    await expect(priceRangeTab).toBeVisible();
    
    // Verify tabs have proper roles
    await expect(overviewTab).toHaveAttribute('role', 'button');
    await expect(volumeTab).toHaveAttribute('role', 'button');
    await expect(valueTab).toHaveAttribute('role', 'button');
    await expect(priceRangeTab).toHaveAttribute('role', 'button');
  });

  test('should handle navigation with data loading delays', async ({ page }) => {
    // Simulate slower network by setting a longer timeout
    page.setDefaultTimeout(30000);
    
    // Navigate to Volume tab
    await page.getByRole('button', { name: 'Volume' }).click();
    
    // Wait for content to load with longer timeout
    await page.waitForTimeout(5000);
    
    // Verify content is loaded
    await expect(page.getByText('Total Export (l)')).toBeVisible();
    
    // Reset timeout
    page.setDefaultTimeout(30000);
  });

  test('should maintain scroll position during navigation', async ({ page }) => {
    // Scroll down on Overview page
    await page.evaluate(() => window.scrollTo(0, 500));
    
    // Navigate to Volume tab
    await page.getByRole('button', { name: 'Volume' }).click();
    await page.waitForTimeout(2000);
    
    // Check scroll position (should be at top for new content)
    const scrollY = await page.evaluate(() => window.scrollY);
    expect(scrollY).toBeLessThan(100); // Should be near top
  });

  test('should handle navigation with chart interactions', async ({ page }) => {
    // Navigate to Overview tab (default)
    await expect(page.getByText('Export market per product type')).toBeVisible();
    
    // Navigate to Volume tab
    await page.getByRole('button', { name: 'Volume' }).click();
    await page.waitForTimeout(2000);
    
    // Verify charts are present and interactive
    await expect(page.getByText('Total Export (l)')).toBeVisible();
    
    // Navigate back to Overview
    await page.getByRole('button', { name: 'Overview' }).click();
    await page.waitForTimeout(2000);
    
    // Verify Overview charts are present
    await expect(page.getByText('Export market per product type')).toBeVisible();
  });
});