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

test.describe('Conflict Resolution Framework - Basic Functionality', () => {
  test('Form loads and basic elements are present', async ({ page }) => {
    await page.goto('/templates/conflict-resolution-framework')
    
    // Check that the main heading is visible
    await expect(page.locator('h1:has-text("CONFLICT RESOLUTION FRAMEWORK")')).toBeVisible()
    
    // Check for organization name input
    await expect(page.locator('input[placeholder*="organization name"]')).toBeVisible()
    
    // Check for validation button
    await expect(page.locator('button:has-text("CHECK")')).toBeVisible()
    
    // Check for markdown export button (there are multiple, so get first)
    await expect(page.locator('button:has-text("MARKDOWN")').first()).toBeVisible()
    
    // Try filling organization name
    await page.fill('input[placeholder*="organization name"]', 'Test Organization')
    await expect(page.locator('input[placeholder*="organization name"]')).toHaveValue('Test Organization')
  })
  
  test('Organization type dropdown is functional', async ({ page }) => {
    await page.goto('/templates/conflict-resolution-framework')
    
    // Find and click the organization type selector
    const orgTypeSelector = page.locator('select, [role="combobox"], [aria-label*="organization type"], input[placeholder*="organization type"]').first()
    
    // If it's a select element
    if (await page.locator('select').count() > 0) {
      const selectElement = page.locator('select').first()
      if (await selectElement.isVisible()) {
        await selectElement.selectOption('Worker Cooperative')
      }
    }
    
    // If it's a USelect component (button-based dropdown)
    const dropdownButton = page.locator('button:has-text("Select organization type"), button[aria-haspopup="listbox"]').first()
    if (await dropdownButton.isVisible()) {
      await dropdownButton.click()
      await page.locator('text=Worker Cooperative').click()
    }
  })

  test('Form validation works', async ({ page }) => {
    await page.goto('/templates/conflict-resolution-framework')
    
    // Try validation with empty form
    await page.locator('button:has-text("CHECK")').click()
    
    // Should show validation errors or messages
    await page.waitForTimeout(1000) // Give time for validation to complete
    
    // Check if there's any validation message or error state
    const hasValidationMessage = await page.locator(':has-text("required"), :has-text("complete"), :has-text("error"), .error').count() > 0
    
    if (hasValidationMessage) {
      console.log('Validation system is working - found validation messages')
    }
  })

  test('Markdown export button attempts download', async ({ page }) => {
    await page.goto('/templates/conflict-resolution-framework')
    
    // Fill minimal required data
    await page.fill('input[placeholder*="organization name"]', 'Test Org')
    
    // Try to trigger markdown export
    const downloadPromise = page.waitForEvent('download', { timeout: 5000 }).catch(() => null)
    await page.locator('button:has-text("MARKDOWN")').first().click()
    
    const download = await downloadPromise
    if (download) {
      console.log('Markdown download triggered successfully')
      expect(download).toBeTruthy()
    } else {
      console.log('Markdown button clicked (download may require form completion)')
    }
  })
})