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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VespaEmbed</title>
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>

<body>
    <div class="app">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-brand">
                <span class="brand-icon">◈</span>
                <span class="brand-text">VespaEmbed</span>
            </div>
            <button id="new-training-btn" class="btn-new">+ New Project</button>
            <div class="run-list" id="run-list">
                <div class="run-item placeholder">No training runs yet</div>
            </div>

            <!-- Project Summary (shown when run selected) -->
            <div id="project-summary" class="project-summary" style="display: none;">
                <div class="summary-header">
                    <span class="summary-title" id="summary-project-name">Training</span>
                    <span class="status-chip small" id="summary-status">Ready</span>
                </div>
                <div class="summary-grid">
                    <div class="summary-row">
                        <span class="summary-key">Task</span>
                        <span class="summary-val" id="sum-task">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">Loss</span>
                        <span class="summary-val" id="sum-loss">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">Model</span>
                        <span class="summary-val" id="sum-model">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">Data</span>
                        <span class="summary-val" id="sum-data">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">Epochs</span>
                        <span class="summary-val" id="sum-epochs">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">Batch</span>
                        <span class="summary-val" id="sum-batch">--</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-key">LR</span>
                        <span class="summary-val" id="sum-lr">--</span>
                    </div>
                    <div class="summary-row" id="sum-lora-row" style="display: none;">
                        <span class="summary-key">LoRA</span>
                        <span class="summary-val" id="sum-lora">--</span>
                    </div>
                    <div class="summary-row" id="sum-matryoshka-row" style="display: none;">
                        <span class="summary-key">Matryoshka</span>
                        <span class="summary-val" id="sum-matryoshka">--</span>
                    </div>
                </div>
                <div class="summary-actions">
                    <button type="button" id="artifacts-btn" class="btn-ghost" disabled>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                            <polyline points="7 10 12 15 17 10" />
                            <line x1="12" y1="15" x2="12" y2="3" />
                        </svg>
                        Artifacts
                    </button>
                    <button type="button" id="stop-btn" class="btn-danger" style="display: none;">
                        <span class="btn-text">Stop</span>
                        <span class="btn-spinner"></span>
                    </button>
                    <button type="button" id="delete-btn" class="btn-ghost">Delete</button>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main">
            <!-- Top Bar: Status + Metrics -->
            <div class="monitor-header">
                <div class="header-actions">
                    <button id="refresh-btn" class="icon-btn" title="Refresh">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 4v6h-6" />
                            <path d="M1 20v-6h6" />
                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
                        </svg>
                    </button>
                </div>
                <div class="metrics-bar">
                    <div class="metric">
                        <span class="metric-val" id="current-step">0</span>
                        <span class="metric-label">steps</span>
                    </div>
                    <div class="metric highlight">
                        <span class="metric-val" id="current-loss">--</span>
                        <span class="metric-label">loss</span>
                    </div>
                    <div class="metric">
                        <span class="metric-val" id="current-eta">--</span>
                        <span class="metric-label">ETA</span>
                    </div>
                </div>
            </div>

            <!-- Status Banner -->
            <div class="status-banner" id="status-banner" style="display: none;">
                <span class="status-spinner"></span>
                <span class="status-message" id="status-message">Loading...</span>
            </div>

            <!-- Chart -->
            <div class="chart-card">
                <div class="chart-header">
                    <span>Training Progress</span>
                    <div class="chart-controls">
                        <select id="metric-select" class="metric-select">
                            <option value="loss">Loss</option>
                        </select>
                    </div>
                </div>
                <div class="chart-wrapper">
                    <canvas id="loss-chart"></canvas>
                    <div class="chart-placeholder" id="chart-placeholder">
                        Start training to see progress
                    </div>
                </div>
            </div>

            <!-- Logs -->
            <div class="log-card">
                <div class="card-header">
                    Training Logs
                    <span class="badge" id="log-count">0</span>
                </div>
                <div class="log-content" id="log-content">
                    Logs will appear here...
                </div>
            </div>

        </main>

        <!-- Footer -->
        <footer class="app-footer">
            <span>vespaembed v{{ version }}</span>
        </footer>
    </div>

    <!-- New Training Modal (Multi-Step Wizard) -->
    <div id="new-training-modal" class="modal">
        <div class="modal-box modal-wizard">
            <div class="modal-header">
                <span>New Project</span>
                <button class="close-modal" id="close-new-training">&times;</button>
            </div>

            <!-- Step Indicators -->
            <div class="wizard-steps">
                <div class="wizard-step active" data-step="1">
                    <span class="step-number">1</span>
                    <span class="step-label">Setup</span>
                </div>
                <div class="wizard-step" data-step="2">
                    <span class="step-number">2</span>
                    <span class="step-label">Training</span>
                </div>
            </div>

            <form id="train-form">
                <!-- Step 1: Setup (Task, Model, Data) -->
                <div class="wizard-content" id="wizard-step-1">
                    <!-- Project Name -->
                    <div class="form-section">
                        <label class="section-label">Project Name</label>
                        <input type="text" id="project_name" name="project_name" required
                               pattern="[a-zA-Z0-9][a-zA-Z0-9-]*">
                        <span class="field-hint">Saved to ~/.vespaembed/projects/</span>
                    </div>

                    <!-- Task & Model -->
                    <div class="form-section">
                        <label class="section-label">Task & Model</label>
                        <div class="form-field">
                            <label>Task</label>
                            <select id="task" name="task" required>
                                <!-- Options populated via API -->
                            </select>
                            <span class="field-hint" id="task-description"></span>
                        </div>
                        <!-- Required columns -->
                        <div class="required-columns" id="required-columns">
                            <span class="required-columns-label">Required columns:</span>
                            <span class="required-columns-list" id="required-columns-list"></span>
                        </div>
                        <!-- Sample data format -->
                        <div class="sample-data-box" id="sample-data-box">
                            <div class="sample-data-header">Example data:</div>
                            <div class="sample-data-content" id="sample-data-content"></div>
                        </div>
                        <div class="form-field" style="margin-top: var(--space-sm);">
                            <label>Base Model</label>
                            <input type="text" id="base_model" name="base_model"
                                   value="sentence-transformers/all-MiniLM-L6-v2" required>
                        </div>
                    </div>

                    <!-- Data Source Tabs -->
                    <div class="form-section">
                        <label class="section-label">Data Source</label>
                        <div class="tabs">
                            <button type="button" class="tab active" data-tab="file">File Upload</button>
                            <button type="button" class="tab" data-tab="huggingface">HuggingFace Dataset</button>
                        </div>

                        <!-- Tab content container -->
                        <div class="tab-container">
                            <!-- File Upload Tab -->
                            <div class="tab-content active" id="tab-file">
                                <div class="upload-grid">
                                    <!-- Training Data -->
                                    <div class="upload-section">
                                        <label class="upload-label">Training Data <span class="required">*</span></label>
                                        <div class="upload-box" id="train-upload">
                                            <input type="file" id="train_file" accept=".csv,.jsonl" hidden>
                                            <span class="upload-icon">↑</span>
                                            <span class="upload-text" id="train_file_info">CSV or JSONL</span>
                                        </div>
                                        <input type="hidden" id="train_filename" name="train_filename">
                                    </div>

                                    <!-- Evaluation Data (Optional) -->
                                    <div class="upload-section">
                                        <label class="upload-label">Eval Data <span class="optional">(optional)</span></label>
                                        <div class="upload-box" id="eval-upload">
                                            <input type="file" id="eval_file" accept=".csv,.jsonl" hidden>
                                            <span class="upload-icon">↑</span>
                                            <span class="upload-text" id="eval_file_info">CSV or JSONL</span>
                                        </div>
                                        <input type="hidden" id="eval_filename" name="eval_filename">
                                    </div>
                                </div>
                                <!-- Auto-split option -->
                                <div class="autosplit-option">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="auto_split_eval">
                                        <span class="toggle-slider"></span>
                                    </label>
                                    <label class="toggle-label" for="auto_split_eval">
                                        Auto-split for evaluation
                                        <span class="hint">Split a portion of training data for validation</span>
                                    </label>
                                    <div class="autosplit-pct-input">
                                        <input type="number" id="eval_split_pct" name="eval_split_pct"
                                               value="10" min="0.1" max="50" step="0.1" disabled>
                                        <span>%</span>
                                    </div>
                                </div>
                            </div>

                            <!-- HuggingFace Dataset Tab -->
                            <div class="tab-content" id="tab-huggingface">
                                <div class="form-row">
                                    <div class="form-field">
                                        <label>Dataset <span class="required">*</span></label>
                                        <input type="text" id="hf_dataset" name="hf_dataset"
                                               placeholder="sentence-transformers/all-nli">
                                    </div>
                                    <div class="form-field">
                                        <label>Subset</label>
                                        <input type="text" id="hf_subset" name="hf_subset"
                                               placeholder="triplet">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-field">
                                        <label>Train Split</label>
                                        <input type="text" id="hf_train_split" name="hf_train_split"
                                               value="train">
                                    </div>
                                    <div class="form-field">
                                        <label>Eval Split</label>
                                        <input type="text" id="hf_eval_split" name="hf_eval_split"
                                               placeholder="validation">
                                    </div>
                                </div>
                                <!-- Auto-split option for HF datasets -->
                                <div class="autosplit-option">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="hf_auto_split_eval">
                                        <span class="toggle-slider"></span>
                                    </label>
                                    <label class="toggle-label" for="hf_auto_split_eval">
                                        Auto-split for evaluation
                                        <span class="hint">Use when dataset has no eval/validation split</span>
                                    </label>
                                    <div class="autosplit-pct-input">
                                        <input type="number" id="hf_eval_split_pct" name="hf_eval_split_pct"
                                               value="10" min="0.1" max="50" step="0.1" disabled>
                                        <span>%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Training Parameters -->
                <div class="wizard-content" id="wizard-step-2" style="display: none;">
                    <!-- Loss Function (shown when task has loss options) -->
                    <div class="form-section" id="loss-variant-field" style="display: none;">
                        <label class="section-label">Loss Function</label>
                        <div class="form-field">
                            <select id="loss_variant" name="loss_variant">
                                <!-- Options populated based on task -->
                            </select>
                            <span class="field-hint" id="loss-variant-hint"></span>
                        </div>
                    </div>

                    <!-- Basic Training Parameters -->
                    <div class="form-section">
                        <label class="section-label">Training</label>
                        <div class="form-row">
                            <div class="form-field compact">
                                <label>Epochs</label>
                                <input type="number" id="epochs" name="epochs" value="3" min="1">
                            </div>
                            <div class="form-field compact">
                                <label>Max Steps</label>
                                <input type="number" id="max_steps" name="max_steps" placeholder="Optional" min="1">
                            </div>
                            <div class="form-field compact">
                                <label>Batch Size</label>
                                <input type="number" id="batch_size" name="batch_size" value="32" min="1">
                            </div>
                            <div class="form-field compact">
                                <label>Learning Rate</label>
                                <input type="text" id="learning_rate" name="learning_rate" value="2e-5">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-field compact">
                                <label>Precision</label>
                                <select id="precision" name="precision">
                                    <option value="fp32" selected>FP32</option>
                                    <option value="fp16">FP16</option>
                                    <option value="bf16">BF16</option>
                                </select>
                            </div>
                            <div class="form-field compact">
                                <label>Max Seq Length</label>
                                <input type="number" id="max_seq_length" name="max_seq_length" placeholder="auto" min="1">
                            </div>
                        </div>
                    </div>

                    <!-- Task-specific parameters (populated dynamically) -->
                    <div id="task-specific-params"></div>

                    <!-- Advanced Options (Collapsible) -->
                    <div class="form-section">
                        <button type="button" class="collapsible-header" id="advanced-toggle">
                            <span>Advanced Options</span>
                            <span class="collapsible-icon">▼</span>
                        </button>
                        <div class="collapsible-content" id="advanced-content">
                            <!-- LoRA -->
                            <div class="advanced-group">
                                <div class="checkbox-row">
                                    <input type="checkbox" id="lora_enabled" name="lora_enabled">
                                    <label for="lora_enabled">Enable LoRA training</label>
                                </div>
                                <div id="lora-fields" style="display: none; margin-top: var(--space-xs);">
                                    <div class="form-row">
                                        <div class="form-field compact">
                                            <label>Rank (r)</label>
                                            <select id="lora_r" name="lora_r">
                                                <option value="8">8</option>
                                                <option value="16">16</option>
                                                <option value="32">32</option>
                                                <option value="64" selected>64</option>
                                                <option value="128">128</option>
                                            </select>
                                        </div>
                                        <div class="form-field compact">
                                            <label>Alpha</label>
                                            <input type="number" id="lora_alpha" name="lora_alpha" value="128" min="1">
                                        </div>
                                        <div class="form-field compact">
                                            <label>Dropout</label>
                                            <input type="text" id="lora_dropout" name="lora_dropout" value="0.1">
                                        </div>
                                    </div>
                                    <div class="form-field">
                                        <label>Target Modules</label>
                                        <select id="lora_target_preset" class="target-modules-select">
                                            <option value="query, key, value, dense">BERT / MiniLM / MPNet / BGE</option>
                                            <option value="Wqkv, Wi, Wo">ModernBERT / GTE-ModernBERT</option>
                                            <option value="q_proj, k_proj, v_proj, o_proj">Llama / Gemma / Qwen</option>
                                            <option value="q_proj, k_proj, v_proj, o_proj, gate_proj, up_proj, down_proj">Llama / Gemma / Qwen (extended)</option>
                                            <option value="">Custom</option>
                                        </select>
                                        <input type="text" id="lora_target_modules" name="lora_target_modules"
                                               value="query, key, value, dense" style="margin-top: var(--space-xs);"
                                               placeholder="Enter comma-separated module names">
                                    </div>
                                </div>
                            </div>

                            <!-- Matryoshka -->
                            <div class="advanced-group" id="matryoshka-section">
                                <div class="checkbox-row">
                                    <input type="checkbox" id="matryoshka_enabled" name="matryoshka_enabled">
                                    <label for="matryoshka_enabled">Enable Matryoshka embeddings</label>
                                </div>
                                <div id="matryoshka-fields" style="display: none; margin-top: var(--space-xs);">
                                    <div class="form-field">
                                        <label>Dimensions</label>
                                        <input type="text" id="matryoshka_dims" name="matryoshka_dims"
                                               value="768,512,256,128,64" placeholder="768,512,256,128,64">
                                        <span class="field-hint">Comma-separated (largest to smallest)</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Optimizer & Scheduler -->
                            <div class="advanced-group">
                                <span class="group-label">Optimizer & Scheduler</span>
                                <div class="form-row">
                                    <div class="form-field compact">
                                        <label>Optimizer</label>
                                        <select id="optimizer" name="optimizer">
                                            <option value="adamw_torch" selected>AdamW</option>
                                            <option value="adamw_torch_fused">AdamW Fused</option>
                                            <option value="adamw_8bit">AdamW 8-bit</option>
                                            <option value="adafactor">Adafactor</option>
                                            <option value="sgd">SGD</option>
                                        </select>
                                    </div>
                                    <div class="form-field compact">
                                        <label>Scheduler</label>
                                        <select id="scheduler" name="scheduler">
                                            <option value="linear" selected>Linear</option>
                                            <option value="cosine">Cosine</option>
                                            <option value="cosine_with_restarts">Cosine w/ Restarts</option>
                                            <option value="constant">Constant</option>
                                            <option value="polynomial">Polynomial</option>
                                        </select>
                                    </div>
                                    <div class="form-field compact">
                                        <label>Weight Decay</label>
                                        <input type="text" id="weight_decay" name="weight_decay" value="0.01">
                                    </div>
                                    <div class="form-field compact">
                                        <label>Warmup Ratio</label>
                                        <input type="text" id="warmup_ratio" name="warmup_ratio" value="0.1">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-field compact">
                                        <label>Grad Accum</label>
                                        <input type="number" id="gradient_accumulation_steps" name="gradient_accumulation_steps" value="1" min="1">
                                    </div>
                                    <div class="form-field compact">
                                        <label>Logging Steps</label>
                                        <input type="number" id="logging_steps" name="logging_steps" value="0.02" min="0" step="any">
                                    </div>
                                    <div class="form-field compact">
                                        <label>Eval Steps</label>
                                        <input type="number" id="eval_steps" name="eval_steps" value="0.25" min="0" step="any">
                                    </div>
                                    <div class="form-field compact">
                                        <label>Save Steps</label>
                                        <input type="number" id="save_steps" name="save_steps" value="0.5" min="0" step="any">
                                    </div>
                                </div>
                                <div class="checkbox-row">
                                    <input type="checkbox" id="gradient_checkpointing" name="gradient_checkpointing">
                                    <label for="gradient_checkpointing">Gradient Checkpointing (saves VRAM)</label>
                                </div>
                            </div>

                            <!-- Unsloth -->
                            <div class="advanced-group">
                                <div class="checkbox-row">
                                    <input type="checkbox" id="unsloth_enabled" name="unsloth_enabled">
                                    <label for="unsloth_enabled">Enable Unsloth (faster training, requires CUDA)</label>
                                </div>
                                <div id="unsloth-fields" style="display: none; margin-top: var(--space-xs);">
                                    <div class="form-field compact">
                                        <label>Save Method</label>
                                        <select id="unsloth_save_method" name="unsloth_save_method">
                                            <option value="merged_16bit" selected>Merged FP16</option>
                                            <option value="merged_4bit">Merged 4-bit</option>
                                            <option value="lora">LoRA Only</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Hub Push -->
                            <div class="advanced-group" style="border-bottom: none;">
                                <div class="checkbox-row">
                                    <input type="checkbox" id="push_to_hub" name="push_to_hub">
                                    <label for="push_to_hub">Push to HuggingFace Hub</label>
                                </div>
                                <div id="hub-fields" style="display: none; margin-top: var(--space-xs);">
                                    <div class="form-field">
                                        <label>Username</label>
                                        <input type="text" id="hf_username" name="hf_username" placeholder="your-username">
                                        <span class="field-hint">Requires HF_TOKEN env var</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer wizard-footer">
                    <button type="button" id="wizard-back" class="btn-secondary" style="display: none;">Back</button>
                    <div class="footer-spacer"></div>
                    <button type="button" id="wizard-next" class="btn-primary">Next</button>
                    <button type="submit" id="start-btn" class="btn-primary" style="display: none;">Start Training</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Artifacts Modal -->
    <div id="artifacts-modal" class="modal">
        <div class="modal-box">
            <div class="modal-header">
                <span>Artifacts</span>
                <button class="close-modal" id="close-artifacts-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="artifacts-list" class="artifacts-list">
                    <div class="artifacts-empty">No artifacts available</div>
                </div>
                <div class="artifacts-footer">
                    <span class="artifacts-path" id="artifacts-path"></span>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>

</html>
