<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG Ingestion Status</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <meta http-equiv="refresh" content="3"> <!-- 3초마다 새로고침 -->
</head>
<body class="bg-gray-100 p-10">
    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8">
        <h1 class="text-2xl font-bold mb-6 text-gray-800">Vector Search 데이터 구축 현황</h1>
        
        <?php
        $statusFile = __DIR__ . '/data/progress.json';
        if (file_exists($statusFile)) {
            $status = json_decode(file_get_contents($statusFile), true);
            $current = $status['current'] ?? 0;
            $total = $status['total'] ?? 100;
            $percent = $total > 0 ? round(($current / $total) * 100) : 0;
            $lastTitle = $status['last_title'] ?? 'Initializing...';
            $startTime = $status['start_time'] ?? time();
            $elapsed = time() - $startTime;
            
            // 예상 남은 시간
            $remaining = "Calculating...";
            if ($current > 0) {
                $rate = $elapsed / $current; // 초/개
                $remSecs = ($total - $current) * $rate;
                $remaining = round($remSecs / 60) . "분";
            }
        } else {
            $current = 0;
            $total = 0;
            $percent = 0;
            $lastTitle = "작업 대기 중...";
            $remaining = "-";
        }
        ?>

        <div class="mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm font-medium text-blue-700">진행률 (<?=$current?> / <?=$total?> Pages)</span>
                <span class="text-sm font-medium text-blue-700"><?=$percent?>%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-4">
                <div class="bg-blue-600 h-4 rounded-full transition-all duration-500" style="width: <?=$percent?>%"></div>
            </div>
        </div>

        <div class="space-y-4">
            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                <p class="text-sm text-gray-500">현재 작업 중인 문서</p>
                <p class="font-semibold text-gray-800 truncate"><?=$lastTitle?></p>
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-center">
                    <p class="text-sm text-gray-500">경과 시간</p>
                    <p class="font-mono text-xl"><?=gmdate("i:s", $elapsed ?? 0)?></p>
                </div>
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-center">
                    <p class="text-sm text-gray-500">예상 남은 시간</p>
                    <p class="font-mono text-xl"><?=$remaining?></p>
                </div>
            </div>
        </div>
        
        <div class="mt-8 text-center">
            <?php if ($percent >= 100): ?>
                <a href="../rag_index.php" class="inline-block px-6 py-3 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 transition">
                    데이터 구축 완료! 챗봇 시작하기
                </a>
            <?php else: ?>
                <p class="text-gray-400 text-sm">작업이 완료되면 버튼이 나타납니다.</p>
            <?php endif; ?>
        </div>
    </div>
</body>
</html>
