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

{% block head %}
{{ block.super }}
<script>
    let pie_chart_data = {{ pie_chart_data|safe }};
    let continuation_settings = {{ continuation_settings|safe }};
    let drug_data = {{ drug_data|safe }};
    let canister_data = {{ canister_data|safe }};
    let tower_data = {{ tower_data|safe }};

    let STATUS_COLORS = {
        'FW_MULTI_DROP': '#c32222',
        'FW_MISSED_BLISTER': '#c3228e',
        'FW_OVER_COUNT': '#8ec322',
        'FW_OTHER': '#374151',
        'RAN_EMPTY_WARN': '#22c322',
        'RAN_EMPTY_NO_PILL_FLOW_WARN': '#22c38e',
    };

    let WARNING_TYPES = [
        'FW_MULTI_DROP',
        'FW_MISSED_BLISTER',
        'FW_OVER_COUNT',
        'FW_OTHER',
        'RAN_EMPTY_WARN',
        'RAN_EMPTY_NO_PILL_FLOW_WARN'
    ];

    let SETTING_TAGS = [
        'ON_MISSED_BLISTER_CONTINUE',
        'ON_MULTI_DROP_CONTINUE',
        'PPACK_ON_MISSED_BLISTER_CONTINUE',
        'PPACK_ON_MULTI_DROP_CONTINUE',
        'FILL_WARNING_ON_RAN_EMPTY_CONT',
        'MAX_FILL_CONTINUATIONS'
    ];

    function build_continuation_table() {
        let tbody = $('#continuation-settings-body');
        $.each(continuation_settings, function (dafe_name, settings) {
            let row = $('<tr>');
            row.append($('<td>').text(dafe_name));

            $.each(SETTING_TAGS, function (_, tag) {
                let value = settings[tag];
                let cell = $('<td>');

                if (value === undefined || value === null || value === '') {
                    cell.text('—');
                    cell.css({'color': '#9ca3af', 'text-align': 'center'});
                } else if (value === 'TRUE') {
                    cell.text('ON');
                    cell.css({'color': '#16a34a', 'text-align': 'center'});
                } else if (value === 'FALSE') {
                    cell.text('OFF');
                    cell.css({'color': '#dc2626', 'text-align': 'center'});
                } else {
                    cell.text(value);
                    cell.css({'text-align': 'center'});
                }

                row.append(cell);
            });

            tbody.append(row);
        });
    }


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

        return item_value;
    }

    function build_warning_table(table_body_selector, source_data, include_drug_name, selected_warning_type) {
        let rows = {};

        $.each(source_data, function (warning_type, items) {
            if (selected_warning_type && warning_type !== selected_warning_type) {
                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 set_active_warning_button(warning_type) {
        $('.warning-filter-btn').removeClass('active');
        let selector = warning_type ? '[data-warning-type="' + warning_type + '"]' : '[data-warning-type=""]';
        $('.warning-filter-btn').filter(selector).addClass('active');
    }

    function build_all_warning_tables(selected_warning_type) {
        let label = 'Total';

        if (selected_warning_type) {
            label = WARNING_TYPES[selected_warning_type] || selected_warning_type;
        }

        $('#selected-warning-label').text(label);
        $('.warning-count-header').text(label);

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


    $(function () {
        // build pie chart
        let pie_labels = Object.keys(pie_chart_data);
        let pie_values = Object.values(pie_chart_data);
        let pie_colors = pie_labels.map(function (label) {
            return STATUS_COLORS[label] || '#999999';
        });

        let pie_ctx = $('#fw-pie-chart')[0].getContext('2d');
        let pie_chart = new Chart(pie_ctx, {
            type: 'pie',
            data: {
                labels: pie_labels,
                datasets: [{
                    data: pie_values,
                    backgroundColor: pie_colors,
                    borderWidth: 1,
                    borderColor: '#ffffff'
                }]
            },
            plugins: [ChartDataLabels],
            options: {
                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 }
                        },
                        onClick: function (_, legend_item, legend) {
                            let warning_type = legend.chart.data.labels[legend_item.index];
                            set_active_warning_button(warning_type);
                            build_all_warning_tables(warning_type);
                        }
                    },
                    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 + '%)';
                            }
                        }
                    }
                },
                onClick: function (_, elements) {
                    if (!elements.length) {
                        set_active_warning_button(null);
                        build_all_warning_tables(null);
                        return;
                    }

                    let index = elements[0].index;
                    let warning_type = pie_chart.data.labels[index];
                    set_active_warning_button(warning_type);
                    build_all_warning_tables(warning_type);
                }
            }
        });

        build_continuation_table();
        build_all_warning_tables(null);

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

        $('#report-filter-form').on('submit', function () {
            return true;
        });

        $('.warning-filter-btn').on('click', function () {
            let warning_type = $(this).data('warning-type') || null;
            set_active_warning_button(warning_type);
            build_all_warning_tables(warning_type);
        });
    });
