{% extends "layouts/base.html" %}

{% block title %}{{ project.title }} - LLM Comparison{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Project Header -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="bg-purple-100 rounded-lg p-3 mr-4">
                        <i class="fas fa-balance-scale text-purple-600 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ project.title }}</h1>
                        <p class="text-sm text-gray-600">{{ t('projects.type_llm_comparison') }} • {{ project.name }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    {% if can_edit %}
                        <button onclick="runComparison({{ project.id }})" 
                                class="btn-primary">
                            <i class="fas fa-play mr-2"></i>
                            {{ t('projects.run_comparison') }}
                        </button>
                        <button onclick="setupComparison({{ project.id }})" 
                                class="btn-secondary">
                            <i class="fas fa-cog mr-2"></i>
                            Setup
                        </button>
                        <a href="/projects/{{ project.id }}/edit" class="btn-secondary">
                            <i class="fas fa-edit mr-2"></i>
                            {{ t('common.edit') }}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
        
        {% if project.description %}
        <div class="px-6 py-4">
            <p class="text-gray-700">{{ project.description }}</p>
        </div>
        {% endif %}
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Comparison Setup -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-cogs mr-2 text-purple-600"></i>
                        Comparison Configuration
                    </h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Models to Compare -->
                        <div class="space-y-3">
                            <h3 class="font-medium text-gray-900">AI Models</h3>
                            <div class="space-y-2">
                                <div class="flex items-center p-3 bg-blue-50 rounded-lg">
                                    <i class="fas fa-robot text-blue-600 mr-3"></i>
                                    <div>
                                        <p class="font-medium text-blue-900">GPT-4</p>
                                        <p class="text-xs text-blue-700">OpenAI • Latest</p>
                                    </div>
                                </div>
                                <div class="flex items-center p-3 bg-orange-50 rounded-lg">
                                    <i class="fas fa-brain text-orange-600 mr-3"></i>
                                    <div>
                                        <p class="font-medium text-orange-900">Claude-3</p>
                                        <p class="text-xs text-orange-700">Anthropic • Sonnet</p>
                                    </div>
                                </div>
                                <div class="flex items-center p-3 bg-green-50 rounded-lg">
                                    <i class="fas fa-gem text-green-600 mr-3"></i>
                                    <div>
                                        <p class="font-medium text-green-900">Gemini Pro</p>
                                        <p class="text-xs text-green-700">Google • Pro</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Evaluation Criteria -->
                        <div class="space-y-3">
                            <h3 class="font-medium text-gray-900">Evaluation Criteria</h3>
                            <div class="space-y-2">
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <span class="text-gray-900">Accuracy</span>
                                    <span class="text-xs bg-gray-200 px-2 py-1 rounded">40%</span>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <span class="text-gray-900">Creativity</span>
                                    <span class="text-xs bg-gray-200 px-2 py-1 rounded">30%</span>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <span class="text-gray-900">Clarity</span>
                                    <span class="text-xs bg-gray-200 px-2 py-1 rounded">30%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Test Inputs -->
                    <div class="mt-6">
                        <h3 class="font-medium text-gray-900 mb-3">Test Inputs</h3>
                        <div class="space-y-2">
                            <div class="p-3 border border-gray-200 rounded-lg">
                                <p class="text-sm text-gray-900">What is artificial intelligence?</p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg">
                                <p class="text-sm text-gray-900">Explain machine learning in simple terms</p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg">
                                <p class="text-sm text-gray-900">Compare Python vs JavaScript for beginners</p>
                            </div>
                        </div>
                        <button class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">
                            <i class="fas fa-plus mr-1"></i>
                            Add Test Input
                        </button>
                    </div>
                </div>
            </div>

            <!-- Comparison Results -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-medium text-gray-900">
                            <i class="fas fa-chart-line mr-2 text-green-600"></i>
                            Comparison Results
                        </h2>
                        <span class="text-sm text-gray-500">Last run: 1 hour ago</span>
                    </div>
                </div>
                <div class="p-6">
                    <!-- Results Table -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Test Input
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        GPT-4
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Claude-3
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Gemini Pro
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Winner
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        What is AI?
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-blue-200 rounded-full mr-2">
                                                <div class="w-6 h-2 bg-blue-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">8.5</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-orange-200 rounded-full mr-2">
                                                <div class="w-7 h-2 bg-orange-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">9.1</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-green-200 rounded-full mr-2">
                                                <div class="w-5 h-2 bg-green-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">7.8</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                            Claude-3
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        Machine Learning
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-blue-200 rounded-full mr-2">
                                                <div class="w-8 h-2 bg-blue-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">9.2</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-orange-200 rounded-full mr-2">
                                                <div class="w-6 h-2 bg-orange-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">8.7</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-2 bg-green-200 rounded-full mr-2">
                                                <div class="w-6 h-2 bg-green-600 rounded-full"></div>
                                            </div>
                                            <span class="text-sm text-gray-600">8.4</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            GPT-4
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Summary Stats -->
                    <div class="mt-6 grid grid-cols-3 gap-4">
                        <div class="text-center p-4 bg-blue-50 rounded-lg">
                            <div class="text-2xl font-bold text-blue-600">40%</div>
                            <div class="text-sm text-blue-700">GPT-4 Wins</div>
                        </div>
                        <div class="text-center p-4 bg-orange-50 rounded-lg">
                            <div class="text-2xl font-bold text-orange-600">50%</div>
                            <div class="text-sm text-orange-700">Claude-3 Wins</div>
                        </div>
                        <div class="text-center p-4 bg-green-50 rounded-lg">
                            <div class="text-2xl font-bold text-green-600">10%</div>
                            <div class="text-sm text-green-700">Gemini Wins</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Comparison Stats -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-chart-bar mr-2 text-purple-600"></i>
                        Comparison Stats
                    </h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Total Tests</span>
                            <span class="font-medium text-gray-900">15</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Models Tested</span>
                            <span class="font-medium text-gray-900">3</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Avg Score</span>
                            <span class="font-medium text-gray-900">8.6/10</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Best Model</span>
                            <span class="font-medium text-orange-600">Claude-3</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-bolt mr-2 text-yellow-600"></i>
                        Quick Actions
                    </h2>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <button onclick="runComparison({{ project.id }})" class="w-full btn-primary justify-start">
                            <i class="fas fa-play mr-2"></i>
                            Run New Comparison
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-plus mr-2"></i>
                            Add Test Input
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-robot mr-2"></i>
                            Configure Models
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-download mr-2"></i>
                            Export Results
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Run Comparison Modal -->
<div id="comparisonModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Run LLM Comparison</h3>
            </div>
            <form id="comparisonForm" class="p-6">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Test Inputs (one per line)</label>
                    <textarea name="test_inputs" rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2" 
                              placeholder="What is AI?&#10;Explain machine learning&#10;Compare programming languages">What is artificial intelligence?
Explain machine learning in simple terms
Compare Python vs JavaScript for beginners</textarea>
                </div>
                <div class="flex items-center justify-end space-x-3">
                    <button type="button" onclick="closeComparisonModal()" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Run Comparison</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Setup Comparison Modal -->
<div id="setupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Setup LLM Comparison</h3>
            </div>
            <form id="setupForm" class="p-6">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Models to Compare (comma-separated)</label>
                        <input type="text" name="models" class="w-full border border-gray-300 rounded-md px-3 py-2" 
                               value="gpt-4,claude-3,gemini-pro" placeholder="gpt-4,claude-3,gemini-pro">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Evaluation Criteria (comma-separated)</label>
                        <input type="text" name="criteria" class="w-full border border-gray-300 rounded-md px-3 py-2" 
                               value="accuracy,creativity,clarity" placeholder="accuracy,creativity,clarity">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Scoring Method</label>
                        <select name="scoring_method" class="w-full border border-gray-300 rounded-md px-3 py-2">
                            <option value="manual">Manual Review</option>
                            <option value="automated">Automated Scoring</option>
                            <option value="hybrid">Hybrid Approach</option>
                        </select>
                    </div>
                </div>
                <div class="flex items-center justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeSetupModal()" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Save Configuration</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function runComparison(projectId) {
    document.getElementById('comparisonModal').classList.remove('hidden');
}

function closeComparisonModal() {
    document.getElementById('comparisonModal').classList.add('hidden');
}

function setupComparison(projectId) {
    document.getElementById('setupModal').classList.remove('hidden');
}

function closeSetupModal() {
    document.getElementById('setupModal').classList.add('hidden');
}

document.getElementById('comparisonForm').onsubmit = function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    fetch(`/projects/{{ project.id }}/execute`, {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Comparison completed successfully!');
            location.reload();
        } else {
            alert('Comparison failed: ' + data.error);
        }
    }).catch(error => {
        console.error('Error:', error);
        alert('Comparison failed');
    });
    
    closeComparisonModal();
};

document.getElementById('setupForm').onsubmit = function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    fetch(`/projects/{{ project.id }}/setup-llm-comparison`, {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Configuration saved successfully!');
            location.reload();
        } else {
            alert('Setup failed: ' + data.error);
        }
    }).catch(error => {
        console.error('Error:', error);
        alert('Setup failed');
    });
    
    closeSetupModal();
};
</script>
{% endblock %}