{% extends 'layouts/app.twig' %}

{% block content %}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
        <p class="mt-2 text-sm text-gray-600">Manage your media sources and synchronization</p>
    </div>

    <!-- Source Management -->
    <div class="bg-white shadow rounded-lg mb-8">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Source Management</h2>
            <p class="mt-1 text-sm text-gray-600">Configure and sync your media sources</p>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                {% for source in sources %}
                <div class="border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-medium text-gray-900">{{ source.display_name }}</h3>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if source.is_active %}
                                bg-green-100 text-green-800
                            {% else %}
                                bg-red-100 text-red-800
                            {% endif %}">
                            {% if source.is_active %}Active{% else %}Inactive{% endif %}
                        </span>
                    </div>

                    <div class="space-y-3">
                        <!-- Sync Buttons -->
                        <div class="flex space-x-2">
                            <button onclick="startSync({{ source.id }}, 'full')"
                                    class="flex-1 bg-indigo-600 text-white px-3 py-1 rounded text-xs hover:bg-indigo-700 transition-colors">
                                Full Sync
                            </button>
                            <button onclick="startSync({{ source.id }}, 'incremental')"
                                    class="flex-1 bg-gray-600 text-white px-3 py-1 rounded text-xs hover:bg-gray-700 transition-colors">
                                Incremental
                            </button>
                        </div>

                        <!-- Last Sync Status -->
                        {% if source.last_sync_at %}
                        <div class="text-xs text-gray-500">
                            Last sync: {{ source.last_sync_at|date('M j, Y H:i') }}
                        </div>
                        {% else %}
                        <div class="text-xs text-gray-400">
                            Never synced
                        </div>
                        {% endif %}

                        <!-- Sync Progress (hidden by default) -->
                        <div id="sync-progress-{{ source.id }}" class="hidden">
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div id="sync-progress-bar-{{ source.id }}"
                                     class="bg-indigo-600 h-2 rounded-full transition-all duration-300"
                                     style="width: 0%"></div>
                            </div>
                            <div id="sync-status-{{ source.id }}" class="text-xs text-gray-600 mt-1">
                                Preparing sync...
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Recent Sync Activity -->
    <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">Recent Sync Activity</h2>
            <p class="mt-1 text-sm text-gray-600">Latest synchronization logs and status</p>
        </div>

        <div class="overflow-hidden">
            <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">
                            Source
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Type
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Progress
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Started
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Duration
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for sync in recent_syncs %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {{ sync.source_name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ sync.sync_type|title }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if sync.status == 'completed' %}
                                    bg-green-100 text-green-800
                                {% elseif sync.status == 'failed' %}
                                    bg-red-100 text-red-800
                                {% elseif sync.status == 'running' %}
                                    bg-yellow-100 text-yellow-800
                                {% else %}
                                    bg-gray-100 text-gray-800
                                {% endif %}">
                                {{ sync.status|title }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if sync.total_items > 0 %}
                                {{ sync.processed_items }} / {{ sync.total_items }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if sync.started_at %}
                                {{ sync.started_at|date('M j, H:i') }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if sync.started_at and sync.completed_at %}
                                {{ sync.started_at|date('U') - sync.completed_at|date('U') }}s
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <script>
        let syncIntervals = {};

        function startSync(sourceId, syncType) {
            // Show progress indicator
            const progressDiv = document.getElementById(`sync-progress-${sourceId}`);
            const progressBar = document.getElementById(`sync-progress-bar-${sourceId}`);
            const statusDiv = document.getElementById(`sync-status-${sourceId}`);

            progressDiv.classList.remove('hidden');
            progressBar.style.width = '0%';
            statusDiv.textContent = 'Starting sync...';

            // Start sync via API
            fetch(`/admin/sync/${sourceId}?type=${syncType}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Start monitoring sync status
                    monitorSyncStatus(data.sync_log_id, sourceId, progressBar, statusDiv);
                } else {
                    statusDiv.textContent = 'Error: ' + (data.message || 'Unknown error');
                    progressDiv.classList.add('hidden');
                }
            })
            .catch(error => {
                statusDiv.textContent = 'Error: ' + error.message;
                progressDiv.classList.add('hidden');
            });
        }

        function monitorSyncStatus(syncLogId, sourceId, progressBar, statusDiv) {
            const interval = setInterval(() => {
                fetch(`/admin/sync/status/${syncLogId}`)
                    .then(response => response.json())
                    .then(data => {
                        // Update progress
                        if (data.total_items > 0) {
                            const progress = (data.processed_items / data.total_items) * 100;
                            progressBar.style.width = progress + '%';
                        }

                        // Update status
                        statusDiv.textContent = getStatusMessage(data);

                        // Stop monitoring if sync is complete or failed
                        if (['completed', 'failed'].includes(data.status)) {
                            clearInterval(interval);
                            delete syncIntervals[sourceId];

                            if (data.status === 'completed') {
                                setTimeout(() => {
                                    document.getElementById(`sync-progress-${sourceId}`).classList.add('hidden');
                                    // Refresh page to show updated sync log
                                    location.reload();
                                }, 2000);
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error monitoring sync:', error);
                        clearInterval(interval);
                        delete syncIntervals[sourceId];
                    });
            }, 1000);

            syncIntervals[sourceId] = interval;
        }

        function getStatusMessage(data) {
            if (data.status === 'completed') {
                return `Completed: ${data.new_items} new, ${data.updated_items} updated`;
            } else if (data.status === 'failed') {
                return 'Failed: ' + (data.errors.join(', ') || 'Unknown error');
            } else if (data.status === 'running') {
                return `Processing: ${data.processed_items}/${data.total_items} items`;
            } else {
                return data.message || 'Unknown status';
            }
        }

        // Cleanup intervals on page unload
        window.addEventListener('beforeunload', () => {
            Object.values(syncIntervals).forEach(interval => clearInterval(interval));
        });
    </script>
{% endblock %}