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

test.describe.configure({ mode: 'serial' });

test.describe('Public Observation Form (Landing Page)', () => {
  test('observation form loads from landing page', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');

    await page.waitForSelector('#observationForm', { timeout: 15000 });
    await expect(page.locator('#observationForm')).toBeVisible();
    await expect(page.locator('textarea[name="description"]')).toBeVisible();
    await expect(page.locator('#obsSubmitBtn')).toContainText('Submit Observation');
  });

  test('observation form has category selector', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');
    await page.waitForSelector('#observationForm', { timeout: 15000 });

    await expect(page.locator('select[name="category"]')).toBeVisible();
    await expect(page.locator('textarea[name="description"]')).toBeVisible();
    await expect(page.locator('input[name="title"]')).toBeVisible();
  });

  test('severity is not visible to users', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');
    await page.waitForSelector('#observationForm', { timeout: 15000 });

    await expect(page.locator('.severity-option')).toHaveCount(0);
    await expect(page.locator('#severityInput')).toHaveCount(0);
  });

  test('observation form submits without severity field', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');
    await page.waitForSelector('#observationForm', { timeout: 15000 });

    await expect(page.locator('.severity-option')).toHaveCount(0);
    await expect(page.locator('#severityInput')).toHaveCount(0);
  });

  test('observation form fills correctly', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');
    await page.waitForSelector('#observationForm', { timeout: 15000 });

    await page.fill('input[name="title"]', 'Test Observation Title');
    await page.fill('textarea[name="description"]', 'This is a detailed test observation for E2E testing. The waiting area was overcrowded.');
    await page.fill('input[name="location_text"]', 'Emergency Department - Waiting Area');
    await page.fill('input[name="reporter_name"]', 'Test Reporter');
    await page.fill('input[name="reporter_phone"]', '+966501112233');
    await page.fill('input[name="reporter_email"]', 'reporter@example.com');

    await expect(page.locator('input[name="title"]')).toHaveValue('Test Observation Title');
    await expect(page.locator('textarea[name="description"]')).toHaveValue(
      'This is a detailed test observation for E2E testing. The waiting area was overcrowded.'
    );
    await expect(page.locator('input[name="location_text"]')).toHaveValue('Emergency Department - Waiting Area');
    await expect(page.locator('input[name="reporter_name"]')).toHaveValue('Test Reporter');
    await expect(page.locator('input[name="reporter_phone"]')).toHaveValue('+966501112233');
    await expect(page.locator('input[name="reporter_email"]')).toHaveValue('reporter@example.com');
  });

  test('back button returns to selection from observation form', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('observation');
    await page.waitForSelector('#observationForm', { timeout: 15000 });

    await page.click('button:has-text("Back to Selection")');

    await page.waitForSelector('.selection-card', { timeout: 10000 });
    await expect(page.locator('.selection-card')).toHaveCount(3);
  });
});

test.describe('Public Observation Tracking', () => {
  test('tracking page loads correctly', async ({ page }) => {
    await page.goto('/observations/track/');
    await page.waitForSelector('input[name="tracking_code"]');

    await expect(page.locator('input[name="tracking_code"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toContainText('Track');
  });

  test('tracking with invalid code shows not found', async ({ page }) => {
    await page.goto('/observations/track/');
    await page.fill('input[name="tracking_code"]', 'INVALID-CODE-999');
    await page.click('button[type="submit"]');
    await page.waitForLoadState('networkidle');

    const hasInfo = await page.locator('.bg-green-50, .bg-amber-50').count().then(c => c > 0);
    expect(hasInfo).toBeTruthy();
  });
});

test.describe('Direct Observation Submit Page', () => {
  test('direct URL loads the form', async ({ page }) => {
    await page.goto('/observations/new/');
    await page.waitForSelector('textarea[name="description"]');

    await expect(page.locator('textarea[name="description"]')).toBeVisible();
    await expect(page.locator('.severity-option')).toHaveCount(0);
    await expect(page.locator('button[type="submit"]')).toContainText('Submit Observation');
  });
});