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

{% block head %}
{{ block.super }}
<script>
    let canister_data = {{ canister_json|safe }};
    let num_intervals = {{ num_intervals }};
    let interval_labels = {{ interval_labels|safe }};
    let min_count = {{ min_count }};

    const CANISTER_DETAIL_URL_TEMPLATE = "{% url 'site:canister-detail-info' 0 %}";

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

    function error_rate_class(rate) {
        if (rate >= 10) {
            return 'rate-bad';
        }
        if (rate >= 5) {
            return 'rate-warn';
        }
        return 'rate-good';
    }

    function change_class(change_value) {
        if (change_value < -1 || change_value > 3) {
            return 'change-notable';
        }
        return '';
    }

    function render_table() {
        let rows = [];

        $.each(canister_data, function (serial, data) {
            let below_threshold = false;
            data.intervals.forEach(function (interval) {
                if (interval.total < min_count) {
                    below_threshold = true;
                }
            });

            if (below_threshold) {
                return;
            }

            let total_all = 0;
            let non_normal_all = 0;

            data.intervals.forEach(function (interval) {
                total_all += interval.total;
                non_normal_all += interval.non_normal;
            });

            let trend = 0;
            if (data.intervals.length >= 2) {
                let first_rate = data.intervals[0].error_rate;
                let last_rate = data.intervals[data.intervals.length - 1].error_rate;
                trend = last_rate - first_rate;
            }

            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 || '',
                intervals: data.intervals,
                total_all: total_all,
                trend: trend,
                ndc_count: Object.keys(data.ndcs || {}).length
            });
        });

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

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

        rows.forEach(function (row) {
            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;
            }

            let interval_cells = '';
            row.intervals.forEach(function (interval, index) {
                let rate_cls = '';
                let rate_display = '—';
                if (interval.total > 0) {
                    rate_cls = error_rate_class(interval.error_rate);
                    rate_display = interval.error_rate.toFixed(2) + '%';
                }

                interval_cells += `<td>${interval.total}</td>`;
                interval_cells += `<td class="${rate_cls}">${rate_display}</td>`;

                if (index === 0) {
                    interval_cells += '<td>—</td>';
                } else {
                    let prev_rate = row.intervals[index - 1].error_rate;
                    let curr_rate = interval.error_rate;
                    let prev_total = row.intervals[index - 1].total;

                    if (interval.total === 0 || prev_total === 0) {
                        interval_cells += '<td>—</td>';
                    } else {
                        let change_value = curr_rate - prev_rate;
                        let cls = change_class(change_value);
                        let sign = change_value > 0 ? '+' : '';
                        interval_cells += `<td class="${cls}">${sign}${change_value.toFixed(2)}%</td>`;
                    }
                }
            });

            let trend_cls = '';
            if (row.trend < -3) {
                trend_cls = 'trend-improving';
            } else if (row.trend > 5) {
                trend_cls = 'trend-worsening';
            }
            let trend_sign = row.trend > 0 ? '+' : '';
            let trend_display = row.total_all > 0 ? `${trend_sign}${row.trend.toFixed(2)}%` : '—';

            let ndc_cell = '';
            if (row.ndc_count > 1) {
                ndc_cell = `<td><div class="ndc-cell-content"><span>${row.ndc_count}</span><button class="ndc-view-btn view-ndcs" data-serial="${row.serial}">View</button></div></td>`;
            } else {
                ndc_cell = `<td>${row.ndc_count}</td>`;
            }

            body.append(`
                <tr>
                    <td>${serial_cell}</td>
                    <td>${row.current_display_drug_number}</td>
                    <td>${row.current_drug_name}</td>
                    ${ndc_cell}
                    ${interval_cells}
                    <td class="${trend_cls}">${trend_display}</td>
                </tr>
            `);
        });
    }

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

    function parse_sort_value(text) {
        if (!text || text === '—') {
            return -Infinity;
        }
        return parseFloat(text.replace('%', '').replace('+', '')) || 0;
    }

    function compare_values(a, b, is_numeric, asc) {
        if (is_numeric) {
            a = parse_sort_value(a);
            b = parse_sort_value(b);
        }
        if (a < b) {
            return asc ? -1 : 1;
        }
        if (a > b) {
            return asc ? 1 : -1;
        }
        return 0;
    }

    function format_datetime(value) {
        if (!value) {
            return '—';
        }
        let d = new Date(value);
        return d.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    }

    function render_ndc_modal(serial) {
        let data = canister_data[serial];
        let ndcs = [];

        $.each(data.ndcs, function (key, ndc) {
            ndcs.push(ndc);
        });

        ndcs.sort(function (a, b) {
            let a_total = 0;
            let b_total = 0;
            a.intervals.forEach(function (interval) { a_total += interval.total; });
            b.intervals.forEach(function (interval) { b_total += interval.total; });
            return b_total - a_total;
        });

        let interval_headers = '';
        interval_labels.forEach(function (label) {
            interval_headers += `<th colspan="2" style="text-align: center;">${label} days ago</th>`;
        });

        let interval_sub_headers = '';
        interval_labels.forEach(function () {
            interval_sub_headers += '<th>Total</th><th>Error %</th>';
        });

        let html = `
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th rowspan="2">Drug Number</th>
                        <th rowspan="2">Drug Name</th>
                        <th rowspan="2">First Seen</th>
                        <th rowspan="2">Last Seen</th>
                        ${interval_headers}
                    </tr>
                    <tr class="dosis-report-header">
                        ${interval_sub_headers}
                    </tr>
                </thead>
                <tbody>
        `;

        let summary_cells = '';
        data.intervals.forEach(function (interval) {
            let rate_cls = '';
            let rate_display = '—';
            if (interval.total > 0) {
                rate_cls = error_rate_class(interval.error_rate);
                rate_display = interval.error_rate.toFixed(2) + '%';
            }
            summary_cells += `<td><strong>${interval.total}</strong></td>`;
            summary_cells += `<td class="${rate_cls}"><strong>${rate_display}</strong></td>`;
        });

        html += `
            <tr style="background-color: #f0f4f8;">
                <td><strong>ALL</strong></td>
                <td><strong>Combined Total</strong></td>
                <td></td>
                <td></td>
                ${summary_cells}
            </tr>
        `;

        ndcs.forEach(function (ndc) {
            let interval_cells = '';
            ndc.intervals.forEach(function (interval) {
                let rate_cls = '';
                let rate_display = '—';
                if (interval.total > 0) {
                    rate_cls = error_rate_class(interval.error_rate);
                    rate_display = interval.error_rate.toFixed(2) + '%';
                }
                interval_cells += `<td>${interval.total}</td>`;
                interval_cells += `<td class="${rate_cls}">${rate_display}</td>`;
            });

            html += `
                <tr>
                    <td>${ndc.display_drug_number}</td>
                    <td>${ndc.drug_name}</td>
                    <td>${format_datetime(ndc.first_seen)}</td>
                    <td>${format_datetime(ndc.last_seen)}</td>
                    ${interval_cells}
                </tr>
            `;
        });

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

    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 () {
        let table = $('#report-table');
        let tbody = table.find('tbody');

        function get_header_col_index(th) {
            let col_index = 0;

            th.prevAll('th').each(function () {
                col_index += parseInt($(this).attr('colspan')) || 1;
            });

            if (th.closest('tr').index() === 1) {
                col_index += 4;
            }

            return col_index;
        }

        function apply_all_filters() {
            let inputs = table.find('.queue-col-search');
            let ndc_filter = $('.ndc-filter-btn.active').data('ndc-filter') || 'all';

            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();

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

                if (visible && ndc_filter !== 'all') {
                    let ndc_text = row.children('td').eq(3).text().trim();
                    let ndc_value = parseInt(ndc_text) || 0;
                    if (ndc_filter === 'single') {
                        visible = (ndc_value <= 1);
                    } else if (ndc_filter === 'multi') {
                        visible = (ndc_value > 1);
                    }
                }

                row.toggle(visible);
            });
        }

        table.find('th.sortable').each(function () {
            let th = $(this);
            let col_index = get_header_col_index(th);

            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();

                rows.sort(function (a, b) {
                    let a_val = get_cell_value(a, col_index);
                    let b_val = get_cell_value(b, col_index);
                    return compare_values(a_val, b_val, col_index >= 3, asc);
                });

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

        table.find('.queue-col-search').on('input', function () {
            apply_all_filters();
        });

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

        $(document).on('click', '.view-ndcs', function () {
            let serial = $(this).data('serial');
            let html = render_ndc_modal(serial);
            open_modal('Canister ' + serial + ' : NDC History', html);
        });

        $('#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', '.ndc-filter-btn', function () {
            let btn = $(this);
            $('.ndc-filter-btn').removeClass('active');
            btn.addClass('active');
            apply_all_filters();
        });

        render_table();

        let trend_th = table.find('thead tr').first().find('th.sortable').last();
        trend_th.data('asc', false);
        trend_th.find('.sort-indicator').text(' ▼');
    });
