/**
 * Shared Test Utilities
 *
 * Provides common functionality for UI tests:
 * - Browser setup/teardown
 * - Configuration management
 * - Helper functions (delay, waitFor, screenshot)
 * - Logging utilities
 */

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const AuthHelper = require('../auth_helper');
const { getPuppeteerLaunchOptions } = require('../puppeteer_config');

// Centralized configuration - single source of truth
const config = {
    baseUrl: process.env.BASE_URL || process.env.TEST_BASE_URL || 'http://127.0.0.1:5000',
    isCI: process.env.CI === 'true',
    headless: process.env.HEADLESS !== 'false',
    screenshotDir: path.join(__dirname, '..', 'screenshots'),
    resultsDir: path.join(__dirname, '..', 'test-results'),
    timeout: parseInt(process.env.TEST_TIMEOUT, 10) || 30000,
    slowMo: parseInt(process.env.SLOW_MO, 10) || 0,
};

// Default viewport settings
const viewports = {
    desktop: { width: 1280, height: 800 },
    mobile: { width: 375, height: 667, isMobile: true, hasTouch: true },
    tablet: { width: 768, height: 1024, isMobile: true, hasTouch: true },
};

/**
 * Initialize test environment with browser and optional authentication
 *
 * @param {Object} options - Setup options
 * @param {boolean} [options.authenticate=true] - Whether to authenticate the user
 * @param {boolean} [options.headless] - Override headless mode
 * @param {Object} [options.viewport] - Viewport settings (or use 'desktop', 'mobile', 'tablet')
 * @param {string} [options.username] - Custom username for authentication
 * @param {string} [options.password] - Custom password for authentication
 * @returns {Promise<Object>} Context object with browser, page, authHelper, config
 */
async function setupTest(options = {}) {
    const launchOptions = getPuppeteerLaunchOptions({
        headless: options.headless ?? config.headless,
        slowMo: options.slowMo ?? config.slowMo,
    });

    const browser = await puppeteer.launch(launchOptions);
    const page = await browser.newPage();

    // Set viewport
    let viewport = options.viewport;
    if (typeof viewport === 'string' && viewports[viewport]) {
        viewport = viewports[viewport];
    }
    await page.setViewport(viewport || viewports.desktop);

    // Create auth helper
    const authHelper = new AuthHelper(page, config.baseUrl);

    // Authenticate if requested (default: true)
    if (options.authenticate !== false) {
        await authHelper.ensureAuthenticated(options.username, options.password);
    }

    // Return context object
    // Use authHelper.getPage() because ensureAuthenticated() may have created
    // a fresh page if the original one hit a detached frame error
    return {
        browser,
        page: authHelper.getPage(),
        authHelper,
        config,
        viewports,
    };
}

/**
 * Clean up test environment
 *
 * @param {Object} context - Context object from setupTest
 */
async function teardownTest(context) {
    if (context && context.browser) {
        await context.browser.close();
    }
}

/**
 * Take a screenshot with auto-directory creation
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} name - Screenshot name (without extension)
 * @param {Object} [options] - Screenshot options
 * @param {boolean} [options.fullPage=true] - Capture full page
 * @returns {Promise<string>} Path to saved screenshot
 */
async function screenshot(page, name, options = {}) {
    const dir = config.screenshotDir;
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir, { recursive: true });
    }

    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    const filename = `${name}_${timestamp}.png`;
    const filepath = path.join(dir, filename);

    await page.screenshot({
        path: filepath,
        fullPage: options.fullPage !== false,
        ...options,
    });

    return filepath;
}

/**
 * Simple delay function
 *
 * @param {number} ms - Milliseconds to wait
 * @returns {Promise<void>}
 */
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

/**
 * Wait for an element with better error messages
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} selector - CSS selector
 * @param {Object} [options] - Wait options
 * @param {number} [options.timeout] - Timeout in ms
 * @param {boolean} [options.visible] - Wait for visible element
 * @returns {Promise<boolean>}
 */
async function waitFor(page, selector, options = {}) {
    const timeout = options.timeout || config.timeout;
    try {
        await page.waitForSelector(selector, {
            timeout,
            visible: options.visible,
        });
        return true;
    } catch (e) {
        throw new Error(`Element "${selector}" not found after ${timeout}ms`);
    }
}

/**
 * Wait for element to become visible (using waitForFunction for reliability)
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} selector - CSS selector
 * @param {number} [timeout] - Timeout in ms
 * @returns {Promise<boolean>}
 */
async function waitForVisible(page, selector, timeout = 5000) {
    try {
        await page.waitForFunction(
            (sel) => {
                const el = document.querySelector(sel);
                if (!el) return false;
                const style = window.getComputedStyle(el);
                return style.display !== 'none' && style.visibility !== 'hidden';
            },
            { timeout },
            selector
        );
        return true;
    } catch (e) {
        return false;
    }
}

/**
 * Click an element and wait for navigation
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} selector - CSS selector to click
 * @param {Object} [options] - Navigation options
 * @returns {Promise<void>}
 */
async function clickAndWaitForNavigation(page, selector, options = {}) {
    const waitUntil = options.waitUntil || 'networkidle2';
    const timeout = options.timeout || config.timeout;

    await Promise.all([
        page.waitForNavigation({ waitUntil, timeout }),
        page.click(selector),
    ]);
}

/**
 * Get the value of an input element
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} selector - CSS selector
 * @returns {Promise<string>}
 */
async function getInputValue(page, selector) {
    return page.$eval(selector, el => el.value);
}

/**
 * Clear and type into an input
 *
 * @param {Object} page - Puppeteer page object
 * @param {string} selector - CSS selector
 * @param {string} text - Text to type
 * @returns {Promise<void>}
 */
async function clearAndType(page, selector, text) {
    await page.click(selector, { clickCount: 3 });
    await page.keyboard.press('Backspace');
    await page.type(selector, text);
}

// Console logging with colors (works in terminal)
const log = {
    info: (msg) => console.log(`\x1b[36m[INFO] ${msg}\x1b[0m`),
    success: (msg) => console.log(`\x1b[32m[PASS] ${msg}\x1b[0m`),
    error: (msg) => console.log(`\x1b[31m[FAIL] ${msg}\x1b[0m`),
    warning: (msg) => console.log(`\x1b[33m[WARN] ${msg}\x1b[0m`),
    section: (msg) => console.log(`\x1b[34m\n=== ${msg} ===\x1b[0m`),
    debug: (msg) => {
        if (process.env.DEBUG) {
            console.log(`\x1b[90m[DEBUG] ${msg}\x1b[0m`);
        }
    },
};

module.exports = {
    config,
    viewports,
    setupTest,
    teardownTest,
    screenshot,
    delay,
    waitFor,
    waitForVisible,
    clickAndWaitForNavigation,
    getInputValue,
    clearAndType,
    log,
};
