{% extends "base.html" %}

{% block title %}Prompts Management - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
    .prompts-section { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
    .prompts-section h3 { color: #1e293b; margin-bottom: 1.5rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
    .prompt-group { margin-bottom: 2rem; }
    .prompt-group h4 { color: #374151; margin-bottom: 1rem; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group textarea { width: 100%; min-height: 120px; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-family: monospace; font-size: 0.9rem; resize: vertical; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .btn:hover { background: #5a67d8; }
    .btn-success { background: #10b981; }
    .btn-success:hover { background: #059669; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1>Prompts Management</h1>
    <p style="color: #64748b; margin-bottom: 2rem;">Configure system prompts for analysis and training operations.</p>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
        {% endfor %}
    {% endif %}
    {% endwith %}

    <!-- Analyze Video Jobs Section -->
    <div class="prompts-section">
        <h3>📹 Analyze Video Jobs</h3>
        <form method="post" action="/admin/prompts/save">
            <input type="hidden" name="functionality" value="analyze">

            <div class="prompt-group">
                <h4>System Prompt</h4>
                <div class="form-group">
                    <label for="analyze_system_prompt">Base system prompt for all analysis operations:</label>
                    <textarea name="system_prompt" id="analyze_system_prompt" placeholder="Enter system prompt...">{{ analyze_prompts.system_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Video Analysis Prompt</h4>
                <div class="form-group">
                    <label for="analyze_video_prompt">Prompt for video content analysis:</label>
                    <textarea name="video_prompt" id="analyze_video_prompt" placeholder="Enter video analysis prompt...">{{ analyze_prompts.video_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Audio Analysis Prompt</h4>
                <div class="form-group">
                    <label for="analyze_audio_prompt">Prompt for audio content analysis:</label>
                    <textarea name="audio_prompt" id="analyze_audio_prompt" placeholder="Enter audio analysis prompt...">{{ analyze_prompts.audio_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Image Analysis Prompt</h4>
                <div class="form-group">
                    <label for="analyze_image_prompt">Prompt for image content analysis:</label>
                    <textarea name="image_prompt" id="analyze_image_prompt" placeholder="Enter image analysis prompt...">{{ analyze_prompts.image_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Video Splitting Prompt</h4>
                <div class="form-group">
                    <label for="analyze_split_media_prompt">Prompt for video scene splitting operations:</label>
                    <textarea name="split_media_prompt" id="analyze_split_media_prompt" placeholder="Enter video splitting prompt...">{{ analyze_prompts.split_media_prompt or '' }}</textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-success">Save Analyze Prompts</button>
        </form>
    </div>

    <!-- Training Section -->
    <div class="prompts-section">
        <h3>🎯 Training Jobs</h3>
        <form method="post" action="/admin/prompts/save">
            <input type="hidden" name="functionality" value="training">

            <div class="prompt-group">
                <h4>System Prompt</h4>
                <div class="form-group">
                    <label for="training_system_prompt">Base system prompt for all training operations:</label>
                    <textarea name="system_prompt" id="training_system_prompt" placeholder="Enter system prompt...">{{ training_prompts.system_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Video Training Prompt</h4>
                <div class="form-group">
                    <label for="training_video_prompt">Prompt for video training operations:</label>
                    <textarea name="video_prompt" id="training_video_prompt" placeholder="Enter video training prompt...">{{ training_prompts.video_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Audio Training Prompt</h4>
                <div class="form-group">
                    <label for="training_audio_prompt">Prompt for audio training operations:</label>
                    <textarea name="audio_prompt" id="training_audio_prompt" placeholder="Enter audio training prompt...">{{ training_prompts.audio_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Image Training Prompt</h4>
                <div class="form-group">
                    <label for="training_image_prompt">Prompt for image training operations:</label>
                    <textarea name="image_prompt" id="training_image_prompt" placeholder="Enter image training prompt...">{{ training_prompts.image_prompt or '' }}</textarea>
                </div>
            </div>

            <div class="prompt-group">
                <h4>Video Splitting Prompt</h4>
                <div class="form-group">
                    <label for="training_split_media_prompt">Prompt for video scene splitting in training:</label>
                    <textarea name="split_media_prompt" id="training_split_media_prompt" placeholder="Enter video splitting prompt...">{{ training_prompts.split_media_prompt or '' }}</textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-success">Save Training Prompts</button>
        </form>
    </div>
</div>
{% endblock %}