(function () {
    'use strict';

    function $(id) { return document.getElementById(id); }
    function text(id, value) { $(id).textContent = value == null || value === '' ? '—' : String(value); }

    var key = decodeURIComponent(location.hash.replace(/^#/, ''));

    function render(data) {
        data = data || {};
        text('rule', data.rule);
        text('reason', data.reason);
        text('sourceUrl', data.sourceUrl);
        text('path', data.path);
        text('redirects', data.redirects);
        text('range', data.range ? JSON.stringify(data.range, null, 2) : '—');
        $('triedHosts').value = Array.isArray(data.triedHosts) ? data.triedHosts.join('\n') : '';
    }

    if (key) {
        chrome.storage.local.get([key], function (items) {
            render(items[key]);
        });
    } else {
        render(null);
    }

    $('copy').addEventListener('click', function () {
        var payload = {
            rule: $('rule').textContent,
            reason: $('reason').textContent,
            sourceUrl: $('sourceUrl').textContent,
            path: $('path').textContent,
            redirects: $('redirects').textContent,
            range: $('range').textContent,
            triedHosts: $('triedHosts').value.split('\n').filter(Boolean)
        };
        navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
    });

    $('openOptions').addEventListener('click', function () {
        if (chrome.runtime.openOptionsPage) chrome.runtime.openOptionsPage();
    });
})();