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

{% block head %}
{{ block.super }}
<script>
    const FILL_REQUEST_URL = "{% url 'support:support-fill-request-report' %}";
    const PILL_SIG_URL = "{% url 'support:support-pillsig-report' %}";
    const CANISTER_DETAIL_URL_TEMPLATE = "{% url 'site:canister-detail-info' 0 %}";
    let canister_data = {{ ndc_json|safe }};

    const STATUS_COLUMNS = {{ display_status_list|safe }};

    function format_status_label(status) {
        return status.split('_').map(function (word) {
            if (word.length === 0) {
                return word;
            }
            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
        }).join(' ');
    }

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

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

    function build_canister_detail_url(canister_id) {
        return CANISTER_DETAIL_URL_TEMPLATE.replace('/0/', '/' + canister_id + '/');
    }

    function format_datetime(value) {
        let d = new Date(value)

        return d.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })
    }

    function get_location_class(total, non_normal) {
        if (!total || total === 0) {
            return 'can-grey'
        }

        let bad_pct = (non_normal / total) * 100

        if (bad_pct > 5) {
            return 'can-red'
        }
        if (bad_pct >= 2) {
            return 'can-orange'
        }
        return 'can-blue'
    }

    function pct(count, total) {
        if (!total || total === 0) {
            return 0
        }
        return (count / total) * 100
    }

    function format_pct_cell(count, total) {
        if (!total || total === 0) {
            return '<td>—</td>'
        }
        let value = pct(count, total)
        let cls = ''
        if (value >= 2) {
            cls = 'error-pct-high'
        }
        return `<td class="${cls}">${value.toFixed(2)}%</td>`
    }

    function normal_cell_class(count, total) {
        if (!total || total === 0) {
            return ''
        }
        let normal_pct = pct(count, total)
        if (normal_pct < 95) {
            return 'normal-bad'
        }
        if (normal_pct < 98) {
            return 'normal-warn'
        }
        return 'normal-good'
    }

    function format_normal_cell(status_counts, total) {
        let count = status_counts['NORMAL'] || 0
        if (!total || total === 0) {
            return '<td>—</td>'
        }
        let cls = normal_cell_class(count, total)
        return `<td class="${cls}">${pct(count, total).toFixed(2)}%</td>`
    }

    function render_status_cells(status_counts, total) {
        let html = format_normal_cell(status_counts, total)
        STATUS_COLUMNS.forEach(function (status) {
            html += format_pct_cell(status_counts[status] || 0, total)
        })
        html += format_pct_cell(status_counts['OTHER'] || 0, total)
        return html
    }

    function render_tower_map_html(serial, tower) {
        let tower_data = canister_data[serial].towers[tower]
        let locations = tower_data.locations

        let html = ''

        for (let row of ['A', 'B', 'C', 'D', 'E']) {
            html += '<div class="map-row" style="white-space: nowrap">'

            for (let col = 1; col <= 12; col++) {
                let location = row + col
                let loc = locations[location]

                let total = loc ? loc.total : 0
                let non_normal = loc ? loc.non_normal : 0
                let oldest = loc ? loc.oldest_fill : null
                let newest = loc ? loc.newest_fill : null
                let cls = get_location_class(total, non_normal)

                html += `
                    <div class="canister col btn ${cls}"
                         data-location="${location}"
                         data-total="${total}"
                         data-non-normal="${non_normal}"
                         data-oldest="${oldest || ''}"
                         data-newest="${newest || ''}"
                         style="padding-left: 2px; padding-right: 2px; margin: 2px;">
                        <div class="name">${location}</div>
                        <i class="icon-white icon-2x"></i>
                    </div>
                `
            }

            html += '</div>'
        }

        return html
    }

    function render_canister_summary() {
        let rows = []

        $.each(canister_data, function (serial, data) {
            rows.push({
                serial: serial,
                canister_id: data.canister_id,
                current_display_drug_number: data.current_display_drug_number || '',
                current_drug_name: data.current_drug_name || '',
                total: data.total || 0,
                status_counts: data.status_counts,
                ndc_count: Object.keys(data.ndcs || {}).length
            })
        })

        rows.sort(function (a, b) {
            return b.total - a.total
        })

        let body = $('#canister-summary-body').empty()

        rows.forEach(function (row) {
            let ndc_button = `<button class="btn btn-small view-ndcs" data-serial="${row.serial}">NDCs (${row.ndc_count})</button>`

            let serial_cell = ''
            if (row.canister_id) {
                let url = build_canister_detail_url(row.canister_id)
                serial_cell = `<a href="${url}" title="Canister Details" target="_blank">${row.serial}</a>`
            } else {
                serial_cell = row.serial
            }

            body.append(`
                <tr>
                    <td>${serial_cell}</td>
                    <td>${row.current_display_drug_number}</td>
                    <td>${row.current_drug_name}</td>
                    <td>${row.total}</td>
                    ${render_status_cells(row.status_counts, row.total)}
                    <td>
                        <button class="btn btn-small view-towers" data-serial="${row.serial}">
                            Towers
                        </button>
                        ${ndc_button}
                    </td>
                </tr>
            `)
        })
    }

    function render_tower_view(serial) {
        let towers = []

        $.each(canister_data[serial].towers, function (tower, data) {
            towers.push({
                tower: tower,
                total: data.total,
                status_counts: data.status_counts
            })
        })

        towers.sort(function (a, b) {
            return b.total - a.total
        })

        let header_cells = '<th>Normal %</th>'
        STATUS_COLUMNS.forEach(function (status) {
            header_cells += `<th>${format_status_label(status)}</th>`
        })
        header_cells += '<th>Other</th>'

        let html = `
            <table class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>Tower</th>
                        <th>Total Fills</th>
                        ${header_cells}
                        <th>View</th>
                    </tr>
                </thead>
                <tbody>
        `

        let colspan = 4 + STATUS_COLUMNS.length
        towers.forEach(function (t) {
            html += `
                <tr class="tower-row">
                    <td>${t.tower}</td>
                    <td>${t.total}</td>
                    ${render_status_cells(t.status_counts, t.total)}
                    <td>
                        <button class="btn btn-small toggle-tower-map"
                                data-serial="${serial}"
                                data-tower="${t.tower}">
                            Map
                        </button>
                    </td>
                </tr>
                <tr class="tower-map-row" style="display:none;">
                    <td colspan="${colspan}">
                        <div class="tower-map-layout">
                            <div class="tower-map-container"></div>

                            <div class="location-detail empty">
                                <div class="location-detail-title">
                                    Select a location
                                </div>

                                <div class="location-detail-body">
                                    <div>Total Runs: —</div>
                                    <div>Normal Runs: —</div>
                                    <div>Error Runs: —</div>
                                    <div>Error Rate: —</div>
                                </div>
                            </div>
                        </div>
                        <div class="tower-map-controls">
                            <label>
                                Min runs:
                                <input
                                    type="range"
                                    class="min-runs-slider"
                                    min="1"
                                    step="1"
                                >
                                <span class="min-runs-value"></span>
                            </label>
                        </div>
                    </td>
                </tr>
            `
        })

        html += '</tbody></table>'
        return html
    }

    function render_ndc_view(serial) {
        let ndcs = []

        $.each(canister_data[serial].ndcs, function (_, data) {
            ndcs.push({
                display_drug_number: data.display_drug_number,
                drug_name: data.drug_name,
                total: data.total,
                status_counts: data.status_counts
            })
        })

        ndcs.sort(function (a, b) {
            return b.total - a.total
        })

        let header_cells = '<th>Normal %</th>'
        STATUS_COLUMNS.forEach(function (status) {
            header_cells += `<th>${format_status_label(status)}</th>`
        })
        header_cells += '<th>Other</th>'

        let html = `
            <table class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>NDC</th>
                        <th>Drug</th>
                        <th>Total Fills</th>
                        ${header_cells}
                    </tr>
                </thead>
                <tbody>
        `

        ndcs.forEach(function (n) {
            html += `
                <tr>
                    <td>${n.display_drug_number}</td>
                    <td>${n.drug_name}</td>
                    <td>${n.total}</td>
                    ${render_status_cells(n.status_counts, n.total)}
                </tr>
            `
        })

        html += '</tbody></table>'
        return html
    }

    function reset_location_detail(scope) {
        scope.find('.location-detail')
            .addClass('empty')
            .find('.location-detail-title')
            .text('Select a location')

        scope.find('.location-detail-body').html(`
            <div>Total Runs: —</div>
            <div>Normal Runs: —</div>
            <div>Error Runs: —</div>
            <div>Error Rate: —</div>
        `)
    }

    function open_modal(title, html) {
        $('#ndc-modal-title').text(title)
        $('#ndc-modal-body').html(html)
        $('#ndc-modal').removeClass('hidden')
    }

    function close_modal() {
        $('#ndc-modal').addClass('hidden')
        $('#ndc-modal-body').empty()
    }

    function get_cell_value(row, index) {
        return $(row).children('td').eq(index).text().trim()
    }

    function compare_values(a, b, is_numeric, asc) {
        if (is_numeric) {
            a = parseFloat(a.replace('%', '')) || 0
            b = parseFloat(b.replace('%', '')) || 0
        }
        if (a < b) {
            return asc ? -1 : 1
        }
        if (a > b) {
            return asc ? 1 : -1
        }
        return 0
    }


    $(function () {
        let table = $('#canister-app table')
        let tbody = table.find('tbody')

        // ---------- SORTING ----------
        table.find('th.sortable').each(function (index) {
            let th = $(this)
            th.data('asc', false)

            th.on('click', function () {
                let asc = !th.data('asc')
                th.data('asc', asc)

                table.find('.sort-indicator').text('')
                th.find('.sort-indicator').text(asc ? ' ▲' : ' ▼')

                let rows = tbody.find('tr').get()
                let is_numeric = index >= 3

                rows.sort(function (a, b) {
                    let a_val = get_cell_value(a, index)
                    let b_val = get_cell_value(b, index)
                    return compare_values(a_val, b_val, is_numeric, asc)
                })

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

        // ---------- COLUMN SEARCH ----------
        table.find('.queue-col-search').on('input', function () {
            let inputs = table.find('.queue-col-search')

            tbody.find('tr').each(function () {
                let row = $(this)
                let visible = true

                inputs.each(function (index) {
                    let input = $(this)
                    let value = input.val()
                    if (!value) {
                        return
                    }

                    let cell_text = row.children('td').eq(index).text().trim()

                    // special logic for total column
                    if (input.data('compare') === 'gt') {
                        let threshold = parseFloat(value)
                        let cell_number = parseFloat(cell_text)
                        if (isNaN(threshold) || isNaN(cell_number) || cell_number <= threshold) {
                            visible = false
                        }
                    } else {
                        if (!cell_text.toLowerCase().includes(value.toLowerCase())) {
                            visible = false
                        }
                    }
                })

                row.toggle(visible)
            })
        })

        render_canister_summary()

        $(document).on('click', '.view-towers', function () {
            let serial = $(this).data('serial')
            let html = render_tower_view(serial)
            open_modal(`Canister ${serial} : Towers`, html)
        })

        $(document).on('click', '.view-ndcs', function () {
            let serial = $(this).data('serial')
            let html = render_ndc_view(serial)
            open_modal(`Canister ${serial} : NDCs`, html)
        })

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

            let tower_row = btn.closest('tr')
            let map_row = tower_row.next('.tower-map-row')
            let container = map_row.find('.tower-map-container')

            if (map_row.is(':visible')) {
                map_row.hide()
                container.empty()
                return
            }

            $('.tower-map-row').hide().find('.tower-map-container').empty()

            container.html(render_tower_map_html(serial, tower))
            map_row.attr('data-serial', serial).attr('data-tower', tower)

            let max_total = 1
            container.find('.canister').each(function () {
                let total = Number($(this).data('total')) || 0
                if (total > max_total) {
                    max_total = total
                }
            })
            let slider = map_row.find('.min-runs-slider')
            let default_min = Number($('#min-count').val()) || 1
            let initial_value = default_min > max_total
                ? max_total
                : default_min

            slider.attr('max', max_total).val(initial_value)
            map_row.find('.min-runs-value').text(initial_value)
            slider.trigger('change')

            reset_location_detail(map_row)
            map_row.show()
        })

        $('.day-filter-btn').on('click', function () {
            let days = $(this).data('days')
            $('#days-input').val(days)
            $('.day-filter-btn').removeClass('active')
            $(this).addClass('active')
        })

        $('#ndc-modal-close').on('click', close_modal)
        $('.ndc-modal-backdrop').on('click', close_modal)
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape') {
                close_modal()
            }
        })

        $(document).on('click', '.canister', function () {
            let canister = $(this)
            let map_row = canister.closest('.tower-map-row')
            map_row.find('.canister').css('box-shadow', 'none')

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

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

            let location = canister.data('location')
            let total = Number(canister.data('total')) || 0
            let non_normal = Number(canister.data('non-normal')) || 0
            let normal = total - non_normal
            let bad_pct = total > 0 ? (non_normal / total) * 100 : 0
            let oldest = format_datetime(canister.data('oldest'))
            let newest = format_datetime(canister.data('newest'))

            let serial = map_row.data('serial')
            let tower = map_row.data('tower')

            let days = Number($('#days-input').val()) || 0
            let dafe_id = canister_data[serial].towers[tower].dafe_id

            let base_params = {
                clear_filters: 'true',
                dafe_id: dafe_id,
                location: location,
                canister_serial: serial,
                days: days
            }

            let url = build_fill_request_url(base_params)
            let url_not_normal = build_fill_request_url({
                ...base_params,
                fill_status: 'NOT_NORMAL'
            })
            let url_pill_sig = build_pill_sig_url({
                clear_filters: 'true',
                dafe_id: dafe_id,
                canister_serial: serial
            })

            let detail = map_row.find('.location-detail')
            detail.removeClass('empty')
            detail.find('.location-detail-title').text(`Location ${location} – Canister ${serial}`)

            detail.find('.location-detail-body').html(`
                <div>Total Runs: ${total}</div>
                <div>Normal Runs: ${normal}</div>
                <div>Error Runs: ${non_normal}</div>
                <div>Error Rate: ${bad_pct.toFixed(2)}%</div>
                <div>Oldest Fill: ${oldest}</div>
                <div>Newest Fill: ${newest}</div>

                <div style="margin-top: 12px;">
                    <a href="${url}" class="btn btn-small btn-primary" target="_blank">
                        View Fill Requests
                    </a>
                </div>
                <div style="margin-top: 8px;">
                    <a href="${url_not_normal}" class="btn btn-small btn-danger" target="_blank">
                        View Error Fill Requests
                    </a>
                </div>
                <div style="margin-top: 8px;">
                    <a href="${url_pill_sig}" class="btn btn-small btn-primary" target="_blank">
                        View Pill Sigs
                    </a>
                </div>
            `)
        })

        $(document).on('input change', '.min-runs-slider', function () {
            let slider = $(this)
            let min_runs = Number(slider.val())
            let scope = slider.closest('.tower-map-row')

            slider.closest('.tower-map-controls')
                .find('.min-runs-value')
                .text(min_runs)

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

                if (canister.hasClass('can-grey')) {
                    canister.css('opacity', '1')
                    return
                }

                let total = Number(canister.data('total')) || 0
                if (total < min_runs) {
                    canister.css('opacity', '0.40')
                } else {
                    canister.css('opacity', '1')
                }
            })
        })
    });
