// Chronological - Minimal JavaScript
// Most interactivity is handled by HTMX

document.addEventListener('DOMContentLoaded', function() {
    // Close modal when clicking backdrop
    document.querySelectorAll('dialog').forEach(function(dialog) {
        dialog.addEventListener('click', function(event) {
            if (event.target === dialog) {
                dialog.close();
            }
        });
    });

    // Event delegation for dynamic content
    document.body.addEventListener('click', function(event) {
        var target = event.target;
        
        // Handle modal opening via data attribute
        var modalOpener = target.closest('[data-opens-modal]');
        if (modalOpener) {
            var modalId = modalOpener.getAttribute('data-opens-modal');
            var modal = document.getElementById(modalId);
            if (modal && modal.showModal) {
                modal.showModal();
            }
        }
        
        // Handle diary edit toggle
        if (target.matches('[data-action="toggle-diary-edit"]')) {
            var display = target.closest('.diary-display');
            if (display) {
                display.style.display = 'none';
                var editForm = display.nextElementSibling;
                if (editForm) {
                    editForm.style.display = 'block';
                }
            }
        }
        
        // Handle diary edit cancel
        if (target.matches('[data-action="cancel-diary-edit"]')) {
            var editDiv = target.closest('.diary-edit');
            if (editDiv) {
                editDiv.style.display = 'none';
                var displayDiv = editDiv.previousElementSibling;
                if (displayDiv) {
                    displayDiv.style.display = 'block';
                }
            }
        }
    });
});

// Handle keyboard shortcuts
document.addEventListener('keydown', function(event) {
    // Close modal on Escape
    if (event.key === 'Escape') {
        document.querySelectorAll('dialog[open]').forEach(function(dialog) {
            dialog.close();
        });
    }
});

// HTMX event handlers
document.body.addEventListener('htmx:afterSwap', function(event) {
    // Re-initialize any dynamic elements after HTMX swaps
    if (event.detail.target.id === 'day-modal-content') {
        // Focus textarea when opening day modal with diary form
        var textarea = event.detail.target.querySelector('textarea');
        if (textarea) {
            textarea.focus();
        }
    }
});