(function () {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        var diagnostics = window.TaberebaSettingsDiagnostics;
        var button = document.getElementById('tb-run-settings-diagnostic');
        var panel = document.getElementById('tb-settings-diagnostic-result');
        var heading = document.getElementById('tb-settings-diagnostic-heading');
        var summary = document.getElementById('tb-settings-diagnostic-summary');
        var items = document.getElementById('tb-settings-diagnostic-items');
        var close = document.getElementById('tb-close-settings-diagnostic');
        var settingsRoot = document.getElementById('tb-user-settings');
        if (!diagnostics || !button || !panel || !heading || !summary || !items || !close || !settingsRoot) {
            return;
        }
        var labels = {ok: '✓ 正常', unset: '− 未設定', review: '！要確認'};
        var messages = {
            ok: ['想定される入力形式です。', 'ASP管理画面の設定と一致し、実際に遷移できるかもご確認ください。'],
            unset: ['この項目は未設定です。', 'このサービスで成果計測する場合だけ設定してください。'],
            review: ['入力形式または移行後の確認状態を確認してください。', 'ASP管理画面から取得した未加工MyLink HTMLと照合してください。']
        };

        function element(tag, className, text) {
            var node = document.createElement(tag);
            if (className) { node.className = className; }
            if (typeof text === 'string') { node.textContent = text; }
            return node;
        }

        function currentSettings() {
            try {
                return JSON.parse(window.localStorage.getItem('tabereba_settings_v1') || '{}');
            } catch (error) {
                return {};
            }
        }

        function addSummary(label, value, className) {
            var box = element('div', className || 'tb-settings-diagnostic-count');
            box.appendChild(element('span', '', label));
            box.appendChild(element('strong', '', value));
            summary.appendChild(box);
        }

        function focusField(fieldId) {
            var field = document.getElementById(fieldId);
            panel.hidden = true;
            if (!field) {
                return;
            }
            field.scrollIntoView({behavior: 'smooth', block: 'center'});
            window.setTimeout(function () { field.focus(); }, 350);
        }

        function renderItem(item) {
            var card = element('article', 'tb-settings-diagnostic-item is-' + item.status);
            var cardHeading = element('div', 'tb-settings-diagnostic-item-heading');
            cardHeading.appendChild(element('span', 'tb-settings-diagnostic-status', labels[item.status]));
            cardHeading.appendChild(element('h4', '', item.label));
            card.appendChild(cardHeading);
            card.appendChild(element('p', '', messages[item.status][0]));
            card.appendChild(element('p', 'tb-settings-diagnostic-action-text', messages[item.status][1]));
            var link = element('button', 'tb-button tb-button-secondary tb-button-small',
                item.status === 'unset' ? 'この項目を設定する' : '入力欄を確認する');
            link.type = 'button';
            link.addEventListener('click', function () { focusField(item.field_id); });
            card.appendChild(link);
            items.appendChild(card);
        }

        button.addEventListener('click', function () {
            var settings = currentSettings();
            summary.textContent = '';
            items.textContent = '';
            panel.classList.remove('is-stale');
            if (settings.service !== 'tabereba' || settings.schema_version !== 1
                || settings.version !== 1 || !Array.isArray(settings.sites)
                || settings.sites.length < 1 || settings.sites.length > 20) {
                addSummary('診断結果', '設定を確認できませんでした', 'tb-settings-diagnostic-count is-review');
                panel.hidden = false;
                heading.focus();
                return;
            }
            var index = parseInt(settings.active_site_index, 10);
            index = isNaN(index) || index < 0 || index >= settings.sites.length ? 0 : index;
            var result = diagnostics.diagnoseSite(settings.sites[index]);
            addSummary('対象サイト', result.site_name || '名称未設定サイト');
            addSummary('✓ 正常', result.counts.ok + '件', 'tb-settings-diagnostic-count is-ok');
            addSummary('− 未設定', result.counts.unset + '件');
            addSummary('！要確認', result.counts.review + '件', 'tb-settings-diagnostic-count is-review');
            result.items.forEach(renderItem);
            panel.hidden = false;
            heading.focus();
        });

        close.addEventListener('click', function () {
            panel.hidden = true;
            button.focus();
        });

        settingsRoot.addEventListener('input', function (event) {
            if (!panel.hidden && event.target.matches('input, textarea, select')) {
                panel.classList.add('is-stale');
            }
        });
    });
}());