const { test, expect } = require('@playwright/test');
const { waitForEditor, addBlockById, clearCanvas } = require('./helpers');

test.describe('Anchor Point Visibility', () => {
    test.beforeEach(async ({ page }) => {
        await waitForEditor(page);
    });

    test('should show anchors in editor mode', async ({ page }) => {
        // Add an anchor point via the API
        const result = await addBlockById(page, 'anchor-point');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Check that anchor is visible in editor canvas
        const canvas = page.frameLocator('#gjs iframe').first();
        const anchor = canvas.locator('[data-anchor="true"]').first();
        await expect(anchor).toBeVisible({ timeout: 5000 });

        // Verify it has the editor-anchor class
        const anchorClass = await anchor.getAttribute('class');
        expect(anchorClass).toContain('editor-anchor');

        // Verify it has visual styling (border exists via computed style)
        const borderStyle = await anchor.evaluate(el => window.getComputedStyle(el).borderStyle);
        expect(borderStyle).toBeTruthy();
    });

    test('should hide anchors in preview mode', async ({ page, context }) => {
        // Add an anchor point via API
        const result = await addBlockById(page, 'anchor-point');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Wait for auto-save to persist changes
        await page.waitForTimeout(2000);

        // Open preview in new page
        const [previewPage] = await Promise.all([
            context.waitForEvent('page'),
            page.locator('#btn-preview').click()
        ]);

        await previewPage.waitForLoadState('domcontentloaded');
        await previewPage.waitForTimeout(1000);

        // Check that anchor exists in DOM but is hidden
        const anchor = previewPage.locator('[data-anchor="true"]').first();
        if (await anchor.count() > 0) {
            await expect(anchor).toBeHidden();
        }
        // If anchor was stripped entirely, that's also valid
    });

    test('should remove anchors from exported HTML', async ({ page }) => {
        // Add an anchor point via API
        const result = await addBlockById(page, 'anchor-point');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Verify the export process strips anchors
        const exportedHtml = await page.evaluate(() => {
            const editor = window.editor;
            let html = editor.getHtml();
            // The export process strips anchors via regex (same as generatePageHtml)
            html = html.replace(/<div[^>]*data-anchor="true"[^>]*>[\s\S]*?<\/div>/g, '');
            html = html.replace(/<div[^>]*class="editor-anchor"[^>]*>[\s\S]*?<\/div>/g, '');
            return html;
        });

        // Verify no anchor elements remain in cleaned HTML
        expect(exportedHtml).not.toMatch(/data-anchor="true"/);
        expect(exportedHtml).not.toMatch(/class="editor-anchor"/);
    });

    test('anchor should have visual indicator with ID in editor', async ({ page }) => {
        // Add an anchor point via API
        const result = await addBlockById(page, 'anchor-point');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Select the anchor
        const canvas = page.frameLocator('#gjs iframe').first();
        const anchor = canvas.locator('[data-anchor="true"]').first();
        await expect(anchor).toBeVisible({ timeout: 5000 });
        await anchor.click();

        // Verify the anchor has the icon span (not ::before pseudo-element)
        const anchorIcon = canvas.locator('[data-anchor="true"] .anchor-icon').first();
        await expect(anchorIcon).toBeVisible();

        // Verify anchor has an input for the name
        const anchorInput = canvas.locator('[data-anchor="true"] .anchor-name-input').first();
        await expect(anchorInput).toBeVisible();
    });
});