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

test.describe('Settings — Sections', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/settings');
    await page.waitForLoadState('networkidle');
    await expect(page.getByText('Settings').first()).toBeVisible({ timeout: 30_000 });
  });

  test('appearance section shows theme toggle', async ({ page }) => {
    await expect(page.getByText('Appearance')).toBeVisible();
    await expect(page.getByText(/theme/i).first()).toBeVisible();
    await expect(page.getByRole('button', { name: /switch to/i })).toBeVisible();
  });

  test('appearance section shows compact mode toggle', async ({ page }) => {
    await expect(page.getByText('Compact Mode')).toBeVisible();
  });

  test('notifications section shows permission status', async ({ page }) => {
    await expect(page.getByText('Notifications')).toBeVisible();
    await expect(page.getByText('Browser Notifications')).toBeVisible();
    await expect(page.getByText(/status:/i)).toBeVisible();
  });

  test('sound preview section shows urgency levels', async ({ page }) => {
    await expect(page.getByText('Sound Preview')).toBeVisible();
    await expect(page.getByText(/critical|important|standard|gentle|passive/i).first()).toBeVisible();
    // Should have Preview buttons for each urgency
    const previewButtons = page.getByRole('button', { name: 'Preview' });
    expect(await previewButtons.count()).toBeGreaterThanOrEqual(3);
  });

  test('data section shows clear history option', async ({ page }) => {
    await expect(page.getByText('Data')).toBeVisible();
    await expect(page.getByText('Clear Completed Timers')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Clear' })).toBeVisible();
  });

  test('about section shows version', async ({ page }) => {
    await expect(page.getByText(/chronomind v/i)).toBeVisible();
  });
});