{# Chart Component #}
<div class="chart-container">
    <div class="chart-toolbar">
        <button
            class="chart-toolbar-btn"
            id="chart-fit-all"
            title="Fit all (reset zoom)"
        >
            <i class="fas fa-expand"></i>
        </button>
    </div>
    <canvas id="chart"></canvas>
</div>

<div class="error-message" id="error-message">
    <i class="fas fa-exclamation-triangle"></i>
    <span id="error-text"></span>
</div>

<style>
    .chart-container {
        position: relative;
        height: 400px;
    }
    .chart-toolbar {
        position: absolute;
        top: 4px;
        right: 8px;
        z-index: 10;
        display: flex;
        gap: 4px;
    }
    .chart-toolbar-btn {
        background: rgba(60, 60, 60, 0.85);
        border: 1px solid #555;
        color: #ccc;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
    }
    .chart-toolbar-btn:hover {
        background: rgba(80, 80, 80, 0.95);
        color: #fff;
    }
</style>

<script>
    // Chart Component
    const SaxChart = (function () {
        const SPEED_OF_LIGHT = 299.792458; // μm·THz

        let chart = null;
        let simulationData = null;
        let selectedInputPorts = new Set();
        let selectedOutputPorts = new Set();
        let selectedProcessing = "pow_db";
        let isFrequencyMode = false;

        const COLORS = [
            "#4FC3F7",
            "#81C784",
            "#FFB74D",
            "#F06292",
            "#9575CD",
            "#4DB6AC",
            "#FF8A65",
            "#A1887F",
        ];

        function wavelengthToFrequency(wl) {
            return SPEED_OF_LIGHT / wl;
        }

        function processData(real, imag, mode) {
            return real.map((r, i) => {
                const im = imag[i];
                const mag = Math.sqrt(r * r + im * im);
                const pow = r * r + im * im;

                switch (mode) {
                    case "ampl":
                        return mag;
                    case "pow":
                        return pow;
                    case "pow_db":
                        return 10 * Math.log10(Math.max(pow, 1e-12));
                    case "phase":
                        return (Math.atan2(im, r) * 180) / Math.PI;
                    default:
                        return pow;
                }
            });
        }

        function unwrapPhase(phaseArray) {
            if (!phaseArray || phaseArray.length === 0) return phaseArray;

            const unwrapped = [...phaseArray];

            for (let i = 1; i < unwrapped.length; i++) {
                let diff = unwrapped[i] - unwrapped[i - 1];
                while (diff > 180) diff -= 360;
                while (diff < -180) diff += 360;
                unwrapped[i] = unwrapped[i - 1] + diff;
            }

            return unwrapped;
        }

        function getYAxisLabel(mode) {
            switch (mode) {
                case "ampl":
                    return "Amplitude";
                case "pow":
                    return "Power";
                case "pow_db":
                    return "Power (dB)";
                case "phase":
                    return "Phase (degrees)";
                default:
                    return "Power";
            }
        }

        function freqUnit(thzValue) {
            return thzValue < 1 ? "GHz" : "THz";
        }

        function freqDisplay(thzValue) {
            if (thzValue < 1) {
                const ghz = thzValue * 1000;
                const precision = ghz >= 100 ? 1 : ghz >= 10 ? 2 : 3;
                return ghz.toFixed(precision) + " GHz";
            }
            const precision = thzValue >= 100 ? 1 : thzValue >= 10 ? 2 : 3;
            return thzValue.toFixed(precision) + " THz";
        }

        function formatXValue(value) {
            if (isFrequencyMode) {
                return freqDisplay(value);
            } else {
                return value.toFixed(4) + " μm";
            }
        }

        function update() {
            if (!simulationData || !simulationData.sdict) return;

            const chartCanvas = document.getElementById("chart");
            chartCanvas.style.display = "block";

            // Destroy existing chart
            if (chart) {
                chart.destroy();
            }

            const wl = simulationData.wavelengths;
            const sdict = simulationData.sdict;

            // Calculate x-axis values based on mode
            let xValues;
            let xUnit = "μm";
            if (isFrequencyMode) {
                // Convert wavelengths to frequencies (and reverse order for increasing x)
                xValues = wl.map((w) => wavelengthToFrequency(w));
                const maxFreq = Math.max(...xValues);
                xUnit = freqUnit(maxFreq);
            } else {
                xValues = wl;
            }

            // Build datasets
            const datasets = [];
            let colorIdx = 0;

            selectedInputPorts.forEach((inPort) => {
                selectedOutputPorts.forEach((outPort) => {
                    const data = sdict[inPort]?.[outPort];
                    if (!data) return;

                    let yValues = processData(
                        data.real,
                        data.imag,
                        selectedProcessing,
                    );

                    // Unwrap phase if needed
                    if (selectedProcessing === "phase") {
                        yValues = unwrapPhase(yValues);
                    }

                    const color = COLORS[colorIdx % COLORS.length];
                    colorIdx++;

                    datasets.push({
                        label: `${inPort} → ${outPort}`,
                        data: xValues.map((x, i) => ({ x, y: yValues[i] })),
                        borderColor: color,
                        borderWidth: 2,
                        fill: false,
                        tension: 0.1,
                        pointRadius: 0,
                        pointHoverRadius: 4,
                    });
                });
            });

            const ctx = chartCanvas.getContext("2d");
            chart = new Chart(ctx, {
                type: "line",
                data: { datasets },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: { duration: 500 },
                    transitions: {
                        zoom: { animation: { duration: 0 } },
                    },
                    interaction: {
                        intersect: false,
                        mode: "index",
                    },
                    plugins: {
                        legend: {
                            display: datasets.length > 1,
                            labels: { color: "#e0e0e0" },
                        },
                        tooltip: {
                            backgroundColor: "rgba(0,0,0,0.8)",
                            titleColor: "#e0e0e0",
                            bodyColor: "#e0e0e0",
                            callbacks: {
                                title: function (context) {
                                    const x = context[0].parsed.x;
                                    if (isFrequencyMode) {
                                        return `Frequency: ${freqDisplay(x)}`;
                                    } else {
                                        return `Wavelength: ${x.toFixed(4)} μm`;
                                    }
                                },
                            },
                        },
                        zoom: {
                            pan: { enabled: true, mode: "xy" },
                            zoom: {
                                wheel: { enabled: true, speed: 0.05 },
                                pinch: { enabled: true },
                                mode: "x",
                            },
                        },
                    },
                    scales: {
                        x: {
                            type: "linear",
                            title: {
                                display: true,
                                text: isFrequencyMode
                                    ? `Frequency (${xUnit})`
                                    : "Wavelength (μm)",
                                color: "#e0e0e0",
                            },
                            ticks: {
                                color: "#b0b0b0",
                                callback: function (value) {
                                    if (isFrequencyMode) {
                                        if (xUnit === "GHz") {
                                            const ghz = value * 1000;
                                            return ghz >= 100
                                                ? ghz.toFixed(0)
                                                : ghz.toFixed(1);
                                        }
                                        return value.toFixed(1);
                                    } else {
                                        return value.toFixed(2);
                                    }
                                },
                            },
                            grid: { color: "#404040" },
                        },
                        y: {
                            title: {
                                display: true,
                                text: getYAxisLabel(selectedProcessing),
                                color: "#e0e0e0",
                            },
                            ticks: { color: "#b0b0b0" },
                            grid: { color: "#404040" },
                        },
                    },
                },
            });
        }

        function setData(data) {
            simulationData = data;
        }

        function setInputPorts(ports) {
            selectedInputPorts = new Set(ports);
        }

        function setOutputPorts(ports) {
            selectedOutputPorts = new Set(ports);
        }

        function setProcessing(mode) {
            selectedProcessing = mode;
        }

        function setFrequencyMode(isFreq) {
            isFrequencyMode = isFreq;
        }

        function showError(message) {
            const resultsSection = document.getElementById("results-section");
            const errorMessage = document.getElementById("error-message");
            const errorText = document.getElementById("error-text");
            const chartCanvas = document.getElementById("chart");

            if (resultsSection) resultsSection.classList.add("visible");
            if (errorMessage) errorMessage.style.display = "block";
            if (errorText) errorText.textContent = message;
            if (chartCanvas) chartCanvas.style.display = "none";
        }

        function hideError() {
            const errorMessage = document.getElementById("error-message");
            const chartCanvas = document.getElementById("chart");

            if (errorMessage) errorMessage.style.display = "none";
            if (chartCanvas) chartCanvas.style.display = "block";
        }

        function resetZoom() {
            if (chart) chart.resetZoom();
        }

        return {
            update,
            setData,
            setInputPorts,
            setOutputPorts,
            setProcessing,
            setFrequencyMode,
            showError,
            hideError,
            resetZoom,
            getSelectedInputPorts: () => selectedInputPorts,
            getSelectedOutputPorts: () => selectedOutputPorts,
            getProcessing: () => selectedProcessing,
        };
    })();

    document
        .getElementById("chart-fit-all")
        .addEventListener("click", function () {
            SaxChart.resetZoom();
        });
</script>