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

{% block head %}
{{ block.super }}
<script>
    let quantity_pie_data = {{ quantity_pie_data|safe }};
    let detail_pie_data = {{ detail_pie_data|safe }};
    let quantity_labels = {{ quantity_labels|safe }};
    let discrepancy_labels = {{ discrepancy_labels|safe }};
    let drug_data = {{ drug_data|safe }};
    let canister_data = {{ canister_data|safe }};
    let tower_data = {{ tower_data|safe }};

    let QUANTITY_COLORS = {
        'TOO_MANY': '#c32222',
        'TOO_FEW': '#0096c3',
        'OK': '#8ec322',
    };

    let DETAIL_COLORS = {
        'has_jumpers': '#c32222',
        'is_broken': '#c3228e',
        'false_empty': '#8ec322',
        'has_desiccant': '#22c38e',
        'other_issue': '#4f46e5',
        'NONE': '#9ca3af',
    };

    let current_quantity = 'ALL';
    let current_detail = null;
    let detail_chart = null;

    function get_item_count(item_value, include_drug_name) {
        if (include_drug_name) {
            return item_value.count;
        }

        return item_value;
    }

    function build_detail_table(table_body_selector, source_data, include_drug_name) {
        let rows = {};
        let quantity_bucket = source_data[current_quantity] || {};

        $.each(quantity_bucket, function (detail_type, items) {
            if (current_detail && detail_type !== current_detail) {
                return true;
            }

            $.each(items, function (item_key, item_value) {
                if (!rows[item_key]) {
                    rows[item_key] = {
                        total: 0,
                        drug_name: ''
                    };
                }

                let count = get_item_count(item_value, include_drug_name);
                rows[item_key].total += count;

                if (include_drug_name) {
                    rows[item_key].drug_name = item_value.drug_name;
                }
            });
        });

        let sorted_rows = Object.keys(rows).sort(function (left, right) {
            return rows[right].total - rows[left].total;
        });

        let tbody = $(table_body_selector);
        tbody.empty();

        $.each(sorted_rows, function (_, item_key) {
            let row_data = rows[item_key];
            let row = $('<tr>');

            row.append($('<td>').text(item_key));

            if (include_drug_name) {
                row.append($('<td>').text(row_data.drug_name));
            }

            row.append($('<td>').css('text-align', 'center').text(row_data.total));
            tbody.append(row);
        });
    }

    function build_all_detail_tables() {
        let quantity_label = current_quantity === 'ALL' ? 'All Quantities' : (quantity_labels[current_quantity] || current_quantity);
        let detail_label = current_detail ? (discrepancy_labels[current_detail] || current_detail) : 'Total';

        $('#selected-quantity-label').text(quantity_label);
        $('#selected-detail-label').text(detail_label);
        $('.detail-count-header').text(detail_label);

        build_detail_table('#canister-data-body', canister_data, false);
        build_detail_table('#drug-data-body', drug_data, true);
        build_detail_table('#tower-data-body', tower_data, false);
    }

    function set_active_detail_button(detail_type) {
        $('.detail-filter-btn').removeClass('active');
        let selector = detail_type ? '[data-detail-type="' + detail_type + '"]' : '[data-detail-type=""]';
        $('.detail-filter-btn').filter(selector).addClass('active');
    }

    function set_active_quantity_button(quantity) {
        $('.quantity-filter-btn').removeClass('active');
        $('.quantity-filter-btn').filter('[data-quantity-type="' + quantity + '"]').addClass('active');
    }

    function rebuild_detail_chart() {
        let quantity_bucket = detail_pie_data[current_quantity] || {};
        let detail_keys = Object.keys(quantity_bucket);

        let quantity_label = current_quantity === 'ALL' ? 'All' : (quantity_labels[current_quantity] || current_quantity);
        $('#detail-chart-quantity-label').text(quantity_label);

        let detail_chart_labels = detail_keys.map(function (key) {
            return discrepancy_labels[key] || key;
        });
        let detail_values = detail_keys.map(function (key) {
            return quantity_bucket[key];
        });
        let detail_colors = detail_keys.map(function (key) {
            return DETAIL_COLORS[key] || '#999999';
        });

        detail_chart.data.labels = detail_chart_labels;
        detail_chart.data.datasets[0].data = detail_values;
        detail_chart.data.datasets[0].backgroundColor = detail_colors;
        // stash the raw keys so click handlers resolve to real filter values
        detail_chart.raw_keys = detail_keys;
        detail_chart.update();
    }

    let pie_options_base = {
        responsive: false,
        maintainAspectRatio: true,
        plugins: {
            datalabels: {
                color: '#ffffff',
                font: { weight: 'bold', size: 12 },
                formatter: function (value, context) {
                    let total = context.dataset.data.reduce(function (sum, item) {
                        return sum + item;
                    }, 0);
                    let percentage = ((value / total) * 100).toFixed(1);
                    return value + '\n' + percentage + '%';
                }
            },
            legend: {
                position: 'bottom',
                labels: { padding: 12, font: { size: 12 } }
            },
            tooltip: {
                callbacks: {
                    label: function (context) {
                        let total = context.dataset.data.reduce(function (a, b) { return a + b; }, 0);
                        let value = context.parsed;
                        let pct = ((value / total) * 100).toFixed(1);
                        return context.label + ': ' + value + ' (' + pct + '%)';
                    }
                }
            }
        }
    };

    $(function () {
        // chart 1: quantity
        let quantity_keys = Object.keys(quantity_pie_data);
        let quantity_chart_labels = quantity_keys.map(function (key) {
            return quantity_labels[key] || key;
        });
        let quantity_values = quantity_keys.map(function (key) {
            return quantity_pie_data[key];
        });
        let quantity_colors = quantity_keys.map(function (key) {
            return QUANTITY_COLORS[key] || '#999999';
        });

        let quantity_ctx = $('#quantity-pie-chart')[0].getContext('2d');
        let quantity_chart = new Chart(quantity_ctx, {
            type: 'pie',
            data: {
                labels: quantity_chart_labels,
                datasets: [{
                    data: quantity_values,
                    backgroundColor: quantity_colors,
                    borderWidth: 1,
                    borderColor: '#ffffff'
                }]
            },
            plugins: [ChartDataLabels],
            options: $.extend(true, {}, pie_options_base, {
                plugins: {
                    legend: {
                        onClick: function (_, legend_item) {
                            apply_quantity(quantity_keys[legend_item.index]);
                        }
                    }
                },
                onClick: function (_, elements) {
                    if (!elements.length) {
                        apply_quantity('ALL');
                        return;
                    }
                    apply_quantity(quantity_keys[elements[0].index]);
                }
            })
        });

        // chart 2: problem details (rebuilt when quantity changes)
        let detail_ctx = $('#detail-pie-chart')[0].getContext('2d');
        detail_chart = new Chart(detail_ctx, {
            type: 'pie',
            data: {
                labels: [],
                datasets: [{
                    data: [],
                    backgroundColor: [],
                    borderWidth: 1,
                    borderColor: '#ffffff'
                }]
            },
            plugins: [ChartDataLabels],
            options: $.extend(true, {}, pie_options_base, {
                plugins: {
                    legend: {
                        onClick: function (_, legend_item) {
                            apply_detail(detail_chart.raw_keys[legend_item.index]);
                        }
                    }
                },
                onClick: function (_, elements) {
                    if (!elements.length) {
                        apply_detail(null);
                        return;
                    }
                    apply_detail(detail_chart.raw_keys[elements[0].index]);
                }
            })
        });

        function apply_quantity(quantity) {
            // clicking the already-selected quantity clears back to ALL
            if (quantity === current_quantity) {
                current_quantity = 'ALL';
            } else {
                current_quantity = quantity;
            }
            // a quantity change resets the detail filter
            current_detail = null;
            set_active_quantity_button(quantity);
            set_active_detail_button(null);
            rebuild_detail_chart();
            build_all_detail_tables();
        }

        function apply_detail(detail_type) {
            if (detail_type === current_detail) {
                current_detail = null;
            } else {
                current_detail = detail_type;
            }
            set_active_detail_button(current_detail);
            build_all_detail_tables();
        }

        // expose for the filter buttons
        window.apply_detail = apply_detail;
        window.apply_quantity  = apply_quantity ;

        rebuild_detail_chart();
        build_all_detail_tables();

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

        $('.detail-filter-btn').on('click', function () {
            let detail_type = $(this).data('detail-type') || null;
            window.apply_detail(detail_type);
        });

        $('.quantity-filter-btn').on('click', function () {
            let quantity = $(this).data('quantity-type');
            window.apply_quantity(quantity);
        });
    });
