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

test.describe('Filters', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/app');
  });

  test('should filter by date using calendar', async ({ page }) => {
    // Find date picker
    const datePicker = page.getByRole('button', { name: /date|calendar/i }).or(
      page.locator('input[type="date"]')
    ).first();
    
    if (await datePicker.isVisible()) {
      await datePicker.click();
      
      // Select a date (e.g., today)
      const today = new Date();
      const dateButton = page.getByRole('button', { name: new RegExp(today.getDate().toString()) }).first();
      
      if (await dateButton.isVisible()) {
        await dateButton.click();
        
        // Verify filter is applied in URL
        await expect(page).toHaveURL(/.*filter.*displayTime.*/, { timeout: 5000 });
        
        // Verify memos are filtered (wait for list to update)
        await page.waitForTimeout(1000);
      }
    }
  });

  test('should filter by tag', async ({ page }) => {
    await page.waitForSelector('[data-testid="memo-card"]', { timeout: 10000 }).catch(() => {});
    
    // Find a tag
    const tag = page.locator('[data-testid="tag"]').or(page.getByText(/^#\w+$/)).first();
    if (await tag.isVisible()) {
      const tagText = await tag.textContent();
      await tag.click();
      
      // Verify URL contains tag filter
      await expect(page).toHaveURL(/.*tag.*/, { timeout: 5000 });
      
      // Verify filtered results
      if (tagText) {
        // All visible memos should have this tag
        const memos = page.locator('[data-testid="memo-card"]').or(page.locator('article'));
        const count = await memos.count();
        
        if (count > 0) {
          // Check first few memos have the tag
          for (let i = 0; i < Math.min(3, count); i++) {
            const memo = memos.nth(i);
            await expect(memo.getByText(tagText)).toBeVisible({ timeout: 2000 }).catch(() => {});
          }
        }
      }
    }
  });

  test('should clear filter', async ({ page }) => {
    // Apply a filter first
    const tag = page.locator('[data-testid="tag"]').or(page.getByText(/^#\w+$/)).first();
    if (await tag.isVisible()) {
      await tag.click();
      await page.waitForURL(/.*tag.*/, { timeout: 5000 });
      
      // Find clear filter button
      const clearButton = page.getByRole('button', { name: /clear|reset|remove/i }).or(
        page.locator('button').filter({ hasText: /clear|×/i })
      ).first();
      
      if (await clearButton.isVisible()) {
        await clearButton.click();
        
        // Verify filter is removed from URL
        await expect(page).not.toHaveURL(/.*tag.*/, { timeout: 5000 });
      }
    }
  });

  test('should persist filter on page refresh', async ({ page }) => {
    // Apply filter
    const tag = page.locator('[data-testid="tag"]').or(page.getByText(/^#\w+$/)).first();
    if (await tag.isVisible()) {
      const tagText = await tag.textContent();
      await tag.click();
      await page.waitForURL(/.*tag.*/, { timeout: 5000 });
      
      // Refresh page
      await page.reload();
      
      // Verify filter is still applied
      await expect(page).toHaveURL(/.*tag.*/, { timeout: 5000 });
      
      // Verify filtered results are still shown
      if (tagText) {
        await expect(page.getByText(tagText)).toBeVisible({ timeout: 5000 });
      }
    }
  });
});

