{% extends "base.html" %}

{% block content %}
<div class="space-y-6" x-data="{ tab: 'manual' }">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between">
        <div class="min-w-0 flex-1">
            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
                Analysis Playground
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Test and evaluate your RAG pipeline configurations
            </p>
        </div>
    </div>

    <!-- Tabs -->
    <div class="border-b border-gray-200">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
            <button @click="tab = 'manual'"
                :class="{ 'border-blue-500 text-blue-600': tab === 'manual', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'manual' }"
                class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Manual Analysis
            </button>
            <button @click="tab = 'prompt'"
                :class="{ 'border-blue-500 text-blue-600': tab === 'prompt', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'prompt' }"
                class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Prompt Engineering
            </button>
        </nav>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Input Forms -->
        <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">

            <!-- Manual Analysis Form -->
            <div x-show="tab === 'manual'">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                        </path>
                    </svg>
                    Manual Input
                </h2>
                <form hx-post="/playground/analyze" hx-target="#results" hx-indicator="#loading">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="query">
                            Query
                        </label>
                        <input
                            class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            id="query" name="query" type="text" placeholder="e.g. What is RAG?"
                            value="{{ prefill.query }}" required>
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="contexts">
                            Retrieved Contexts (One per line)
                        </label>
                        <textarea
                            class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-48 font-mono text-sm"
                            id="contexts" name="contexts" placeholder="Context 1...&#10;Context 2..."
                            required>{{ prefill.contexts }}</textarea>
                    </div>

                    <div class="mb-6">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="response">
                            Generated Response
                        </label>
                        <textarea
                            class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-32"
                            id="response" name="response" placeholder="The model's answer..."
                            required>{{ prefill.response }}</textarea>
                    </div>

                    <div class="flex items-center justify-between">
                        <button
                            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-150 ease-in-out flex justify-center items-center"
                            type="submit">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Run Analysis
                        </button>
                    </div>
                </form>
            </div>

            <!-- Prompt Engineering Form -->
            <div x-show="tab === 'prompt'" style="display: none;">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                    Prompt Engineering
                </h2>
                <form hx-post="/playground/generate" hx-target="#gen-results" hx-indicator="#gen-loading">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="system_prompt">
                            System Prompt
                        </label>
                        <textarea
                            class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent h-24 font-mono text-sm"
                            id="system_prompt" name="system_prompt"
                            placeholder="You are a helpful assistant...">You are a helpful assistant.</textarea>
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="user_prompt_template">
                            User Prompt Template
                        </label>
                        <textarea
                            class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent h-32 font-mono text-sm"
                            id="user_prompt_template" name="user_prompt_template"
                            placeholder="Context: {context}&#10;Question: {query}">Context: {context}

Question: {query}

Answer:</textarea>
                        <p class="mt-1 text-xs text-gray-500">Use {context} and {query} as placeholders.</p>
                    </div>

                    <div class="grid grid-cols-1 gap-4 mb-6">
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="prompt_context">
                                Variable: {context}
                            </label>
                            <textarea
                                class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent h-24 font-mono text-sm"
                                id="prompt_context" name="context" placeholder="Paste context here..."></textarea>
                        </div>
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="prompt_query">
                                Variable: {query}
                            </label>
                            <input
                                class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                id="prompt_query" name="query" type="text" placeholder="Enter query...">
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <button
                            class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-150 ease-in-out flex justify-center items-center"
                            type="submit">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            Generate & Evaluate
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Results Display -->
        <div class="bg-gray-50 p-6 rounded-lg shadow-inner border border-gray-200">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                    </path>
                </svg>
                Live Metrics
            </h2>

            <!-- Loading State -->
            <div id="loading" class="htmx-indicator flex flex-col justify-center items-center py-20">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
                <p class="text-gray-500 animate-pulse">Analyzing with RAGLint...</p>
            </div>

            <div id="gen-loading" class="htmx-indicator flex flex-col justify-center items-center py-20">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mb-4"></div>
                <p class="text-gray-500 animate-pulse">Generating response...</p>
            </div>

            <!-- Results Container -->
            <div id="results" class="space-y-4">
                <div class="text-center py-20 text-gray-400 border-2 border-dashed border-gray-300 rounded-lg">
                    <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
                        </path>
                    </svg>
                    <p class="mt-2">Ready to analyze.</p>
                </div>
            </div>

            <!-- Generation Results Container (swapped in by HTMX) -->
            <div id="gen-results"></div>
        </div>
    </div>
</div>

<!-- Alpine.js for Tabs -->
<script src="//unpkg.com/alpinejs" defer></script>
{% endblock %}