/**
 * Tab indicator — large semi-transparent blurred icon on the right side
 * of the viewport, reflecting the currently active tab.
 *
 * Visible whenever any background effect is active (Noise Field, shader,
 * CSS-based). Hidden only when no background effect is selected.
 */

const TAB_SVGS = {
    dashboard: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>`,
    automations: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>`,
    targets: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
    streams: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2-5 5-5-5"/><rect width="20" height="15" x="2" y="7" rx="2"/></svg>`,
    graph: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="6" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M7.5 7.5 10.5 16"/><path d="M16.5 7.5 13.5 16"/></svg>`,
};

let _el: HTMLDivElement | null = null;
let _currentTab: string | null = null;

function _ensureEl() {
    if (_el) return _el;
    _el = document.createElement('div');
    _el.id = 'tab-indicator';
    _el.setAttribute('aria-hidden', 'true');
    document.body.appendChild(_el);
    return _el;
}

/** Check if any background effect is currently active. */
function _isBgActive(): boolean {
    const html = document.documentElement;
    return html.getAttribute('data-bg-anim') === 'on'
        || html.hasAttribute('data-bg-effect');
}

export function updateTabIndicator(tabName) {
    if (tabName === _currentTab) return;
    _currentTab = tabName;
    const svg = TAB_SVGS[tabName];
    if (!svg) return;

    // Hide when no background effect is active
    if (!_isBgActive()) {
        const el = _ensureEl();
        el.classList.remove('tab-indicator-visible');
        return;
    }

    const el = _ensureEl();
    // Trigger crossfade: set opacity 0, swap content, fade in
    el.classList.remove('tab-indicator-visible');
    setTimeout(() => {
        el.innerHTML = svg;
        el.classList.add('tab-indicator-visible');
    }, 200);
}

export function initTabIndicator() {
    _ensureEl();

    // Listen for bg-anim and bg-effect changes to show/hide the indicator
    new MutationObserver(() => {
        const el = _ensureEl();
        if (!_isBgActive()) {
            el.classList.remove('tab-indicator-visible');
        } else if (_currentTab) {
            // Re-trigger show for the current tab
            const prev = _currentTab;
            _currentTab = null;
            updateTabIndicator(prev);
        }
    }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-bg-anim', 'data-bg-effect'] });

    // Set initial tab from current active button
    const active = document.querySelector('.tab-btn.active') as HTMLElement | null;
    if (active) {
        updateTabIndicator(active.dataset.tab);
    }
}