</script>

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

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

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

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

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

    .count-filter input {
        width: 72px;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
    }

    /* Normal % cell coloring */
    td.normal-good {
        background-color: #d1fae5;
    }

    td.normal-warn {
        background-color: #fef3c7;
    }

    td.normal-bad {
        background-color: #fecaca;
    }

    .table-striped tbody > tr > td.normal-good {
        background-color: #d1fae5;
    }
    .table-striped tbody > tr > td.normal-warn {
        background-color: #fef3c7;
    }
    .table-striped tbody > tr > td.normal-bad {
        background-color: #fecaca;
    }

    .table-striped tbody > tr > td.error-pct-high {
        font-weight: bold;
    }

    .ndc-modal.hidden {
        display: none;
    }

    .ndc-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .ndc-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .ndc-modal-content {
        position: relative;
        background: #ffffff;
        width: 95%;
        max-width: 1600px;
        max-height: 90vh;
        margin: 5vh auto;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ndc-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .ndc-modal table {
        table-layout: auto;
        width: 100%;
    }

    .ndc-modal thead {
        position: relative;
        z-index: 2;
    }

    .ndc-modal tbody {
        position: relative;
        z-index: 1;
    }

    #ndc-modal-body {
        padding: 0 16px 16px;
        overflow-y: auto;
    }

    .tower-map-layout {
        display: flex;
        gap: 24px;
        justify-content: center;
    }

    .location-detail {
        min-width: 260px;
        padding: 12px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        font-size: 13px;
    }

    .location-detail.empty {
        opacity: 0.6;
    }

    .location-detail-title {
        font-weight: 600;
        margin-bottom: 10px;
    }

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

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

    #report-table thead tr th input.queue-col-search {
        width: 90%;
        margin: 0;
        border-radius: 15px;
        padding: 4px 4px 4px 8px;
    }

    .queue-col-search:focus {
        outline: none;
        border-color: #ffffff;
        background-color: #ffffff;
    }

    .queue-col-search::placeholder {
        color: rgba(0, 0, 0, 0.4);
    }
