{% extends "base.html" %}

{% block title %}Error - Multi-Personality Chat Bot{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="terminal-card p-5 text-center">
                <div class="error-content">
                    <!-- Error Icon -->
                    <div class="mb-4">
                        <i class="fas fa-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
                    </div>
                    
                    <!-- Error Title -->
                    <h2 class="text-terminal-green mb-3">
                        Oops! Something went wrong 🤖
                    </h2>
                    
                    <!-- Error Message -->
                    <div class="error-message mb-4">
                        {% if error_message %}
                            <p class="text-light fs-5">{{ error_message }}</p>
                        {% else %}
                            <p class="text-light fs-5">An unexpected error occurred. Please try again.</p>
                        {% endif %}
                    </div>
                    
                    <!-- Error Details (if in debug mode) -->
                    {% if error_details %}
                        <div class="error-details bg-dark p-3 rounded border border-secondary mb-4 text-start">
                            <h6 class="text-terminal-accent mb-2">Error Details:</h6>
                            <pre class="text-muted small mb-0"><code>{{ error_details }}</code></pre>
                        </div>
                    {% endif %}
                    
                    <!-- Action Buttons -->
                    <div class="action-buttons">
                        <a href="/" class="btn btn-terminal-primary me-3">
                            <i class="fas fa-home me-2"></i>Back to Home
                        </a>
                        <button onclick="history.back()" class="btn btn-outline-light">
                            <i class="fas fa-arrow-left me-2"></i>Go Back
                        </button>
                    </div>
                    
                    <!-- Helpful Tips -->
                    <div class="mt-4 pt-4 border-top border-secondary">
                        <h6 class="text-terminal-accent mb-3">What you can do:</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
                                    <i class="fas fa-refresh text-terminal-green mb-2"></i>
                                    <p class="small mb-0">Refresh the page and try again</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
                                    <i class="fas fa-robot text-terminal-green mb-2"></i>
                                    <p class="small mb-0">Choose a different personality</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
                                    <i class="fas fa-question-circle text-terminal-green mb-2"></i>
                                    <p class="small mb-0">Check your internet connection</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-refresh after 30 seconds if it's a temporary error
setTimeout(() => {
    const errorMsg = '{{ error_message|lower }}';
    if (errorMsg.includes('temporary') || errorMsg.includes('connection') || errorMsg.includes('network')) {
        if (confirm('Would you like to refresh the page and try again?')) {
            window.location.reload();
        }
    }
}, 30000);

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' || e.key === 'Backspace') {
        history.back();
    } else if (e.key === 'Enter' || e.key === ' ') {
        window.location.href = '/';
    }
});
</script>
{% endblock %}