<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anisub - Initial Sync Database</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #090d16;
            --bg-card: #131b2e;
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --primary: #6366f1;
            --primary-glow: rgba(99, 102, 241, 0.15);
            --success: #10b981;
            --warning: #f59e0b;
            --border: #1e293b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            min-height: 100vh;
            padding: 2rem 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 100%;
            max-width: 900px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--success));
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .header h1 {
            font-size: 2.2rem;
            font-weight: 700;
            background: linear-gradient(90deg, #a5b4fc, #34d399);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .header p {
            color: var(--text-muted);
            font-size: 1rem;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .stat-card {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.2rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            border-color: var(--primary);
            box-shadow: 0 0 15px var(--primary-glow);
        }

        .stat-val {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 0.3rem;
        }

        .stat-label {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Progress Area */
        .progress-section {
            margin-bottom: 2.5rem;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .progress-bar-wrapper {
            background: var(--border);
            height: 12px;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            margin-bottom: 1.5rem;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), var(--success));
            border-radius: 6px;
            transition: width 0.4s ease;
        }

        /* Log Console */
        .console {
            background: #05070c;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.85rem;
            color: #34d399;
            height: 250px;
            overflow-y: auto;
            margin-bottom: 2.5rem;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
        }

        .console-line {
            margin-bottom: 0.4rem;
            line-height: 1.4;
            display: flex;
        }

        .console-line .timestamp {
            color: var(--text-muted);
            margin-right: 0.8rem;
            user-select: none;
        }

        .console-line.error {
            color: #f87171;
        }

        .console-line.info {
            color: #60a5fa;
        }

        /* Controls */
        .controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .btn {
            font-family: inherit;
            font-weight: 600;
            font-size: 1rem;
            padding: 0.8rem 2.2rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        .btn-primary:hover:not(:disabled) {
            background: #4f46e5;
            transform: translateY(-2px);
        }

        .btn-primary:disabled {
            background: var(--border);
            color: var(--text-muted);
            box-shadow: none;
            cursor: not-allowed;
        }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-main);
        }

        .btn-secondary:hover:not(:disabled) {
            border-color: var(--text-muted);
            background: rgba(255,255,255,0.02);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Initial Database Synchronization</h1>
            <p>Satu halaman otomatis untuk menarik seluruh list, detail, dan episode anime otakudesu ke database.</p>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-val" id="stat-anime">0</div>
                <div class="stat-label">Total Anime</div>
            </div>
            <div class="stat-card">
                <div class="stat-val" id="stat-synced-anime">0</div>
                <div class="stat-label">Detail Tersinkron</div>
            </div>
            <div class="stat-card">
                <div class="stat-val" id="stat-episodes">0</div>
                <div class="stat-label">Total Episode</div>
            </div>
            <div class="stat-card">
                <div class="stat-val" id="stat-synced-episodes">0</div>
                <div class="stat-label">Link Tersinkron</div>
            </div>
        </div>

        <div class="progress-section">
            <div class="progress-label">
                <span id="progress-status">Menunggu inisiasi...</span>
                <span id="progress-pct">0%</span>
            </div>
            <div class="progress-bar-wrapper">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
        </div>

        <div class="console" id="console">
            <div class="console-line info"><span class="timestamp">[INFO]</span>Klik tombol "Mulai Sinkronisasi" untuk memulai pengisian database awal.</div>
        </div>

        <div class="controls">
            <button class="btn btn-primary" id="btn-start" onclick="startSync()">Mulai Sinkronisasi</button>
            <button class="btn btn-secondary" id="btn-pause" onclick="pauseSync()" disabled>Jeda</button>
        </div>
    </div>

    <script>
        let isRunning = false;
        let currentStep = 'idle'; // 'idle', 'list', 'details', 'episodes'
        const consoleEl = document.getElementById('console');

        // Load initial stats
        updateStats();

        function addLog(text, type = '') {
            const date = new Date();
            const timeStr = date.toTimeString().split(' ')[0];
            
            const line = document.createElement('div');
            line.className = 'console-line ' + type;
            line.innerHTML = `<span class="timestamp">[${timeStr}]</span> ${text}`;
            
            consoleEl.appendChild(line);
            consoleEl.scrollTop = consoleEl.scrollHeight;
        }

        async function updateStats() {
            try {
                const res = await fetch('?action=get_stats');
                const data = await res.json();
                if (data.status) {
                    document.getElementById('stat-anime').textContent = data.total_anime;
                    document.getElementById('stat-synced-anime').textContent = data.synced_anime;
                    document.getElementById('stat-episodes').textContent = data.total_episodes;
                    document.getElementById('stat-synced-episodes').textContent = data.synced_episodes;
                    
                    // Return stats for logic calculation
                    return data;
                }
            } catch (err) {
                console.error("Gagal mendapatkan status", err);
            }
            return null;
        }

        function setProgressBar(pct, text) {
            document.getElementById('progress-bar').style.width = pct + '%';
            document.getElementById('progress-pct').textContent = Math.round(pct) + '%';
            if (text) {
                document.getElementById('progress-status').textContent = text;
            }
        }

        function pauseSync() {
            isRunning = false;
            document.getElementById('btn-pause').disabled = true;
            document.getElementById('btn-start').disabled = false;
            document.getElementById('btn-start').textContent = 'Lanjutkan';
            addLog("Sinkronisasi dijeda oleh pengguna.", "info");
        }

        async function startSync() {
            if (isRunning) return;
            isRunning = true;
            
            document.getElementById('btn-start').disabled = true;
            document.getElementById('btn-pause').disabled = false;
            
            addLog("Memulai proses sinkronisasi...", "info");
            
            // Step 1: Sync main list if not populated
            const stats = await updateStats();
            if (stats && stats.total_anime === 0) {
                currentStep = 'list';
                addLog("Menghubungi Otakudesu untuk mengambil daftar anime...", "info");
                setProgressBar(5, "Mengambil list utama anime...");
                
                try {
                    const res = await fetch('?action=sync_list');
                    const result = await res.json();
                    if (result.status) {
                        addLog(`Sukses mengambil list: ${result.count} anime dimasukkan ke db.`, "info");
                        await updateStats();
                    } else {
                        addLog("Gagal menarik list utama: " + result.message, "error");
                        isRunning = false;
                        return;
                    }
                } catch(e) {
                    addLog("Gagal menghubungi server sync_list: " + e.message, "error");
                    isRunning = false;
                    return;
                }
            }
            
            // Loop details & episodes
            runSyncLoop();
        }

        async function runSyncLoop() {
            while (isRunning) {
                const stats = await updateStats();
                if (!stats) {
                    addLog("Koneksi error, mencoba lagi dalam 3 detik...", "error");
                    await new Promise(r => setTimeout(r, 3000));
                    continue;
                }

                // Check detail sync progress
                if (stats.synced_anime < stats.total_anime) {
                    currentStep = 'details';
                    const pct = (stats.synced_anime / stats.total_anime) * 100;
                    setProgressBar(pct * 0.5, `Sinkronisasi Detail: ${stats.synced_anime}/${stats.total_anime}`);
                    
                    try {
                        const res = await fetch('?action=sync_details_batch&limit=5');
                        const data = await res.json();
                        
                        if (data.status) {
                            data.logs.forEach(l => addLog(l));
                            if (data.finished) {
                                addLog("Semua detail anime selesai di-sync!", "info");
                            }
                        } else {
                            addLog("Error detail batch: " + data.message, "error");
                        }
                    } catch(e) {
                        addLog("Request detail error: " + e.message, "error");
                    }
                    
                } 
                // Check episode link sync progress
                else if (stats.synced_episodes < stats.total_episodes) {
                    currentStep = 'episodes';
                    const pctDetail = 50; // detail is finished, which is 50% of the entire sync
                    const epPct = (stats.synced_episodes / stats.total_episodes) * 50;
                    setProgressBar(pctDetail + epPct, `Sinkronisasi Link Episode: ${stats.synced_episodes}/${stats.total_episodes}`);
                    
                    try {
                        const res = await fetch('?action=sync_episodes_batch&limit=8');
                        const data = await res.json();
                        
                        if (data.status) {
                            data.logs.forEach(l => addLog(l));
                            if (data.finished) {
                                addLog("Semua link streaming & download selesai di-sync!", "info");
                            }
                        } else {
                            addLog("Error episode batch: " + data.message, "error");
                        }
                    } catch(e) {
                        addLog("Request episode error: " + e.message, "error");
                    }
                } 
                // Everything finished
                else {
                    isRunning = false;
                    currentStep = 'idle';
                    setProgressBar(100, "Sinkronisasi Selesai 100%!");
                    addLog("SINKRONISASI SELESAI! Seluruh data anime, episode, streaming mirror, dan link download sudah berhasil disimpan di database.", "info");
                    
                    document.getElementById('btn-start').disabled = true;
                    document.getElementById('btn-pause').disabled = true;
                    break;
                }
                
                // Small sleep to prevent hammering target server too fast
                await new Promise(r => setTimeout(r, 800));
            }
        }
    </script>
</body>
</html>
