{#
Boiler Operation Plan Chart Component

This component displays a 12-hour forecast of boiler operation plans
showing price per hour on the y-axis and time on the x-axis, with
different colors for different boilers.

Usage:
{% with api_endpoint='/locations/123/api/boiler-plan' %}
  {% include 'partials/boiler_plan_chart.html' %}
{% endwith %}

Required context variables:
- api_endpoint: The API endpoint URL to fetch boiler plan data
#}

<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-chart-area mr-2"></i>Boiler Operation Plan - Next 12 Hours
        </h5>
    </div>
    <div class="card-body">
        <div id="boiler-plan-chart-container">
            <canvas id="boiler-plan-chart" width="400" height="200"></canvas>
            <div class="mt-3" id="chart-loading" style="text-align: center;">
                <i class="fas fa-spinner fa-spin"></i> Loading boiler operation plan...
            </div>
            <div class="mt-3" id="chart-error" style="display: none;">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Unable to load boiler operation plan data.
                </div>
            </div>
        </div>
        <div id="boiler-legend" class="mt-3" style="display: none;">
            <h6>Boilers:</h6>
            <div id="legend-items" class="d-flex flex-wrap"></div>
        </div>
    </div>
</div>

<style>
.legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 5px;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border: 1px solid #ddd;
}

.legend-text {
    font-size: 14px;
}
</style>

<script src="/static/js/chart.js"></script>
<script src="/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="/static/js/jquery.min.js"></script>

<script>
$(document).ready(function() {
    const API_ENDPOINT = '{{ api_endpoint }}';
    let chart = null;

    function loadBoilerPlanChart() {
        $.ajax({
            url: API_ENDPOINT,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                $('#chart-loading').hide();
                
                if (response.plan_data && response.plan_data.length > 0) {
                    renderChart(response);
                    renderLegend(response.legend);
                } else {
                    showNoDataMessage();
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading boiler plan data:', error);
                $('#chart-loading').hide();
                $('#chart-error').show();
            }
        });
    }

    function renderChart(data) {
        const ctx = document.getElementById('boiler-plan-chart').getContext('2d');

        const datasets = [];
        const boilerGroups = {};
        const timePoints = new Set();
        const dataMap = {};

        data.plan_data.forEach(item => {
            timePoints.add(item.time_from);

            if (!dataMap[item.time_from]) {
                dataMap[item.time_from] = {};
            }
            dataMap[item.time_from][item.boiler_id] = item.price_per_hour;

            if (!boilerGroups[item.boiler_id]) {
                boilerGroups[item.boiler_id] = {
                    label: item.boiler_name,
                    data: [],
                    backgroundColor: item.color + '80',
                    borderColor: item.color,
                    borderWidth: 2,
                    stepped: true,
                    fill: 'origin'
                };
            }
        });

        const sortedTimes = Array.from(timePoints).sort();
        const boilerIds = Object.keys(boilerGroups);

        sortedTimes.forEach(timeStr => {
            const time = new Date(timeStr);

            boilerIds.forEach(boilerId => {
                const originalPrice = dataMap[timeStr] && dataMap[timeStr][boilerId]
                    ? dataMap[timeStr][boilerId]
                    : 0;

                boilerGroups[boilerId].data.push({
                    x: time,
                    y: originalPrice,
                    originalPrice: originalPrice,
                    timeKey: timeStr
                });
            });
        });

        boilerIds.forEach((boilerId, datasetIndex) => {
            const group = boilerGroups[boilerId];

            group.data = group.data.map(point => {
                if (point.originalPrice === 0) {
                    return { ...point, y: 0 };
                }

                const activeBoilers = boilerIds.filter(id =>
                    dataMap[point.timeKey] &&
                    dataMap[point.timeKey][id] > 0
                );

                const boilerPosition = activeBoilers.indexOf(boilerId);
                const separation = Math.abs(point.originalPrice) * 0.15;
                const adjustedPrice = point.originalPrice + (boilerPosition * separation);

                return { ...point, y: adjustedPrice };
            });

            group.pointRadius = function(context) {
                return context.raw.originalPrice === 0 ? 0 : 3;
            };

            datasets.push(group);
        });

        let minPrice = 0, maxPrice = 0;
        let minTime = new Date(sortedTimes[0]);
        let maxTime = new Date(sortedTimes[sortedTimes.length - 1]);

        datasets.forEach(dataset => {
            dataset.data.forEach(point => {
                if (point.y < minPrice) minPrice = point.y;
                if (point.y > maxPrice) maxPrice = point.y;
            });
        });

        const padding = Math.max(Math.abs(maxPrice - minPrice) * 0.1, 0.1);
        minPrice -= padding;
        maxPrice += padding;

        new Chart(ctx, {
            type: 'line',
            data: { datasets },
            options: {
                responsive: true,
                interaction: { intersect: false, mode: 'index' },
                scales: {
                    x: {
                        type: 'time',
                        time: { unit: 'hour', displayFormats: { hour: 'HH:mm' } },
                        title: { display: true, text: 'Time' },
                        min: minTime,
                        max: maxTime
                    },
                    y: {
                        title: { display: true, text: 'Price per hour' },
                        min: minPrice,
                        max: maxPrice,
                        ticks: {
                            callback: value => value.toFixed(2)
                        }
                    }
                },
                plugins: {
                    title: { display: true, text: 'Boiler Operation Plan - Price per Hour' },
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            title: context => {
                                const date = new Date(context[0].parsed.x);
                                return date.toLocaleString();
                            },
                            label: context => {
                                const originalPrice = context.raw.originalPrice;
                                const boilerName = context.dataset.label;
                                if (originalPrice === 0) {
                                    return `${boilerName}: Non-operational`;
                                }
                                return `${boilerName}: ${originalPrice.toFixed(2)} per hour`;
                            }
                        }
                    }
                }
            }
        });
    }

    function renderLegend(legendData) {
        if (!legendData || legendData.length === 0) {
            return;
        }

        const legendContainer = $('#legend-items');
        legendContainer.empty();

        legendData.forEach(function(item) {
            const legendItem = $(`
                <div class="legend-item">
                    <div class="legend-color" style="background-color: ${item.color}"></div>
                    <span class="legend-text">${item.boiler_name}</span>
                </div>
            `);
            legendContainer.append(legendItem);
        });

        $('#boiler-legend').show();
    }

    function showNoDataMessage() {
        $('#boiler-plan-chart-container').html(`
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle mr-2"></i>
                No boiler operation plans found for the next 12 hours.
            </div>
        `);
    }

    // Load chart on page load
    loadBoilerPlanChart();

    // Refresh chart every 5 minutes
    setInterval(loadBoilerPlanChart, 5 * 60 * 1000);
});
</script>