@extends('layouts.app')

@section('title', 'Admin - Chapter Content Sync')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-2">
            <span class="material-symbols-outlined text-4xl align-middle">sync</span>
            Chapter Content Sync
        </h1>
        <p class="text-slate-600 dark:text-slate-400">Quản lý đồng bộ nội dung chapter từ API</p>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Total Chapters -->
        <div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-6">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase">Tổng Chapters</h3>
                <span class="material-symbols-outlined text-blue-500">menu_book</span>
            </div>
            <p class="text-3xl font-bold text-slate-900 dark:text-white">{{ number_format($stats['total_chapters']) }}</p>
        </div>

        <!-- Synced Chapters -->
        <div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-6">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase">Đã Sync</h3>
                <span class="material-symbols-outlined text-green-500">check_circle</span>
            </div>
            <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ number_format($stats['synced_chapters']) }}</p>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                {{ $stats['total_chapters'] > 0 ? round(($stats['synced_chapters'] / $stats['total_chapters']) * 100, 1) : 0 }}%
            </p>
        </div>

        <!-- Unsynced Chapters -->
        <div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-6">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase">Chưa Sync</h3>
                <span class="material-symbols-outlined text-red-500">pending</span>
            </div>
            <p class="text-3xl font-bold text-red-600 dark:text-red-400" id="unsynced-count">{{ number_format($stats['unsynced_chapters']) }}</p>
        </div>
    </div>

    <!-- Sync Control Panel -->
    <div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-white/5 p-6 mb-8">
        <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-4">Điều khiển Sync</h2>

        <!-- Sync Status Display -->
        <div id="sync-status-container" class="mb-6 p-4 rounded-lg bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-white/5">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Trạng thái:</span>
                <span id="sync-status-badge" class="px-3 py-1 rounded-full text-xs font-bold {{ $syncStatus['is_running'] ? 'bg-blue-500 text-white' : 'bg-slate-300 dark:bg-slate-700 text-slate-700 dark:text-slate-300' }}">
                    {{ $syncStatus['is_running'] ? 'Đang chạy' : 'Không hoạt động' }}
                </span>
            </div>

            <p id="sync-message" class="text-sm text-slate-600 dark:text-slate-400 mb-3">
                {{ $syncStatus['message'] }}
            </p>

            <!-- Progress Bar -->
            <div id="progress-container" class="{{ $syncStatus['is_running'] ? '' : 'hidden' }}">
                <div class="flex items-center justify-between text-xs text-slate-600 dark:text-slate-400 mb-2">
                    <span>Tiến độ</span>
                    <span id="progress-text">
                        <span id="current-progress">{{ $syncStatus['current'] }}</span> /
                        <span id="total-progress">{{ $syncStatus['total'] }}</span>
                        (<span id="percentage-progress">{{ $syncStatus['progress'] }}</span>%)
                    </span>
                </div>
                <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3 overflow-hidden">
                    <div id="progress-bar"
                         class="bg-linear-to-r from-primary to-purple-500 h-full transition-all duration-500 rounded-full"
                         style="width: {{ $syncStatus['progress'] }}%">
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex gap-3">
            <button id="start-sync-btn"
                    class="flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-semibold transition-all hover:shadow-lg hover:shadow-primary/25 disabled:opacity-50 disabled:cursor-not-allowed"
                    {{ $syncStatus['is_running'] ? 'disabled' : '' }}>
                <span class="material-symbols-outlined">play_arrow</span>
                Bắt đầu Sync
            </button>

            <button id="clear-sync-btn"
                    class="flex items-center gap-2 px-6 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 rounded-lg font-semibold transition-all">
                <span class="material-symbols-outlined">clear</span>
                Xóa trạng thái
            </button>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
        <div class="flex gap-3">
            <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">info</span>
            <div>
                <h3 class="font-bold text-blue-900 dark:text-blue-100 mb-2">Thông tin</h3>
                <ul class="text-sm text-blue-800 dark:text-blue-200 space-y-1">
                    <li>• Sync sẽ tự động đồng bộ nội dung (images) cho các chapter chưa có dữ liệu</li>
                    <li>• Quá trình sync sử dụng queue jobs, chạy bất đồng bộ trong background</li>
                    <li>• Tiến độ được cập nhật theo thời gian thực qua AJAX polling</li>
                    <li>• Chapter được xem là "chưa sync" khi có chapter_api_url nhưng không có chapter_images</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const startSyncBtn = document.getElementById('start-sync-btn');
    const clearSyncBtn = document.getElementById('clear-sync-btn');
    const statusBadge = document.getElementById('sync-status-badge');
    const syncMessage = document.getElementById('sync-message');
    const progressContainer = document.getElementById('progress-container');
    const progressBar = document.getElementById('progress-bar');
    const currentProgress = document.getElementById('current-progress');
    const totalProgress = document.getElementById('total-progress');
    const percentageProgress = document.getElementById('percentage-progress');
    const unsyncedCount = document.getElementById('unsynced-count');

    let statusCheckInterval = null;
    let isRunning = {{ $syncStatus['is_running'] ? 'true' : 'false' }};

    // Start sync
    startSyncBtn.addEventListener('click', async function() {
        if (confirm('Bạn có chắc muốn bắt đầu sync chapter content?')) {
            startSyncBtn.disabled = true;
            startSyncBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">refresh</span> Đang khởi động...';

            try {
                const response = await window.axios.post('{{ route('admin.chapter-sync.start') }}');

                if (response.data.success) {
                    isRunning = true;
                    updateUI(true, response.data.message);
                    startStatusPolling();
                } else {
                    alert(response.data.message);
                    startSyncBtn.disabled = false;
                    startSyncBtn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> Bắt đầu Sync';
                }
            } catch (error) {
                alert('Có lỗi xảy ra: ' + (error.response?.data?.message || error.message));
                startSyncBtn.disabled = false;
                startSyncBtn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> Bắt đầu Sync';
            }
        }
    });

    // Clear sync status
    clearSyncBtn.addEventListener('click', async function() {
        if (confirm('Bạn có chắc muốn xóa trạng thái sync?')) {
            try {
                const response = await window.axios.post('{{ route('admin.chapter-sync.clear') }}');

                if (response.data.success) {
                    stopStatusPolling();
                    updateUI(false, 'Đã xóa trạng thái sync');
                    location.reload(); // Reload to update statistics
                }
            } catch (error) {
                alert('Có lỗi xảy ra: ' + (error.response?.data?.message || error.message));
            }
        }
    });

    // Check sync status
    async function checkSyncStatus() {
        try {
            const response = await window.axios.get('{{ route('admin.chapter-sync.status') }}');

            if (response.data.success) {
                const status = response.data.status;

                updateUI(status.is_running, status.message);

                if (status.is_running) {
                    progressContainer.classList.remove('hidden');
                    currentProgress.textContent = status.current || 0;
                    totalProgress.textContent = status.total || 0;
                    percentageProgress.textContent = status.progress || 0;
                    progressBar.style.width = (status.progress || 0) + '%';

                    // Update unsynced count
                    const remaining = (status.total || 0) - (status.current || 0);
                    unsyncedCount.textContent = remaining.toLocaleString();
                } else {
                    progressContainer.classList.add('hidden');

                    // Stop polling if sync is complete
                    if (isRunning && !status.is_running) {
                        stopStatusPolling();
                        setTimeout(() => location.reload(), 2000); // Reload after 2 seconds
                    }
                }

                isRunning = status.is_running;
            }
        } catch (error) {
            console.error('Error checking sync status:', error);
        }
    }

    // Update UI based on sync status
    function updateUI(running, message) {
        if (running) {
            statusBadge.className = 'px-3 py-1 rounded-full text-xs font-bold bg-blue-500 text-white';
            statusBadge.textContent = 'Đang chạy';
            startSyncBtn.disabled = true;
            startSyncBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">refresh</span> Đang sync...';
        } else {
            statusBadge.className = 'px-3 py-1 rounded-full text-xs font-bold bg-slate-300 dark:bg-slate-700 text-slate-700 dark:text-slate-300';
            statusBadge.textContent = 'Không hoạt động';
            startSyncBtn.disabled = false;
            startSyncBtn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> Bắt đầu Sync';
        }

        syncMessage.textContent = message;
    }

    // Start status polling
    function startStatusPolling() {
        if (statusCheckInterval) return;

        statusCheckInterval = setInterval(checkSyncStatus, 3000); // Check every 3 seconds
        checkSyncStatus(); // Check immediately
    }

    // Stop status polling
    function stopStatusPolling() {
        if (statusCheckInterval) {
            clearInterval(statusCheckInterval);
            statusCheckInterval = null;
        }
    }

    // Start polling if sync is already running
    if (isRunning) {
        startStatusPolling();
    }

    // Clean up on page unload
    window.addEventListener('beforeunload', function() {
        stopStatusPolling();
    });
});
</script>
@endpush