(function () {
    'use strict';

    var root = document.querySelector('[data-diar-r2-reports]');
    if (!root) return;

    var tabButtons = Array.prototype.slice.call(root.querySelectorAll('[data-r2-tab]'));
    var panels = Array.prototype.slice.call(root.querySelectorAll('[data-r2-panel]'));
    var detailButtons = Array.prototype.slice.call(root.querySelectorAll('[data-detail-tab]'));
    var detailPanels = Array.prototype.slice.call(root.querySelectorAll('[data-detail-panel]'));
    var hashMap = {
        'report-dashboard': 'dashboard',
        'report-details': 'details',
        'report-exports': 'exports',
        'report-snapshots': 'snapshots'
    };

    function setVisible(element, visible) {
        element.hidden = !visible;
        element.classList.toggle('is-active', visible);
        element.setAttribute('aria-hidden', visible ? 'false' : 'true');
    }

    function activateMain(name, updateHash) {
        var exists = false;
        tabButtons.forEach(function (button) {
            var active = button.getAttribute('data-r2-tab') === name;
            button.classList.toggle('is-active', active);
            button.setAttribute('aria-selected', active ? 'true' : 'false');
            if (active) exists = true;
        });
        if (!exists) name = 'dashboard';
        panels.forEach(function (panel) {
            setVisible(panel, panel.getAttribute('data-r2-panel') === name);
        });
        if (updateHash && window.history && window.history.replaceState) {
            window.history.replaceState(null, '', '#report-' + name);
        }
        validateGeometry('TAB_' + name.toUpperCase());
    }

    function activateDetail(name) {
        var exists = false;
        detailButtons.forEach(function (button) {
            var active = button.getAttribute('data-detail-tab') === name;
            button.classList.toggle('is-active', active);
            button.setAttribute('aria-selected', active ? 'true' : 'false');
            if (active) exists = true;
        });
        if (!exists) name = 'daily';
        detailPanels.forEach(function (panel) {
            setVisible(panel, panel.getAttribute('data-detail-panel') === name);
        });
    }

    function currentHashTab() {
        var key = (window.location.hash || '').replace(/^#/, '');
        return hashMap[key] || (key.indexOf('report-') === 0 ? key.substring(7) : 'dashboard');
    }

    function validateGeometry(phase) {
        window.requestAnimationFrame(function () {
            var visiblePanels = panels.filter(function (p) { return !p.hidden && window.getComputedStyle(p).display !== 'none'; });
            var activePanel = visiblePanels.length ? visiblePanels[0].getAttribute('data-r2-panel') : 'NONE';
            var pass = visiblePanels.length === 1;
            if (window.console && console.log) {
                console.log('DIAR_6B_5_R2_REPORT_UI|' + (pass ? 'PASS' : 'FAIL') + '|PHASE=' + phase + '|ACTIVE_PANEL=' + activePanel + '|VISIBLE_PANELS=' + visiblePanels.length);
            }
        });
    }

    tabButtons.forEach(function (button) {
        button.setAttribute('role', 'tab');
        button.addEventListener('click', function () {
            activateMain(button.getAttribute('data-r2-tab') || 'dashboard', true);
        });
    });
    detailButtons.forEach(function (button) {
        button.setAttribute('role', 'tab');
        button.addEventListener('click', function () {
            activateDetail(button.getAttribute('data-detail-tab') || 'daily');
        });
    });

    activateDetail('daily');
    activateMain(currentHashTab(), false);
    window.addEventListener('hashchange', function () { activateMain(currentHashTab(), false); });
    window.addEventListener('pageshow', function () {
        activateMain(currentHashTab(), false);
        validateGeometry('PAGESHOW');
    });
    window.addEventListener('load', function () { validateGeometry('LOAD'); });
    setTimeout(function () { validateGeometry('INITIAL_500MS'); }, 500);
}());
