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

{% block head %}
{{ block.super }}
<script>
    let tower_location_data = {{ tower_location_data|safe }};
    const FILL_REQUEST_URL = "{% url 'support:support-fill-request-report' %}";
    const MAP_ROWS = ['A', 'B', 'C', 'D', 'E']
    const MAP_COLS = 12
    let dafe_list = []

    function render_dafe_sidebar(tower_location_data) {
        let dafe_keys = sorted_dafe_keys(tower_location_data);
        let html = ''

        dafe_keys.forEach(function (dafe) {
            let tower = tower_location_data[dafe]
            let percentage = good_percentage(tower.errors, tower.total)
            let has_data = tower.total > 0
            html += `
                <div class="sidebar-dafe-item ${has_data ? '' : 'no-data'}" data-dafe="${dafe}">
                    <span class="sidebar-dafe-name">${dafe}</span>
                    <span class="sidebar-dafe-pct">${has_data ? percentage + '%' : '—'}</span>
                </div>
            `
        })

        $('#dafe-sidebar-list').html(html)
        $('#dafe-sidebar-list .sidebar-dafe-item').first().addClass('active')
    }

    function slider_to_min_count(slider_val, slider_max, data_max) {
        if (slider_val === 0) {
            return 0;
        }

        let ratio = slider_val / slider_max;
        return Math.max(1, Math.round(Math.pow(data_max, ratio)));
    }

    function min_count_to_slider(min_count, slider_max, data_max) {
        if (min_count <= 0) {
            return 0;
        }

        let ratio = Math.log(min_count) / Math.log(data_max || 1);
        return Math.round(ratio * slider_max);
    }

    function recalc_min_count_slider() {
        let slider = $('#min-count-slider');
        let slider_max = Number(slider.attr('max')) || 100;
        let current_min = Number(slider.data('effective-min')) || 0;
        let visible_container = $('div[id$="_full_container"]:visible');
        let data_max = 0;

        visible_container.find('.canister').each(function () {
            let total = Number($(this).data('total')) || 0;
            if (total > data_max) {
                data_max = total;
            }
        });

        // clamp semantic value
        let effective_min = Math.min(current_min, data_max);

        // project semantic value back onto slider
        let new_slider_val = min_count_to_slider(
            effective_min,
            slider_max,
            data_max
        );

        slider.val(new_slider_val);
        slider.data('effective-min', effective_min);
        $('#min-count-value').text(effective_min);
        $('#min-count-hidden').val(effective_min);
    }

    function apply_min_count_filter() {
        let min_count = Number($('#min-count-slider').data('effective-min')) || 0;
        let visible_container = $('div[id$="_full_container"]:visible');

        visible_container.find('.canister').each(function () {
            let canister = $(this);

            // never dim empty locations
            if (canister.hasClass('can-grey')) {
                canister.css('opacity', '1');
                return;
            }

            let total = Number(canister.data('total')) || 0;

            if (total < min_count) {
                canister.css('opacity', '0.20');
            } else {
                canister.css('opacity', '1');
            }
        });
    }

    function select_worst_canister() {
        let min_count = Number($('input[name="min_count"]').val()) || 0;

        let visible_container = $('div[id$="_full_container"]:visible');
        if (!visible_container.length) {
            return;
        }

        let worst = null;
        let worst_value = null;

        visible_container.find('.canister').each(function () {
            let canister = $(this);

            if (canister.hasClass('can-grey')) {
                return;
            }

            let total = Number(canister.data('total')) || 0;
            if (total < min_count) {
                return;
            }

            let good_pct = Number(canister.data('good'));
            if (isNaN(good_pct)) {
                return;
            }

            if (worst_value === null || good_pct < worst_value) {
                worst_value = good_pct;
                worst = canister;
            }
        });

        if (worst) {
            worst.click();
        }
    }

    function reset_location_detail() {
        $('#detail-title').text('Select a location');

        $('#detail-total').text('—');
        $('#detail-errors').text('—');
        $('#detail-good').text('—');
        $('#detail-error-pct').text('—');

        $('#detail-link').prop('disabled', true).off('click');
    }

    function good_percentage(errors, total) {
        if (!total) {
            return 0.0;
        }

        return Number(((1 - (errors / total)) * 100).toFixed(1));
    }

    function good_pct_to_color(good_pct) {
        if (good_pct === null || isNaN(good_pct)) {
            return '#e5e7eb';
        }

        let clamped = Math.min(Math.max(good_pct, 90), 100);
        let ratio = (clamped - 90) / 10;

        let red = Math.round(255 * (1 - ratio));
        let green = Math.round(255 * ratio);

        return `rgba(${red}, ${green}, 0, 0.3)`;
    }


    function build_fill_request_url(params) {
        let query = $.param(params)
        return FILL_REQUEST_URL + '?' + query
    }

    function sorted_dafe_keys(tower_location_data) {
        return Object.keys(tower_location_data).sort(function(a, b) {
            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
        });
    }

    function render_tower_heatmap(tower_location_data) {
        let dafe_keys = sorted_dafe_keys(tower_location_data);

        dafe_keys.forEach(function (dafe) {
            let locations = tower_location_data[dafe].locations || {}
            let container = $('#' + dafe + '_full_container')
            let percentage = good_percentage(
                tower_location_data[dafe].errors,
                tower_location_data[dafe].total
            );
            container.empty()

            let html = `
                <div id="${dafe}_map_wrapper">
                    <div class="map_container">
                        <h2 id="map_header___${dafe}">
                            ${dafe} (${percentage}%)
                        </h2>
            `

            MAP_ROWS.forEach(function (row) {
                html += `<div class="map-row" style="white-space:nowrap;">`

                for (let col = 1; col <= MAP_COLS; col++) {
                    let location = row + col
                    let location_data = locations[location] || {};

                    let pct = location_data.total ? good_percentage(location_data.errors, location_data.total) : null;
                    let bg_color = pct !== null ? good_pct_to_color(pct) : '#e5e7eb';

                    let is_empty = !location_data.total;
                    let cls = is_empty ? 'canister col can-grey': 'canister col';
                    let bg_style = is_empty ? '' : `background-color:${bg_color};`;

                    html += `
                        <div class="${cls}"
                             data-dafe="${dafe}"
                             data-dafe-id="${tower_location_data[dafe].dafe_id}"
                             data-location="${location}"
                             data-total="${location_data.total || 0}"
                             data-errors="${location_data.errors || 0}"
                             data-good="${pct !== null ? pct : ''}"
                             style="margin:2px; ${bg_style}">
                            <div class="name">${location}</div>
                        </div>
                    `;
                }

                html += `</div>`
            })

            html += `</div></div>`
            container.append(html)
        })
    }

    function init_dafe_visibility() {
        dafe_list = sorted_dafe_keys(tower_location_data)

        dafe_list.forEach(function (dafe, idx) {
            if (idx > 0) {
                $('#' + dafe + '_full_container').hide()
            }
        })
    }

    $(function () {
        $(document).on('click', '.canister', function () {
            let canister = $(this);
            let days = Number($('#days-input').val()) || 0;
            $('.canister').css('box-shadow', 'none')

            // ignore empty locations, but reset details
            if (canister.hasClass('can-grey')) {
                reset_location_detail()
                return
            }

            canister.css('box-shadow', '0px 0px 3px 4px orange')

            let dafe = canister.data('dafe');
            let dafe_id = canister.data('dafe-id');
            let location = canister.data('location');
            let total = Number(canister.data('total'));
            let errors = Number(canister.data('errors'));
            let good = total - errors;
            let error_pct = total ? ((errors / total) * 100).toFixed(1) : '0.0';

            $('#detail-title').text(`${dafe} – ${location}`);
            $('#detail-total').text(total);
            $('#detail-errors').text(errors);
            $('#detail-good').text(good);
            $('#detail-error-pct').text(`${error_pct}%`);

            $('#detail-link')
                .prop('disabled', false)
                .off('click')
                .on('click', function () {
                    window.open(
                        build_fill_request_url({
                            clear_filters: 'true',
                            days: days,
                            dafe_id: dafe_id,
                            location: location,
                            fill_status: 'NOT_NORMAL'
                        }),
                        '_blank'
                    );
                });
        });

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

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

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

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

        $(document).on('input change', '#min-count-slider', function () {
            let slider = $(this);
            let slider_val = Number(slider.val());
            let slider_max = Number(slider.attr('max')) || 100;

            let visible_container = $('div[id$="_full_container"]:visible');
            let data_max = 0;

            visible_container.find('.canister').each(function () {
                let total = Number($(this).data('total')) || 0;
                if (total > data_max) {
                    data_max = total;
                }
            });

            let min_count = slider_to_min_count(slider_val, slider_max, data_max);
            slider.data('effective-min', min_count);
            $('#min-count-value').text(min_count);
            $('#min-count-hidden').val(min_count);

            apply_min_count_filter();
            select_worst_canister();
        });

        $(document).on('click', '.sidebar-dafe-item', function () {
            let selected_dafe = $(this).data('dafe')

            $('.sidebar-dafe-item').removeClass('active')
            $(this).addClass('active')

            $('div[id$="_full_container"]').hide()
            $('#' + selected_dafe + '_full_container').show()

            reset_location_detail()
            recalc_min_count_slider()
            apply_min_count_filter()
            select_worst_canister()
        })

        let initial_min = Number($('#min-count-hidden').val()) || 0;
        $('#min-count-slider').data('effective-min', initial_min);
        $('#min-count-value').text(initial_min);

        render_tower_heatmap(tower_location_data);
        render_dafe_sidebar(tower_location_data);
        init_dafe_visibility();
        recalc_min_count_slider();
        apply_min_count_filter();
        select_worst_canister();
    });
