const FIRST_THRESHOLD = 80;  // rivela pulsante
const SECOND_THRESHOLD = 160; // elimina diretta
const CLOSE_THRESHOLD = 40;  // swipe a destra per richiudere
const MAX_SWIPE = 200;

window.initNotifications = () => {
    document.querySelectorAll('.row').forEach(initRow);
};

function initRow(row) {
    const card = row.querySelector('.notification-card');
    const btn = row.querySelector('.trash-btn');
    let startX = 0, currentX = 0, dragging = false;
    let open = false;

    card.addEventListener('pointerdown', (e) => {
        if (e.pointerType === 'mouse' && e.button !== 0) return;
        dragging = true;
        startX = e.clientX;
        card.setPointerCapture(e.pointerId);
        card.style.transition = 'none';
    });

    card.addEventListener('pointermove', (e) => {
        if (!dragging) return;
        const dx = e.clientX - startX;
        let translate = dx;

        if (!open) {
            // swiping left to open/delete
            translate = Math.max(-MAX_SWIPE, Math.min(0, dx));
        } else {
            // if already open, allow swipe right to close
            translate = Math.min(0, -FIRST_THRESHOLD + dx);
        }
        currentX = translate;
        card.style.transform = `translateX(${translate}px)`;
    });

    function endDrag() {
        if (!dragging) return;
        dragging = false;
        card.style.transition = 'transform .2s ease';

        if (!open) {
            if (currentX < -SECOND_THRESHOLD) {
                card.style.transform = `translateX(-${MAX_SWIPE}px)`;
                setTimeout(() => removeRow(row), 200);
            } else if (currentX < -FIRST_THRESHOLD) {
                card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
                open = true;
            } else {
                card.style.transform = 'translateX(0)';
                open = false;
            }
        } else {
            // se è già aperto e vado a destra abbastanza → chiudo
            if (currentX > -FIRST_THRESHOLD + CLOSE_THRESHOLD) {
                card.style.transform = 'translateX(0)';
                open = false;
            } else {
                card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
                open = true;
            }
        }
    }

    card.addEventListener('pointerup', endDrag);
    card.addEventListener('pointercancel', endDrag);

    btn.addEventListener('click', () => removeRow(row));
}

function removeRow(row) {
    const h = row.getBoundingClientRect().height;
    row.style.height = h + 'px';
    row.classList.add('collapsing');
    requestAnimationFrame(() => {
        row.style.opacity = '0';
        row.style.marginTop = '0';
        row.style.marginBottom = '0';
        row.style.height = '0';
    });
    setTimeout(() => row.remove(), 220);
}