{% extends 'base_blank.html' %}
{% load i18n %}

{% block title %}{% trans "Image Gallery" %} - {% trans "GoLinks" %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        overflow: hidden;
        height: 100vh;
        background-color: #0a0a0a;
        color: #fff;
    }

    .app-container {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .slideshow-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: none;
        will-change: transform, opacity;
    }

    .slide.active {
        opacity: 1;
        z-index: 2;
    }

    /* Animation effects */
    .fade {
        transition: opacity 1.5s ease-in-out;
    }

    .slide-left {
        transform: translateX(100%);
    }

    .slide-left.active {
        transform: translateX(0);
        transition: transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .slide-right {
        transform: translateX(-100%);
    }

    .slide-right.active {
        transform: translateX(0);
        transition: transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .zoom {
        transform: scale(1.2);
    }

    .zoom.active {
        transform: scale(1);
        transition: transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .control-panel {
        position: absolute;
        bottom: 30px;
        right: 80px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 15px 25px;
        display: flex;
        gap: 20px;
        z-index: 10;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: bottom right;
    }

    .control-panel.folded {
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
    }

    .control-toggle {
        position: absolute;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 11;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease;
    }

    .control-toggle:hover {
        transform: scale(1.1);
    }

    .control-toggle i {
        font-size: 20px;
        color: white;
        transition: transform 0.3s ease;
    }

    .control-toggle.active i {
        transform: rotate(45deg);
    }

    .control-group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .control-label {
        font-size: 13px;
        margin-bottom: 5px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 500;
    }

    select, input {
        background: rgba(50, 50, 50, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        padding: 8px 15px;
        border-radius: 25px;
        min-width: 120px;
        font-size: 14px;
        outline: none;
        cursor: pointer;
    }

    select:focus, input:focus {
        border-color: rgba(255, 255, 255, 0.3);
    }

    option {
        background: #222;
    }

    .btn {
        background: rgba(50, 50, 50, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        padding: 8px 15px;
        border-radius: 25px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .btn:hover {
        background: rgba(70, 70, 70, 0.8);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .title {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 5;
        background: rgba(0, 0, 0, 0.5);
        padding: 15px 40px;
        border-radius: 30px;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: 1px;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .title span {
        color: #ff6b6b;
        font-weight: 600;
    }

    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top: 4px solid #4ecdc4;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        letter-spacing: 1px;
    }

    .app-logo {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 5;
        font-size: 24px;
        font-weight: 700;
        color: white;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .app-logo i {
        color: #ff6b6b;
    }

    .timer-display {
        position: absolute;
        bottom: 30px;
        left: 30px;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 14px;
        z-index: 5;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Fullscreen button styles removed as it now uses standard button styling */

    .progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
        z-index: 15;
        width: 0%;
        transition: width 0.8s ease-out;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
        animation: pulse 2s ease-in-out infinite alternate;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
        }
        100% {
            box-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
        }
    }

    .preview-title {
        margin-bottom: 10px;
        font-size: 16px;
        color: #4ecdc4;
    }

    .preview-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .back-button {
        position: absolute;
        top: 30px;
        right: 100px;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 14px;
        z-index: 5;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .back-button:hover {
        background: rgba(50, 50, 50, 0.8);
        color: #4ecdc4;
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .control-panel {
            flex-direction: column;
            border-radius: 20px;
            bottom: 20px;
            padding: 15px;
        }

        .title {
            font-size: 18px;
            top: 20px;
            padding: 10px 20px;
            width: 90%;
        }

        .photo-info {
            width: 90%;
            text-align: center;
            bottom: 150px;
        }

        .back-button {
            right: 30px;
            top: 80px;
            padding: 6px 12px;
            font-size: 12px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="app-container">
    <div class="progress-bar"></div>
    <div class="slideshow-container" id="slideshow"></div>
    <div class="control-toggle" id="controlToggle">
        <i class="fas fa-cog"></i>
    </div>
    <div class="control-panel folded" id="controlPanel">
        <div class="control-group">
            <div class="control-label">{% trans "Animation Effect" %}</div>
            <select id="animationType">
                <option value="fade">{% trans "Fade In/Out" %}</option>
                <option value="slide-left">{% trans "Slide Left" %}</option>
                <option value="slide-right">{% trans "Slide Right" %}</option>
                <option value="zoom">{% trans "Zoom Effect" %}</option>
            </select>
        </div>

        <div class="control-group">
            <div class="control-label">{% trans "Interval (seconds)" %}</div>
            <input type="number" id="interval" min="5" max="60" value="15">
        </div>

        <div class="control-group">
            <div class="control-label">{% trans "Image Source" %}</div>
            <select id="imageSource">
                <option value="home">{% trans "Home Gallery" %}</option>
                <option value="picsum">{% trans "Picsum Photos" %}</option>
                <option value="other">{% trans "Other" %}</option>
            </select>
        </div>

        <div class="control-group">
            <div class="control-label">{% trans "Actions" %}</div>
            <div style="display: flex; gap: 10px;">
                <button class="btn" id="nextBtn">
                    <i class="fas fa-forward"></i> {% trans "Next" %}
                </button>
                <button class="btn" id="fullscreenBtn">
                    <i class="fas fa-expand"></i> {% trans "Fullscreen" %}
                </button>
            </div>
        </div>
    </div>

    <div class="timer-display">
        <i class="fas fa-clock"></i>
        <span id="timer">00:15</span>
    </div>

    <div class="loading" id="loading">
        <div class="spinner"></div>
        <div class="loading-text">{% trans "Loading..." %}</div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Application configuration
    const config = {
        animationType: 'fade',
        interval: 15000, // 15 seconds
        currentSlide: null,
        nextSlide: null,
        timer: null,
        countdown: null,
        imageSource: 'home' // Default to home
    };

    // DOM elements
    const dom = {
        slideshow: document.getElementById('slideshow'),
        animationType: document.getElementById('animationType'),
        imageSource: document.getElementById('imageSource'),
        intervalInput: document.getElementById('interval'),
        nextBtn: document.getElementById('nextBtn'),
        loading: document.getElementById('loading'),
        timerDisplay: document.getElementById('timer'),
        progressBar: document.querySelector('.progress-bar'),
        controlToggle: document.getElementById('controlToggle'),
        controlPanel: document.getElementById('controlPanel'),
        fullscreenBtn: document.getElementById('fullscreenBtn')
    };

    // Initialize application
    function initApp() {
        // Set event listeners
        dom.animationType.addEventListener('change', updateAnimationType);
        dom.imageSource.addEventListener('change', updateImageSource);
        dom.intervalInput.addEventListener('change', updateInterval);
        dom.nextBtn.addEventListener('click', loadNextImage);
        dom.controlToggle.addEventListener('click', toggleControls);
        dom.fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Load first image
        loadNextImage();
    }

    // Update animation type
    function updateAnimationType() {
        config.animationType = dom.animationType.value;
    }

    // Update image source
    function updateImageSource() {
        config.imageSource = dom.imageSource.value;
        // Load new image immediately when source changes
        loadNextImage();
    }

    // Update interval
    function updateInterval() {
        const seconds = parseInt(dom.intervalInput.value);
        if (seconds >= 5 && seconds <= 60) {
            config.interval = seconds * 1000;
            resetTimer();
        } else {
            alert('{% trans "Interval must be between 5 and 60 seconds" %}');
            dom.intervalInput.value = config.interval / 1000;
        }
    }

    // Reset timer
    function resetTimer() {
        clearInterval(config.timer);
        if (config.countdown) {
            cancelAnimationFrame(config.countdown);
        }

        // Reset progress bar
        dom.progressBar.style.width = '0%';

        startTimer();
        startCountdown();
    }

    // Start slideshow timer
    function startTimer() {
        config.timer = setInterval(loadNextImage, config.interval);
    }

    // Start countdown display
    function startCountdown() {
        clearInterval(config.countdown);

        let remaining = config.interval / 1000;
        let startTime = Date.now();
        updateTimerDisplay(remaining);

        function updateProgress() {
            const elapsed = (Date.now() - startTime) / 1000;
            remaining = Math.max(0, (config.interval / 1000) - elapsed);

            if (remaining <= 0) {
                remaining = config.interval / 1000;
                startTime = Date.now();
            }

            updateTimerDisplay(Math.ceil(remaining));

            // Smooth progress bar update
            const progress = Math.min(100, ((config.interval / 1000 - remaining) / (config.interval / 1000)) * 100);
            dom.progressBar.style.width = `${progress}%`;

            config.countdown = requestAnimationFrame(updateProgress);
        }

        config.countdown = requestAnimationFrame(updateProgress);
    }

    // Update timer display
    function updateTimerDisplay(seconds) {
        dom.timerDisplay.textContent = `00:${seconds.toString().padStart(2, '0')}`;
    }

    // Toggle controls panel
    function toggleControls() {
        dom.controlPanel.classList.toggle('folded');
        dom.controlToggle.classList.toggle('active');
    }

    // Toggle fullscreen mode
    function toggleFullscreen() {
        if (!document.fullscreenElement &&    // standard property
            !document.mozFullScreenElement && // Firefox
            !document.webkitFullscreenElement && // Chrome, Safari and Opera
            !document.msFullscreenElement) {  // IE/Edge

            // Enter fullscreen
            const docElem = document.documentElement;
            if (docElem.requestFullscreen) {
                docElem.requestFullscreen();
            } else if (docElem.mozRequestFullScreen) { // Firefox
                docElem.mozRequestFullScreen();
            } else if (docElem.webkitRequestFullscreen) { // Chrome, Safari and Opera
                docElem.webkitRequestFullscreen();
            } else if (docElem.msRequestFullscreen) { // IE/Edge
                docElem.msRequestFullscreen();
            }
            dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
            dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
        } else {
            // Exit fullscreen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) { // Firefox
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { // IE/Edge
                document.msExitFullscreen();
            }
            dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
            dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
        }
    }

    // Get random image ID (between 1000-1084)
    function getRandomImageId() {
        return Math.floor(Math.random() * 85) + 1000;
    }

    // Get image URL based on source
    function getImageUrl() {
        const width = window.innerWidth;
        const height = window.innerHeight;

        if (config.imageSource === 'picsum') {
            const imageId = getRandomImageId();
            return `https://picsum.photos/id/${imageId}/${width}/${height}`;
        } if (config.imageSource === 'home') {
            return `/api/images/random/${width}/${height}/?fit=crop&id=${getRandomImageId()}`;
        }
        else {
            return `/api/images/random/${width}/${height}/?fit=clip&id=${getRandomImageId()}`;
        }
    }

    // Load next image
    async function loadNextImage() {
        dom.loading.style.display = 'flex';

        try {
            const imgUrl = getImageUrl();

            // Create new slide
            const slide = document.createElement('div');
            slide.className = `slide ${config.animationType}`;
            slide.style.backgroundImage = `url(${imgUrl})`;

            // Add to slideshow container
            dom.slideshow.appendChild(slide);

            // Wait for image to load
            await new Promise((resolve) => {
                const img = new Image();
                img.src = imgUrl;
                img.onload = resolve;
            });

            // Show new slide
            setTimeout(() => {
                // Remove current active slide
                if (config.currentSlide) {
                    config.currentSlide.classList.remove('active');

                    // Remove element after animation ends
                    setTimeout(() => {
                        if (config.currentSlide && !config.currentSlide.classList.contains('active')) {
                            config.currentSlide.remove();
                        }
                    }, 2000);
                }

                // Set new slide as active
                slide.classList.add('active');
                config.currentSlide = slide;

                dom.loading.style.display = 'none';
            }, 100);

            // Reset timer
            resetTimer();

        } catch (error) {
            console.error('Failed to load image:', error);
            dom.loading.innerHTML = '<div class="loading-text">{% trans "Image loading failed, please retry" %}</div>';
            setTimeout(() => {
                dom.loading.style.display = 'none';
                loadNextImage();
            }, 2000);
        }
    }

    // Initialize app when page loads
    window.addEventListener('DOMContentLoaded', initApp);

    // Listen for fullscreen changes to update button icon
    document.addEventListener('fullscreenchange', updateFullscreenButtonIcon);
    document.addEventListener('webkitfullscreenchange', updateFullscreenButtonIcon);
    document.addEventListener('mozfullscreenchange', updateFullscreenButtonIcon);
    document.addEventListener('MSFullscreenChange', updateFullscreenButtonIcon);

    function updateFullscreenButtonIcon() {
        if (document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement) {
            // If in fullscreen
            dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
            dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
        } else {
            // If not in fullscreen
            dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
            dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
        }
    }
</script>
{% endblock %}