@extends('layouts.app')

@section('title', 'Đồng bộ dữ liệu - Admin')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <h1 class="text-3xl font-bold mb-8 text-slate-900 dark:text-white">Đồng bộ dữ liệu từ API</h1>

    <!-- Categories Sync Card -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-xl font-semibold text-slate-900 dark:text-white">Đồng bộ Thể Loại</h2>
                <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">Lấy danh sách thể loại từ OTruyenAPI</p>
            </div>
            <button
                id="sync-categories-btn"
                class="px-6 py-3 bg-primary hover:bg-primary-hover text-white rounded-lg font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
                <span class="flex items-center gap-2">
                    <span id="sync-icon" class="material-symbols-outlined text-[20px]">sync</span>
                    <span id="sync-text">Đồng bộ ngay</span>
                </span>
            </button>
        </div>

        <!-- Progress Bar -->
        <div id="progress-container" class="hidden mb-4">
            <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
                <div id="progress-bar" class="bg-primary h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
        </div>

        <!-- Results -->
        <div id="sync-results" class="hidden mt-4">
            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
                <h3 class="font-semibold text-slate-900 dark:text-white mb-3">Kết quả đồng bộ:</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400" id="synced-count">0</div>
                        <div class="text-xs text-slate-600 dark:text-slate-400">Mới thêm</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400" id="updated-count">0</div>
                        <div class="text-xs text-slate-600 dark:text-slate-400">Cập nhật</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-slate-600 dark:text-slate-400" id="skipped-count">0</div>
                        <div class="text-xs text-slate-600 dark:text-slate-400">Bỏ qua</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-red-600 dark:text-red-400" id="errors-count">0</div>
                        <div class="text-xs text-slate-600 dark:text-slate-400">Lỗi</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Messages -->
        <div id="error-message" class="hidden mt-4">
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg">
                <strong class="font-semibold">Lỗi!</strong>
                <span id="error-text"></span>
            </div>
        </div>
    </div>

    <!-- Instructions -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <h3 class="font-semibold text-blue-900 dark:text-blue-100 mb-2">Hướng dẫn:</h3>
        <ul class="list-disc list-inside text-sm text-blue-800 dark:text-blue-200 space-y-1">
            <li>Nhấn nút "Đồng bộ ngay" để lấy dữ liệu thể loại từ API</li>
            <li>Dữ liệu sẽ được tự động thêm mới hoặc cập nhật vào database</li>
            <li>Quá trình đồng bộ có thể mất vài giây</li>
            <li>Bạn cũng có thể chạy command: <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded">php artisan sync:categories</code></li>
        </ul>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const syncBtn = document.getElementById('sync-categories-btn');
    const syncIcon = document.getElementById('sync-icon');
    const syncText = document.getElementById('sync-text');
    const progressContainer = document.getElementById('progress-container');
    const progressBar = document.getElementById('progress-bar');
    const resultsContainer = document.getElementById('sync-results');
    const errorContainer = document.getElementById('error-message');
    const errorText = document.getElementById('error-text');

    syncBtn.addEventListener('click', async function() {
        // Disable button
        syncBtn.disabled = true;
        syncBtn.classList.add('opacity-50', 'cursor-not-allowed');

        // Update UI
        syncText.textContent = 'Đang đồng bộ...';
        syncIcon.classList.add('animate-spin');

        // Show progress
        progressContainer.classList.remove('hidden');
        progressBar.style.width = '50%';

        // Hide previous results/errors
        resultsContainer.classList.add('hidden');
        errorContainer.classList.add('hidden');

        try {
            const response = await fetch('{{ route('admin.sync.categories') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();
            progressBar.style.width = '100%';

            if (data.success) {
                // Show results
                document.getElementById('synced-count').textContent = data.data.synced || 0;
                document.getElementById('updated-count').textContent = data.data.updated || 0;
                document.getElementById('skipped-count').textContent = data.data.skipped || 0;
                document.getElementById('errors-count').textContent = data.data.errors?.length || 0;

                resultsContainer.classList.remove('hidden');

                // Reset button
                syncText.textContent = 'Đồng bộ thành công!';
                setTimeout(() => {
                    syncText.textContent = 'Đồng bộ ngay';
                }, 3000);
            } else {
                // Show error
                errorText.textContent = data.message || 'Có lỗi xảy ra khi đồng bộ dữ liệu';
                errorContainer.classList.remove('hidden');
                syncText.textContent = 'Đồng bộ thất bại';
            }

        } catch (error) {
            console.error('Sync error:', error);
            errorText.textContent = 'Không thể kết nối đến server';
            errorContainer.classList.remove('hidden');
            syncText.textContent = 'Đồng bộ thất bại';
        } finally {
            // Re-enable button
            setTimeout(() => {
                syncBtn.disabled = false;
                syncBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                syncIcon.classList.remove('animate-spin');
                progressContainer.classList.add('hidden');
                progressBar.style.width = '0%';
            }, 2000);
        }
    });
});
</script>
@endpush
@endsection