#!/usr/bin/env node
/**
 * Context Overflow UI Tests
 *
 * Tests for the context overflow analytics page and related functionality.
 *
 * Run: node test_context_overflow_ci.js
 */

const { setupTest, teardownTest, TestResults, log, delay } = require('./test_lib');

// ============================================================================
// Context Overflow Page Tests
// ============================================================================
const ContextOverflowTests = {
    async contextOverflowPageLoads(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(() => {
            return {
                hasContent: !!document.querySelector('.context-overflow, .overflow-container, #context-overflow, .analytics'),
                hasHeader: !!document.querySelector('h1, .page-title'),
                headerText: document.querySelector('h1, .page-title')?.textContent?.trim(),
                hasData: document.body.textContent?.toLowerCase().includes('overflow') ||
                         document.body.textContent?.toLowerCase().includes('truncat'),
                is404: document.body.textContent?.includes('404') || document.body.textContent?.includes('Not Found')
            };
        });

        if (result.is404) {
            return { passed: null, skipped: true, message: 'Context overflow page not found (feature may not be enabled)' };
        }

        const passed = result.hasContent || result.hasHeader || result.hasData;
        return {
            passed,
            message: passed
                ? `Context overflow page loaded (header: "${result.headerText}")`
                : 'Context overflow page failed to load'
        };
    },

    async truncationRateDisplay(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(() => {
            const rateElement = document.querySelector(
                '[class*="truncation-rate"], ' +
                '[id*="truncation-rate"], ' +
                '.rate-display, ' +
                '.overflow-rate'
            );

            // Look for percentage pattern
            const percentPattern = /(\d+\.?\d*)\s*%/;
            const bodyText = document.body.textContent || '';
            const percentMatch = bodyText.match(percentPattern);

            // Look for rate-related text
            const hasRateText = bodyText.toLowerCase().includes('truncation rate') ||
                                bodyText.toLowerCase().includes('overflow rate');

            return {
                hasRateElement: !!rateElement,
                rateText: rateElement?.textContent?.trim(),
                hasPercentage: !!percentMatch,
                percentValue: percentMatch ? percentMatch[1] : null,
                hasRateText
            };
        });

        if (!result.hasRateElement && !result.hasPercentage && !result.hasRateText) {
            return { passed: null, skipped: true, message: 'No truncation rate display found' };
        }

        return {
            passed: true,
            message: result.hasRateElement
                ? `Truncation rate displayed: "${result.rateText}"`
                : `Truncation rate: ${result.percentValue}%`
        };
    },

    async averageTruncatedTokens(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(() => {
            const avgElement = document.querySelector(
                '[class*="average-tokens"], ' +
                '[class*="avg-truncated"], ' +
                '.token-average'
            );

            // Look for token count patterns
            const tokenPattern = /(\d+[\d,]*)\s*(tokens?|truncated)/i;
            const bodyText = document.body.textContent || '';
            const tokenMatch = bodyText.match(tokenPattern);

            const hasAvgText = bodyText.toLowerCase().includes('average') &&
                               bodyText.toLowerCase().includes('token');

            return {
                hasAvgElement: !!avgElement,
                avgText: avgElement?.textContent?.trim(),
                hasTokenMatch: !!tokenMatch,
                tokenValue: tokenMatch ? tokenMatch[1] : null,
                hasAvgText
            };
        });

        if (!result.hasAvgElement && !result.hasTokenMatch && !result.hasAvgText) {
            return { passed: null, skipped: true, message: 'No average truncated tokens display found' };
        }

        return {
            passed: true,
            message: result.hasAvgElement
                ? `Average tokens: "${result.avgText}"`
                : (result.tokenValue ? `Token count found: ${result.tokenValue}` : 'Average token info found')
        };
    },

    async contextOverflowChart(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });
        await delay(1000); // Wait for charts to render

        const result = await page.evaluate(() => {
            const charts = document.querySelectorAll('canvas, svg, .chart, .recharts-wrapper, [class*="chart"]');
            const overflowChart = document.querySelector('[class*="overflow-chart"], [id*="overflow-chart"]');

            return {
                hasCharts: charts.length > 0,
                chartCount: charts.length,
                hasOverflowChart: !!overflowChart,
                chartTypes: Array.from(charts).map(c => c.tagName.toLowerCase()).slice(0, 5)
            };
        });

        if (!result.hasCharts) {
            return { passed: null, skipped: true, message: 'No charts found on context overflow page' };
        }

        return {
            passed: true,
            message: `Found ${result.chartCount} charts (types: ${result.chartTypes.join(', ')})`
        };
    },

    async periodFilterWorks(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(() => {
            const periodFilter = document.querySelector(
                'select[name*="period"], ' +
                '#period-filter, ' +
                '.period-filter, ' +
                'select[id*="period"]'
            );

            if (periodFilter) {
                const options = Array.from(periodFilter.options);
                return {
                    exists: true,
                    type: 'select',
                    optionCount: options.length,
                    options: options.map(o => o.text).slice(0, 6)
                };
            }

            // Check for button-based filter
            const buttons = document.querySelectorAll('.period-btn, .time-filter button, [data-period]');
            if (buttons.length > 0) {
                return {
                    exists: true,
                    type: 'buttons',
                    buttonCount: buttons.length,
                    options: Array.from(buttons).map(b => b.textContent?.trim()).slice(0, 6)
                };
            }

            return { exists: false };
        });

        if (!result.exists) {
            return { passed: null, skipped: true, message: 'No period filter found' };
        }

        return {
            passed: true,
            message: result.type === 'select'
                ? `Period filter (${result.optionCount} options): ${result.options.join(', ')}`
                : `Period buttons (${result.buttonCount}): ${result.options.join(', ')}`
        };
    },

    async overflowDetailsTable(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(() => {
            const table = document.querySelector('table, .overflow-details, .data-table');
            if (!table) return { hasTable: false };

            const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent?.toLowerCase().trim());
            const rows = table.querySelectorAll('tbody tr');

            return {
                hasTable: true,
                headerCount: headers.length,
                rowCount: rows.length,
                headers: headers.slice(0, 6),
                hasResearchColumn: headers.some(h => h.includes('research') || h.includes('query')),
                hasTokenColumn: headers.some(h => h.includes('token'))
            };
        });

        if (!result.hasTable) {
            return { passed: null, skipped: true, message: 'No overflow details table found' };
        }

        return {
            passed: true,
            message: `Details table: ${result.rowCount} rows, columns: ${result.headers.join(', ')}`
        };
    }
};

