<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deep Research System</title>
    <link rel="stylesheet" href="{{ url_for('research.serve_static', path='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Change to CDN version that works in browsers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2 id="logo-link" style="cursor: pointer;"><i class="fas fa-atom"></i> Deep Research</h2>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li class="active" data-page="new-research"><i class="fas fa-search"></i> New Research</li>
                    <li data-page="history"><i class="fas fa-history"></i> History</li>
                    <li data-page="settings"><i class="fas fa-cog"></i> <a href="{{ url_for('research.settings_page') }}">Settings</a></li>
                </ul>
            </nav>
            <div class="sidebar-footer">
                <p>v0.1.0 | <i class="fas fa-brain"></i></p>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <!-- New Research Page -->
            <div class="page active" id="new-research">
                <div class="page-header">
                    <h1>Start New Research</h1>
                </div>
                <div class="card research-card">
                    <div class="card-content">
                        <form id="research-form">
                            <div class="form-group">
                                <label for="query">Research Query</label>
                                <textarea id="query" name="query" rows="3" placeholder="Enter your research topic or question..."></textarea>
                            </div>
                            <div class="form-group">
                                <label>Research Mode</label>
                                <div class="mode-selection">
                                    <div class="mode-option active" data-mode="quick">
                                        <div class="mode-icon"><i class="fas fa-bolt"></i></div>
                                        <div class="mode-info">
                                            <h3>Quick Summary</h3>
                                            <p>Generated in a few minutes</p>
                                        </div>
                                    </div>
                                    <div class="mode-option" data-mode="detailed">
                                        <div class="mode-icon"><i class="fas fa-microscope"></i></div>
                                        <div class="mode-info">
                                            <h3>Detailed Report</h3>
                                            <p>In-depth analysis (takes longer)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-options">
                                <div class="form-option">
                                    <label for="notification-toggle" class="checkbox-label">
                                        <input type="checkbox" id="notification-toggle" checked>
                                        <span class="checkbox-text">Sound notifications when complete</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary" id="start-research-btn"><i class="fas fa-rocket"></i> Start Research</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- History Page -->
            <div class="page" id="history">
                <div class="page-header">
                    <h1>Research History</h1>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="history-list" id="history-list">
                            <!-- Will be populated dynamically -->
                            <div class="loading-spinner centered">
                                <div class="spinner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Research Progress Page -->
            <div class="page" id="research-progress">
                <div class="page-header">
                    <h1>Research in Progress</h1>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="progress-info">
                            <div class="current-query-container">
                                <div class="current-query-label">Current Query:</div>
                                <div id="current-query" class="current-query"></div>
                            </div>
                            <div class="progress-container">
                                <div class="progress-bar">
                                    <div id="progress-fill" class="progress-fill"></div>
                                </div>
                                <div id="progress-percentage" class="progress-percentage">0%</div>
                            </div>
                            <div id="progress-status" class="progress-status">Initializing research process...</div>
                            <div class="progress-actions">
                                <button id="terminate-research-btn" class="btn btn-outline terminate-btn" style="display: none;">
                                    <i class="fas fa-stop-circle"></i> Terminate Research
                                </button>
                                <div id="error-message" class="error-message" style="display: none;"></div>
                                <button id="try-again-btn" class="btn btn-primary" style="display: none; margin-top: 15px;">
                                    <i class="fas fa-redo"></i> Try Again
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Research Details Page -->
            <div class="page" id="research-details">
                <div class="page-header">
                    <div class="results-header">
                        <h1>Research Details</h1>
                        <div class="results-actions">
                            <button class="btn btn-outline" id="back-to-history-from-details"><i class="fas fa-arrow-left"></i> Back to History</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="research-metadata">
                            <div class="metadata-item">
                                <span class="metadata-label">Query:</span>
                                <span id="detail-query" class="metadata-value"></span>
                            </div>
                            <div class="metadata-item">
                                <span class="metadata-label">Status:</span>
                                <span id="detail-status" class="metadata-value"></span>
                            </div>
                            <div class="metadata-item">
                                <span class="metadata-label">Mode:</span>
                                <span id="detail-mode" class="metadata-value"></span>
                            </div>
                            <div class="metadata-item">
                                <span class="metadata-label">Progress:</span>
                                <div class="detail-progress-container">
                                    <div class="detail-progress-bar">
                                        <div class="detail-progress-fill" id="detail-progress-fill"></div>
                                    </div>
                                    <span id="detail-progress-percentage">0%</span>
                                </div>
                            </div>
                        </div>

                        <div class="research-log-container">
                            <h3>Research Progress Log</h3>
                            <div class="research-log" id="research-log">
                                <!-- Will be populated dynamically -->
                                <div class="loading-spinner centered">
                                    <div class="spinner"></div>
                                </div>
                            </div>
                        </div>

                        <div class="detail-actions" id="detail-actions">
                            <!-- Conditionally shown based on research status -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Research Results Page -->
            <div class="page" id="research-results">
                <div class="page-header">
                    <div class="results-header">
                        <h1>Research Results</h1>
                        <div class="results-actions">
                            <button class="btn btn-outline" id="download-pdf-btn"><i class="fas fa-file-pdf"></i> Download PDF</button>
                            <button class="btn btn-outline" id="back-to-history"><i class="fas fa-arrow-left"></i> Back to History</button>
                        </div>
                    </div>
                </div>
                <div class="card results-card">
                    <div class="card-content">
                        <div class="results-metadata">
                            <div class="metadata-item">
                                <span class="metadata-label">Query:</span>
                                <span id="result-query" class="metadata-value"></span>
                            </div>
                            <div class="metadata-item">
                                <span class="metadata-label">Generated:</span>
                                <span id="result-date" class="metadata-value"></span>
                            </div>
                            <div class="metadata-item">
                                <span class="metadata-label">Mode:</span>
                                <span id="result-mode" class="metadata-value"></span>
                            </div>
                        </div>
                        <div class="results-content" id="results-content">
                            <!-- Will be populated dynamically -->
                            <div class="loading-spinner centered">
                                <div class="spinner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Collapsible Log Panel -->
            <div class="collapsible-log-panel">
                <div class="log-panel-header" id="log-panel-toggle">
                    <i class="fas fa-chevron-down toggle-icon"></i>
                    <span>Research Logs</span>
                    <span class="log-indicator" id="log-indicator">0</span>
                </div>
                <div class="log-panel-content" id="log-panel-content">
                    <div class="log-controls">
                        <div class="log-filter">
                            <div class="filter-buttons">
                                <button class="small-btn selected" onclick="window.filterLogsByType('all')">All</button>
                                <button class="small-btn" onclick="window.filterLogsByType('milestone')">Milestones</button>
                                <button class="small-btn" onclick="window.filterLogsByType('info')">Info</button>
                                <button class="small-btn" onclick="window.filterLogsByType('error')">Errors</button>
                            </div>
                        </div>
                    </div>
                    <div class="console-log" id="console-log-container">
                        <!-- Logs will be added here dynamically -->
                        <div class="empty-log-message">No logs yet. Research logs will appear here as they occur.</div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Templates -->
    <template id="history-item-template">
        <div class="history-item">
            <div class="history-item-header">
                <div class="history-item-title"></div>
                <div class="history-item-status"></div>
            </div>
            <div class="history-item-meta">
                <div class="history-item-date"></div>
                <div class="history-item-mode"></div>
            </div>
            <div class="history-item-actions">
                <button class="btn btn-sm btn-outline view-btn"><i class="fas fa-eye"></i> View</button>
                <button class="btn btn-sm btn-outline pdf-btn" style="display: none;"><i class="fas fa-file-pdf"></i> PDF</button>
                <!-- Delete button will be added dynamically -->
            </div>
        </div>
    </template>

    <!-- Mobile Tab Bar -->
    <nav class="mobile-tab-bar">
        <ul>
            <li class="active" data-page="new-research">
                <i class="fas fa-search"></i>
                <span>Research</span>
            </li>
            <li data-page="history">
                <i class="fas fa-history"></i>
                <span>History</span>
            </li>
            <li data-page="settings">
                <a href="{{ url_for('research.settings_page') }}">
                    <i class="fas fa-cog"></i>
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>

    <template id="log-entry-template">
        <div class="log-entry">
            <div class="log-entry-time"></div>
            <div class="log-entry-content">
                <div class="log-entry-message"></div>
                <div class="log-entry-progress"></div>
            </div>
        </div>
    </template>

    <!-- Updated Scripts with proper CDN versions -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
    <!-- Update highlight.js to browser compatible version -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- PDF generation libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ url_for('research.serve_static', path='js/app.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize the terminate button event listener
            const terminateBtn = document.getElementById('terminate-research-btn');
            if (terminateBtn) {
                terminateBtn.addEventListener('click', function() {
                    // Get the current research ID from the page
                    const currentResearchId = window.currentResearchId;
                    if (currentResearchId) {
                        window.terminateResearch(currentResearchId);
                    } else {
                        console.error('No active research ID found');
                        alert('No active research found to terminate');
                    }
                });
            }
        });

        // Configure marked to not use eval
        if (typeof marked !== 'undefined') {
            marked.setOptions({
                headerIds: false,
                mangle: false,
                smartypants: false
            });
        }

        // Configure html2canvas to avoid using eval if possible
        if (typeof html2canvas !== 'undefined') {
            // Disable features that might use eval
            window.html2canvas_noSandbox = true;
        }
    </script>

    <!-- Add a template for console log entries -->
    <template id="console-log-entry-template">
        <div class="console-log-entry">
            <span class="log-timestamp"></span>
            <span class="log-badge"></span>
            <span class="log-message"></span>
        </div>
    </template>
</body>
</html>