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

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

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

    await page.waitForSelector('#inquiryForm', { timeout: 15000 });
    await expect(page.locator('#inquiryForm')).toBeVisible();
    await expect(page.locator('input[name="name"]')).toBeVisible();
    await expect(page.locator('input[name="email"]')).toBeVisible();
    await expect(page.locator('input[name="phone"]')).toBeVisible();
    await expect(page.locator('input[name="subject"]')).toBeVisible();
    await expect(page.locator('textarea[name="message"]')).toBeVisible();
    await expect(page.locator('#inqSubmitBtn')).toBeVisible();
  });

  test('inquiry form has required field validation', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('inquiry');
    await page.waitForSelector('#inquiryForm', { timeout: 15000 });

    await page.click('#inqSubmitBtn');
    await page.waitForLoadState('networkidle');

    const nameInvalid = await page.locator('input[name="name"]:invalid').count();
    const emailInvalid = await page.locator('input[name="email"]:invalid').count();

    expect(nameInvalid + emailInvalid).toBeGreaterThan(0);
  });

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

    await page.fill('input[name="name"]', 'Test Inquirer');
    await page.fill('input[name="email"]', 'inquirer@example.com');
    await page.fill('input[name="phone"]', '+966509876543');
    await page.selectOption('select[name="category"]', 'general');
    await page.fill('input[name="subject"]', 'Test Inquiry Subject');
    await page.fill('textarea[name="message"]', 'This is a test inquiry for E2E testing. I would like to know about visiting hours.');

    await expect(page.locator('input[name="name"]')).toHaveValue('Test Inquirer');
    await expect(page.locator('input[name="email"]')).toHaveValue('inquirer@example.com');
    await expect(page.locator('input[name="phone"]')).toHaveValue('+966509876543');
    await expect(page.locator('input[name="subject"]')).toHaveValue('Test Inquiry Subject');
    await expect(page.locator('textarea[name="message"]')).toHaveValue(
      'This is a test inquiry for E2E testing. I would like to know about visiting hours.'
    );
  });

  test('inquiry category has expected options', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('inquiry');
    await page.waitForSelector('#inquiryForm', { timeout: 15000 });

    const options = page.locator('select[name="category"] option');
    const count = await options.count();
    expect(count).toBeGreaterThanOrEqual(6);

    const values = [];
    for (let i = 0; i < count; i++) {
      values.push(await options.nth(i).getAttribute('value'));
    }
    expect(values).toContain('general');
    expect(values).toContain('services');
    expect(values).toContain('appointments');
    expect(values).toContain('billing');
    expect(values).toContain('medical');
    expect(values).toContain('other');
  });

  test('back button returns to selection from inquiry form', async ({ page }) => {
    const helper = new PublicFormHelper(page);
    await helper.goToPublicLanding();
    await helper.selectFormType('inquiry');
    await page.waitForSelector('#inquiryForm', { 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);
  });
});