{% extends "dispensing-tools-container.html" %}
{% load forms_extra %}

{% block head %}
{{ block.super }}
<script>
    let chart = null
    let chart_size_locked = false
    let locked_width = null
    let locked_height = null
    let status_list = {{ status_list|safe }};
    const COLOR_START_HUE = 200

    function hsl_to_hex(hue, saturation, lightness) {
        let s = saturation / 100
        let l = lightness / 100

        let c = (1 - Math.abs(2 * l - 1)) * s
        let x = c * (1 - Math.abs(((hue / 60) % 2) - 1))
        let m = l - c / 2

        let r = 0
        let g = 0
        let b = 0

        if (hue < 60) {
            r = c
            g = x
            b = 0
        } else if (hue < 120) {
            r = x
            g = c
            b = 0
        } else if (hue < 180) {
            r = 0
            g = c
            b = x
        } else if (hue < 240) {
            r = 0
            g = x
            b = c
        } else if (hue < 300) {
            r = x
            g = 0
            b = c
        } else {
            r = c
            g = 0
            b = x
        }

        let to_hex = function (v) {
            let value = Math.round((v + m) * 255)
            let hex = value.toString(16)
            if (hex.length === 1) {
                hex = '0' + hex
            }
            return hex
        }

        return '#' + to_hex(r) + to_hex(g) + to_hex(b)
    }

    function build_visible_status_color_map(visible_statuses) {
        let color_map = {}
        let count = visible_statuses.length

        if (count === 0) {
            return color_map
        }

        let step = 360 / count

        $.each(visible_statuses, function (index, status) {
            let hue = (COLOR_START_HUE + (index * step)) % 360
            color_map[status] = hsl_to_hex(hue, 70, 45)
        })

        return color_map
    }

    function get_status_color(status, color_map) {
        return color_map[status] || '#374151'
    }

    function recolor_status_legend(color_map) {
        $('.status-checkbox-item').each(function () {
            let checkbox = $(this).find('input[type="checkbox"]')
            let status = checkbox.val()
            let swatch = $(this).find('.status-color-swatch')

            if (checkbox.is(':checked')) {
                swatch
                    .css('background-color', get_status_color(status, color_map))
                    .css('visibility', 'visible')
            } else {
                swatch.css('visibility', 'hidden')
            }
        })
    }

    $(function () {
        let canvas = $('#dispense-chart')[0]
        chart_width = canvas.width
        chart_height = canvas.height
        let report_chart_data = {{ report_chart_json|safe }};

        function get_visible_statuses() {
            let statuses = []

            $('.time-table thead th').each(function () {
                let text = $(this).text().trim()

                if (!text || text === 'Week' || text === 'Total Fills' || text === 'NORMAL') {
                    return
                }

                if (!$(this).hasClass('hidden-status')) {
                    statuses.push(text)
                }
            })

            return statuses
        }

        function build_errors_per_day_chart() {
            if (chart) {
                chart.destroy()
                chart = null
            }

            let canvas = $('#dispense-chart')[0]

            if (chart_size_locked) {
                canvas.width = locked_width
                canvas.height = locked_height
                canvas.style.width = locked_width + 'px'
                canvas.style.height = locked_height + 'px'
            }

            let visible_statuses = get_visible_statuses()

            if (visible_statuses.length === 0) {
                return
            }

            let color_map = build_visible_status_color_map(visible_statuses)

            let labels = []
            let datasets = []

            $.each(report_chart_data, function (_, row) {
                labels.push(row.week_start)
            })

            $.each(visible_statuses, function (_, status) {
                let data = []

                $.each(report_chart_data, function (_, row) {
                    let pct = row.status_percentages[status] || 0
                    data.push(pct)
                })

                let color = get_status_color(status, color_map)

                datasets.push({
                    label: status,
                    data: data,
                    borderColor: color,
                    backgroundColor: color,
                    tension: 0.3,
                    fill: false,
                    pointRadius: 3
                })
            })

            let ctx = $('#dispense-chart')[0].getContext('2d')

            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: !chart_size_locked,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Percentage' }
                        }
                    },
                    animation: chart_size_locked
                        ? false
                        : {
                            onComplete: function () {
                                if (!chart_size_locked) {
                                    let rect = ctx.canvas.getBoundingClientRect()
                                    locked_width = rect.width
                                    locked_height = rect.height
                                    chart_size_locked = true
                                }
                            }
                        }
                }
            })
            recolor_status_legend(color_map)
        }

        $('.day-filter-btn').on('click', function () {
            let days = $(this).data('days')

            $('#days-input').val(days)

            $('.day-filter-btn').removeClass('active')
            $(this).addClass('active')
        })

        $('#selected_dafe').on('change', function () {
            $('#report-filter-form').submit();
        })

        // status checkbox: show / hide matching columns
        $('.status-checkbox-item input[type="checkbox"]').on('change', function () {
            let checkbox = $(this)
            let status = checkbox.val()
            let is_checked = checkbox.is(':checked')
            let column_index = null

            $('.time-table thead th').each(function (index) {
                if ($(this).text().trim() === status) {
                    column_index = index
                }
            })

            if (column_index === null) {
                return
            }

            $('.time-table tr').each(function () {
                let cell = $(this).children().eq(column_index)

                if (is_checked) {
                    cell.removeClass('hidden-status')
                } else {
                    cell.addClass('hidden-status')
                }
            })

            build_errors_per_day_chart()
        })

        $(".chosen-select").chosen({
            search_contains: true
        })

        build_errors_per_day_chart();
    })