</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);
    }

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

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

    td.rate-good {
        background-color: #d1fae5;
    }

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

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

    td.change-notable {
        font-weight: bold;
    }

    .table-striped tbody > tr > td.rate-good {
        background-color: #d1fae5;
    }

    .table-striped tbody > tr > td.rate-warn {
        background-color: #fef3c7;
    }

    .table-striped tbody > tr > td.rate-bad {
        background-color: #fecaca;
    }

    .table-striped tbody > tr > td.change-notable {
        font-weight: bold;
    }

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

    td.trend-improving {
        background-color: #d1fae5;
        font-weight: bold;
    }

    td.trend-worsening {
        background-color: #fecaca;
        font-weight: bold;
    }

    .table-striped tbody > tr > td.trend-improving {
        background-color: #d1fae5;
    }

    .table-striped tbody > tr > td.trend-worsening {
        background-color: #fecaca;
    }

    .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-body {
        padding: 0 16px 16px;
        overflow-y: auto;
    }

    .ndc-filter-btns {
        display: inline-flex;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #d1d5db;
    }

    .ndc-filter-btn {
        padding: 2px 7px;
        font-size: 10px;
        border: none;
        border-right: 1px solid #d1d5db;
        border-radius: 0;
        background: #ffffff;
        color: #374151;
        cursor: pointer;
        margin: 0;
    }

    .ndc-filter-btn:last-child {
        border-right: none;
    }

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

    .ndc-cell-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .ndc-view-btn {
        padding: 1px 8px;
        font-size: 11px;
        border-radius: 4px;
        border: 1px solid #0096c3;
        background: #ffffff;
        color: #0096c3;
        cursor: pointer;
        white-space: nowrap;
    }

    .ndc-view-btn:hover {
        background: #0096c3;
        color: #ffffff;
    }
