<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/apps.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <title>ScienceAI</title>
</head>

<body>
    <div class="container">
        <h1 style="text-align: center; margin-bottom: 2rem; font-size: 2.5rem; color: var(--primary);">ScienceAI</h1>

        {% if error %}
        <div class="alert">
            <span>{{ error }}</span>
            <span class="closebtn" onclick="window.location.href = '/menu';" style="cursor: pointer;">&times;</span>
        </div>
        {% endif %}

        <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
            <!-- Open Project Card -->
            <div class="card open-project-menu" style="margin: 0; max-width: none;">
                <h2>📂 Open Project</h2>
                <form action="/menu" method="post">
                    <label for="project" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Project
                        Name</label>
                    <div style="display: flex; gap: 0.5rem;">
                        <input type="text" id="project" name="project" list="projects" required
                            placeholder="Select or type project name..." style="margin: 0;">
                        <datalist id="projects">
                            {% for project in projects %}
                            <option value="{{ project }}"></option>
                            {% endfor %}
                        </datalist>
                        <button type="submit">Start</button>
                    </div>
                    <p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted);">
                        Type a new name to create a project,<br>or select an existing one to open.
                    </p>
                </form>
            </div>

            <!-- Load Checkpoint Card -->
            <div class="card open-project-menu" style="margin: 0; max-width: none;">
                <h2>💾 Load Checkpoint</h2>
                <form action="/load_checkpoint" method="post" enctype="multipart/form-data">
                    <div style="margin-bottom: 1rem;">
                        <label for="load-project"
                            style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Project Name</label>
                        <input type="text" id="load-project" name="project" required style="margin: 0;">
                    </div>

                    <div style="margin-bottom: 1rem;">
                        <label class="checkbox-container"
                            style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                            <input type="checkbox" id="overwrite" name="overwrite" value="F" style="width: auto;">
                            <span>Overwrite if exists</span>
                        </label>
                    </div>

                    <div style="margin-bottom: 1rem;">
                        <label for="checkpoint"
                            style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Checkpoint File
                            (.zip)</label>
                        <input id="checkpoint" type="file" name="checkpoint" accept=".zip" required
                            style="padding: 0.5rem; background: var(--background);">
                    </div>

                    <button type="submit" class="secondary" style="width: 100%;">Load Checkpoint</button>
                </form>
            </div>

            <!-- Delete Project Card -->
            <div class="card open-project-menu" style="margin: 0; max-width: none;">
                <h2>🗑️ Delete Project</h2>
                <form action="/delete_project" method="post"
                    onsubmit="return confirm('Are you sure you want to delete this project? This cannot be undone.');">
                    <label for="delete-project" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Project
                        Name</label>
                    <div style="display: flex; gap: 0.5rem;">
                        <input type="text" id="delete-project" name="project" list="projects" required
                            style="margin: 0;">
                        <button type="submit" class="danger">Delete</button>
                    </div>
                </form>
            </div>

            <!-- LLM Provider Card -->
            <div class="card open-project-menu" style="margin: 0; max-width: none;">
                <h2>🤖 LLM Provider</h2>
                <p style="color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem;">
                    Select your AI model provider. Only providers with configured API keys are available.
                </p>
                <div class="provider-selector">
                    <div class="provider-options" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                        <!-- OpenAI -->
                        <label class="provider-option {% if not available_providers.openai %}disabled{% endif %}"
                            style="flex: 1; min-width: 100px;">
                            <input type="radio" name="provider" value="openai" {% if current_provider=='openai'
                                %}checked{% endif %} {% if not available_providers.openai %}disabled{% endif %}
                                onchange="switchProvider('openai')">
                            <span class="provider-label">
                                <span style="font-size: 1.5rem;">🧠</span>
                                <span>OpenAI</span>
                                {% if not available_providers.openai %}
                                <span class="no-key">(No API Key)</span>
                                {% endif %}
                            </span>
                        </label>

                        <!-- Anthropic / Claude -->
                        <label class="provider-option {% if not available_providers.anthropic %}disabled{% endif %}"
                            style="flex: 1; min-width: 100px;">
                            <input type="radio" name="provider" value="anthropic" {% if current_provider=='anthropic'
                                %}checked{% endif %} {% if not available_providers.anthropic %}disabled{% endif %}
                                onchange="switchProvider('anthropic')">
                            <span class="provider-label">
                                <span style="font-size: 1.5rem;">🪶</span>
                                <span>Claude</span>
                                {% if not available_providers.anthropic %}
                                <span class="no-key">(No API Key)</span>
                                {% endif %}
                            </span>
                        </label>

                        <!-- Google / Gemini -->
                        <label class="provider-option {% if not available_providers.google %}disabled{% endif %}"
                            style="flex: 1; min-width: 100px;">
                            <input type="radio" name="provider" value="google" {% if current_provider=='google'
                                %}checked{% endif %} {% if not available_providers.google %}disabled{% endif %}
                                onchange="switchProvider('google')">
                            <span class="provider-label">
                                <span style="font-size: 1.5rem;">💎</span>
                                <span>Gemini</span>
                                {% if not available_providers.google %}
                                <span class="no-key">(No API Key)</span>
                                {% endif %}
                            </span>
                        </label>
                    </div>
                    <p id="provider-status" style="margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-muted);">
                    </p>
                </div>
            </div>

            <!-- Shutdown Card -->
            <div class="card open-project-menu"
                style="margin: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">
                <h2>🔌 System</h2>
                <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Shut down the ScienceAI server.</p>
                <form action="/shutdown" method="post">
                    <button type="submit" class="secondary"
                        style="border-color: var(--danger); color: var(--danger);">Shutdown System</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Dark Mode Toggle -->
    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
        <span class="icon sun-icon">☀️</span>
        <span class="icon moon-icon">🌙</span>
    </button>


    <script>
        async function switchProvider(provider) {
            const statusEl = document.getElementById('provider-status');
            statusEl.textContent = 'Switching...';
            statusEl.style.color = 'var(--text-muted)';

            try {
                const response = await fetch('/switch_provider', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ provider: provider })
                });

                const data = await response.json();

                if (data.success) {
                    statusEl.textContent = `✓ Using ${provider.charAt(0).toUpperCase() + provider.slice(1)}`;
                    statusEl.style.color = 'var(--success)';
                } else {
                    statusEl.textContent = `✗ ${data.error}`;
                    statusEl.style.color = 'var(--danger)';
                    // Revert the radio button selection
                    setTimeout(() => location.reload(), 1500);
                }
            } catch (error) {
                statusEl.textContent = `✗ Failed to switch provider`;
                statusEl.style.color = 'var(--danger)';
                setTimeout(() => location.reload(), 1500);
            }
        }

        // Dark Mode Toggle Functionality
        (function () {
            const themeToggle = document.getElementById('theme-toggle');
            const html = document.documentElement;

            // Check for saved theme preference or default to 'light'
            const currentTheme = localStorage.getItem('theme') || 'light';
            html.setAttribute('data-theme', currentTheme);

            // Toggle theme
            themeToggle.addEventListener('click', function () {
                const theme = html.getAttribute('data-theme');
                const newTheme = theme === 'light' ? 'dark' : 'light';

                html.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
            });
        })();

    </script>
</body>

</html>
