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

test.describe('Responsive Design', () => {
  test('homepage renders on mobile viewport', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/');

    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
    const main = page.locator('main');
    await expect(main).toBeVisible();
  });

  test('homepage renders on tablet viewport', async ({ page }) => {
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.goto('/');

    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  });

  test('login page is usable on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/login');

    await expect(page.getByRole('heading', { name: 'Đăng nhập' })).toBeVisible();
    await expect(page.getByLabel('Số điện thoại')).toBeVisible();
    await expect(page.getByLabel('Mật khẩu')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Đăng nhập' })).toBeVisible();
  });

  test('register page is usable on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/register');

    await expect(page.getByRole('heading', { name: 'Tạo tài khoản' })).toBeVisible();
    await expect(page.getByLabel('Họ và tên')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Đăng ký' })).toBeVisible();
  });

  test('search page shows mobile filter button on small screen', async ({ page }) => {
    await page.route('**/listings**', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
      }),
    );

    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/search');

    await expect(page.getByRole('heading', { name: 'Tìm kiếm bất động sản' })).toBeVisible();
    // Mobile filter button should be visible
    await expect(page.getByRole('button', { name: /Bộ lọc/i })).toBeVisible();
  });

  test('search page hides sidebar filters on mobile', async ({ page }) => {
    await page.route('**/listings**', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
      }),
    );

    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/search');

    // Sidebar should be hidden on mobile (has 'hidden lg:block' class)
    const sidebar = page.locator('aside');
    await expect(sidebar).toBeHidden();
  });

  test('split view button is hidden on mobile search', async ({ page }) => {
    await page.route('**/listings**', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
      }),
    );

    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/search');

    // Split button should be hidden on mobile (has 'hidden lg:flex' class)
    await expect(page.getByRole('button', { name: /Chia đôi/i })).toBeHidden();
  });
});