<div class="gallery-container">
    <div class="gallery-header">
        <a href="<?php echo Config::get('URL'); ?>gallery/my" class="gallery-back">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
            Back to My Images
        </a>
    </div>

    <div class="gallery-form-container">
        <h1>Upload Image</h1>

        <?php $this->renderFeedbackMessages(); ?>

        <form id="upload-form" method="post" action="<?php echo Config::get('URL'); ?>gallery/upload" enctype="multipart/form-data" class="gallery-form">
            <div class="gallery-form-group">
                <label class="gallery-form-label">Image File</label>
                <div class="gallery-upload-zone" id="upload-zone">
                    <input type="file" name="image" id="image-input" accept="image/jpeg,image/png,image/gif,image/webp" required>
                    <div class="gallery-upload-placeholder">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                        <span>Click or drag image here</span>
                        <small>JPG, PNG, GIF, WebP - Max 10MB</small>
                    </div>
                    <div class="gallery-upload-preview" id="upload-preview" style="display: none;">
                        <img id="preview-image" src="" alt="Preview">
                        <button type="button" class="gallery-upload-remove" id="remove-preview">&times;</button>
                    </div>
                </div>
            </div>

            <div class="gallery-form-group">
                <label class="gallery-form-label" for="title">Title</label>
                <input type="text" name="title" id="title" class="gallery-form-input" placeholder="Give your image a title">
            </div>

            <div class="gallery-form-group">
                <label class="gallery-form-label" for="description">Description</label>
                <textarea name="description" id="description" class="gallery-form-textarea" rows="4" placeholder="Add a description (optional)"></textarea>
            </div>

            <div class="gallery-form-group">
                <label class="gallery-form-checkbox">
                    <input type="checkbox" name="is_public" value="1" checked>
                    <span>Make this image public</span>
                </label>
                <small class="gallery-form-hint">Public images are visible to everyone in the gallery</small>
            </div>

            <div class="gallery-form-actions">
                <button type="submit" name="submit_upload" class="gallery-btn gallery-btn-primary">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="17 8 12 3 7 8"></polyline>
                        <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                    Upload Image
                </button>
                <a href="<?php echo Config::get('URL'); ?>gallery/my" class="gallery-btn gallery-btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<!-- Upload Progress Overlay -->
<div id="upload-overlay" class="upload-overlay" style="display: none;">
    <div class="upload-modal">
        <!-- Progress State -->
        <div id="upload-progress-state" class="upload-state">
            <div class="upload-icon uploading">
                <svg class="upload-spinner" viewBox="0 0 50 50">
                    <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
                </svg>
            </div>
            <h2>Uploading...</h2>
            <div class="upload-progress-bar">
                <div class="upload-progress-fill" id="progress-fill"></div>
            </div>
            <p class="upload-progress-text"><span id="progress-percent">0</span>%</p>
        </div>

        <!-- Success State -->
        <div id="upload-success-state" class="upload-state" style="display: none;">
            <div class="upload-icon success">
                <svg class="checkmark" viewBox="0 0 52 52">
                    <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                    <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                </svg>
            </div>
            <h2>Upload Complete!</h2>
            <p>Your image has been uploaded successfully.</p>
            <p class="upload-redirect">Redirecting<span class="dots"></span></p>
        </div>

        <!-- Error State -->
        <div id="upload-error-state" class="upload-state" style="display: none;">
            <div class="upload-icon error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
            </div>
            <h2>Upload Failed</h2>
            <p id="error-message">Something went wrong. Please try again.</p>
            <button type="button" class="gallery-btn gallery-btn-primary" onclick="hideOverlay()">Try Again</button>
        </div>
    </div>
</div>

<style>
.upload-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.upload-modal {
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.upload-state {
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.upload-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.upload-icon svg {
    width: 100%;
    height: 100%;
}

.upload-icon.uploading svg {
    stroke: #333;
}

.upload-icon.success svg {
    stroke: #4CAF50;
}

.upload-icon.error svg {
    stroke: #dc3545;
}

.upload-spinner {
    animation: rotate 1.5s linear infinite;
}

.upload-spinner circle {
    stroke: #333;
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.upload-modal h2 {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.upload-modal p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.upload-progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0 12px;
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #333, #555);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.upload-progress-text {
    font-family: monospace;
    font-size: 16px !important;
    font-weight: 600;
    color: #333 !important;
}

/* Checkmark Animation */
.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4CAF50;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4CAF50;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4CAF50;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 40px rgba(76, 175, 80, 0.1); }
}

.upload-redirect {
    margin-top: 20px !important;
    font-size: 13px !important;
    color: #999 !important;
    animation: pulse 1.5s ease infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('upload-form');
    const uploadZone = document.getElementById('upload-zone');
    const imageInput = document.getElementById('image-input');
    const uploadPreview = document.getElementById('upload-preview');
    const previewImage = document.getElementById('preview-image');
    const removePreview = document.getElementById('remove-preview');
    const placeholder = uploadZone.querySelector('.gallery-upload-placeholder');

    const overlay = document.getElementById('upload-overlay');
    const progressState = document.getElementById('upload-progress-state');
    const successState = document.getElementById('upload-success-state');
    const errorState = document.getElementById('upload-error-state');
    const progressFill = document.getElementById('progress-fill');
    const progressPercent = document.getElementById('progress-percent');
    const errorMessage = document.getElementById('error-message');

    // Image preview
    imageInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                placeholder.style.display = 'none';
                uploadPreview.style.display = 'block';
            };
            reader.readAsDataURL(this.files[0]);
        }
    });

    removePreview.addEventListener('click', function() {
        imageInput.value = '';
        previewImage.src = '';
        placeholder.style.display = 'flex';
        uploadPreview.style.display = 'none';
    });

    // Drag and drop
    uploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            imageInput.files = e.dataTransfer.files;
            imageInput.dispatchEvent(new Event('change'));
        }
    });

    // Form submission with AJAX
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        if (!imageInput.files || !imageInput.files[0]) {
            alert('Please select an image to upload');
            return;
        }

        const formData = new FormData(form);
        formData.append('submit_upload', '1');

        // Show overlay with progress state
        showOverlay('progress');

        const xhr = new XMLHttpRequest();

        // Progress tracking
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                progressFill.style.width = percent + '%';
                progressPercent.textContent = percent;
            }
        });

        xhr.addEventListener('load', function() {
            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        showOverlay('success');
                        // Redirect after animation
                        setTimeout(function() {
                            window.location.href = '<?php echo Config::get('URL'); ?>gallery/view/' + response.image_id;
                        }, 2000);
                    } else {
                        showOverlay('error', response.message || 'Upload failed');
                    }
                } catch (e) {
                    showOverlay('error', 'Invalid server response');
                }
            } else {
                showOverlay('error', 'Server error: ' + xhr.status);
            }
        });

        xhr.addEventListener('error', function() {
            showOverlay('error', 'Network error. Please check your connection.');
        });

        xhr.open('POST', form.action);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(formData);
    });

    function showOverlay(state, message) {
        overlay.style.display = 'flex';
        progressState.style.display = 'none';
        successState.style.display = 'none';
        errorState.style.display = 'none';

        if (state === 'progress') {
            progressState.style.display = 'block';
            progressFill.style.width = '0%';
            progressPercent.textContent = '0';
        } else if (state === 'success') {
            successState.style.display = 'block';
        } else if (state === 'error') {
            errorState.style.display = 'block';
            if (message) {
                errorMessage.textContent = message;
            }
        }
    }

    window.hideOverlay = function() {
        overlay.style.display = 'none';
    };
});
</script>
