import { z } from 'zod';
import { test, expect } from '../fixtures';
import { DEFAULT_ADMIN_BASE_URL } from '../env-defaults';

const TokenResponse = z.object({
  access_token: z.string().min(1),
  refresh_token: z.string().min(1),
});

/**
 * Admin sidebar primary nav must be visible after Chabad chrome (CSS-var
 * opacity modifiers made inactive links transparent — #104).
 */
test.describe('admin sidebar nav @smoke', () => {
  const adminBaseUrl = process.env.PLAYKIT_ADMIN_BASE_URL || DEFAULT_ADMIN_BASE_URL;

  test('primary workflow links are visible in the sidebar', async ({ page, api }) => {
    const username = process.env.E2E_API_USERNAME || '';
    const password = process.env.E2E_API_PASSWORD || '';
    test.skip(!username || !password, 'E2E_API_USERNAME/PASSWORD required for admin UI');

    const tokens = await api.post<z.infer<typeof TokenResponse>>('/api/v1/auth/login', {
      body: { username, password },
      expectedStatus: 200,
      schema: TokenResponse,
    });

    await page.goto(`${adminBaseUrl}/login`);
    await page.evaluate(
      ({ access, refresh }) => {
        localStorage.setItem('access_token', access);
        localStorage.setItem('refresh_token', refresh);
      },
      {
        access: tokens.data.access_token,
        refresh: tokens.data.refresh_token,
      },
    );
    await page.goto(`${adminBaseUrl}/`);
    await expect(page.getByRole('button', { name: /Log\s*out/i })).toBeVisible({
      timeout: 30_000,
    });

    const nav = page.getByRole('navigation', { name: 'Primary' });
    await expect(nav).toBeVisible();

    for (const label of ['Scan', 'Process', 'Search photos', 'People', 'Tag photos']) {
      const link = nav.getByRole('link', { name: label, exact: true });
      await expect(link, `sidebar missing visible link: ${label}`).toBeVisible();
      // Guard against transparent text (CSS-var + /opacity bug)
      await expect(link).toHaveCSS('opacity', '1');
      const color = await link.evaluate((el) => getComputedStyle(el).color);
      expect(color, `${label} must not be transparent`).not.toBe('rgba(0, 0, 0, 0)');
      expect(color).not.toMatch(/rgba?\(\s*0,\s*0,\s*0,\s*0\s*\)/);
    }

    await expect(nav.getByRole('button', { name: /Maintenance/i })).toBeVisible();
    await expect(nav.getByRole('link', { name: 'Help', exact: true })).toBeVisible();
  });
});