/**
 * Shared FPS sparkline chart factory.
 *
 * Both dashboard.js and targets.js need nearly identical Chart.js line charts
 * for FPS visualization. This module provides a single factory so the config
 * lives in one place.
 *
 * Requires Chart.js to be registered globally (done by perf-charts.js).
 */

const DEFAULT_MAX_SAMPLES = 120;

/** Left-pad an array with nulls so it always has `maxSamples` entries. */
function _padLeft(arr: number[], maxSamples: number): (number | null)[] {
    const pad = maxSamples - arr.length;
    return pad > 0 ? [...new Array(pad).fill(null), ...arr] : arr.slice(-maxSamples);
}

/**
 * Create an FPS sparkline Chart.js instance.
 *
 * @param {string} canvasId  DOM id of the <canvas> element
 * @param {number[]} actualHistory   fps_actual samples
 * @param {number[]} currentHistory  fps_current samples
 * @param {number} fpsTarget         target FPS (used for y-axis max)
 * @param {Object} [opts]            optional overrides
 * @param {number} [opts.maxHwFps]   hardware max FPS — draws a dashed reference line
 * @returns {Chart|null}
 */
export function createFpsSparkline(canvasId: string, actualHistory: number[], currentHistory: number[], fpsTarget: number, opts: any = {}) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) return null;

    const maxSamples = opts.maxSamples || DEFAULT_MAX_SAMPLES;
    const paddedActual = _padLeft(actualHistory, maxSamples);
    const paddedCurrent = _padLeft(currentHistory, maxSamples);

    const datasets: any[] = [
        {
            data: paddedActual,
            borderColor: '#2196F3',
            backgroundColor: 'rgba(33,150,243,0.12)',
            borderWidth: 1.5,
            tension: 0.3,
            fill: true,
            pointRadius: 0,
            spanGaps: false,
        },
        {
            data: paddedCurrent,
            borderColor: '#4CAF50',
            borderWidth: 1.5,
            tension: 0.3,
            fill: false,
            pointRadius: 0,
            spanGaps: false,
        },
    ];

    // Optional hardware-max reference line (used by target cards)
    const maxHwFps = opts.maxHwFps;
    if (maxHwFps && maxHwFps < fpsTarget * 1.15) {
        datasets.push({
            data: paddedActual.map(() => maxHwFps),
            borderColor: 'rgba(255,152,0,0.5)',
            borderWidth: 1,
            borderDash: [4, 3],
            pointRadius: 0,
            fill: false,
        });
    }

    const labels = new Array(maxSamples).fill('');

    return new Chart(canvas, {
        type: 'line',
        data: {
            labels,
            datasets,
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            plugins: { legend: { display: false }, tooltip: { enabled: false } },
            scales: {
                x: { display: false },
                y: { min: 0, max: fpsTarget * 1.15, display: false },
            },
            layout: { padding: 0 },
        },
    });
}
