import { test, expect } from './fixtures/auth';
import { CommonActions } from './utils/common-actions';

test('Simple modal test', async ({ authenticatedPage: page }) => {
  test.setTimeout(30000);
  const actions = new CommonActions(page);

  // Navigate to templates page
  await actions.navigateAndWait('/communication-templates/');
  
  // Wait for scripts
  await page.waitForFunction(() => typeof HVACTemplates !== 'undefined');

  // Try to show modal directly with JavaScript
  const modalResult = await page.evaluate(() => {
    // Force show modal
    const overlay = document.getElementById('template-form-overlay');
    if (overlay) {
      overlay.style.display = 'block';
      overlay.style.visibility = 'visible';
      overlay.style.opacity = '1';
      
      return {
        success: true,
        display: getComputedStyle(overlay).display,
        visibility: getComputedStyle(overlay).visibility
      };
    }
    return { success: false, error: 'Modal not found' };
  });

  console.log('Manual modal show result:', modalResult);

  // Take screenshot
  await actions.screenshot('modal-manually-shown');

  // Check if it's visible now
  const modalVisibility = await page.locator('#template-form-overlay').isVisible();
  console.log('Modal visible after manual show:', modalVisibility);

  // If it's visible, try to interact with it
  if (modalVisibility) {
    // Try to fill the title field
    const titleField = page.locator('#hvac_template_title');
    await expect(titleField).toBeVisible();
    await titleField.fill('Manual Test Template');
    
    console.log('Successfully interacted with modal form');
    await actions.screenshot('modal-form-filled');
  }
});