</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>
                    Default Slider Value
                    <input id="min-count" type="number" name="min_count" min="1" step="1" value="{{ min_count }}">
                </label>
            </div>

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

    <div id="canister-app">
        <table id="report-table" class="table table-bordered table-striped">
            <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    <th class="sortable">Canister<span class="sort-indicator"></span></th>
                    <th class="sortable">Drug Number<span class="sort-indicator"></span></th>
                    <th class="sortable">Drug Name<span class="sort-indicator"></span></th>
                    <th class="sortable">Total<span class="sort-indicator"></span></th>
                    <th class="sortable">Normal %<span class="sort-indicator"></span></th>
                    {% for status in display_status_list %}
                        <th class="sortable">{{ status|normalize_header }}<span class="sort-indicator"></span></th>
                    {% endfor %}
                    <th class="sortable">Other<span class="sort-indicator"></span></th>
                    <th>View</th>
                </tr>
                <tr class="dosis-report-header">
                    <th><input type="text" class="queue-col-search"></th>
                    <th><input type="text" class="queue-col-search"></th>
                    <th><input type="text" class="queue-col-search"></th>
                    <th><input type="number" class="queue-col-search" data-compare="gt" placeholder="> than"></th>
                    <th></th>
                    {% for status in display_status_list %}
                        <th></th>
                    {% endfor %}
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="canister-summary-body"></tbody>
        </table>
    </div>
</div>

<div id="ndc-modal" class="ndc-modal hidden">
    <div class="ndc-modal-backdrop"></div>

    <div class="ndc-modal-content">
        <div class="ndc-modal-header">
            <h4 id="ndc-modal-title"></h4>
            <button type="button" id="ndc-modal-close" class="btn btn-small">
                ✕
            </button>
        </div>

        <div id="ndc-modal-body"></div>
    </div>
</div>

{% endblock %}