<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AniWorld Downloader - Web Interface</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- Animated Background -->
    <div class="background-container">
        <div class="cloud"></div>
        <div class="cloud"></div>
        <div class="cloud"></div>
        <div class="cloud"></div>
        <div class="cloud"></div>
        <!-- Particle System -->
        <div class="particles">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>
    </div>

    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <h1 id="nav-title" style="cursor: pointer;">AniWorld Downloader</h1>
                <span class="version" id="version-display">Loading...</span>
            </div>
            <div class="nav-actions">
                <a href="https://github.com/phoenixthrush/AniWorld-Downloader" target="_blank" class="nav-btn github-btn" title="View on GitHub">
                    <i class="fab fa-github"></i>
                </a>
                {% if not (auth_enabled and user) %}
                <button id="theme-toggle" class="nav-btn theme-toggle" title="Toggle light/dark mode">
                    <i id="theme-icon" class="fas fa-moon"></i>
                </button>
                {% endif %}
                {% if auth_enabled and user %}
                <div class="user-dropdown">
                    <button class="nav-btn user-btn" id="user-dropdown-btn" title="User Settings">
                        <i class="fas fa-user"></i>
                        <span class="username">{{ user.username }}</span>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="dropdown-menu" id="user-dropdown-menu">
                        <button class="dropdown-item" id="theme-toggle-dropdown">
                            <i id="theme-icon-dropdown" class="fas fa-moon"></i> Toggle Theme
                        </button>
                        <a href="{{ url_for('settings') }}" class="dropdown-item">
                            <i class="fas fa-cog"></i> Settings
                        </a>
                        <button class="dropdown-item logout-btn" id="logout-btn">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </button>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="container">
        <main>
            <div class="search-section">
                <h2>Search Anime or Series</h2>
                <div class="site-selection">
                    <label class="site-option">
                        <input type="radio" name="site" value="aniworld.to" id="site-aniworld">
                        <span class="radio-label">AniWorld.to</span>
                    </label>
                    <label class="site-option">
                        <input type="radio" name="site" value="s.to" id="site-sto">
                        <span class="radio-label">S.to</span>
                    </label>
                    <label class="site-option">
                        <input type="radio" name="site" value="both" id="site-both" checked>
                        <span class="radio-label">Both</span>
                    </label>
                </div>
                <div class="search-container">
                    <input type="text" id="search-input" placeholder="Enter anime or series name..." class="search-input">
                    <button id="search-btn" class="search-btn">Search</button>
                </div>
            </div>

            <!-- Download Queue Section -->
            <div class="queue-section" id="queue-section" style="display: none;">
                <h3>Download Queue</h3>

                <!-- Active Downloads -->
                <div class="active-downloads" id="active-downloads" style="display: none;">
                    <h4><i class="fas fa-download"></i> Active Downloads</h4>
                    <div class="queue-list" id="active-queue-list">
                        <!-- Active downloads will be populated here -->
                    </div>
                </div>

                <!-- Completed Downloads -->
                <div class="completed-downloads" id="completed-downloads" style="display: none;">
                    <h4><i class="fas fa-check-circle"></i> Last Completed Download</h4>
                    <div class="queue-list" id="completed-queue-list">
                        <!-- Completed downloads will be populated here -->
                    </div>
                </div>
            </div>

            <div class="results-section" id="results-section" style="display: none;">
                <h3>Search Results</h3>
                <div id="results-container" class="results-container">
                    <!-- Search results will be populated here -->
                </div>
            </div>

            <div class="loading-section" id="loading-section" style="display: none;">
                <div class="loading-spinner"></div>
                <p>Searching...</p>
            </div>

            <div class="home-content" id="home-content">
                <div class="loading-section" id="home-loading">
                    <div class="loading-spinner"></div>
                    <p>Loading popular and new anime...</p>
                </div>

                <div class="popular-new-sections" id="popular-new-sections" style="display: none;">
                    <div class="anime-section" id="popular-section">
                        <h3><i class="fas fa-fire"></i> Popular Anime</h3>
                        <div class="anime-grid" id="popular-anime-grid">
                            <!-- Popular anime will be populated here -->
                        </div>
                    </div>

                    <div class="anime-section" id="new-section">
                        <h3><i class="fas fa-star"></i> New Anime</h3>
                        <div class="anime-grid" id="new-anime-grid">
                            <!-- New anime will be populated here -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="empty-state" id="empty-state" style="display: none;">
                <div class="empty-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>Search for Anime or Series</h3>
                <p>Enter an anime or series name in the search box above to get started.</p>
            </div>
        </main>
    </div>

    <!-- Download Confirmation Modal -->
    <div id="download-modal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Confirm Download</h3>
                <button id="close-download-modal" class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="download-info">
                    <p><strong>Anime:</strong> <span id="download-anime-title"></span></p>
                    {% if not auth_enabled or (user and user.is_admin) %}<p><strong>Download Path:</strong> <span id="download-path"></span> <i class="fas fa-info-circle path-info-icon" title="You can change the download path by using the --output-dir /your/custom/path parameter"></i></p>{% endif %}
                </div>

                <!-- Download Settings -->
                <div class="download-settings">
                    <div class="setting-group">
                        <label for="language-select"><strong>Language:</strong></label>
                        <select id="language-select" class="language-dropdown">
                            <option value="">Loading languages...</option>
                        </select>
                    </div>
                    <div class="setting-group">
                        <label for="provider-select"><strong>Provider:</strong></label>
                        <select id="provider-select" class="provider-dropdown">
                            <option value="">Loading providers...</option>
                        </select>
                    </div>
                </div>

                <!-- Episode Selection Tree -->
                <div class="episode-selection">
                    <div class="selection-header">
                        <h4>Select Episodes</h4>
                        <div class="selection-controls">
                            <button id="select-all" class="control-btn">Select All</button>
                            <button id="deselect-all" class="control-btn">Deselect All</button>
                        </div>
                    </div>

                    <div class="episode-tree-loading" id="episode-tree-loading">
                        <div class="loading-spinner-small"></div>
                        <span>Loading episodes...</span>
                    </div>

                    <div class="episode-tree" id="episode-tree" style="display: none;">
                        <!-- Episodes will be populated here dynamically -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="selected-count">
                    <span id="selected-episode-count">0 episodes selected</span>
                </div>
                <div class="modal-actions">
                    <button id="cancel-download" class="secondary-btn">Cancel</button>
                    <button id="confirm-download" class="primary-btn">Start Download</button>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    {% if auth_enabled and user %}
    <script>
        // Authentication-specific JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            // User dropdown functionality
            const userDropdownBtn = document.getElementById('user-dropdown-btn');
            const userDropdownMenu = document.getElementById('user-dropdown-menu');
            const logoutBtn = document.getElementById('logout-btn');
            const themeToggleDropdown = document.getElementById('theme-toggle-dropdown');
            const themeIconDropdown = document.getElementById('theme-icon-dropdown');

            if (userDropdownBtn && userDropdownMenu) {
                userDropdownBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userDropdownMenu.classList.toggle('show');
                });

                // Close dropdown when clicking outside
                document.addEventListener('click', function() {
                    userDropdownMenu.classList.remove('show');
                });

                // Prevent dropdown from closing when clicking inside it
                userDropdownMenu.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }

            // Theme toggle in dropdown
            if (themeToggleDropdown && themeIconDropdown) {
                // Initialize dropdown theme icon
                const savedTheme = localStorage.getItem('theme') || 'dark';
                updateDropdownThemeIcon(savedTheme);

                themeToggleDropdown.addEventListener('click', function() {
                    const currentTheme = document.body.getAttribute('data-theme');
                    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

                    document.body.setAttribute('data-theme', newTheme);
                    localStorage.setItem('theme', newTheme);
                    updateDropdownThemeIcon(newTheme);
                });

                function updateDropdownThemeIcon(theme) {
                    if (theme === 'dark') {
                        themeIconDropdown.className = 'fas fa-sun';
                    } else {
                        themeIconDropdown.className = 'fas fa-moon';
                    }
                }
            }

            // Logout functionality
            if (logoutBtn) {
                logoutBtn.addEventListener('click', async function() {
                    try {
                        const response = await fetch('/logout', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            }
                        });

                        const data = await response.json();
                        if (data.success) {
                            window.location.href = data.redirect;
                        }
                    } catch (error) {
                        console.error('Logout failed:', error);
                    }
                });
            }
        });
    </script>
    {% endif %}
</body>
</html>