{% extends 'accounts/base.html' %}
{% load static %}

{% block title %}Server Error - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
    <div class="row w-100">
        <div class="col-lg-6 mx-auto">
            <div class="text-center">
                <!-- 500 Animation -->
                <div class="error-animation mb-4">
                    <div class="error-number">
                        <span class="five">5</span>
                        <span class="zero">0</span>
                        <span class="zero">0</span>
                    </div>
                    <div class="error-icon mt-3">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning"></i>
                    </div>
                </div>
                
                <!-- Error Message -->
                <div class="error-content">
                    <h1 class="display-4 fw-bold text-danger mb-3">Internal Server Error</h1>
                    <p class="lead text-muted mb-4">
                        Oops! Something went wrong on our end. Our team has been notified and is working to fix this issue.
                        Please try again in a few moments.
                    </p>
                    
                    <!-- Status Information -->
                    <div class="alert alert-warning" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-info-circle me-3"></i>
                            <div class="text-start">
                                <strong>What happened?</strong><br>
                                <small>The server encountered an unexpected condition that prevented it from fulfilling your request.</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Actions -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-3 col-6">
                            <button class="btn btn-outline-primary w-100" onclick="location.reload()">
                                <i class="fas fa-redo d-block mb-1"></i>
                                <small>Retry</small>
                            </button>
                        </div>
                        <div class="col-md-3 col-6">
                            <a href="/" class="btn btn-outline-success w-100">
                                <i class="fas fa-home d-block mb-1"></i>
                                <small>Home</small>
                            </a>
                        </div>
                        <div class="col-md-3 col-6">
                            <button class="btn btn-outline-info w-100" onclick="history.back()">
                                <i class="fas fa-arrow-left d-block mb-1"></i>
                                <small>Go Back</small>
                            </button>
                        </div>
                        <div class="col-md-3 col-6">
                            <a href="{% url 'accounts:contact' %}" class="btn btn-outline-warning w-100">
                                <i class="fas fa-envelope d-block mb-1"></i>
                                <small>Report</small>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Error Details (for debugging - only show in development) -->
                    {% if debug %}
                        <div class="card border-danger mb-4">
                            <div class="card-header bg-danger text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-bug me-2"></i>Debug Information
                                    <small class="float-end">Development Mode</small>
                                </h6>
                            </div>
                            <div class="card-body text-start">
                                <div class="mb-3">
                                    <strong>Error ID:</strong> <code id="errorId">{{ error_id|default:'N/A' }}</code>
                                    <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyErrorId()">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                <div class="mb-3">
                                    <strong>Timestamp:</strong> <code>{{ timestamp|default:'N/A' }}</code>
                                </div>
                                <div class="mb-3">
                                    <strong>Request Path:</strong> <code>{{ request.path|default:'N/A' }}</code>
                                </div>
                                <div class="mb-3">
                                    <strong>User Agent:</strong> <code>{{ request.META.HTTP_USER_AGENT|default:'N/A' }}</code>
                                </div>
                                {% if exception %}
                                    <div class="mb-3">
                                        <strong>Exception:</strong> <code>{{ exception }}</code>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Help Section -->
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-life-ring me-2 text-info"></i>Need Immediate Help?
                            </h5>
                            <p class="card-text text-muted">
                                If this error persists or is preventing you from completing important tasks, 
                                please contact our support team with the error details.
                            </p>
                            <div class="d-flex gap-2 justify-content-center flex-wrap">
                                <a href="{% url 'accounts:contact' %}" class="btn btn-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>Report Critical Issue
                                </a>
                                <button class="btn btn-outline-primary" id="statusBtn">
                                    <i class="fas fa-heartbeat me-1"></i>Check System Status
                                </button>
                                <button class="btn btn-outline-info" id="helpBtn">
                                    <i class="fas fa-question-circle me-1"></i>Get Help
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- System Status -->
                    <div class="mt-4">
                        <h6 class="text-muted mb-3">System Status</h6>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <div class="status-indicator bg-success me-2"></div>
                                    <small>Database</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <div class="status-indicator bg-warning me-2"></div>
                                    <small>API Services</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <div class="status-indicator bg-success me-2"></div>
                                    <small>File Storage</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Auto-retry countdown -->
                    <div class="mt-4">
                        <div class="alert alert-info" id="retryAlert">
                            <i class="fas fa-clock me-2"></i>
                            Automatically retrying in <span id="countdown">30</span> seconds...
                            <button class="btn btn-sm btn-outline-info ms-2" id="cancelRetry">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating Status Widget -->
<div class="floating-status" id="floatingStatus">
    <button class="btn btn-warning rounded-circle" data-bs-toggle="tooltip" title="System Status">
        <i class="fas fa-heartbeat"></i>
    </button>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 500 Animation Styles */
