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

{% block head %}
{{ block.super }}
<script>
    const PILL_SIG_URL = "{% url 'support:support-pillsig-report' %}";
    const FILL_REQUEST_URL = "{% url 'support:support-fill-request-report' %}";
    // canister-detail takes an id; build a template with a placeholder we swap.
    const CANISTER_DETAIL_URL = "{% url 'site:canister-detail-info' 0 %}";
    // edit-pillsig takes an id; build a template with a placeholder we swap.
    const EDIT_PILLSIG_URL = "{% url 'support:support-edit-pillsig' 0 %}";
    {# TODO: replace with the real reset endpoint url name once built #}
    const RESET_SIGS_URL = "{% url 'support:support-reset-sigs-to-globals' %}";

    const STATUS_COLUMNS = {{ display_status_list|safe }};
    let pill_sig_stats = {{ pill_sig_stats|safe }};

    let clusterize_instance = null;

    // sort state (persists across filter/render)
    let current_sort_field = 'total_fills';
    let current_sort_desc = true;

    // tri-state classification filters: 'all' | 'show' | 'hide'
    let class_filters = {
        exception: 'all',
        matches_exception: 'all',
        global: 'all',
        standard: 'all',
        system_created: 'all'
    };

    // protocol quick filter: 'AI' | 'Legacy' | null
    let protocol_filter = null;

    // hide sigs with zero fills (on by default)
    let hide_no_fills = true;

    // view mode for the hideable column groups: 'none' | 'error' | 'sig'
    let view_mode = 'none';

    // column-search filters keyed by column index: { value, compare }
    let active_column_filters = {};

    // ---------- COLUMN LAYOUT (keep in sync with <thead>) ----------
    // 0 Canister | 1 Dafe | 2 NDC | 3 Drug | 4 Protocol | 5 ExcDrug
    // 6 MatchExc | 7 Global | 8 StdRecipe | 9 SysCreated | 10 Total
    // 11 Errors | 12 Normal% | then [error group: STATUS..., Other]
    // then [sig group: width..remove_dust] | View
    const COL = {
        canister: 0,
        dafe: 1,
        ndc: 2,
        drug: 3,
        protocol: 4,
        exception: 5,
        matches_exception: 6,
        global: 7,
        standard_recipe: 8,
        system_created: 9,
        total: 10,
        errors: 11,
        normal_pct: 12
    };

    // sig-group fields, rendered in this order
    const SIG_FIELDS = [
        { field: 'width', label: 'Width', kind: 'number' },
        { field: 'length', label: 'Length', kind: 'number' },
        { field: 'area', label: 'Area', kind: 'number' },
        { field: 'vib_min', label: 'Vib Min', kind: 'number' },
        { field: 'vib_max', label: 'Vib Max', kind: 'number' },
        { field: 'blister_index_delay', label: 'Blist Delay', kind: 'number' },
        { field: 'blister_index_delay_multi', label: 'Blist Multi Delay', kind: 'number' },
        { field: 'vib_blister', label: 'Vib Blist', kind: 'bool' },
        { field: 'vib_blister_multi', label: 'Vib Blist Multi', kind: 'bool' },
        { field: 'remove_dust', label: 'Remove Dust', kind: 'bool' }
    ];

    // map sortable column index -> sort descriptor.
    function build_sort_map() {
        let map = {};
        map[COL.canister] = { field: 'canister__serial_number', kind: 'text' };
        map[COL.dafe] = { field: 'dafe', kind: 'text' };
        map[COL.ndc] = { field: 'display_drug_number', kind: 'text' };
        map[COL.drug] = { field: 'drug_name', kind: 'text' };
        map[COL.protocol] = { field: 'protocol', kind: 'text' };
        map[COL.exception] = { field: 'is_exception_drug', kind: 'flag' };
        map[COL.matches_exception] = { field: 'matches_exception', kind: 'flag' };
        map[COL.global] = { field: 'is_global', kind: 'flag' };
        map[COL.standard_recipe] = { field: 'is_standard_recipe', kind: 'flag' };
        map[COL.system_created] = { field: 'is_system_created', kind: 'flag' };
        map[COL.total] = { field: 'total_fills', kind: 'number' };
        map[COL.errors] = { field: 'error_count', kind: 'number' };
        map[COL.normal_pct] = { field: 'normal_pct', kind: 'pct' };

        // error group: status columns + Other (percentages)
        let idx = COL.normal_pct + 1;
        STATUS_COLUMNS.forEach(function (status) {
            map[idx] = { field: 'status:' + status, kind: 'pct' };
            idx += 1;
        });
        map[idx] = { field: 'status:OTHER', kind: 'pct' };
        idx += 1;

        // sig group
        SIG_FIELDS.forEach(function (sig) {
            map[idx] = { field: 'sig:' + sig.field, kind: sig.kind };
            idx += 1;
        });

        return map;
    }

    const SORT_MAP = build_sort_map();

    function build_pill_sig_url(params) {
        return PILL_SIG_URL + '?' + $.param(params);
    }

    function build_fill_request_url(params) {
        return FILL_REQUEST_URL + '?' + $.param(params);
    }

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

    function build_edit_pillsig_url(pill_signature_id) {
        return EDIT_PILLSIG_URL.replace('/0/', '/' + pill_signature_id + '/');
    }

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

    function format_pct_cell(count, total, extra_class) {
        let cls = extra_class || '';
        if (!total || total === 0) {
            return '<td class="' + cls + '">—</td>';
        }
        let value = pct(count, total);
        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(normal_count, total) {
        if (!total || total === 0) {
            return '<td>—</td>';
        }
        let cls = normal_cell_class(normal_count, total);
        return '<td class="' + cls + '">' + pct(normal_count, total).toFixed(2) + '%</td>';
    }

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

    function render_sig_cells(row) {
        let html = '';
        SIG_FIELDS.forEach(function (sig) {
            let value = row[sig.field];
            let display;
            if (sig.kind === 'bool') {
                display = value ? 'Yes' : 'No';
            } else {
                display = (value === null || typeof value === 'undefined') ? '' : value;
            }
            html += '<td class="col-sig">' + display + '</td>';
        });
        return html;
    }

    function flag_cell(is_set) {
        let mark = is_set ? '<span style="color: green;">&#10004;</span>' : '';
        return '<td data-flag="' + (is_set ? '1' : '0') + '">' + mark + '</td>';
    }

    function edit_links_cell(row) {
        let fill_params = {
            clear_filters: 'true',
            canister_serial: row.canister__serial_number,
            dafe_id: row.dafe_id,
            days: Number($('#days-input').val()) || 0
        };
        let error_params = Object.assign({}, fill_params, { fill_status: 'NOT_NORMAL' });

        return '<td style="white-space: nowrap;">'
            + '<a class="btn btn-mini btn-link" href="' + build_edit_pillsig_url(row.pill_signature_id) + '" title="Edit Pill Sig" target="_blank"><i class="icon-pencil"></i></a>'
            + '<a class="btn btn-small btn-link" href="' + build_fill_request_url(fill_params) + '" title="View Fill Requests" target="_blank"><i class="icon-list"></i></a>'
            + '<a class="btn btn-small btn-link btn-danger" href="' + build_fill_request_url(error_params) + '" title="View Error Fills" target="_blank"><i class="icon-warning-sign"></i></a>'
            + '</td>';
    }

    function build_row_html(row) {
        let total = row.total_fills || 0;
        let normal = row.normal_count || 0;
        let errors = row.error_count || 0;

        return '<tr'
            + ' data-protocol="' + row.protocol + '"'
            + ' data-exception="' + (row.is_exception_drug ? '1' : '0') + '"'
            + ' data-matches-exception="' + (row.matches_exception ? '1' : '0') + '"'
            + ' data-global="' + (row.is_global ? '1' : '0') + '"'
            + ' data-standard-recipe="' + (row.is_standard_recipe ? '1' : '0') + '"'
            + ' data-system-created="' + (row.is_system_created ? '1' : '0') + '">'
            + '<td><a href="' + build_canister_detail_url(row.canister__id) + '" title="Canister Details" target="_blank">' + row.canister__serial_number + '</a></td>'
            + '<td>' + row.dafe + '</td>'
            + '<td data-drug-number="' + row.drug_number + '">' + row.display_drug_number + '</td>'
            + '<td>' + row.drug_name + '</td>'
            + '<td>' + row.protocol + '</td>'
            + flag_cell(row.is_exception_drug)
            + flag_cell(row.matches_exception)
            + flag_cell(row.is_global)
            + flag_cell(row.is_standard_recipe)
            + flag_cell(row.is_system_created)
            + '<td>' + total + '</td>'
            + '<td>' + errors + '</td>'
            + format_normal_cell(normal, total)
            + render_status_cells(row.status_counts, total)
            + render_sig_cells(row)
            + edit_links_cell(row)
            + '</tr>';
    }

    // ---------- FILTER ----------
    function passes_class_filter(state, is_set) {
        if (state === 'show') {
            return is_set === true;
        }
        if (state === 'hide') {
            return is_set === false;
        }
        return true;
    }

    function row_passes_quick(row) {
        if (hide_no_fills && (row.total_fills || 0) === 0) {
            return false;
        }
        if (protocol_filter && row.protocol !== protocol_filter) {
            return false;
        }
        if (!passes_class_filter(class_filters.exception, !!row.is_exception_drug)) {
            return false;
        }
        if (!passes_class_filter(class_filters.matches_exception, !!row.matches_exception)) {
            return false;
        }
        if (!passes_class_filter(class_filters.global, !!row.is_global)) {
            return false;
        }
        if (!passes_class_filter(class_filters.standard, !!row.is_standard_recipe)) {
            return false;
        }
        if (!passes_class_filter(class_filters.system_created, !!row.is_system_created)) {
            return false;
        }
        return true;
    }

    function column_value(row, col_index) {
        let total = row.total_fills || 0;
        if (col_index === COL.canister) {
            return (row.canister__serial_number || '').toString().toLowerCase();
        }
        if (col_index === COL.dafe) {
            return (row.dafe || '').toString().toLowerCase();
        }
        if (col_index === COL.ndc) {
            return (row.display_drug_number || '').toString().toLowerCase().replace(/-/g, '');
        }
        if (col_index === COL.drug) {
            return (row.drug_name || '').toString().toLowerCase();
        }
        if (col_index === COL.total) {
            return total;
        }
        if (col_index === COL.errors) {
            return row.error_count || 0;
        }
        if (col_index === COL.normal_pct) {
            return pct(row.normal_count || 0, total);
        }
        return '';
    }

    function row_passes_column_filters(row) {
        for (let col_index in active_column_filters) {
            let filter = active_column_filters[col_index];
            let value = filter.value;
            if (!value) {
                continue;
            }
            let cell = column_value(row, Number(col_index));

            if (filter.compare === 'gt') {
                let threshold = parseFloat(value);
                if (isNaN(threshold) || !(Number(cell) > threshold)) {
                    return false;
                }
            } else if (filter.compare === 'lt') {
                let threshold = parseFloat(value);
                if (isNaN(threshold) || !(Number(cell) < threshold)) {
                    return false;
                }
            } else {
                let needle = value.toLowerCase();
                if (Number(col_index) === COL.ndc) {
                    needle = needle.replace(/-/g, '');
                }
                if (cell.toString().indexOf(needle) === -1) {
                    return false;
                }
            }
        }
        return true;
    }

    // ---------- SORT ----------
    function sort_value(row, descriptor) {
        let total = row.total_fills || 0;
        if (descriptor.kind === 'flag' || descriptor.kind === 'bool') {
            return row[descriptor.field.replace('sig:', '')] ? 1 : 0;
        }
        if (descriptor.kind === 'number') {
            let field = descriptor.field.replace('sig:', '');
            return Number(row[field]) || 0;
        }
        if (descriptor.kind === 'pct') {
            if (descriptor.field === 'normal_pct') {
                return pct(row.normal_count || 0, total);
            }
            let status = descriptor.field.split(':')[1];
            let count = (row.status_counts && row.status_counts[status]) || 0;
            return pct(count, total);
        }
        return (row[descriptor.field] || '').toString().toLowerCase();
    }

    function compare_rows(a, b, descriptor) {
        let av = sort_value(a, descriptor);
        let bv = sort_value(b, descriptor);
        if (descriptor.kind === 'text') {
            return av.localeCompare(bv);
        }
        return av - bv;
    }

    // ---------- RENDER PIPELINE ----------
    function get_filtered_sorted_rows() {
        let rows = Object.keys(pill_sig_stats).map(function (key) {
            return pill_sig_stats[key];
        });

        rows = rows.filter(function (row) {
            return row_passes_quick(row) && row_passes_column_filters(row);
        });

        let descriptor = null;
        for (let col_index in SORT_MAP) {
            if (SORT_MAP[col_index].field === current_sort_field) {
                descriptor = SORT_MAP[col_index];
                break;
            }
        }
        if (!descriptor) {
            descriptor = { field: 'total_fills', kind: 'number' };
        }

        rows.sort(function (a, b) {
            let result = compare_rows(a, b, descriptor);
            return current_sort_desc ? -result : result;
        });

        return rows;
    }

    // last rendered filtered set, reused by the reset-to-globals action
    let current_filtered_rows = [];

    function render_table() {
        let rows = get_filtered_sorted_rows();
        current_filtered_rows = rows;
        let html_rows = rows.map(build_row_html);

        if (clusterize_instance) {
            clusterize_instance.update(html_rows);
        }

        let total = Object.keys(pill_sig_stats).length;
        $('#visible-count').text(rows.length + ' / ' + total);
    }

    function update_sort_indicator() {
        $('#report-table thead .sort-indicator').text('');
        $('#report-table thead th.sortable').each(function () {
            let col_index = $(this).index();
            let descriptor = SORT_MAP[col_index];
            if (descriptor && descriptor.field === current_sort_field) {
                $(this).find('.sort-indicator').text(current_sort_desc ? ' ▼' : ' ▲');
            }
        });
    }

    // ---------- VIEW MODE (error breakdown vs sig, mutually exclusive) ----------
    function apply_view_mode() {
        // both groups hidden by default via CSS; reveal the active one.
        let css = '';
        if (view_mode !== 'error') {
            css += '.col-error{display:none;}';
        }
        if (view_mode !== 'sig') {
            css += '.col-sig{display:none;}';
        }
        $('#pill-sig-column-style').text(css);

        $('#btn-error-breakdown').toggleClass('active', view_mode === 'error');
        $('#btn-show-sig').toggleClass('active', view_mode === 'sig');
    }

    $(function () {
        let table = $('#report-table');

        clusterize_instance = new Clusterize({
            rows: [],
            scrollId: 'pill_sig_scroll_area',
            contentId: 'pill-sig-body',
            tag: 'tr',
            rows_in_block: 30,
            blocks_in_cluster: 4,
            no_data_text: 'No data available',
            show_no_data_row: true
        });

        apply_view_mode();
        update_sort_indicator();
        render_table();

        // ---------- COLUMN SEARCH (debounced) ----------
        let search_timeout = null;
        table.find('.queue-col-search').on('input change', function () {
            let input = $(this);
            let col_index = input.data('col');
            active_column_filters[col_index] = {
                value: input.val(),
                compare: input.data('compare') || null
            };
            clearTimeout(search_timeout);
            search_timeout = setTimeout(render_table, 250);
        });

        // ---------- HIDE NO-FILL SIGS ----------
        $('#hide-no-fills-checkbox').on('change', function () {
            hide_no_fills = $(this).prop('checked');
            render_table();
        });

        // ---------- PROTOCOL QUICK FILTER ----------
        $('.protocol-filter button').on('click', function () {
            let button = $(this);
            let value = button.data('protocol');
            if (protocol_filter === value) {
                protocol_filter = null;
                button.removeClass('active');
            } else {
                protocol_filter = value;
                $('.protocol-filter button').removeClass('active');
                button.addClass('active');
            }
            render_table();
        });

        // ---------- TRI-STATE CLASSIFICATION FILTERS ----------
        // segmented btn-group per classification: All | Hide | Show.
        // each button carries data-class and data-state (all|hide|show).
        $(document).on('click', '.class-filter-group button', function () {
            let button = $(this);
            let group = button.closest('.class-filter-group');
            let cls = group.data('class');
            let state = button.data('state');

            class_filters[cls] = state;

            group.find('button').removeClass('active');
            button.addClass('active');

            render_table();
        });

        // ---------- VIEW MODE BUTTONS (mutually exclusive) ----------
        $('#btn-error-breakdown').on('click', function () {
            view_mode = (view_mode === 'error') ? 'none' : 'error';
            apply_view_mode();
        });

        $('#btn-show-sig').on('click', function () {
            view_mode = (view_mode === 'sig') ? 'none' : 'sig';
            apply_view_mode();
        });

        // ---------- SORTING (data-driven re-render) ----------
        table.find('th.sortable').on('click', function () {
            let col_index = $(this).index();
            let descriptor = SORT_MAP[col_index];
            if (!descriptor) {
                return;
            }
            if (current_sort_field === descriptor.field) {
                current_sort_desc = !current_sort_desc;
            } else {
                current_sort_field = descriptor.field;
                current_sort_desc = false;
            }
            update_sort_indicator();
            render_table();
        });

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

        // ---------- CLEAR FILTERS ----------
        $('#clear-filters-btn').on('click', function () {
            table.find('.queue-col-search').val('');
            active_column_filters = {};

            protocol_filter = null;
            hide_no_fills = true;
            $('#hide-no-fills-checkbox').prop('checked', true);
            class_filters.exception = 'all';
            class_filters.matches_exception = 'all';
            class_filters.global = 'all';
            class_filters.standard = 'all';
            class_filters.system_created = 'all';

            $('.protocol-filter button').removeClass('active');
            $('.class-filter-group button').removeClass('active');
            $('.class-filter-group button[data-state="all"]').addClass('active');

            render_table();
        });

        // ---------- RESET FILTERED SIGS TO GLOBALS ----------
        let reset_modal = $('#reset-modal');

        $('#btn-reset-sigs').on('click', function () {
            $('#reset-count').text(current_filtered_rows.length);
            reset_modal.removeClass('hidden');
        });

        function close_reset_modal() {
            reset_modal.addClass('hidden');
        }

        $('#reset-cancel').on('click', close_reset_modal);
        $('.reset-modal-backdrop').on('click', close_reset_modal);
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape' && !reset_modal.hasClass('hidden')) {
                close_reset_modal();
            }
        });

        $('#reset-confirm').on('click', function () {
            let button = $(this);
            let ids = current_filtered_rows.map(function (row) {
                return row.pill_signature_id;
            });

            if (ids.length === 0) {
                close_reset_modal();
                return;
            }

            button.prop('disabled', true).text('Resetting…');

            $.ajax({
                url: RESET_SIGS_URL,
                type: 'POST',
                contentType: 'application/json',
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                data: JSON.stringify({ pill_signature_ids: ids }),
                success: function () {
                    window.location.reload();
                },
                error: function (jqXHR) {
                    let message = 'Failed to reset sigs.';
                    if (jqXHR.responseJSON && jqXHR.responseJSON.return_message) {
                        message = jqXHR.responseJSON.return_message;
                    }
                    alert(message);
                    button.prop('disabled', false).text('Reset Sigs');
                }
            });
        });

        // ---------- EXPORT ----------
        let export_options = $('#export-options');
        $('#export-btn').on('click', function (e) {
            e.stopPropagation();
            export_options.toggleClass('hidden');
        });
        $(document).on('click', function (e) {
            if (!$(e.target).closest('.export-menu').length) {
                export_options.addClass('hidden');
            }
        });
        $('.export-option').on('click', function (e) {
            e.preventDefault();
            let fmt = $(this).data('format');
            let params = new URLSearchParams(window.location.search);
            params.set('export', fmt);
            window.location.href = window.location.pathname + '?' + params.toString();
            export_options.addClass('hidden');
        });
    });