</script>

<style>
    #dispensing-tools-header-tabs {
        margin-bottom: 0;
    }

    #dispensing-tools-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    /* report filters at top */
    .report-filters {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 12px 16px;
        margin-bottom: 24px;
        background: #f9fafb;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
    }

    .day-filters {
        display: flex;
        gap: 10px;
    }

    .day-filter-btn {
        padding: 6px 16px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .day-filter-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .day-filter-btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
    }

    .apply-filters-btn {
        margin-left: auto;
        padding: 7px 18px;
        border-radius: 8px;
        border: none;
        background: #0096c3;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease-in-out;
    }

    .apply-filters-btn:hover {
        background: #0077a3;
    }

    /* Table and side panel */
    .hidden-status {
        display: none;
    }

    .errors-per-day-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .status-checkbox-panel {
        padding: 12px 14px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    .status-checkbox-title {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 10px;
    }

    .status-checkbox-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #374151;
        margin-bottom: 6px;
        cursor: pointer;
    }

    .status-color-swatch {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
        visibility: hidden;
    }

    .status-checkbox-item input {
        cursor: pointer;
    }

    .errors-per-day-content {
        flex: 1;
    }

    .dafe-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 8px;
        border-left: 1px solid #e5e7eb;
    }

    .dafe-filter label {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0;
    }

    .dafe-filter select {
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        min-width: 140px;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="dispensing-tools-wrapper">
    <form id="report-filter-form" method="get">
        <div class="report-filters">
            <div class="day-filters">
                {% for d in day_options %}
                    <button
                        type="button"
                        class="day-filter-btn {% if days == d %}active{% endif %}"
                        data-days="{{ d }}"
                    >
                        {{ d }} days
                    </button>
                {% endfor %}
                <input type="hidden" name="days" id="days-input" value="{{ days }}">
            </div>

            <div class="dafe-filter">
                <label>
                    Tower:
                    <select id="selected_dafe" name="selected_dafe" class="chosen-select">
                        <option value="ALL" {% if selected_dafe == 'ALL' %}selected{% endif %}>
                            All
                        </option>
                        {% for dafe in dafe_list %}
                            <option value="{{ dafe }}" {% if selected_dafe == dafe %}selected{% endif %}>
                                {{ dafe }}
                            </option>
                        {% endfor %}
                    </select>
                </label>
            </div>

            <button type="submit" class="apply-filters-btn">
                Apply
            </button>
        </div>
    </form>

    <div class="errors-per-day-layout">
        <!-- LEFT: status checkboxes -->
        <div class="status-checkbox-panel">
            <div class="status-checkbox-title">
                Status Filters
            </div>

            {% for status in status_list %}
                {% if status != 'NORMAL' %}
                    <label class="status-checkbox-item">
                        <span class="status-color-swatch"
                              data-status="{{ status }}"></span>
                        <input
                            type="checkbox"
                            value="{{ status }}"
                            {% if status in display_status_list %}checked{% endif %}
                        >
                        {{ status }}
                    </label>
                {% endif %}
            {% endfor %}
        </div>

        <!-- RIGHT: chart + table -->
        <div class="errors-per-day-content">
            <!-- chart -->
            <div id="report-chart-wrapper" class="report-chart-wrapper">
                <canvas id="dispense-chart"></canvas>
            </div>

            <!-- table -->
            <table class="time-table table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>Week</th>
                        <th>Total Fills</th>
                        <th>NORMAL</th>

                        {% for status in status_list %}
                            {% if status != 'NORMAL' %}
                                <th class="{% if status not in display_status_list %}hidden-status{% endif %}">
                                    {{ status }}
                                </th>
                            {% endif %}
                        {% endfor %}
                    </tr>
                </thead>

                <tbody>
                    {% for row in report_list %}
                        <tr>
                            <td>{{ row.week_start }}</td>
                            <td>{{ row.total }}</td>

                            <td>
                                {{ row.status_percentages.NORMAL|default:0|floatformat:2 }}%
                            </td>

                            {% for status in status_list %}
                                {% if status != 'NORMAL' %}
                                    <td class="{% if status not in display_status_list %}hidden-status{% endif %}">
                                        {{ row.status_counts|get_item:status|default:0 }} ({{ row.status_percentages|get_item:status|default:0|floatformat:2 }}%)
                                    </td>
                                {% endif %}
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}