// ============================================================================
// Context Overflow API Tests
// ============================================================================
const ContextOverflowApiTests = {
    async contextOverflowApiResponds(page, baseUrl) {
        await page.goto(`${baseUrl}/metrics/context-overflow`, { waitUntil: 'networkidle2' });

        const result = await page.evaluate(async (url) => {
            try {
                const response = await fetch(`${url}/metrics/api/context-overflow`);
                if (!response.ok) return { ok: false, status: response.status };

                const data = await response.json();
                return {
                    ok: true,
                    status: response.status,
                    hasData: Object.keys(data).length > 0,
                    keys: Object.keys(data).slice(0, 5)
                };
            } catch (e) {
                return { ok: false, error: e.message };
            }
        }, baseUrl);

        if (!result.ok && result.status === 404) {
            return { passed: null, skipped: true, message: 'Context overflow API not found' };
        }

        return {
            passed: result.ok,
            message: result.ok
                ? `Context overflow API responds (keys: ${result.keys.join(', ')})`
                : `API failed: ${result.error || 'status ' + result.status}`
        };
    }
};

// ============================================================================
// Main Test Runner
// ============================================================================
async function main() {
    log.section('Context Overflow Tests');

    const ctx = await setupTest({ authenticate: true });
    const results = new TestResults('Context Overflow Tests');
    const { page } = ctx;
    const { baseUrl } = ctx.config;

    try {
        // Context Overflow Page Tests
        log.section('Context Overflow Page');

        const pageLoadResult = await ContextOverflowTests.contextOverflowPageLoads(page, baseUrl);
        if (pageLoadResult.skipped) {
            results.skip('Page', 'Context Overflow Page Loads', pageLoadResult.message);
        } else {
            results.add('Page', 'Context Overflow Page Loads', pageLoadResult.passed, pageLoadResult.message);
        }

        const rateResult = await ContextOverflowTests.truncationRateDisplay(page, baseUrl);
        if (rateResult.skipped) {
            results.skip('Page', 'Truncation Rate Display', rateResult.message);
        } else {
            results.add('Page', 'Truncation Rate Display', rateResult.passed, rateResult.message);
        }

        const avgResult = await ContextOverflowTests.averageTruncatedTokens(page, baseUrl);
        if (avgResult.skipped) {
            results.skip('Page', 'Average Truncated Tokens', avgResult.message);
        } else {
            results.add('Page', 'Average Truncated Tokens', avgResult.passed, avgResult.message);
        }

        const chartResult = await ContextOverflowTests.contextOverflowChart(page, baseUrl);
        if (chartResult.skipped) {
            results.skip('Page', 'Context Overflow Chart', chartResult.message);
        } else {
            results.add('Page', 'Context Overflow Chart', chartResult.passed, chartResult.message);
        }

        const filterResult = await ContextOverflowTests.periodFilterWorks(page, baseUrl);
        if (filterResult.skipped) {
            results.skip('Page', 'Period Filter Works', filterResult.message);
        } else {
            results.add('Page', 'Period Filter Works', filterResult.passed, filterResult.message);
        }

        const tableResult = await ContextOverflowTests.overflowDetailsTable(page, baseUrl);
        if (tableResult.skipped) {
            results.skip('Page', 'Overflow Details Table', tableResult.message);
        } else {
            results.add('Page', 'Overflow Details Table', tableResult.passed, tableResult.message);
        }

        // API Tests
        log.section('Context Overflow API');
        const apiResult = await ContextOverflowApiTests.contextOverflowApiResponds(page, baseUrl);
        if (apiResult.skipped) {
            results.skip('API', 'Context Overflow API Responds', apiResult.message);
        } else {
            results.add('API', 'Context Overflow API Responds', apiResult.passed, apiResult.message);
        }

    } catch (error) {
        // Check if this is a navigation/browser error (not a real test failure)
        const isNavigationError = error.message &&
            (error.message.includes('context was destroyed') ||
             error.message.includes('Target closed') ||
             error.message.includes('Protocol error') ||
             error.message.includes('Session closed') ||
             error.message.includes('page has been closed'));

        if (isNavigationError) {
            log.warn(`Browser navigation error (test infrastructure issue): ${error.message}`);
            // Don't count as failure - this is a flaky test issue
        } else {
            log.error(`Fatal error: ${error.message}`);
            console.error(error.stack);
        }
    } finally {
        results.print();
        results.save();
        await teardownTest(ctx);
        process.exit(results.exitCode());
    }
}

// Run if executed directly
if (require.main === module) {
    main().catch(error => {
        console.error('Test runner failed:', error);
        process.exit(1);
    });
}

module.exports = { ContextOverflowTests, ContextOverflowApiTests };