</script>

<style id="pill-sig-column-style"></style>
<style>
    #dispensing-tools-header-tabs {
        margin-bottom: 0;
    }

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

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

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

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

    .clear-report-filters-btn {
        padding: 6px 16px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    .clear-report-filters-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .apply-filters-btn {
        padding: 7px 18px;
        border-radius: 8px;
        border: none;
        background: #0096c3;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

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

    /* second row: quick filters + view modes */
    .quick-filter-bar {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 8px 16px;
        margin-bottom: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        flex-wrap: wrap;
    }

    .quick-filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .quick-filter-group .group-label {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .quick-filter-group + .quick-filter-group {
        padding-left: 18px;
        border-left: 1px solid #e5e7eb;
    }

    .quick-btn {
        padding: 5px 12px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

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

    .quick-btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
    }

    /* tri-state class filter groups (Bootstrap btn-group style) */
    .class-filter-group {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .class-filter-group .cf-label {
        font-size: 12px;
        color: #374151;
        white-space: nowrap;
    }

    .class-filter-group .btn-group {
        white-space: nowrap;
    }

    .class-filter-group .btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
    }

    /* view-mode buttons */
    .view-mode-btn {
        padding: 5px 12px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

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

    .view-mode-btn.active {
        background: #0f766e;
        color: #ffffff;
        border-color: #0f766e;
    }

    .visible-count {
        margin-left: auto;
        font-size: 13px;
        color: #6b7280;
        white-space: nowrap;
    }

    .no-fills-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0;
        cursor: pointer;
        white-space: nowrap;
    }

    .no-fills-toggle input {
        margin: 0;
    }

    .reset-sigs-btn {
        padding: 6px 16px;
        border-radius: 8px;
        border: none;
        background: #b45309;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .reset-sigs-btn:hover {
        background: #92400e;
    }

    /* reset-confirm modal */
    .reset-modal.hidden {
        display: none;
    }

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

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

    .reset-modal-content {
        position: relative;
        background: #ffffff;
        width: 90%;
        max-width: 460px;
        margin: 18vh auto;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    }

    .reset-modal-header {
        padding: 14px 18px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 15px;
        font-weight: 600;
    }

    .reset-modal-body {
        padding: 18px;
        font-size: 14px;
        color: #374151;
    }

    .reset-modal-footer {
        padding: 12px 18px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .reset-modal-footer .btn-cancel {
        padding: 7px 16px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        cursor: pointer;
    }

    .reset-modal-footer .btn-confirm {
        padding: 7px 16px;
        border-radius: 8px;
        border: none;
        background: #b45309;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .reset-modal-footer .btn-confirm:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /* ---------- Clusterize scroll + sticky header ---------- */
    #pill-sig-table-wrap {
        position: relative;
    }

    #pill_sig_scroll_area {
        max-height: calc(100vh - 260px);
        overflow: auto;
    }

    #report-table thead {
        position: sticky;
        top: 0;
        z-index: 3;
        background: white;
    }

    #report-table thead th {
        background: inherit;
    }

    /* coloring carried over from the NDC report */
    th.sortable {
        cursor: pointer;
        user-select: none;
    }

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

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

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

    #report-table thead tr th input.queue-col-search[data-compare] {
        min-width: 48px;
    }

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

    .queue-col-search::placeholder {
        color: rgba(0, 0, 0, 0.4);
    }

    /* export menu */
    .export-menu {
        position: relative;
        margin-left: auto;
    }

    .export-report-btn {
        padding: 7px 18px;
        border-radius: 8px;
        border: none;
        background: #217346;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .export-report-btn:hover {
        background: #1a5c38;
    }

    .export-options {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 50;
        background: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        min-width: 100%;
    }

    .export-options.hidden {
        display: none;
    }

    .export-option {
        display: block;
        padding: 8px 16px;
        font-size: 13px;
        color: #374151;
        text-decoration: none;
        white-space: nowrap;
    }

    .export-option:hover {
        background: #f0fdf4;
        color: #217346;
        text-decoration: none;
    }
