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

const mockTasks = { code: 200, data: { records: [] } };
const mockFeed = { code: 200, data: [] };

test.describe('Header navigation', () => {
  test('shows brand title on login page', async ({ page }) => {
    await page.goto('/login');
    await expect(page.locator('.login-page')).toBeVisible({ timeout: 10_000 });
    await expect(page.locator('.login-panel h1')).toBeVisible();
  });

  test('shows logout button on authenticated pages', async ({ page }) => {
    await page.route('**/api/review/feed**', (route) =>
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
    );
    await page.goto('/login');
    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
    await page.goto('/welcome');
    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
    await expect(page.locator('.head .logout-btn')).toBeVisible();
  });

  test('logout clears auth and redirects to /login', async ({ page }) => {
    await page.route('**/api/review/feed**', (route) =>
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
    );
    await page.goto('/login');
    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
    await page.goto('/welcome');
    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
    await page.locator('.head .logout-btn').click();
    await expect(page).toHaveURL(/\/login/, { timeout: 5000 });
    const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
    expect(isLoggedIn).toBeNull();
  });

  test('back button shows on sub-pages and navigates to /welcome', async ({ page }) => {
    await page.route('**/api/tasks**', (route) => {
      if (route.request().url().includes('/src/')) return route.continue();
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) });
    });
    await page.route('**/api/review/feed**', (route) =>
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
    );
    await page.goto('/login');
    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
    await page.goto('/study');
    await page.waitForSelector('.study-page', { timeout: 10_000 });
    await expect(page.locator('.head .back-btn')).toBeVisible();
    await page.locator('.head .back-btn').click();
    await expect(page).toHaveURL(/\/welcome/);
  });

  test('no back button on welcome page', async ({ page }) => {
    await page.route('**/api/review/feed**', (route) =>
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
    );
    await page.goto('/login');
    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
    await page.goto('/welcome');
    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
    await expect(page.locator('.head .back-btn')).not.toBeVisible();
  });
});