</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>
                    Min Total Per Interval
                    <input id="min-count" type="number" name="min_count" min="0" 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 rowspan="2" class="sortable">Canister<span class="sort-indicator"></span></th>
                    <th rowspan="2" class="sortable">Drug Number<span class="sort-indicator"></span></th>
                    <th rowspan="2" class="sortable">Drug Name<span class="sort-indicator"></span></th>
                    <th rowspan="2" class="sortable">NDCs<span class="sort-indicator"></span></th>
                    {% for label in interval_labels %}
                        <th colspan="3" style="text-align: center;">{{ label }} days ago</th>
                    {% endfor %}
                    <th rowspan="2" class="sortable">Trend<span class="sort-indicator"></span></th>
                </tr>
                <tr class="dosis-report-header">
                    {% for label in interval_labels %}
                        <th class="sortable">Total<span class="sort-indicator"></span></th>
                        <th class="sortable">Error %<span class="sort-indicator"></span></th>
                        <th class="sortable">Δ<span class="sort-indicator"></span></th>
                    {% endfor %}
                </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>
                        <div class="ndc-filter-btns">
                            <button type="button" class="btn btn-small ndc-filter-btn active" data-ndc-filter="all">All</button>
                            <button type="button" class="btn btn-small ndc-filter-btn" data-ndc-filter="single">= 1</button>
                            <button type="button" class="btn btn-small ndc-filter-btn" data-ndc-filter="multi">> 1</button>
                        </div>
                    </th>
                    {% for label in interval_labels %}
                        <th></th>
                        <th></th>
                        <th></th>
                    {% endfor %}
                    <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 %}