<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memories - Reitti</title>
    <link rel="icon" th:href="@{/img/logo.svg}">
    <link rel="stylesheet" th:href="@{/css/main.css}" href="../../static/css/main.css">
    <link rel="stylesheet" th:href="@{/css/lineicons.css}" href="../../static/css/lineicons.css">
    <link rel="stylesheet" th:href="@{/css/leaflet.css}" href="../../static/css/leaflet.css">
    <script th:src="@{/js/htmx.min.js}"></script>
    <script th:src="@{/js/leaflet.js}"></script>
    <script th:src="@{/js/leaflet.geodesic.2.7.2.js}"></script>
    <script th:src="@{/js/TileLayer.Grayscale.js}"></script>
    <script th:src="@{/js/raw-location-loader.js}"></script>
</head>
<body class="memories-page">
    <div id="memories-panel" class="memories-overview"></div>
    <div class="navigation-container" th:replace="~{fragments/main-navigation :: main-navigation('memories')}"></div>

    <div class="timeline">
        <div class="timeline-container">
            <div id="years-navigation"
                 hx-get="/memories/years-navigation"
                 hx-trigger="load">
                <div class="photo-modal-loading-spinner htmx-indicator" th:text="#{timeline.loading}">Loading...</div>
            </div>
        </div>
    </div>

    <!-- Memory Processing Overlay -->
    <div id="memory-processing-overlay" class="memory-processing-overlay">
        <div class="memory-processing-content">
            <div class="memory-processing-spinner">
                <i class="lni lni-spinner-2 lni-is-spinning"></i>
            </div>
            <h2 class="memory-processing-title" th:text="#{memory.processing.title.creating}">Creating Memory</h2>
            <div class="memory-processing-steps">
                <div class="processing-step active" data-step="clustering">
                    <i class="lni lni-bike"></i>
                    <span th:text="#{memory.processing.step.clustering}">Clustering trips and visits...</span>
                </div>
                <div class="processing-step" data-step="visits">
                    <i class="lni lni-map-marker-1"></i>
                    <span th:text="#{memory.processing.step.visits}">Creating visit records...</span>
                </div>
                <div class="processing-step" data-step="accommodation">
                    <i class="lni lni-home-2"></i>
                    <span th:text="#{memory.processing.step.accommodation}">Determining accommodation...</span>
                </div>
                <div class="processing-step" data-step="texts">
                    <i class="lni lni-text-format"></i>
                    <span th:text="#{memory.processing.step.texts}">Generating texts...</span>
                </div>
                <div class="processing-step" data-step="images">
                    <i class="lni lni-photos"></i>
                    <span th:text="#{memory.processing.step.images}">Copying images...</span>
                </div>
            </div>
            <div class="memory-processing-progress">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
                <span class="progress-text" th:text="#{memory.processing.step.counter(1, 5)}">Step 1 of 5</span>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        window.userSettings = /*[[${userSettings}]]*/ {};

        function getUserTimezone() {
            if (window.userSettings.timeZoneOverride) {
                return window.userSettings.timeZoneOverride;
            } else {
                return Intl.DateTimeFormat().resolvedOptions().timeZone;
            }
        }

        function shouldTrigger(element) {
            return !element.classList.contains('active');
        }
        // Memory processing animation
        let processingAnimationInterval = null;

        document.addEventListener('htmx:beforeRequest', function(event) {
            if (event.detail.target.id === 'memory-processing-overlay' ||
                event.detail.elt.getAttribute('hx-indicator') === '#memory-processing-overlay') {
                startMemoryProcessingAnimation();
            }
        });

        function startMemoryProcessingAnimation() {
            const steps = [
                { step: 'clustering', text: /*[[#{memory.processing.step.clustering}]]*/ 'Clustering trips and visits...' },
                { step: 'visits', text: /*[[#{memory.processing.step.visits}]]*/ 'Creating visit records...' },
                { step: 'accommodation', text: /*[[#{memory.processing.step.accommodation}]]*/ 'Determining accommodation...' },
                { step: 'texts', text: /*[[#{memory.processing.step.texts}]]*/ 'Generating texts...' },
                { step: 'images', text: /*[[#{memory.processing.step.images}]]*/ 'Copying images...' }
            ];

            let currentStepIndex = 0;
            const progressFill = document.querySelector('.progress-fill');
            const progressText = document.querySelector('.progress-text');

            // Set progress bar to indeterminate animation
            progressFill.style.width = '100%';
            progressFill.style.animation = 'indeterminate-progress 2s ease-in-out infinite';

            function cycleSteps() {
                const stepElements = document.querySelectorAll('.processing-step');

                // Reset all steps
                stepElements.forEach(el => {
                    el.classList.remove('active', 'completed');
                });

                // Activate current step
                if (stepElements[currentStepIndex]) {
                    stepElements[currentStepIndex].classList.add('active');
                    progressText.textContent = steps[currentStepIndex].text;
                }

                // Move to next step, cycle back to beginning
                currentStepIndex = (currentStepIndex + 1) % steps.length;
            }

            // Start cycling immediately
            cycleSteps();

            // Continue cycling every 2 seconds
            processingAnimationInterval = setInterval(cycleSteps, 2000);
        }

        // Clean up animation when request completes
        document.addEventListener('htmx:afterRequest', function(event) {
            if (event.detail.target.id === 'memory-processing-overlay' ||
                event.detail.elt.getAttribute('hx-indicator') === '#memory-processing-overlay') {
                if (processingAnimationInterval) {
                    clearInterval(processingAnimationInterval);
                    processingAnimationInterval = null;
                }
            }
        });
    </script>
</body>
</html>
