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

{% block title %}Server Error - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
{% endblock %}

{% block content %}
<!-- Agent Header Component -->
{% include "components/agent_header.html" with agent_title="Server Error" agent_subtitle="We're working to fix this issue" %}

<!-- Quick Agents Panel Component -->
{% include "components/quick_agents_panel.html" %}

<!-- Error Content -->
<div class="agent-container">
    <div class="agent-grid">
        <!-- Main Error Widget -->
        <div class="agent-widget widget-large">
            <div class="agent-widget-header">
                <h2 class="agent-widget-title">
                    <span class="agent-icon">⚠️</span>
                    500 - Server Error
                </h2>
                <p class="agent-widget-subtitle">Technical difficulties detected</p>
            </div>
            
            <div class="agent-widget-content">
                <div class="error-content">
                    <div class="error-illustration">
                        <div class="error-icon-large">🔧</div>
                        <p class="error-message">
                            We're experiencing technical difficulties. Our AI systems are temporarily unavailable, 
                            but our team has been notified and is working to resolve the issue.
                        </p>
                    </div>
                    
                    <div class="error-status">
                        <div class="status-indicator">
                            <div class="status-dot pulsing"></div>
                            <span class="status-text">System monitoring active</span>
                        </div>
                    </div>
                    
                    <div class="error-actions">
                        <div class="button-group">
                            <a href="{% url 'core:homepage' %}" class="btn btn-primary">
                                <span class="btn-icon">🏠</span>
                                Go Home
                            </a>
                            <a href="{% url 'agents:marketplace' %}" class="btn btn-secondary">
                                <span class="btn-icon">🤖</span>
                                Browse AI Agents
                            </a>
                        </div>
                        
                        <div class="retry-section">
                            <p class="retry-text">You can try refreshing the page in a few minutes</p>
                            <button onclick="window.location.reload()" class="btn btn-outline">
                                <span class="btn-icon">🔄</span>
                                Refresh Page
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Status Widget -->
        <div class="agent-widget widget-small" style="margin-left: auto;">
            <div class="agent-widget-header">
                <h3 class="agent-widget-title">
                    <span class="agent-icon">📊</span>
                    System Status
                </h3>
            </div>
            <div class="agent-widget-content">
                <div class="status-content">
                    <div class="status-item">
                        <span class="status-icon">🟡</span>
                        <div class="status-info">
                            <span class="status-name">AI Services</span>
                            <span class="status-value">Investigating</span>
                        </div>
                    </div>
                    <div class="status-item">
                        <span class="status-icon">🟢</span>
                        <div class="status-info">
                            <span class="status-name">Website</span>
                            <span class="status-value">Operational</span>
                        </div>
                    </div>
                    <div class="status-item">
                        <span class="status-icon">🟢</span>
                        <div class="status-info">
                            <span class="status-name">Database</span>
                            <span class="status-value">Operational</span>
                        </div>
                    </div>
                    
                    <div class="error-details">
                        <p class="detail-item">
                            <strong>Error ID:</strong> 
                            <span class="detail-value">{{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</span>
                        </p>
                        <p class="detail-item">
                            <strong>Time:</strong> 
                            <span class="detail-value" id="error-time"></span>
                        </p>
                        <p class="detail-item">
                            <strong>Support:</strong> 
                            <a href="mailto:support@quantumtaskai.com" class="support-link">
                                support@quantumtaskai.com
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* 500 Error specific styling that follows agent theme */
.error-content {
    text-align: center;
    padding: var(--spacing-lg);
}

.error-illustration {
    margin-bottom: var(--spacing-xl);
}

.error-icon-large {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.error-message {
    font-size: var(--text-lg);
    color: var(--on-surface-variant);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto var(--spacing-xl);
}

.error-status {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.status-dot.pulsing {
    animation: pulse 2s infinite;
}

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

.status-text {
    font-size: var(--text-sm);
    color: var(--on-surface);
}

.error-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
}

.button-group {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.retry-section {
    text-align: center;
}

.retry-text {
    font-size: var(--text-sm);
    color: var(--on-surface-variant);
    margin-bottom: var(--spacing-md);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--outline);
    color: var(--on-surface);
}

.btn-outline:hover {
    background: var(--surface-variant);
    border-color: var(--outline-variant);
}

.status-content {
    padding: var(--spacing-md);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--outline-variant);
}

.status-item:last-of-type {
    border-bottom: none;
}

.status-icon {
    font-size: var(--text-base);
}

.status-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.status-name {
    font-size: var(--text-sm);
    color: var(--on-surface);
    font-weight: 500;
}

.status-value {
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
}

.error-details {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--outline-variant);
}

.detail-item {
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
    margin-bottom: var(--spacing-xs);
}

.detail-value {
    color: var(--on-surface);
    font-family: monospace;
}

.support-link {
    color: var(--primary);
    text-decoration: none;
}

.support-link:hover {
    text-decoration: underline;
}

/* Responsive design */
@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
        width: 100%;
    }
}
</style>

<script>
// Display current time
document.addEventListener('DOMContentLoaded', function() {
    const timeElement = document.getElementById('error-time');
    if (timeElement) {
        timeElement.textContent = new Date().toLocaleString();
    }
});
</script>
{% endblock %}