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

{% block title %}{{ project.title }} - Sequenced Project{% 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-blue-100 rounded-lg p-3 mr-4">
                        <i class="fas fa-list-ol text-blue-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_sequenced') }} • {{ project.name }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    {% if can_edit %}
                        <button onclick="executeSequence({{ project.id }})" 
                                class="btn-primary">
                            <i class="fas fa-play mr-2"></i>
                            {{ t('projects.execute_sequence') }}
                        </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">
            <!-- Sequence Overview -->
            <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-sitemap mr-2 text-blue-600"></i>
                        Sequence Flow
                    </h2>
                </div>
                <div class="p-6">
                    {% if recent_prompts %}
                        <div class="space-y-4">
                            {% for prompt in recent_prompts %}
                                <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
                                    <div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                                        <span class="text-blue-600 font-medium text-sm">{{ loop.index }}</span>
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="font-medium text-gray-900">{{ prompt.title }}</h3>
                                        <p class="text-sm text-gray-600">{{ prompt.description or prompt.name }}</p>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Ready
                                        </span>
                                        <button class="text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        
                        <!-- Execution Controls -->
                        <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="font-medium text-blue-900">Ready to Execute Sequence</h3>
                                    <p class="text-sm text-blue-700">{{ recent_prompts|length }} prompts will be executed in order</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <button class="btn-secondary btn-sm">
                                        <i class="fas fa-cog mr-2"></i>
                                        Configure
                                    </button>
                                    <button onclick="executeSequence({{ project.id }})" class="btn-primary btn-sm">
                                        <i class="fas fa-play mr-2"></i>
                                        Execute
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="text-center py-8">
                            <i class="fas fa-list-ol text-4xl text-gray-300 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">No Sequence Configured</h3>
                            <p class="text-gray-500 mb-4">Add prompts to this project to create your execution sequence.</p>
                            <a href="/prompts/new?project_id={{ project.id }}" class="btn-primary">
                                <i class="fas fa-plus mr-2"></i>
                                {{ t('projects.add_first_prompt') }}
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Execution History -->
            <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-history mr-2 text-green-600"></i>
                        Execution History
                    </h2>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <!-- Sample execution entries -->
                        <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                            <div class="flex-shrink-0 w-2 h-2 bg-green-400 rounded-full mr-3"></div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">Last execution completed</p>
                                <p class="text-xs text-gray-500">5 prompts executed successfully • 2 hours ago</p>
                            </div>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-external-link-alt"></i>
                            </button>
                        </div>
                        
                        <div class="text-center py-4">
                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                View Full History
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Project 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>
                        Project 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 Prompts</span>
                            <span class="font-medium text-gray-900">{{ project_stats.prompt_count or 0 }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Sequence Order</span>
                            <span class="font-medium text-gray-900">Linear</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Last Execution</span>
                            <span class="font-medium text-gray-900">2h ago</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">Success Rate</span>
                            <span class="font-medium text-green-600">98%</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 class="w-full btn-secondary justify-start">
                            <i class="fas fa-plus mr-2"></i>
                            Add Prompt to Sequence
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-sort mr-2"></i>
                            Reorder Sequence
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-download mr-2"></i>
                            Export Sequence
                        </button>
                        <button class="w-full btn-secondary justify-start">
                            <i class="fas fa-copy mr-2"></i>
                            Duplicate Project
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Execute Sequence Modal -->
<div id="executeModal" 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-md w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Execute Sequence</h3>
            </div>
            <div class="p-6">
                <p class="text-gray-700 mb-4">This will execute all prompts in the sequence order. Continue?</p>
                <div class="flex items-center justify-end space-x-3">
                    <button onclick="closeExecuteModal()" class="btn-secondary">Cancel</button>
                    <button onclick="confirmExecute()" class="btn-primary">Execute</button>
                </div>
            </div>
        </div>
    </div>
</div>

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

function closeExecuteModal() {
    document.getElementById('executeModal').classList.add('hidden');
}

function confirmExecute() {
    // In a real implementation, this would make an API call
    fetch(`/projects/{{ project.id }}/execute`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({})
    }).then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Sequence executed successfully!');
            location.reload();
        } else {
            alert('Execution failed: ' + data.error);
        }
    }).catch(error => {
        console.error('Error:', error);
        alert('Execution failed');
    });
    
    closeExecuteModal();
}
</script>
{% endblock %}