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

{% block title %}Page Not Found - {{ 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">
                <!-- 404 Animation -->
                <div class="error-animation mb-4">
                    <div class="error-number">
                        <span class="four">4</span>
                        <span class="zero">0</span>
                        <span class="four">4</span>
                    </div>
                    <div class="error-icon mt-3">
                        <i class="fas fa-search fa-3x text-muted"></i>
                    </div>
                </div>
                
                <!-- Error Message -->
                <div class="error-content">
                    <h1 class="display-4 fw-bold text-primary mb-3">Oops! Page Not Found</h1>
                    <p class="lead text-muted mb-4">
                        The page you're looking for seems to have wandered off into the digital wilderness.
                        Don't worry, it happens to the best of us!
                    </p>
                    
                    <!-- Search Box -->
                    <div class="mb-4">
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" placeholder="Search for what you need..." id="searchInput">
                            <button class="btn btn-primary" type="button" id="searchBtn">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <div class="form-text text-start mt-2">
                            <i class="fas fa-lightbulb me-1"></i>
                            Try searching for pages, features, or help topics
                        </div>
                    </div>
                    
                    <!-- Quick Actions -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-3 col-6">
                            <a href="/" class="btn btn-outline-primary w-100">
                                <i class="fas fa-home d-block mb-1"></i>
                                <small>Home</small>
                            </a>
                        </div>
                        <div class="col-md-3 col-6">
                            <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-success w-100">
                                <i class="fas fa-tachometer-alt d-block mb-1"></i>
                                <small>Dashboard</small>
                            </a>
                        </div>
                        <div class="col-md-3 col-6">
                            <a href="{% url 'accounts:profile' user.username %}" class="btn btn-outline-info w-100">
                                <i class="fas fa-user d-block mb-1"></i>
                                <small>Profile</small>
                            </a>
                        </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>Contact</small>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Help Section -->
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-question-circle me-2 text-info"></i>Need Help?
                            </h5>
                            <p class="card-text text-muted">
                                If you believe this is an error or you were expecting to find something here, 
                                please let us know so we can fix it.
                            </p>
                            <div class="d-flex gap-2 justify-content-center flex-wrap">
                                <a href="{% url 'accounts:contact' %}" class="btn btn-primary">
                                    <i class="fas fa-envelope me-1"></i>Report Issue
                                </a>
                                <button class="btn btn-outline-secondary" onclick="history.back()">
                                    <i class="fas fa-arrow-left me-1"></i>Go Back
                                </button>
                                <button class="btn btn-outline-info" id="helpBtn">
                                    <i class="fas fa-life-ring me-1"></i>Get Help
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Popular Pages -->
                    <div class="mt-4">
                        <h6 class="text-muted mb-3">Popular Pages</h6>
                        <div class="d-flex gap-2 justify-content-center flex-wrap">
                            <a href="/" class="badge bg-primary text-decoration-none p-2">
                                <i class="fas fa-home me-1"></i>Homepage
                            </a>
                            <a href="{% url 'accounts:login' %}" class="badge bg-success text-decoration-none p-2">
                                <i class="fas fa-sign-in-alt me-1"></i>Login
                            </a>
                            <a href="{% url 'accounts:register' %}" class="badge bg-info text-decoration-none p-2">
                                <i class="fas fa-user-plus me-1"></i>Register
                            </a>
                            <a href="{% url 'accounts:settings' %}" class="badge bg-warning text-decoration-none p-2">
                                <i class="fas fa-cog me-1"></i>Settings
                            </a>
                            <a href="#" class="badge bg-secondary text-decoration-none p-2">
                                <i class="fas fa-question me-1"></i>FAQ
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating Help Widget -->
<div class="floating-help" id="floatingHelp">
    <button class="btn btn-primary rounded-circle" data-bs-toggle="tooltip" title="Need help?">
        <i class="fas fa-question"></i>
    </button>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 404 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: bounce 2s infinite;
}

.error-number .four:first-child {
    animation-delay: 0.1s;
    color: var(--bs-primary);
}

.error-number .zero {
    animation-delay: 0.2s;
    color: var(--bs-danger);
    transform: rotate(10deg);
}

.error-number .four:last-child {
    animation-delay: 0.3s;
    color: var(--bs-success);
}

.error-icon {
    animation: float 3s ease-in-out infinite;
}

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

/* Floating Help Widget */
.floating-help {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    animation: pulse 2s infinite;
}

.floating-help 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 bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* 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-help {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-help 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;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    
    function performSearch() {
        const query = searchInput.value.trim();
        if (query) {
            // Redirect to search page or perform search
            window.location.href = `/?search=${encodeURIComponent(query)}`;
        }
    }
    
    searchBtn.addEventListener('click', performSearch);
    
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            performSearch();
        }
    });
    
    // Auto-focus search input
    searchInput.focus();
    
    // Help button functionality
    const helpBtn = document.getElementById('helpBtn');
    helpBtn.addEventListener('click', function() {
        // Show help modal or redirect to help page
        showHelpModal();
    });
    
    // Floating help widget
    const floatingHelp = document.getElementById('floatingHelp');
    floatingHelp.addEventListener('click', function() {
        showHelpModal();
    });
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // 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>How can we help?
                            </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 h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-book fa-2x text-primary mb-3"></i>
                                            <h6>Documentation</h6>
                                            <p class="text-muted small">Browse our comprehensive guides and tutorials</p>
                                            <a href="#" class="btn btn-outline-primary btn-sm">View Docs</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-comments fa-2x text-success mb-3"></i>
                                            <h6>Live Chat</h6>
                                            <p class="text-muted small">Chat with our support team in real-time</p>
                                            <button class="btn btn-outline-success btn-sm" onclick="startLiveChat()">Start Chat</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-envelope fa-2x text-info mb-3"></i>
                                            <h6>Email Support</h6>
                                            <p class="text-muted small">Send us a detailed message about your issue</p>
                                            <a href="{% url 'accounts:contact' %}" class="btn btn-outline-info btn-sm">Send Email</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-question-circle fa-2x text-warning mb-3"></i>
                                            <h6>FAQ</h6>
                                            <p class="text-muted small">Find answers to commonly asked questions</p>
                                            <a href="#" class="btn btn-outline-warning btn-sm">View FAQ</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <h6>Quick Tips:</h6>
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-check text-success me-2"></i>Check the URL for typos</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Try using the search function above</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Navigate using the menu or quick actions</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Clear your browser cache and try again</li>
                                </ul>
                            </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 some interactive effects
    const quickActionBtns = document.querySelectorAll('.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-warning');
    quickActionBtns.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px) scale(1.05)';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Press 'h' for help
        if (e.key === 'h' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT') {
                e.preventDefault();
                showHelpModal();
            }
        }
        
        // Press '/' to focus search
        if (e.key === '/' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT') {
                e.preventDefault();
                searchInput.focus();
            }
        }
        
        // Press Escape to go back
        if (e.key === 'Escape') {
            history.back();
        }
    });
    
    // Add some fun easter eggs
    let konamiCode = [];
    const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
    
    document.addEventListener('keydown', function(e) {
        konamiCode.push(e.code);
        if (konamiCode.length > konamiSequence.length) {
            konamiCode.shift();
        }
        
        if (konamiCode.join(',') === konamiSequence.join(',')) {
            // Easter egg activated!
            document.body.style.transform = 'rotate(360deg)';
            document.body.style.transition = 'transform 2s ease';
            
            setTimeout(() => {
                document.body.style.transform = 'rotate(0deg)';
                alert('🎉 Easter egg found! You\'re a true explorer!');
            }, 2000);
            
            konamiCode = [];
        }
    });
    
    // Track 404 errors for analytics (placeholder)
    if (typeof gtag !== 'undefined') {
        gtag('event', 'page_not_found', {
            'page_location': window.location.href,
            'page_referrer': document.referrer
        });
    }
    
    // Auto-hide floating help after some time
    setTimeout(() => {
        floatingHelp.style.opacity = '0.7';
    }, 10000);
    
    floatingHelp.addEventListener('mouseenter', function() {
        this.style.opacity = '1';
    });
    
    floatingHelp.addEventListener('mouseleave', function() {
        this.style.opacity = '0.7';
    });
});
</script>
{% endblock %}