{% extends "base.html" %}

{% block head %}
<style>
    /* Light Mode Styles (default) */
    .help-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }
    
    .help-content {
        line-height: 1.6;
        color: #333;
    }
    
    .help-content h1 {
        color: #2c3e50;
        border-bottom: 3px solid #3498db;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
    
    .help-content h2 {
        color: #34495e;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    
    .help-content h3 {
        color: #7f8c8d;
        margin-top: 25px;
        margin-bottom: 10px;
    }
    
    .help-content img {
        max-width: 100%;
        height: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 15px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .help-content code {
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        color: #e74c3c;
    }
    
    .help-content pre {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #3498db;
        overflow-x: auto;
    }
    
    .help-content ul, .help-content ol {
        margin-left: 20px;
    }
    
    .help-content li {
        margin-bottom: 5px;
    }
    

    
    .help-navigation {
        background: #ecf0f1;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .help-navigation a {
        color: #3498db;
        text-decoration: none;
        margin-right: 15px;
    }
    
    .help-navigation a:hover {
        text-decoration: underline;
    }
    
    /* Dark Mode Styles */
    body.dark-mode .help-container {
        background: #2d3748;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        color: #e2e8f0;
    }
    
    body.dark-mode .help-content {
        color: #e2e8f0;
    }
    
    body.dark-mode .help-content h1 {
        color: #90cdf4;
        border-bottom: 3px solid #4299e1;
    }
    
    body.dark-mode .help-content h2 {
        color: #a0aec0;
    }
    
    body.dark-mode .help-content h3 {
        color: #718096;
    }
    
    body.dark-mode .help-content img {
        border: 1px solid #4a5568;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    
    body.dark-mode .help-content code {
        background: #1a202c;
        color: #f56565;
        border: 1px solid #4a5568;
    }
    
    body.dark-mode .help-content pre {
        background: #1a202c;
        border-left: 4px solid #4299e1;
        color: #e2e8f0;
    }
    
    body.dark-mode .help-navigation {
        background: #1a202c;
        border: 1px solid #4a5568;
    }
    
    body.dark-mode .help-navigation a {
        color: #90cdf4;
    }
    
    body.dark-mode .help-navigation a:hover {
        color: #63b3ed;
    }
    
    body.dark-mode .alert-danger {
        background-color: #742a2a;
        border-color: #e53e3e;
        color: #feb2b2;
    }
</style>
{% endblock %}

{% block content %}
<!-- Floating Back Button -->
<div class="floating-back-btn">
    <button onclick="history.back()" title="Înapoi">
        ←
    </button>
</div>

<div class="help-container">
    {% if error %}
        <div class="alert alert-danger">
            <h4>Eroare</h4>
            <p>{{ error }}</p>
        </div>
    {% else %}
        <div class="help-navigation">
            <strong>Documentație disponibilă:</strong>
            <a href="{{ url_for('main.help', page='dashboard') }}">Dashboard</a>
            <a href="{{ url_for('main.help', page='print_module') }}">Print Module</a>
            <a href="{{ url_for('main.help', page='upload_data') }}">Upload Data</a>
            <a href="{{ url_for('main.help', page='view_orders') }}">View Orders</a>
            <a href="{{ url_for('main.help', page='print_lost_labels') }}">Print Lost Labels</a>
        </div>
        
        <div class="help-content">
            {{ content | safe }}
        </div>
    {% endif %}
</div>

<script>
    // Theme Detection and Application
    document.addEventListener('DOMContentLoaded', function() {
        // Check if theme is stored in localStorage (same as main app)
        const savedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        // Apply theme based on saved preference or system preference
        if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
        
        // Listen for theme changes (if user changes theme in main app)
        window.addEventListener('storage', function(e) {
            if (e.key === 'theme') {
                if (e.newValue === 'dark') {
                    document.body.classList.add('dark-mode');
                } else {
                    document.body.classList.remove('dark-mode');
                }
            }
        });
        
        // Also check opener window theme if available (when opened from main app)
        if (window.opener && window.opener.document) {
            try {
                const openerHasDarkMode = window.opener.document.body.classList.contains('dark-mode');
                if (openerHasDarkMode) {
                    document.body.classList.add('dark-mode');
                } else {
                    document.body.classList.remove('dark-mode');
                }
            } catch (e) {
                // Cross-origin access denied, fallback to localStorage
                console.log('Using localStorage theme fallback');
            }
        }
    });
    
    // Smooth scrolling pentru linkurile din documentație
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
</script>
{% endblock %}