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

{% block head %}
{{ block.super }}
<script>
    let tower_location_data_by_status = {{ tower_location_data|safe }};
    let canister_failure_data_by_status = {{ canister_failure_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 = []
    let current_status = null

    function get_current_tower_data() {
        return tower_location_data_by_status[current_status] || {}
    }

    function get_current_canister_data() {
        return canister_failure_data_by_status[current_status] || {}
    }

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

    function sort_table(table, col_idx, asc) {
        let tbody = table.find('tbody')
        let rows = tbody.find('tr').get()

        rows.sort(function (a, b) {
            let first_value = $(a).children('td').eq(col_idx).text().trim()
            let second_value = $(b).children('td').eq(col_idx).text().trim()

            let first_number = parseFloat(first_value)
            let second_number = parseFloat(second_value)

            if (!isNaN(first_number) && !isNaN(second_number)) {
                if (asc) {
                    return first_number - second_number
                }
                return second_number - first_number
            }

            if (asc) {
                return first_value.localeCompare(second_value)
            }
            return second_value.localeCompare(first_value)
        })

        $.each(rows, function (_, row) {
            tbody.append(row)
        })
    }

    function render_canister_homing_table(canister_failure_data, dafe_list) {
        let html = `
            <table id="canister_homing_failures" class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th class="sortable" data-col="0">Canister<span class="sort-indicator"></span></th>
                        <th class="sortable" data-col="1"># Towers<span class="sort-indicator"></span></th>
                        <th class="sortable" data-col="2">Total Failures<span class="sort-indicator"></span></th>
        `

        dafe_list.forEach(function (dafe, idx) {
            html += `<th class="sortable" data-col="${idx + 3}">Locations in ${dafe}<span class="sort-indicator"></span></th>`
        })

        html += `<th><i class="icon-th-list"></i></th>
                    </tr>
                </thead>
                <tbody>
        `

        Object.keys(canister_failure_data).forEach(function (serial) {
            let days = Number($('#days-input').val()) || 0
            let base_params = {
                clear_filters: 'true',
                days: days,
                canister_serial: serial,
                fill_status: current_status
            }
            let url = build_fill_request_url(base_params)

            let entry = canister_failure_data[serial]
            let towers = entry.towers || {}
            let total_failures = entry.total_failures || 0
            let tower_count = Object.keys(towers).length

            html += `
                <tr>
                    <td>${serial}</td>
                    <td>${tower_count}</td>
                    <td>${total_failures}</td>
            `

            dafe_list.forEach(function (dafe) {
                let locations = towers[dafe]?.locations || {}
                let location_count = Object.keys(locations).length

                html += `<td>${location_count || ''}</td>`
            })

            html += `<td><a href="${url}" class="btn btn-small btn-link" target="_blank"><i class="icon-list"></i></a></td>`
            html += `</tr>`
        })

        html += `
                </tbody>
            </table>
        `

        return html
    }

    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_homing_maps(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 dafe_id = tower_location_data[dafe].dafe_id || {}
            let container = $('#' + dafe + '_full_container')
            container.empty()

            let total_failures = tower_location_data[dafe].total_failures || 0
            let html = `
                <div id="${dafe}_map_wrapper">
                    <div class="map_container">
                        <h2 id="map_header___${dafe}">
                            ${dafe} (${total_failures})
                        </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 count = Number(locations[location]) || 0
                    let is_red = count > 0
                    let cls = is_red ? 'can-red' : 'can-grey'

                    let days = Number($('#days-input').val()) || 0
                    let base_params = {
                        clear_filters: 'true',
                        days: days,
                        location: location,
                        fill_status: current_status,
                        dafe_id: dafe_id
                    }
                    let url = build_fill_request_url(base_params)

                    let canister_html = `
                        <div class="canister col btn ${cls}"
                             data-dafe="${dafe}"
                             data-location="${location}"
                             data-count="${count}"
                             style="margin:2px;">
                            <div class="name">${location}</div>
                            ${count > 0 ? `<div class="canister-count">${count}</div>` : ''}
                            <i class="icon-white icon-2x"></i>
                        </div>
                    `

                    if (is_red) {
                        html += `<a href="${url}" target="_blank" style="text-decoration:none;">${canister_html}</a>`
                    } else {
                        html += canister_html
                    }
                }

                html += `</div>`
            })

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

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

        dafe_keys.forEach(function (dafe) {
            let total_failures = tower_location_data[dafe].total_failures || 0
            let failure_class = total_failures > 0 ? 'has-failures' : ''
            html += `
                <div class="sidebar-dafe-item ${failure_class}" data-dafe="${dafe}">
                    <span class="sidebar-dafe-name">${dafe}</span>
                    <span class="sidebar-dafe-count">${total_failures}</span>
                </div>
            `
        })

        $('#dafe-sidebar-list').html(html)
    }

    function init_dafe_visibility() {
        dafe_list = sorted_dafe_keys(get_current_tower_data())

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

        // mark first sidebar item as active
        $('#dafe-sidebar-list .sidebar-dafe-item').first().addClass('active')
    }

    function render_canister_table_for_current_status() {
        let canister_data = get_current_canister_data()

        $('#canister-view').html(
            render_canister_homing_table(canister_data, dafe_list)
        )

        let table = $('#canister_homing_failures')
        let total_failures_th = table.find('th[data-col="2"]')

        total_failures_th
            .addClass('sorted-desc')
            .find('.sort-indicator')
            .text(' ▼')

        sort_table(table, 2, false)
    }

    function render_all_for_current_status() {
        let tower_data = get_current_tower_data()

        // reset every container so stale maps from a prior status are cleared
        $('div[id$="_full_container"]').empty().hide()

        render_tower_homing_maps(tower_data)
        render_dafe_sidebar(tower_data)
        init_dafe_visibility()

        // show only the first dafe's container
        dafe_list.forEach(function (dafe, idx) {
            if (idx === 0) {
                $('#' + dafe + '_full_container').show()
            }
        })

        render_canister_table_for_current_status()
    }

    function update_selected_status_header() {
        let tower_data = get_current_tower_data()
        let total = 0

        Object.keys(tower_data).forEach(function (dafe) {
            total += Number(tower_data[dafe].total_failures) || 0
        })

        $('#selected-status-label').text(current_status)
        $('#selected-status-total').text('(' + total + ' total)')
    }

    $(function () {
        // default to the first status that has errors; fall back to the very
        // first status if every status is at zero
        let first_with_errors = $('.status-filter-btn').not('.zero-count').first()
        let default_btn = first_with_errors.length ? first_with_errors : $('.status-filter-btn').first()

        current_status = default_btn.data('status')
        default_btn.addClass('active')

        $('.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;
        });

        render_all_for_current_status()
        update_selected_status_header()

        $('#toggle-zero-statuses').on('click', function () {
            let list = $('#status-sidebar-list')
            let now_hidden = list.toggleClass('hide-zero').hasClass('hide-zero')

            if (now_hidden) {
                $(this).text('Show items with no errors')
            } else {
                $(this).text('Hide items with no errors')
            }
        })

        $(document).on('click', '.status-filter-btn', function () {
            current_status = $(this).data('status')

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

            render_all_for_current_status()
            update_selected_status_header()
        })

        $(document).on('click', '.view-toggle-btn', function () {
            let view = $(this).data('view')

            $('.view-toggle-btn').removeClass('active')
            $(this).addClass('active')

            if (view === 'towers') {
                $('#tower-view').show()
                $('#dafe-sidebar').show()
                $('#canister-view').hide()
            } else {
                $('#tower-view').hide()
                $('#dafe-sidebar').hide()
                $('#canister-view').show()
            }
        })

        $(document).on('click', '#canister_homing_failures th.sortable', function () {
            let th = $(this)
            let table = th.closest('table')
            let col_idx = Number(th.data('col'))

            let asc = !th.hasClass('sorted-asc')

            table.find('th.sortable')
                .removeClass('sorted-asc sorted-desc')
                .find('.sort-indicator')
                .text('')

            th.addClass(asc ? 'sorted-asc' : 'sorted-desc')
            th.find('.sort-indicator').text(asc ? ' ▲' : ' ▼')

            sort_table(table, col_idx, asc)
        })

        $(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()
        })
    });
</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);
    }

    /* shared two-column layout: status rail + content */
    #report-body {
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }

    #report-content {
        flex: 1;
        min-width: 0;
    }

    /* error-type selector (vertical left sidebar) */
    #status-sidebar {
        width: 360px;
        flex-shrink: 0;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f9fafb;
        overflow: hidden;
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        display: flex;
        flex-direction: column;
    }

    #status-sidebar-list {
        overflow-y: auto;
    }

    .status-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .toggle-zero-btn {
        font-size: 11px;
        font-weight: 500;
        padding: 3px 10px;
        border: 1px solid #d1d5db;
        border-radius: 999px;
        background: #ffffff;
        color: #4f46e5;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .toggle-zero-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    /* when the list is in hide-zero mode, drop zero-count rows */
    #status-sidebar-list.hide-zero .status-filter-btn.zero-count {
        display: none;
    }

    /* selected-status header above the views */
    #selected-status-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 10px 16px;
        margin-bottom: 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        border-left: 4px solid #4f46e5;
    }

    #selected-status-label {
        font-size: 15px;
        font-weight: 700;
        color: #374151;
        letter-spacing: 0.02em;
    }

    #selected-status-total {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
    }

    .status-filter-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: left;
        padding: 8px 14px;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.1s ease;
    }

    .status-filter-btn:hover {
        background: #eef2ff;
    }

    .status-filter-btn.active {
        background: #4f46e5;
        color: #ffffff;
    }

    .status-filter-count {
        margin-left: 8px;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: #e5e7eb;
        color: #6b7280;
    }

    .status-filter-btn.has-failures .status-filter-count {
        background: #fee2e2;
        color: #dc2626;
    }

    .status-filter-btn.active .status-filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    .view-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding-left: 12px;
        margin-left: 8px;
        border-left: 1px solid #e5e7eb;
    }

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

    .view-toggle-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

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

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

    /* Canister map stuff */
    #homing-wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

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

    #dafe-sidebar {
        width: 200px;
        flex-shrink: 0;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f9fafb;
        overflow: hidden;
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        display: flex;
        flex-direction: column;
    }

    #dafe-sidebar-list {
        overflow-y: auto;
    }

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

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

    /* header */
    h2[id^="map_header_"] {
        position: relative;
        user-select: none;
    }

    .canister {
        user-select: none;
    }

    .canister-count {
        margin-top: 14px;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        pointer-events: none;
    }

    th.sortable {
        cursor: pointer;
        user-select: none;
    }

    .sort-indicator {
        margin-left: 4px;
        font-size: 11px;
    }

    .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-count {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

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

    .sidebar-dafe-count {
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: #e5e7eb;
        color: #6b7280;
    }

    .sidebar-dafe-item.has-failures .sidebar-dafe-count {
        background: #fee2e2;
        color: #dc2626;
    }

    div[id$="_full_container"] {
        display: flex;
        justify-content: center;
    }
</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="view-toggle">
                <button type="button"
                        class="btn btn-small view-toggle-btn active"
                        data-view="towers">
                    Towers
                </button>
                <button type="button"
                        class="btn btn-small view-toggle-btn"
                        data-view="canisters">
                    Canisters
                </button>
            </div>

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

    <div id="report-body">
        <div id="status-sidebar">
            <div class="sidebar-header status-sidebar-header">
                <span>Error Type</span>
                <button type="button" id="toggle-zero-statuses" class="toggle-zero-btn">Show items with no errors</button>
            </div>
            <div id="status-sidebar-list" class="hide-zero">
                {% for status in status_options %}
                    <button type="button" class="status-filter-btn{% if status.count > 0 %} has-failures{% else %} zero-count{% endif %}" data-status="{{ status.tag }}">
                        <span class="status-filter-name">{{ status.tag }}</span>
                        <span class="status-filter-count">{{ status.count }}</span>
                    </button>
                {% endfor %}
            </div>
        </div>

        <div id="report-content">
            <div id="selected-status-header">
                <span id="selected-status-label"></span>
                <span id="selected-status-total"></span>
            </div>

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

            <div id="canister-view" style="display:none;"></div>
        </div>

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