.error-animation {
    animation: fadeInUp 1s ease-out;
}

.error-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-number span {
    display: inline-block;
    animation: shake 2s infinite;
}

.error-number .five {
    animation-delay: 0.1s;
    color: var(--bs-danger);
}

.error-number .zero:first-of-type {
    animation-delay: 0.2s;
    color: var(--bs-warning);
}

.error-number .zero:last-of-type {
    animation-delay: 0.3s;
    color: var(--bs-danger);
}

.error-icon {
    animation: pulse 2s ease-in-out infinite;
}

.error-content {
    animation: fadeInUp 1s ease-out 0.5s both;
}

/* Status Indicators */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: blink 2s infinite;
}

.status-indicator.bg-success {
    background-color: var(--bs-success) !important;
}

.status-indicator.bg-warning {
    background-color: var(--bs-warning) !important;
}

.status-indicator.bg-danger {
    background-color: var(--bs-danger) !important;
}

/* Floating Status Widget */
.floating-status {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    animation: bounce 3s infinite;
}

.floating-status button {
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Hover Effects */
.btn:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .error-number {
        font-size: 5rem;
    }
    
    .floating-status {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-status button {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .error-number {
        font-size: 4rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bg-light {
        background-color: var(--bs-dark) !important;
        color: var(--bs-light);
    }
    
    .text-muted {
        color: var(--bs-secondary) !important;
    }
}

/* Loading animation for retry */
.loading-retry {
    position: relative;
    overflow: hidden;
}

.loading-retry::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: loading 2s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-retry functionality
    let retryCountdown = 30;
    let retryInterval;
    let retryEnabled = true;
    
    const countdownElement = document.getElementById('countdown');
    const retryAlert = document.getElementById('retryAlert');
    const cancelRetryBtn = document.getElementById('cancelRetry');
    
    function startRetryCountdown() {
        retryInterval = setInterval(() => {
            retryCountdown--;
            countdownElement.textContent = retryCountdown;
            
            if (retryCountdown <= 0) {
                clearInterval(retryInterval);
                if (retryEnabled) {
                    location.reload();
                }
            }
        }, 1000);
    }
    
    function cancelRetry() {
        retryEnabled = false;
        clearInterval(retryInterval);
        retryAlert.style.display = 'none';
    }
    
    cancelRetryBtn.addEventListener('click', cancelRetry);
    
    // Start countdown
    startRetryCountdown();
    
    // System status check
    const statusBtn = document.getElementById('statusBtn');
    statusBtn.addEventListener('click', function() {
        showSystemStatus();
    });
    
    // Help button functionality
    const helpBtn = document.getElementById('helpBtn');
    helpBtn.addEventListener('click', function() {
        showHelpModal();
    });
    
    // Floating status widget
    const floatingStatus = document.getElementById('floatingStatus');
    floatingStatus.addEventListener('click', function() {
        showSystemStatus();
    });
    
    // Copy error ID functionality
    window.copyErrorId = function() {
        const errorId = document.getElementById('errorId');
        if (errorId) {
            navigator.clipboard.writeText(errorId.textContent).then(() => {
                // Show success feedback
                const originalText = errorId.textContent;
                errorId.textContent = 'Copied!';
                errorId.style.color = 'green';
                
                setTimeout(() => {
                    errorId.textContent = originalText;
                    errorId.style.color = '';
                }, 2000);
            });
        }
    };
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // System status modal
    function showSystemStatus() {
        const modalHtml = `
            <div class="modal fade" id="statusModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-heartbeat me-2"></i>System Status
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="card border-success">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="status-indicator bg-success me-3"></div>
                                                <div>
                                                    <h6 class="mb-1">Database</h6>
                                                    <small class="text-success">Operational</small>
                                                </div>
                                                <div class="ms-auto">
                                                    <small class="text-muted">99.9% uptime</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-warning">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="status-indicator bg-warning me-3"></div>
                                                <div>
                                                    <h6 class="mb-1">API Services</h6>
                                                    <small class="text-warning">Degraded Performance</small>
                                                </div>
                                                <div class="ms-auto">
                                                    <small class="text-muted">95.2% uptime</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-success">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="status-indicator bg-success me-3"></div>
                                                <div>
                                                    <h6 class="mb-1">File Storage</h6>
                                                    <small class="text-success">Operational</small>
                                                </div>
                                                <div class="ms-auto">
                                                    <small class="text-muted">99.8% uptime</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-success">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="status-indicator bg-success me-3"></div>
                                                <div>
                                                    <h6 class="mb-1">CDN</h6>
                                                    <small class="text-success">Operational</small>
                                                </div>
                                                <div class="ms-auto">
                                                    <small class="text-muted">99.9% uptime</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <h6>Recent Incidents</h6>
                                <div class="list-group">
                                    <div class="list-group-item">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">API Performance Issues</h6>
                                            <small class="text-warning">Investigating</small>
                                        </div>
                                        <p class="mb-1">We are currently investigating reports of slow API response times.</p>
                                        <small>Started 15 minutes ago</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>Last updated: <span id="statusTime"></span>
                                </small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <a href="#" class="btn btn-outline-primary">View Full Status Page</a>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        const existingModal = document.getElementById('statusModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Update timestamp
        document.getElementById('statusTime').textContent = new Date().toLocaleString();
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('statusModal'));
        modal.show();
        
        // Clean up modal after it's hidden
        document.getElementById('statusModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
    
    // Help modal function
    function showHelpModal() {
        const modalHtml = `
            <div class="modal fade" id="helpModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-life-ring me-2"></i>Error Help & Support
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Server Error (500)</strong> - This means something went wrong on our servers, not with your request.
                            </div>
                            
                            <h6>What you can do:</h6>
                            <ul>
                                <li><strong>Wait and retry:</strong> The issue might be temporary</li>
                                <li><strong>Check your connection:</strong> Ensure you have a stable internet connection</li>
                                <li><strong>Clear cache:</strong> Clear your browser cache and cookies</li>
                                <li><strong>Try incognito mode:</strong> Test in a private/incognito browser window</li>
                                <li><strong>Contact support:</strong> If the issue persists, report it to our team</li>
                            </ul>
                            
                            <h6>What we're doing:</h6>
                            <ul>
                                <li>Our monitoring systems have been alerted</li>
                                <li>Our engineering team is investigating the issue</li>
                                <li>We're working to restore normal service as quickly as possible</li>
                            </ul>
                            
                            <div class="row g-3 mt-3">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <i class="fas fa-envelope fa-2x text-primary mb-2"></i>
                                            <h6>Email Support</h6>
                                            <p class="small text-muted">Get detailed help via email</p>
                                            <a href="{% url 'accounts:contact' %}" class="btn btn-outline-primary btn-sm">Send Email</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <i class="fas fa-comments fa-2x text-success mb-2"></i>
                                            <h6>Live Chat</h6>
                                            <p class="small text-muted">Chat with our support team</p>
                                            <button class="btn btn-outline-success btn-sm" onclick="startLiveChat()">Start Chat</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        const existingModal = document.getElementById('helpModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('helpModal'));
        modal.show();
        
        // Clean up modal after it's hidden
        document.getElementById('helpModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
    
    // Live chat function (placeholder)
    window.startLiveChat = function() {
        alert('Live chat feature coming soon! Please use email support for now.');
    };
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Press 'r' to retry
        if (e.key === 'r' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT') {
                e.preventDefault();
                location.reload();
            }
        }
        
        // Press 'h' for help
        if (e.key === 'h' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT') {
                e.preventDefault();
                showHelpModal();
            }
        }
        
        // Press 's' for status
        if (e.key === 's' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT') {
                e.preventDefault();
                showSystemStatus();
            }
        }
        
        // Press Escape to cancel retry
        if (e.key === 'Escape') {
            cancelRetry();
        }
    });
    
    // Track 500 errors for analytics (placeholder)
    if (typeof gtag !== 'undefined') {
        gtag('event', 'server_error', {
            'error_type': '500',
            'page_location': window.location.href,
            'page_referrer': document.referrer
        });
    }
    
    // Add loading effect to retry button
    const retryButtons = document.querySelectorAll('[onclick="location.reload()"]');
    retryButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            this.classList.add('loading-retry');
            this.innerHTML = '<span class="loading me-1"></span>Retrying...';
            this.disabled = true;
        });
    });
    
    // Auto-hide floating status after some time
    setTimeout(() => {
        floatingStatus.style.opacity = '0.7';
    }, 10000);
    
    floatingStatus.addEventListener('mouseenter', function() {
        this.style.opacity = '1';
    });
    
    floatingStatus.addEventListener('mouseleave', function() {
        this.style.opacity = '0.7';
    });
    
    // Simulate real-time status updates
    setInterval(() => {
        const indicators = document.querySelectorAll('.status-indicator');
        indicators.forEach(indicator => {
            // Randomly change status (for demo purposes)
            if (Math.random() > 0.95) {
                const classes = ['bg-success', 'bg-warning', 'bg-danger'];
                const currentClass = classes.find(cls => indicator.classList.contains(cls));
                const newClass = classes[Math.floor(Math.random() * classes.length)];
                
                if (currentClass !== newClass) {
                    indicator.classList.remove(currentClass);
                    indicator.classList.add(newClass);
                }
            }
        });
    }, 5000);
});
</script>
{% endblock %}