</script>

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

    /* Tighten the overall wrapper */
    #dispensing-tools-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }

    /* Reduce filter margin */
    .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);
    }

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

    .min-count-label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }

    .min-count-slider-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #min-count-slider {
        width: 220px;
        appearance: none;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(
            to right,
            #dbeafe,
            #6366f1
        );
        outline: none;
    }

    #min-count-value {
        min-width: 32px;
        text-align: right;
        font-weight: 600;
        color: #111827;
    }

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

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

    .fill-warning-panel:first-child {
        flex: 0 0 auto;
    }

    .fill-warning-panel:last-child {
        flex: 1;
    }

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

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

    /* Tighten the title row and make Show Total more visible */
    .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-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;
    }

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

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

    /* Tighten the three detail tables */
    .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;
    }

    /* Disclaimer banner */
    .fw-disclaimer {
        font-size: 12px;
        color: #6b7280;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 6px;
        padding: 6px 12px;
        margin-top: 4px;
    }
</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> When Max Continuations is greater than 1, a single workorder may appear more than once in the Fill Warning Breakdown.
    </div>

    <div class="fill-warning-layout">
        <!-- LEFT: pie chart -->
        <div class="fill-warning-panel">
            <div class="panel-title">Fill Warning Breakdown</div>
            <div class="chart-container">
                <canvas id="fw-pie-chart" width="500" height="500"></canvas>
            </div>
        </div>

        <!-- RIGHT: tower continuation settings -->
        <div class="fill-warning-panel">
            <div class="panel-title">Tower Continuation Settings</div>
            <table class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>Tower</th>
                        <th>Missed Blister</th>
                        <th>Multi Drop</th>
                        <th>PPK Missed Blister</th>
                        <th>PPK Multi Drop</th>
                        <th>Ran Empty Cont</th>
                        <th>Max Continuations</th>
                    </tr>
                </thead>
                <tbody id="continuation-settings-body"></tbody>
            </table>
        </div>
    </div>

    <div class="warning-table-title-row">
        <div class="panel-title">
            Detail Tables: <span id="selected-warning-label">Total</span>
        </div>
        <div class="warning-filter-buttons">
            <button type="button" class="warning-filter-btn active" data-warning-type="">
                Total
            </button>
            <button type="button" class="warning-filter-btn" data-warning-type="FW_MULTI_DROP">
                Multi Drop
            </button>
            <button type="button" class="warning-filter-btn" data-warning-type="FW_MISSED_BLISTER">
                Missed Blister
            </button>
            <button type="button" class="warning-filter-btn" data-warning-type="FW_OVER_COUNT">
                Over Count
            </button>
<!--            Is this one even needed?        stubbing it out just incase for later         -->
<!--            <button type="button" class="warning-filter-btn" data-warning-type="FW_OTHER">-->
<!--                Other-->
<!--            </button>-->
            <button type="button" class="warning-filter-btn" data-warning-type="RAN_EMPTY_WARN">
                Ran Empty
            </button>
            <button type="button" class="warning-filter-btn" data-warning-type="RAN_EMPTY_NO_PILL_FLOW_WARN">
                No Pill Flow
            </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="warning-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="warning-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="warning-count-header">Total</th>
                    </tr>
                </thead>
                <tbody id="tower-data-body"></tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}