</script>

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

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

    /* report filters */
    .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);
    }

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

    .min-count-label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }

    .min-count-slider-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #min-count-slider {
        width: 220px;
        appearance: none;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(
            to right,
            #dbeafe,
            #6366f1
        );
        outline: none;
    }

    #min-count-value {
        min-width: 32px;
        text-align: right;
        font-weight: 600;
        color: #111827;
    }

    .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;
    }

    #left-panel {
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    /* one full map container per dafe */
    div[id$="_full_container"] {
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    /* map body */
    .map_container {
        padding-left: 1em;
        padding-right: 1em;
        user-select: none;
    }

    .canister {
        user-select: none;
    }

    #heatmap-layout {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    #left-panel {
        width: 60%;
        flex-shrink: 0;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    #side-panel {
        width: 18%;
        flex-shrink: 0;
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        display: flex;
        flex-direction: column;
    }

    #dafe-sidebar {
        width: 15%;
        flex-shrink: 0;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        overflow: hidden;
    }

    .sidebar-header {
        padding: 10px 14px;
        font-weight: 700;
        font-size: 14px;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
        background: #f3f4f6;
    }

    .sidebar-dafe-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        cursor: pointer;
        font-size: 13px;
        color: #374151;
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.1s ease;
    }

    .sidebar-dafe-item:hover {
        background: #eef2ff;
    }

    .sidebar-dafe-item.active {
        background: #4f46e5;
        color: #ffffff;
    }

    .sidebar-dafe-item.active .sidebar-dafe-pct {
        color: #ffffff;
    }

    .sidebar-dafe-item.no-data .sidebar-dafe-pct {
        color: #9ca3af;
    }

    .sidebar-dafe-name {
        font-weight: 500;
    }

    .sidebar-dafe-pct {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
    }

    #detail-link {
        margin-top: auto;
    }
