import 'bootstrap';

const shell = document.getElementById('arenaShell');
const sidebarToggle = document.getElementById('sidebarToggle');
const headerSearch = document.getElementById('headerSearch');
const commandPalette = document.getElementById('commandPalette');
const paletteBackdrop = document.getElementById('paletteBackdrop');
const commandInput = document.getElementById('commandInput');
const notificationTrigger = document.getElementById('notificationTrigger');
const notificationPanel = document.getElementById('notificationPanel');
const profileTrigger = document.getElementById('profileTrigger');
const profileDropdown = document.getElementById('profileDropdown');
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mobileOffcanvas = document.getElementById('mobileOffcanvas');
const offcanvasOverlay = document.getElementById('offcanvasOverlay');
const offcanvasClose = document.getElementById('offcanvasClose');

function closeDropdowns() {
    notificationPanel?.classList.remove('open');
    profileDropdown?.classList.remove('open');
    notificationTrigger?.setAttribute('aria-expanded', 'false');
    profileTrigger?.setAttribute('aria-expanded', 'false');
}

function openPalette() {
    commandPalette?.classList.add('open');
    paletteBackdrop?.classList.add('open');
    setTimeout(() => commandInput?.focus(), 50);
}

function closePalette() {
    commandPalette?.classList.remove('open');
    paletteBackdrop?.classList.remove('open');
}

sidebarToggle?.addEventListener('click', () => {
    shell?.classList.toggle('is-sidebar-collapsed');
    const collapsed = shell?.classList.contains('is-sidebar-collapsed');
    sidebarToggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
});

headerSearch?.addEventListener('click', openPalette);

document.addEventListener('keydown', (event) => {
    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
        event.preventDefault();
        openPalette();
    }
    if (event.key === 'Escape') {
        closePalette();
        closeDropdowns();
        mobileOffcanvas?.classList.remove('open');
        offcanvasOverlay?.classList.remove('open');
    }
});

paletteBackdrop?.addEventListener('click', closePalette);

notificationTrigger?.addEventListener('click', (event) => {
    event.stopPropagation();
    const open = notificationPanel?.classList.toggle('open');
    profileDropdown?.classList.remove('open');
    notificationTrigger.setAttribute('aria-expanded', open ? 'true' : 'false');
});

profileTrigger?.addEventListener('click', (event) => {
    event.stopPropagation();
    const open = profileDropdown?.classList.toggle('open');
    notificationPanel?.classList.remove('open');
    profileTrigger.setAttribute('aria-expanded', open ? 'true' : 'false');
});

document.addEventListener('click', () => closeDropdowns());

mobileMenuToggle?.addEventListener('click', () => {
    mobileOffcanvas?.classList.add('open');
    offcanvasOverlay?.classList.add('open');
    mobileMenuToggle.setAttribute('aria-expanded', 'true');
});

offcanvasClose?.addEventListener('click', () => {
    mobileOffcanvas?.classList.remove('open');
    offcanvasOverlay?.classList.remove('open');
    mobileMenuToggle?.setAttribute('aria-expanded', 'false');
});

offcanvasOverlay?.addEventListener('click', () => {
    mobileOffcanvas?.classList.remove('open');
    offcanvasOverlay?.classList.remove('open');
    mobileMenuToggle?.setAttribute('aria-expanded', 'false');
});

document.querySelectorAll('.lang-btn').forEach((btn) => {
    btn.addEventListener('click', () => {
        const lang = btn.getAttribute('data-lang');
        if (!lang) return;
        const url = new URL(window.location.href);
        url.searchParams.set('locale', lang);
        window.location.href = url.toString();
    });
});

function pad(value) {
    return String(value).padStart(2, '0');
}

function initCountdowns() {
    document.querySelectorAll('[data-countdown-to]').forEach((root) => {
        const target = Date.parse(root.getAttribute('data-countdown-to') || '');
        if (Number.isNaN(target)) return;

        const days = root.querySelector('[data-cd="days"]');
        const hours = root.querySelector('[data-cd="hours"]');
        const mins = root.querySelector('[data-cd="mins"]');
        const secs = root.querySelector('[data-cd="secs"]');

        const tick = () => {
            const diff = Math.max(0, target - Date.now());
            const totalSec = Math.floor(diff / 1000);
            if (days) days.textContent = pad(Math.floor(totalSec / 86400));
            if (hours) hours.textContent = pad(Math.floor((totalSec % 86400) / 3600));
            if (mins) mins.textContent = pad(Math.floor((totalSec % 3600) / 60));
            if (secs) secs.textContent = pad(totalSec % 60);
        };

        tick();
        setInterval(tick, 1000);
    });
}

initCountdowns();
