import { test, expect } from '@playwright/test';
import { adminPath, ensureDataSource, cleanupByNames } from './helpers.mjs';

test('mailshots editor: datasource-driven options + overlay editors + create', async ({ page, request }) => {
  const uniq = `${Date.now()}_${Math.floor(Math.random() * 100000)}`;
  const dsName = `e2e_ms_ds_${uniq}`;
  const purpose = `e2e_mailshot_${uniq}`;

  try {
    await ensureDataSource(request, dsName, 'contacts');

    await page.goto(adminPath('feca-mailshots-mailshots'));
    await expect(page.locator('h1', { hasText: 'Mailshots' })).toBeVisible();

    await page.locator('#ms-open-new').click();
    await expect(page.locator('#ms-editor-modal')).toBeVisible();

    await page.locator('#ms_purpose').fill(purpose);
    await page.locator('#ms_ds').selectOption({ label: dsName });

    await expect.poll(async () => await page.locator('#ms-token-controls button, #ms-token-controls select option').count()).toBeGreaterThan(0);
    await expect.poll(async () => await page.locator('#ms_pdfname option').count()).toBeGreaterThan(1);
    await expect.poll(async () => await page.locator('#ms_email_field option').count()).toBeGreaterThan(1);

    await page.locator('#ms_subject').fill('Subject {{ contacts.id }}');

    await page.locator('#ms-edit-message').click();
    await expect(page.locator('#ms-template-modal')).toBeVisible();
    await page.evaluate(() => {
      const html = '<style>.red-note{color:red;}</style><div class="red-note">Hello <strong>bold</strong> {{ contacts.id }}</div>';
      const ed = window.tinymce && window.tinymce.get ? window.tinymce.get('ms-template-html') : null;
      const raw = /** @type {HTMLTextAreaElement|null} */ (document.getElementById('ms-template-html'));
      if (ed) {
        ed.setContent(html);
        ed.save();
      } else if (raw) {
        raw.value = html;
      }
    });
    await page.locator('#ms-template-mode-code').click();
    await expect(page.locator('#ms-template-code')).toHaveValue(/<style[^>]*>[\s\S]*\.red-note\s*\{[^}]*color:\s*red;?[^}]*\}[\s\S]*<\/style>/i);
    await expect(page.locator('#ms-template-code')).toHaveValue(/class=["']red-note["']/i);
    await expect(page.locator('#ms-template-code')).toHaveValue(/<strong>bold<\/strong>/);
    await page.locator('#ms-template-mode-visual').click();
    await page.locator('#ms-template-mode-code').click();
    await expect(page.locator('#ms-template-code')).toHaveValue(/class=["']red-note["']/i);
    await expect(page.locator('#ms-template-code')).not.toHaveValue(/data-mce-type=["']bookmark["']/i);
    await expect(page.locator('#ms-template-code')).not.toHaveValue(/mce_SELRES_(?:start|end)/i);
    await expect(page.locator('#ms-template-code')).not.toHaveValue(/<style[^>]*>[\s\S]*<span[\s\S]*<\/style>/i);
    const formattedSource = `<style>
.red-note { color: red; }
</style>

<div class="red-note">
  hello
</div>`;
    await page.locator('#ms-template-code').fill(formattedSource);
    await page.locator('#ms-template-mode-visual').click();
    await page.locator('#ms-template-mode-code').click();
    await expect(page.locator('#ms-template-code')).toHaveValue(/<style>\s*\n\s*\.red-note\s*\{\s*color:\s*red;\s*\}\s*\n<\/style>/i);
    await expect(page.locator('#ms-template-code')).toHaveValue(/\n\s*\n<div class="red-note">/i);
    await expect(page.locator('#ms-template-code')).toHaveValue(/\n\s+hello\s*\n<\/div>/i);
    await page.locator('#ms-template-save').click();
    await expect(page.locator('#ms_message')).toContainText('.red-note{color:red;}');
    await expect(page.locator('#ms_message')).toContainText('class="red-note"');
    await expect(page.locator('#ms_message')).toContainText('<strong>bold</strong>');

    await page.locator('#ms-edit-pdf').click();
    await expect(page.locator('#ms-template-modal')).toBeVisible();
    await page.locator('#ms-template-mode-code').click();
    await page.locator('#ms-template-code').fill('<p>PDF {{ contacts.id }}</p>');
    await page.locator('#ms-template-save').click();

    await page.locator('#ms_email_field').evaluate((el) => {
      const select = /** @type {HTMLSelectElement} */ (el);
      const option = Array.from(select.options).find((o) => o.value && /email/i.test(o.value)) || Array.from(select.options).find((o) => o.value);
      if (option) {
        select.value = option.value;
        select.dispatchEvent(new Event('change', { bubbles: true }));
      }
    });

    await page.getByRole('button', { name: 'Save' }).first().click();
    await expect(page.getByRole('cell', { name: purpose })).toBeVisible();
  } finally {
    try {
      await cleanupByNames(request, { dataSourceNames: [dsName], mailshotPurposes: [purpose] });
    } catch {
      // best effort
    }
  }
});