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

test.describe('Blocks Page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/blocks');
  });

  test('displays blocks list with pagination', async ({ page }) => {
    // Check page title
    await expect(page.getByRole('heading', { name: 'Blocks' })).toBeVisible();

    // Check blocks count is shown
    await expect(page.getByText(/total blocks/i)).toBeVisible();

    // Check block table/list has entries
    const blockLinks = page.locator('a[href^="/block/"]');
    await expect(blockLinks.first()).toBeVisible();
  });

  test('view mode toggle works', async ({ page }) => {
    // Find the view toggle buttons
    const pagesButton = page.getByRole('button', { name: /pages/i });
    const scrollButton = page.getByRole('button', { name: /scroll/i });

    // Both should be visible
    await expect(pagesButton).toBeVisible();
    await expect(scrollButton).toBeVisible();

    // Switch to scroll view
    await scrollButton.click();

    // Switch back to paginated view
    await pagesButton.click();
  });

  test('pagination navigation works', async ({ page }) => {
    // Find pagination controls
    const nextButton = page.getByRole('button', { name: /next page/i });
    const prevButton = page.getByRole('button', { name: /previous page/i });

    // Previous should be disabled on first page
    await expect(prevButton).toBeDisabled();

    // Click next if available
    if (await nextButton.isEnabled()) {
      await nextButton.click();
      // Previous should now be enabled
      await expect(prevButton).toBeEnabled();
    }
  });

  test('clicking a block navigates to block detail', async ({ page }) => {
    // Click first block link
    const firstBlock = page.locator('a[href^="/block/"]').first();
    await firstBlock.click();

    // Should be on block detail page
    await expect(page).toHaveURL(/\/block\//);
    await expect(page.getByRole('heading', { name: /block details/i })).toBeVisible();
  });
});