</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="count-filter">
                <label class="min-count-label">
                    Min Count
                    <div class="min-count-slider-wrap">
                        <input type="range"
                               id="min-count-slider"
                               min="0"
                               max="100"
                               step="1"
                               value="{{ min_count }}">
                        <span id="min-count-value">{{ min_count }}</span>
                    </div>
                </label>
                <input type="hidden" name="min_count" id="min-count-hidden" value="{{ min_count }}">
            </div>

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

    <div id="tower-view">
        <div id="heatmap-layout">
            <div id="left-panel">
                {% for dafe in dafe_list %}
                    <div id="{{dafe}}_full_container"></div>
                {% endfor %}
            </div>

            <div id="side-panel">
                <h3 id="detail-title">Select a location</h3>

                <p><strong>Total:</strong> <span id="detail-total">—</span></p>
                <p><strong>Errors:</strong> <span id="detail-errors">—</span></p>
                <p><strong>Good:</strong> <span id="detail-good">—</span></p>
                <p><strong>Error Percent:</strong> <span id="detail-error-pct">—</span></p>

                <button id="detail-link" class="btn btn-danger" disabled>
                    View Error Fill Requests
                </button>
            </div>

            <div id="dafe-sidebar">
                <div class="sidebar-header">Towers</div>
                <div id="dafe-sidebar-list"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}