</script>

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

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

    .report-filters {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 10px 16px;
        margin-bottom: 0;
        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;
    }

    .fill-warning-layout {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        justify-content: center;
    }

    .fill-warning-panel {
        min-width: 0;
    }

    .chart-container {
        width: 420px;
        height: 420px;
    }

    .panel-title {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
        text-align: center;
    }

    .warning-table-title-row {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .warning-filter-buttons {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .warning-table-layout {
        display: flex;
        gap: 16px;
        margin-top: 0;
        align-items: flex-start;
    }

    .warning-table-section {
        flex: 1;
        min-width: 0;
        margin-top: 0;
    }

    .fw-disclaimer {
        font-size: 12px;
        color: #6b7280;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 6px;
        padding: 6px 12px;
        margin-top: 4px;
    }

    .detail-filter-btn,
    .quantity-filter-btn {
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .detail-filter-btn:hover,
    .quantity-filter-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .detail-filter-btn.active,
    .quantity-filter-btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
    }
</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>

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

    <div class="fw-disclaimer">
        <strong>Note:</strong> Discrepancies are user-submitted and may be entered days or weeks after the fill occurred, so the most recent days may be undercounted. Click a Quantity slice to filter the Problem Details chart and the tables below.
    </div>

    <div class="fill-warning-layout">
        <div class="fill-warning-panel">
            <div class="panel-title">Quantity</div>
            <div class="chart-container">
                <canvas id="quantity-pie-chart" width="420" height="420"></canvas>
            </div>
        </div>

        <div class="fill-warning-panel">
            <div class="panel-title">Problem Details (<span id="detail-chart-quantity-label">All</span>)</div>
            <div class="chart-container">
                <canvas id="detail-pie-chart" width="420" height="420"></canvas>
            </div>
        </div>
    </div>

    <div class="warning-table-title-row">
        <div class="panel-title">Quantity Filter</div>
        <div class="warning-filter-buttons">
            <button type="button" class="quantity-filter-btn active" data-quantity-type="ALL">
                All
            </button>
            <button type="button" class="quantity-filter-btn" data-quantity-type="TOO_MANY">
                Too Many
            </button>
            <button type="button" class="quantity-filter-btn" data-quantity-type="TOO_FEW">
                Too Few
            </button>
            <button type="button" class="quantity-filter-btn" data-quantity-type="OK">
                OK
            </button>
        </div>
    </div>
    <div class="warning-table-title-row">
        <div class="panel-title">
            Detail Tables: <span id="selected-quantity-label">All Quantities</span> / <span id="selected-detail-label">Total</span>
        </div>
        <div class="warning-filter-buttons">
            <button type="button" class="detail-filter-btn active" data-detail-type="">
                Total
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="has_jumpers">
                Jumper(s)
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="is_broken">
                Broken Pill(s)
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="false_empty">
                False Run Empty
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="has_desiccant">
                Desiccant
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="other_issue">
                Other
            </button>
            <button type="button" class="detail-filter-btn" data-detail-type="NONE">
                None
            </button>
        </div>
    </div>

    <div class="warning-table-layout">
        <div class="warning-table-section">
            <div class="panel-title">Canister Data</div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Canister</th>
                        <th class="detail-count-header">Total</th>
                    </tr>
                </thead>
                <tbody id="canister-data-body"></tbody>
            </table>
        </div>

        <div class="warning-table-section">
            <div class="panel-title">Drug Data</div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Drug</th>
                        <th>Drug Name</th>
                        <th class="detail-count-header">Total</th>
                    </tr>
                </thead>
                <tbody id="drug-data-body"></tbody>
            </table>
        </div>

        <div class="warning-table-section">
            <div class="panel-title">Tower Data</div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Tower</th>
                        <th class="detail-count-header">Total</th>
                    </tr>
                </thead>
                <tbody id="tower-data-body"></tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}