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

{% block content %}
    <div class="mb-4">
        <h1 class="display-4 fw-bold text-dark">Admin Dashboard</h1>
        <p class="lead text-muted">Manage your media sources and synchronization</p>
    </div>

    <!-- Source Management -->
    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">Source Management</h2>
            <p class="text-muted mb-0">Configure and sync your media sources</p>
        </div>

        <div class="card-body">
            <div class="row g-3">
                {% for source in sources %}
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card border">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="card-title mb-0">{{ source.display_name }}</h6>
                                {% if source.is_active %}
                                <span class="badge bg-success">Active</span>
                                {% else %}
                                <span class="badge bg-danger">Inactive</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <!-- Sync Buttons -->
                                {% if source.name == 'jellyfin' %}
                                <!-- Jellyfin-specific sync options -->
                                <div class="d-flex gap-1 mb-2 flex-wrap">
                                    <button onclick="startSync({{ source.id }}, 'all')"
                                            class="btn btn-primary btn-sm flex-fill">
                                        All Content
                                    </button>
                                    <button onclick="startSync({{ source.id }}, 'movies')"
                                            class="btn btn-outline-primary btn-sm flex-fill">
                                        Movies Only
                                    </button>
                                    <button onclick="startSync({{ source.id }}, 'tvshows')"
                                            class="btn btn-outline-primary btn-sm flex-fill">
                                        TV Shows Only
                                    </button>
                                </div>
                                <div class="d-flex gap-1 mb-2">
                                    <button onclick="startSync({{ source.id }}, 'full')"
                                            class="btn btn-secondary btn-sm flex-fill">
                                        Full Sync
                                    </button>
                                    <button onclick="startSync({{ source.id }}, 'incremental')"
                                            class="btn btn-outline-secondary btn-sm flex-fill">
                                        Incremental
                                    </button>
                                </div>
                                {% else %}
                                <!-- Standard sync options for other sources -->
                                <div class="d-flex gap-2 mb-2">
                                    <button onclick="startSync({{ source.id }}, 'full')"
                                            class="btn btn-primary btn-sm flex-fill">
                                        Full Sync
                                    </button>
                                    <button onclick="startSync({{ source.id }}, 'incremental')"
                                            class="btn btn-secondary btn-sm flex-fill">
                                        Incremental
                                    </button>
                                </div>
                                {% endif %}

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

                                <!-- Sync Progress (hidden by default) -->
                                <div id="sync-progress-{{ source.id }}" class="d-none mt-2">
                                    <div class="progress">
                                        <div id="sync-progress-bar-{{ source.id }}"
                                             class="progress-bar bg-primary"
                                             role="progressbar"
                                             style="width: 0%">
                                        </div>
                                    </div>
                                    <div id="sync-status-{{ source.id }}" class="small text-muted mt-1">
                                        Preparing sync...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Recent Sync Activity -->
    <div class="card">
        <div class="card-header">
            <h2 class="h5 mb-0">Recent Sync Activity</h2>
            <p class="text-muted mb-0">Latest synchronization logs and status</p>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Source</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Progress</th>
                            <th>Items</th>
                            <th>Started</th>
                            <th>Duration</th>
                            <th>Message</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sync in recent_syncs %}
                        <tr>
                            <td class="fw-medium">{{ sync.source_name }}</td>
                            <td>{{ sync.sync_type|title }}</td>
                            <td>
                                {% if sync.status == 'completed' %}
                                <span class="badge bg-success">Completed</span>
                                {% elseif sync.status == 'failed' %}
                                <span class="badge bg-danger">Failed</span>
                                {% elseif sync.status == 'running' %}
                                <span class="badge bg-warning text-dark">Running</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ sync.status|title }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if sync.total_items > 0 %}
                                    {{ sync.processed_items }} / {{ sync.total_items }}
                                    {% if sync.total_items > 0 %}
                                        <div class="progress mt-1" style="height: 4px;">
                                            <div class="progress-bar bg-primary" role="progressbar"
                                                 style="width: {{ (sync.processed_items / sync.total_items * 100)|round }}%"></div>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                <small>
                                    {% if sync.new_items > 0 %}<span class="text-success">+{{ sync.new_items }}</span>{% endif %}
                                    {% if sync.updated_items > 0 %} <span class="text-primary">{{ sync.updated_items }} updated</span>{% endif %}
                                    {% if sync.deleted_items > 0 %} <span class="text-danger">{{ sync.deleted_items }} deleted</span>{% endif %}
                                    {% if sync.new_items == 0 and sync.updated_items == 0 and sync.deleted_items == 0 %}No changes{% endif %}
                                </small>
                            </td>
                            <td>
                                {% if sync.started_at %}
                                    <small>{{ sync.started_at|date('M j, H:i') }}</small>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% if sync.started_at and sync.completed_at %}
                                    {% set duration = sync.completed_at|date('U') - sync.started_at|date('U') %}
                                    {% if duration < 60 %}
                                        <small>{{ duration }}s</small>
                                    {% elseif duration < 3600 %}
                                        <small>{{ (duration / 60)|round }}m</small>
                                    {% else %}
                                        <small>{{ (duration / 3600)|round }}h</small>
                                    {% endif %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% if sync.message %}
                                    <small class="text-muted" title="{{ sync.message }}">
                                        {{ sync.message|length > 50 ? sync.message|slice(0, 50) ~ '...' : sync.message }}
                                    </small>
                                {% else %}
                                    <small class="text-muted">-</small>
                                {% endif %}
                            </td>
                            <td>
                                {% if sync.errors %}
                                    <button class="btn btn-sm btn-outline-danger"
                                            onclick="showSyncDetails({{ sync.id }}, '{{ sync.source_name }}', '{{ sync.sync_type }}')"
                                            title="View errors and details">
                                        Details
                                    </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </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('d-none');
            progressBar.style.width = '0%';
            statusDiv.textContent = 'Starting sync...';

            // Disable all sync buttons for this source
            const buttons = document.querySelectorAll(`[onclick*="startSync(${sourceId},"]`);
            buttons.forEach(button => {
                button.disabled = true;
                button.textContent = 'Syncing...';
            });

            // 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, buttons);
                } else {
                    statusDiv.textContent = 'Error: ' + (data.message || 'Unknown error');
                    progressDiv.classList.add('d-none');
                    // Re-enable buttons on error
                    buttons.forEach(button => {
                        button.disabled = false;
                        button.textContent = button.textContent.replace('Syncing...', '').trim();
                    });
                }
            })
            .catch(error => {
                statusDiv.textContent = 'Error: ' + error.message;
                progressDiv.classList.add('d-none');
                // Re-enable buttons on error
                buttons.forEach(button => {
                    button.disabled = false;
                    button.textContent = button.textContent.replace('Syncing...', '').trim();
                });
            });
        }

        function monitorSyncStatus(syncLogId, sourceId, progressBar, statusDiv, buttons) {
            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('d-none');
                                    // Refresh page to show updated sync log
                                    location.reload();
                                }, 2000);
                            } else {
                                // Re-enable buttons on failure
                                buttons.forEach(button => {
                                    button.disabled = false;
                                    button.textContent = button.textContent.replace('Syncing...', '').trim();
                                });
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error monitoring sync:', error);
                        clearInterval(interval);
                        delete syncIntervals[sourceId];
                        // Re-enable buttons on error
                        buttons.forEach(button => {
                            button.disabled = false;
                            button.textContent = button.textContent.replace('Syncing...', '').trim();
                        });
                    });
            }, 1000);

            syncIntervals[sourceId] = interval;
        }

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

        function showSyncDetails(syncId, sourceName, syncType) {
            // Fetch detailed sync information
            fetch(`/admin/sync/status/${syncId}`)
                .then(response => response.json())
                .then(data => {
                    const modal = document.createElement('div');
                    modal.className = 'modal fade show';
                    modal.style.display = 'block';
                    modal.innerHTML = `
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Sync Details: ${sourceName} - ${syncType}</h5>
                                    <button type="button" class="btn-close" onclick="closeModal()"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <strong>Status:</strong>
                                            <span class="badge bg-${data.status === 'completed' ? 'success' : data.status === 'failed' ? 'danger' : 'warning'} ms-2">
                                                ${data.status}
                                            </span>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Started:</strong> ${data.started_at ? new Date(data.started_at).toLocaleString() : 'N/A'}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <strong>Completed:</strong> ${data.completed_at ? new Date(data.completed_at).toLocaleString() : 'N/A'}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Duration:</strong> ${data.started_at && data.completed_at ?
                                                formatDuration(new Date(data.completed_at) - new Date(data.started_at)) : 'N/A'}
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-3"><strong>Total Items:</strong> ${data.total_items || 0}</div>
                                        <div class="col-md-3"><strong>Processed:</strong> ${data.processed_items || 0}</div>
                                        <div class="col-md-3"><strong>New:</strong> <span class="text-success">${data.new_items || 0}</span></div>
                                        <div class="col-md-3"><strong>Updated:</strong> <span class="text-primary">${data.updated_items || 0}</span></div>
                                    </div>
                                    <div class="mb-3">
                                        <strong>Message:</strong>
                                        <div class="alert alert-info">${data.message || 'No message available'}</div>
                                    </div>
                                    ${data.errors && data.errors.length > 0 ? `
                                    <div class="mb-3">
                                        <strong>Errors:</strong>
                                        <div class="alert alert-danger">
                                            <ul class="mb-0">
                                                ${data.errors.map(error => `<li>${error}</li>`).join('')}
                                            </ul>
                                        </div>
                                    </div>
                                    ` : ''}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
                                </div>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(modal);
                })
                .catch(error => {
                    console.error('Error fetching sync details:', error);
                    alert('Error loading sync details');
                });
        }

        function closeModal() {
            const modal = document.querySelector('.modal.show');
            if (modal) {
                modal.remove();
            }
        }

        function formatDuration(ms) {
            const seconds = Math.floor(ms / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);

            if (hours > 0) {
                return `${hours}h ${minutes % 60}m`;
            } else if (minutes > 0) {
                return `${minutes}m ${seconds % 60}s`;
            } else {
                return `${seconds}s`;
            }
        }

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