document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('tableSearch');
    const rows = Array.from(document.querySelectorAll('.js-search-row'));

    if (searchInput && rows.length) {
        searchInput.addEventListener('input', (event) => {
            const query = event.target.value.trim().toLowerCase();
            rows.forEach((row) => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(query) ? '' : 'none';
            });
        });
    }

    const syncScorePreview = (container) => {
        const targetInput = container.querySelector('.js-score-target');
        const currentInput = container.querySelector('.js-score-current');
        const output = container.querySelector('.js-score-output');

        if (!targetInput || !currentInput || !output) {
            return;
        }

        const render = () => {
            const target = parseFloat(targetInput.value || '0');
            const current = parseFloat(currentInput.value || '0');
            let score = 0;
            if (target > 0) {
                score = Math.max(0, Math.min(100, (current / target) * 100));
            }
            output.textContent = `${score.toFixed(1).replace('.0', '')}%`;
        };

        ['input', 'change'].forEach((eventName) => {
            targetInput.addEventListener(eventName, render);
            currentInput.addEventListener(eventName, render);
        });
        render();
    };

    document.querySelectorAll('#okrCreateForm, #okrReviewForm').forEach(syncScorePreview);

    const sidebar = document.getElementById('sidebarMenu');
    const sidebarToggle = document.getElementById('sidebarToggle');
    if (sidebar && sidebarToggle) {
        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.toggle('is-open');
        });
    }

    document.querySelectorAll('[data-auto-dismiss="true"]').forEach((alertEl) => {
        window.setTimeout(() => {
            alertEl.classList.add('fade');
            alertEl.classList.remove('show');
        }, 3200);
    });
});