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

async function waitForBlazorConnection(page: Parameters<typeof test>[0]['page']) {
  await page.waitForTimeout(750);
}

test.describe('sidebar collapse', () => {
  test('starts collapsed and expands through the toggle button', async ({ page }) => {
    await page.setViewportSize({ width: 1440, height: 960 });
    await page.goto('/', { waitUntil: 'networkidle' });
    await waitForBlazorConnection(page);

    const sidebar = page.getByTestId('sidebar-shell');
    const toggle = page.getByRole('button', { name: 'Toggle sidebar' });

    await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
    await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();

    await toggle.click();
    await page.waitForTimeout(500);

    await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
    await expect(page.getByText('Dashboard')).toBeVisible();

    await toggle.click();
    await page.waitForTimeout(500);

    await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
  });

  test('renders sidebar styles and toggles on narrow layouts', async ({ page }) => {
    await page.setViewportSize({ width: 500, height: 900 });
    await page.goto('/', { waitUntil: 'networkidle' });
    await waitForBlazorConnection(page);

    const sidebar = page.getByTestId('sidebar-shell');
    const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
    const navScrollable = page.locator('.nav-scrollable');
    const sidebarPanel = page.locator('.sidebar');
    const toggleBar = page.locator('.sidebar-toggle-bar').first();

    await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
    await expect(navScrollable).toBeHidden();

    await expect(sidebarPanel).toHaveCSS('background-image', /linear-gradient/);
    await expect(toggleBar).toHaveCSS('background-color', 'rgb(255, 255, 255)');

    await toggle.click();
    await page.waitForTimeout(500);

    await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
    await expect(navScrollable).toBeVisible();
  });
});

test('home loads without a login screen', async ({ page }) => {
  await page.goto('/');

  await expect(page).toHaveURL(/\/$/);
  await expect(page.getByRole('heading', { name: 'WorkTracker' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Login' })).toHaveCount(0);
});

test('protected pages are directly available without redirecting to login', async ({ page }) => {
  const pages = [
    { path: '/grid', heading: 'Grid View' },
    { path: '/calendar', heading: 'Calendar' },
    { path: '/summary', heading: 'Monthly Summary' },
    { path: '/settings', heading: 'Settings' },
    { path: '/work-unit', heading: 'Work Unit' },
    { path: '/auth', heading: 'You are authenticated' }
  ];

  for (const target of pages) {
    await page.goto(target.path);
    await expect(page).not.toHaveURL(/\/login/i);
    await expect(page.getByRole('heading', { name: target.heading })).toBeVisible();
  }
});

test('login route redirects away when built-in authentication is disabled', async ({ page }) => {
  await page.goto('/login');

  await expect(page).toHaveURL(/\/$/);
  await expect(page.getByRole('heading', { name: 'WorkTracker' })).toBeVisible();
});