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

test.describe('Settings Page', () => {
  test.beforeEach(async ({ page }) => {
    // Login
    await page.goto('http://localhost:5173/login');
    await page.fill('input[type="email"]', 'test@example.com');
    await page.fill('input[type="password"]', 'Test1234!');
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');
  });

  test('should navigate to settings', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    await expect(page.locator('h1')).toContainText('Settings');
  });

  test('should have all 5 tabs', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Check all tabs exist
    await expect(page.locator('button[role="tab"]:has-text("Profile")')).toBeVisible();
    await expect(page.locator('button[role="tab"]:has-text("Security")')).toBeVisible();
    await expect(page.locator('button[role="tab"]:has-text("Notifications")')).toBeVisible();
    await expect(page.locator('button[role="tab"]:has-text("Appearance")')).toBeVisible();
    await expect(page.locator('button[role="tab"]:has-text("Privacy")')).toBeVisible();
  });

  test('should update profile information', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Make sure we're on Profile tab
    await page.click('button[role="tab"]:has-text("Profile")');
    
    // Fill form
    await page.fill('input[id="firstName"]', 'John');
    await page.fill('input[id="lastName"]', 'Doe');
    
    // Save
    await page.click('button:has-text("Save Profile")');
    
    // Verify success message
    await expect(page.locator('text=Profile updated')).toBeVisible({ timeout: 5000 });
  });

  test('should change password', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Go to Security tab
    await page.click('button[role="tab"]:has-text("Security")');
    
    // Fill password form
    await page.fill('input[id="currentPassword"]', 'OldPassword123!');
    await page.fill('input[id="newPassword"]', 'NewPassword123!');
    await page.fill('input[id="confirmPassword"]', 'NewPassword123!');
    
    // Submit
    await page.click('button:has-text("Change Password")');
    
    // Should show feedback (success or error)
    const feedback = page.locator('[role="status"]');
    await expect(feedback).toBeVisible({ timeout: 5000 });
  });

  test('should toggle notification preferences', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Go to Notifications tab
    await page.click('button[role="tab"]:has-text("Notifications")');
    
    // Toggle some checkboxes
    const checkboxes = page.locator('input[type="checkbox"]');
    const count = await checkboxes.count();
    
    if (count > 0) {
      await checkboxes.first().click();
      
      // Save
      await page.click('button:has-text("Save Preferences")');
      
      // Verify
      await expect(page.locator('text=Preferences saved')).toBeVisible({ timeout: 5000 });
    }
  });

  test('should change theme', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Go to Appearance tab
    await page.click('button[role="tab"]:has-text("Appearance")');
    
    // Select dark theme
    await page.click('button:has-text("dark")');
    
    // Select accent color
    await page.click('button:has-text("purple")');
    
    // Save
    await page.click('button:has-text("Save Theme")');
    
    // Verify
    await expect(page.locator('text=Theme updated')).toBeVisible({ timeout: 5000 });
  });

  test('should navigate between tabs', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    const tabs = [
      'Profile',
      'Security',
      'Notifications',
      'Appearance',
      'Privacy'
    ];
    
    for (const tab of tabs) {
      await page.click(`button[role="tab"]:has-text("${tab}")`);
      // Verify tab content is visible
      await page.waitForTimeout(100);
      const tabPanel = page.locator(`[role="tabpanel"]:visible`);
      await expect(tabPanel).toBeVisible();
    }
  });

  test('should show 2FA setup option', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Go to Security tab
    await page.click('button[role="tab"]:has-text("Security")');
    
    // Check 2FA section exists
    await expect(page.locator('text=Two-Factor Authentication')).toBeVisible();
    await expect(page.locator('button:has-text("Enable 2FA")')).toBeVisible();
  });

  test('should update privacy settings', async ({ page }) => {
    await page.goto('http://localhost:5173/settings');
    
    // Go to Privacy tab
    await page.click('button[role="tab"]:has-text("Privacy")');
    
    // Toggle privacy options
    const privacyToggles = page.locator('input[type="checkbox"]');
    const count = await privacyToggles.count();
    
    if (count > 0) {
      await privacyToggles.first().click();
      
      // Save
      await page.click('button:has-text("Save Privacy Settings")');
      
      // Verify
      await expect(page.locator('[role="status"]')).toBeVisible({ timeout: 5000 });
    }
  });
});