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

{% block title %}Bad Request - 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="Bad Request" agent_subtitle="Invalid request format detected" %}

<!-- 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>
                    400 - Bad Request
                </h2>
                <p class="agent-widget-subtitle">Request format is invalid or malformed</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">
                            Your request couldn't be processed because it contains invalid data or is malformed. 
                            Please check your input and try again.
                        </p>
                    </div>
                    
                    <div class="error-suggestions">
                        <h4 class="suggestions-title">Common Issues:</h4>
                        <div class="suggestions-list">
                            <div class="suggestion-item">
                                <span class="suggestion-icon">📄</span>
                                <span class="suggestion-text">Check file format and size limits</span>
                            </div>
                            <div class="suggestion-item">
                                <span class="suggestion-icon">💬</span>
                                <span class="suggestion-text">Ensure all required fields are filled</span>
                            </div>
                            <div class="suggestion-item">
                                <span class="suggestion-icon">🔗</span>
                                <span class="suggestion-text">Verify URL parameters are correct</span>
                            </div>
                            <div class="suggestion-item">
                                <span class="suggestion-icon">🔒</span>
                                <span class="suggestion-text">Check if you're properly authenticated</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="error-actions">
                        <div class="button-group">
                            <button onclick="history.back()" class="btn btn-primary">
                                <span class="btn-icon">↩️</span>
                                Go Back
                            </button>
                            <a href="{% url 'core:homepage' %}" class="btn btn-secondary">
                                <span class="btn-icon">🏠</span>
                                Go Home
                            </a>
                        </div>
                        
                        <div class="try-again-section">
                            <p class="try-again-text">Try using our AI agents with proper input:</p>
                            <div class="agent-shortcuts">
                                <a href="/agents/data-analyzer/" class="agent-shortcut">
                                    <span class="shortcut-icon">📊</span>
                                    Data Analyzer
                                </a>
                                <a href="/agents/weather-reporter/" class="agent-shortcut">
                                    <span class="shortcut-icon">🌤️</span>
                                    Weather Reporter
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Help 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>
                    Troubleshooting
                </h3>
            </div>
            <div class="agent-widget-content">
                <div class="troubleshoot-content">
                    <div class="troubleshoot-steps">
                        <div class="troubleshoot-step">
                            <span class="step-number">1</span>
                            <span class="step-text">Refresh the page</span>
                        </div>
                        <div class="troubleshoot-step">
                            <span class="step-number">2</span>
                            <span class="step-text">Check your input data</span>
                        </div>
                        <div class="troubleshoot-step">
                            <span class="step-number">3</span>
                            <span class="step-text">Clear browser cache</span>
                        </div>
                        <div class="troubleshoot-step">
                            <span class="step-number">4</span>
                            <span class="step-text">Try a different browser</span>
                        </div>
                    </div>
                    
                    <div class="help-actions">
                        <button onclick="window.location.reload()" class="help-btn">
                            🔄 Refresh Page
                        </button>
                        <a href="mailto:support@quantumtaskai.com" class="help-btn">
                            📧 Contact Support
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* 400 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-suggestions {
    margin-bottom: var(--spacing-xl);
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.suggestions-title {
    font-size: var(--text-lg);
    color: var(--on-surface);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

.suggestion-icon {
    font-size: var(--text-base);
    flex-shrink: 0;
}

.suggestion-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;
}

.try-again-section {
    text-align: center;
}

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

.agent-shortcuts {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.agent-shortcut {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-variant);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--on-surface);
    font-size: var(--text-sm);
    transition: all 0.2s ease;
    border: 1px solid var(--outline-variant);
}

.agent-shortcut:hover {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

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

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

.troubleshoot-steps {
    margin-bottom: var(--spacing-lg);
}

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

.troubleshoot-step:last-child {
    border-bottom: none;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 600;
    flex-shrink: 0;
}

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

.help-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--surface-variant);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--on-surface);
    font-size: var(--text-sm);
    transition: all 0.2s ease;
    cursor: pointer;
}

.help-btn:hover {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

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