</style>
{% endblock %}

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

            <div class="dafe-filter">
                <button type="button" id="clear-filters-btn" class="clear-report-filters-btn">
                    Clear Report Filters
                </button>
            </div>

            <button type="button" id="btn-reset-sigs" class="reset-sigs-btn">
                Reset Filtered Sigs to Globals
            </button>

            <div class="export-menu">
                <button type="button" id="export-btn" class="export-report-btn">
                    Export ▾
                </button>
                <div id="export-options" class="export-options hidden">
                    <a href="#" class="export-option" data-format="xlsx">XLSX</a>
                    <a href="#" class="export-option" data-format="csv">CSV</a>
                </div>
            </div>

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

    <div class="quick-filter-bar">
        <div class="quick-filter-group">
            <span class="group-label">Protocol</span>
            <div class="protocol-filter" style="display: inline-flex; gap: 6px;">
                <button type="button" class="quick-btn" data-protocol="AI">AI</button>
                <button type="button" class="quick-btn" data-protocol="Legacy">Legacy</button>
            </div>
        </div>

        <div class="quick-filter-group">
            <span class="group-label">Show</span>
            <div class="class-filter-group" data-class="exception">
                <span class="cf-label">Exception</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-small active" data-state="all">All</button>
                    <button type="button" class="btn btn-small" data-state="hide"><span style="color: red;">&#10006;</span></button>
                    <button type="button" class="btn btn-small" data-state="show"><span style="color: green;">&#10004;</span></button>
                </div>
            </div>
            <div class="class-filter-group" data-class="matches_exception">
                <span class="cf-label">Match Exception</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-small active" data-state="all">All</button>
                    <button type="button" class="btn btn-small" data-state="hide"><span style="color: red;">&#10006;</span></button>
                    <button type="button" class="btn btn-small" data-state="show"><span style="color: green;">&#10004;</span></button>
                </div>
            </div>
            <div class="class-filter-group" data-class="global">
                <span class="cf-label">Global</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-small active" data-state="all">All</button>
                    <button type="button" class="btn btn-small" data-state="hide"><span style="color: red;">&#10006;</span></button>
                    <button type="button" class="btn btn-small" data-state="show"><span style="color: green;">&#10004;</span></button>
                </div>
            </div>
            <div class="class-filter-group" data-class="standard">
                <span class="cf-label">Standard</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-small active" data-state="all">All</button>
                    <button type="button" class="btn btn-small" data-state="hide"><span style="color: red;">&#10006;</span></button>
                    <button type="button" class="btn btn-small" data-state="show"><span style="color: green;">&#10004;</span></button>
                </div>
            </div>
            <div class="class-filter-group" data-class="system_created">
                <span class="cf-label">System Created</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-small active" data-state="all">All</button>
                    <button type="button" class="btn btn-small" data-state="hide"><span style="color: red;">&#10006;</span></button>
                    <button type="button" class="btn btn-small" data-state="show"><span style="color: green;">&#10004;</span></button>
                </div>
            </div>
        </div>

        <div class="quick-filter-group">
            <label class="no-fills-toggle">
                <input type="checkbox" id="hide-no-fills-checkbox" checked>
                Hide No-Fill Sigs
            </label>
        </div>

        <div class="quick-filter-group">
            <span class="group-label">View</span>
            <button type="button" id="btn-error-breakdown" class="view-mode-btn">Error Breakdown</button>
            <button type="button" id="btn-show-sig" class="view-mode-btn">Show Sig</button>
        </div>

        <span class="visible-count">Showing <span id="visible-count">—</span></span>
    </div>

    <div id="pill-sig-table-wrap" class="clusterize">
        <div id="pill_sig_scroll_area" class="clusterize-scroll">
            <table id="report-table" class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th class="sortable">Canister<span class="sort-indicator"></span></th>
                        <th class="sortable">Tower<span class="sort-indicator"></span></th>
                        <th class="sortable">NDC<span class="sort-indicator"></span></th>
                        <th class="sortable">Drug<span class="sort-indicator"></span></th>
                        <th class="sortable">Protocol<span class="sort-indicator"></span></th>
                        <th class="sortable">Exception Drug<span class="sort-indicator"></span></th>
                        <th class="sortable">Matches Exception<span class="sort-indicator"></span></th>
                        <th class="sortable">Global<span class="sort-indicator"></span></th>
                        <th class="sortable">Standard Recipe<span class="sort-indicator"></span></th>
                        <th class="sortable">System Created<span class="sort-indicator"></span></th>
                        <th class="sortable">Total Fills<span class="sort-indicator"></span></th>
                        <th class="sortable">Errors<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 col-error">{{ status|normalize_header }}<span class="sort-indicator"></span></th>
                        {% endfor %}
                        <th class="sortable col-error">Other<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Width<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Length<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Area<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Vib Min<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Vib Max<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Blist Delay<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Blist Multi Delay<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Vib Blist<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Vib Blist Multi<span class="sort-indicator"></span></th>
                        <th class="sortable col-sig">Remove Dust<span class="sort-indicator"></span></th>
                        <th>View</th>
                    </tr>
                    <tr class="dosis-report-header">
                        <th><input type="text" class="queue-col-search" data-col="0"></th>
                        <th>
                            <select class="queue-col-search" data-col="1" style="width: 100%; border-radius: 12px; padding: 3px; margin-bottom: 0;">
                                <option value="">All</option>
                                {% for dafe in dafe_list %}
                                    <option value="{{ dafe }}">{{ dafe }}</option>
                                {% endfor %}
                            </select>
                        </th>
                        <th><input type="text" class="queue-col-search" data-col="2"></th>
                        <th><input type="text" class="queue-col-search" data-col="3"></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th><input type="number" class="queue-col-search" data-compare="gt" data-col="10" placeholder="> than"></th>
                        <th><input type="number" class="queue-col-search" data-compare="gt" data-col="11" placeholder="> than"></th>
                        <th><input type="number" class="queue-col-search" data-compare="lt" data-col="12" placeholder="< than"></th>
                        {% for status in display_status_list %}
                            <th class="col-error"></th>
                        {% endfor %}
                        <th class="col-error"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th class="col-sig"></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="pill-sig-body" class="clusterize-content">
                    <tr class="clusterize-no-data">
                        <td colspan="36" style="text-align: center; padding: 3rem 0;">
                            <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;">
                                <i class="icon-spinner icon-spin" style="font-size: 2rem;"></i>
                                <span style="font-size: 1.1rem; color: #555;">Loading Report...</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="reset-modal" class="reset-modal hidden">
    <div class="reset-modal-backdrop"></div>
    <div class="reset-modal-content">
        <div class="reset-modal-header">Reset Sigs to Globals</div>
        <div class="reset-modal-body">
            Reset <strong><span id="reset-count">0</span></strong> currently filtered pill
            signature(s) to their global recipe? This action cannot be undone.
        </div>
        <div class="reset-modal-footer">
            <button type="button" class="btn-cancel" id="reset-cancel">Cancel</button>
            <button type="button" class="btn-confirm" id="reset-confirm">Reset Sigs</button>
        </div>
    </div>
</div>
{% endblock %}