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

{% block title %}{{ project.title }} - {{ t('projects.version_history') }}{% 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">
                    <a href="/projects/{{ project.id }}" class="text-gray-400 hover:text-gray-600 mr-4">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="bg-gray-100 rounded-lg p-3 mr-4">
                        <i class="fas fa-history text-gray-600 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ project.title }} - {{ t('projects.version_history') }}</h1>
                        <p class="text-sm text-gray-600">{{ versions|length }} {{ t('projects.versions') }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <button onclick="openSnapshotModal()" class="btn-primary">
                        <i class="fas fa-camera mr-2"></i>
                        {{ t('projects.create_snapshot') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Version History -->
        <div class="lg:col-span-2">
            <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-code-branch mr-2 text-gray-600"></i>
                        {{ t('projects.version_timeline') }}
                    </h2>
                </div>
                
                <div class="p-6">
                    {% if versions %}
                        <div class="space-y-6">
                            {% for version in versions %}
                                <div class="relative">
                                    <!-- Timeline line -->
                                    {% if not loop.last %}
                                        <div class="absolute left-4 top-8 bottom-0 w-0.5 bg-gray-200"></div>
                                    {% endif %}
                                    
                                    <div class="flex items-start space-x-4">
                                        <!-- Version icon -->
                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                            <span class="text-blue-600 font-medium text-sm">v{{ version.version_number }}</span>
                                        </div>
                                        
                                        <!-- Version details -->
                                        <div class="flex-1 bg-gray-50 rounded-lg p-4">
                                            <div class="flex items-center justify-between mb-2">
                                                <h3 class="text-md font-medium text-gray-900">
                                                    {{ t('projects.version') }} {{ version.version_number }}
                                                    {% if version.version_number == versions[0].version_number %}
                                                        <span class="ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                                                            {{ t('projects.current') }}
                                                        </span>
                                                    {% endif %}
                                                </h3>
                                                <div class="flex items-center space-x-2">
                                                    <button onclick="compareVersions({{ project.id }}, {{ version.version_number }})" 
                                                            class="text-gray-400 hover:text-blue-600"
                                                            title="{{ t('projects.compare') }}">
                                                        <i class="fas fa-exchange-alt"></i>
                                                    </button>
                                                    {% if version.version_number != versions[0].version_number %}
                                                        <button onclick="restoreVersion({{ project.id }}, {{ version.version_number }})" 
                                                                class="text-gray-400 hover:text-green-600"
                                                                title="{{ t('projects.restore') }}">
                                                            <i class="fas fa-undo"></i>
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            
                                            <p class="text-sm text-gray-600 mb-2">
                                                {{ version.changes_description or t('projects.no_description') }}
                                            </p>
                                            
                                            <div class="flex items-center text-xs text-gray-500 space-x-4">
                                                <span>
                                                    <i class="fas fa-user mr-1"></i>
                                                    {{ version.created_by or t('projects.system') }}
                                                </span>
                                                <span>
                                                    <i class="fas fa-clock mr-1"></i>
                                                    {{ version.created_at }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-12">
                            <i class="fas fa-history text-4xl text-gray-300 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">{{ t('projects.no_versions_yet') }}</h3>
                            <p class="text-gray-500 mb-4">{{ t('projects.create_snapshot_help') }}</p>
                            <button onclick="openSnapshotModal()" class="btn-primary">
                                <i class="fas fa-camera mr-2"></i>
                                {{ t('projects.create_first_snapshot') }}
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Current Status -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                        {{ t('projects.current_status') }}
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">{{ t('projects.current_version') }}</span>
                            <span class="font-medium text-gray-900">v{{ versions[0].version_number if versions else 1 }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">{{ t('projects.total_versions') }}</span>
                            <span class="font-medium text-gray-900">{{ versions|length }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">{{ t('projects.last_updated') }}</span>
                            <span class="font-medium text-gray-900">{{ project.updated_at }}</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">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-bolt mr-2 text-yellow-600"></i>
                        {{ t('projects.quick_actions') }}
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <button onclick="openSnapshotModal()" class="w-full btn-secondary justify-start">
                            <i class="fas fa-camera mr-2"></i>
                            {{ t('projects.create_snapshot') }}
                        </button>
                        {% if versions|length > 1 %}
                            <button onclick="compareLatestVersions()" class="w-full btn-secondary justify-start">
                                <i class="fas fa-exchange-alt mr-2"></i>
                                {{ t('projects.compare_latest') }}
                            </button>
                        {% endif %}
                        <button onclick="exportVersionHistory()" class="w-full btn-secondary justify-start">
                            <i class="fas fa-download mr-2"></i>
                            {{ t('projects.export_history') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Snapshot Modal -->
<div id="snapshot-modal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeSnapshotModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        <i class="fas fa-camera mr-2 text-blue-500"></i>
                        {{ t('projects.create_snapshot') }}
                    </h3>
                    <button onclick="closeSnapshotModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form id="snapshot-form" onsubmit="createSnapshot(event)">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ t('projects.snapshot_description') }}</label>
                        <textarea name="description" rows="3" 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                  placeholder="{{ t('projects.snapshot_description_placeholder') }}"></textarea>
                    </div>
                </form>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="submit" form="snapshot-form" class="btn-primary ml-3">
                    {{ t('projects.create_snapshot') }}
                </button>
                <button onclick="closeSnapshotModal()" class="btn-secondary">
                    {{ t('common.cancel') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function openSnapshotModal() {
    document.getElementById('snapshot-modal').classList.remove('hidden');
}

function closeSnapshotModal() {
    document.getElementById('snapshot-modal').classList.add('hidden');
    document.getElementById('snapshot-form').reset();
}

function createSnapshot(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    
    fetch(`/projects/{{ project.id }}/snapshot`, {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            closeSnapshotModal();
            location.reload();
        } else {
            alert('Error: ' + data.error);
        }
    }).catch(error => {
        console.error('Error:', error);
        alert('{{ t("common.error_occurred") }}');
    });
}

function compareVersions(projectId, versionNumber) {
    // For now, just show an alert. In a full implementation, this would open a comparison view
    alert(`{{ t('projects.compare_version_placeholder') }} ${versionNumber}`);
}

function restoreVersion(projectId, versionNumber) {
    if (confirm(`{{ t('projects.confirm_restore') }} v${versionNumber}?`)) {
        const formData = new FormData();
        formData.append('version_number', versionNumber);
        formData.append('restore_mode', 'full');
        
        fetch(`/projects/${projectId}/restore`, {
            method: 'POST',
            body: formData
        }).then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('{{ t("common.error_occurred") }}');
        });
    }
}

function compareLatestVersions() {
    const versions = {{ versions|tojson|safe }};
    if (versions.length >= 2) {
        compareVersions({{ project.id }}, versions[1].version_number);
    }
}

function exportVersionHistory() {
    window.open(`/projects/{{ project.id }}/export?format=history`, '_blank');
}
</script>
{% endblock %}