<?php
// order-status.php - Order Countdown Timer and Payment checkout simulator

require_once 'includes/helper.php';
require_once 'classes/Order.php';

start_secure_session();

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

$orderId = (int)($_GET['id'] ?? 0);
$orderObj = new Order();
$order = $orderObj->getStatusAndCountdown($orderId);

if (!$order || $order['user_id'] != $_SESSION['user_id']) {
    header("Location: index.php");
    exit();
}

$error = '';
$success = '';
$csrfToken = generate_csrf_token();

// Handle Payment simulation
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'pay') {
    $token = $_POST['csrf_token'] ?? '';
    $paymentMethod = trim($_POST['payment_method'] ?? 'promptpay');
    
    if (!validate_csrf_token($token)) {
        $error = "ระบบความปลอดภัย: CSRF Token ไม่ถูกต้อง";
    } else {
        try {
            $txnId = 'TXN' . strtoupper(bin2hex(random_bytes(6)));
            $orderObj->pay($orderId, $paymentMethod, $txnId);
            $success = "ชำระเงินสำเร็จแล้ว! รายการคำสั่งซื้อของคุณส่งไปยังร้านค้าเรียบร้อยแล้ว";
            // Refresh order state
            $order = $orderObj->getStatusAndCountdown($orderId);
        } catch (Exception $e) {
            $error = $e->getMessage();
        }
    }
}

require_once 'includes/header.php';
?>

<div class="max-w-2xl mx-auto my-4 sm:my-6">
    <div class="glass p-6 sm:p-8 rounded-2xl sm:rounded-3xl shadow-2xl relative overflow-hidden">
        <div class="absolute -top-12 -left-12 w-32 h-32 bg-violet-600/10 rounded-full blur-2xl pointer-events-none"></div>

        <h2 class="text-2xl sm:text-3xl font-extrabold text-white mb-2 tracking-tight text-center">ใบสั่งซื้อ #<?= $order['id'] ?></h2>
        <p class="text-slate-400 text-sm text-center mb-6 sm:mb-8">ยอดเงินชำระ: <span class="text-violet-400 font-bold text-base"><?= format_price($order['total_amount']) ?></span></p>

        <?php if ($success): ?>
            <div class="bg-emerald-950/60 border border-emerald-800 text-emerald-300 p-6 rounded-2xl text-center mb-6">
                <span class="text-5xl block mb-3">✅</span>
                <h3 class="text-lg font-bold mb-1">ชำระเงินเรียบร้อย!</h3>
                <p class="text-sm text-slate-400"><?= escape($success) ?></p>
                <a href="index.php" class="inline-block mt-6 px-6 py-2.5 bg-violet-600 text-white text-sm font-semibold rounded-xl hover:bg-violet-500 transition-colors">กลับหน้าหลัก</a>
            </div>
        <?php endif; ?>

        <?php if ($error): ?>
            <div class="bg-red-950/60 border border-red-800 text-red-300 p-4 rounded-xl text-sm mb-6 text-center animate-pulse">
                ⚠️ <?= escape($error) ?>
            </div>
        <?php endif; ?>

        <!-- Active countdown layout -->
        <?php if ($order['status'] === 'pending'): ?>
            <div class="bg-slate-900/60 border border-slate-800 rounded-xl sm:rounded-2xl p-4 sm:p-6 text-center mb-6 sm:mb-8">
                <p class="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">กรุณาชำระเงินภายในเวลาที่กำหนด</p>
                
                <!-- Countdown clock display -->
                <div id="countdown-clock" class="text-4xl sm:text-5xl font-black text-violet-400 font-mono tracking-widest my-3">
                    20:00
                </div>

                <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden mt-4">
                    <div id="progress-bar" class="bg-violet-600 h-full w-full transition-all duration-1000"></div>
                </div>
            </div>

            <!-- Payment Simulator form -->
            <?php if (!$success): ?>
                <h3 class="text-lg font-bold text-white mb-4">จำลองการชำระเงิน</h3>
                <form action="order-status.php?id=<?= $order['id'] ?>" method="POST" class="space-y-6">
                    <input type="hidden" name="csrf_token" value="<?= escape($csrfToken) ?>">
                    <input type="hidden" name="action" value="pay">

                    <div>
                        <label class="block text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">ช่องทางการชำระเงิน</label>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="border border-slate-800 bg-slate-900/60 rounded-xl p-4 flex items-center gap-3 cursor-pointer hover:border-violet-500/40 transition-all">
                                <input type="radio" name="payment_method" value="promptpay" checked class="text-violet-600 focus:ring-violet-500 shrink-0">
                                <div>
                                    <span class="text-sm font-semibold text-slate-200 block">PromptPay 📲</span>
                                    <span class="text-xs text-slate-500">สแกนเพื่อโอนเงิน</span>
                                </div>
                            </label>
                            <label class="border border-slate-800 bg-slate-900/60 rounded-xl p-4 flex items-center gap-3 cursor-pointer hover:border-violet-500/40 transition-all">
                                <input type="radio" name="payment_method" value="credit_card" class="text-violet-600 focus:ring-violet-500 shrink-0">
                                <div>
                                    <span class="text-sm font-semibold text-slate-200 block">บัตรเครดิต 💳</span>
                                    <span class="text-xs text-slate-500">กรอกข้อมูลบัตร</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="w-full py-3.5 sm:py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl sm:rounded-2xl shadow-lg shadow-emerald-600/20 transition-all duration-200 active:scale-95 text-sm sm:text-base">
                        ยืนยันการจ่ายเงิน (ยอดรวม <?= format_price($order['total_amount']) ?>) 💵
                    </button>
                </form>
            <?php endif; ?>

        <?php elseif ($order['status'] === 'expired'): ?>
            <div class="bg-red-950/20 border border-red-900/30 rounded-2xl p-8 text-center">
                <span class="text-5xl block mb-3">❌</span>
                <h3 class="text-lg font-bold text-red-400 mb-1">คำสั่งซื้อนี้หมดอายุแล้ว (Expired)</h3>
                <p class="text-sm text-slate-400 leading-relaxed max-w-sm mx-auto">เลยกำหนดเวลาชำระเงิน 20 นาที ระบบได้ยกเลิกออเดอร์และส่งคืนสินค้าเข้าสต็อกเรียบร้อยแล้ว</p>
                <a href="index.php" class="inline-block mt-6 px-6 py-2.5 bg-slate-900 border border-slate-800 text-sm font-semibold rounded-xl text-slate-300 hover:bg-slate-800 transition-colors">กลับหน้าหลัก</a>
            </div>

        <?php elseif ($order['status'] === 'paid'): ?>
            <div class="bg-emerald-950/20 border border-emerald-900/30 rounded-2xl p-8 text-center">
                <span class="text-5xl block mb-3">📦</span>
                <h3 class="text-lg font-bold text-emerald-400 mb-1">ชำระเงินเรียบร้อยแล้ว</h3>
                <p class="text-sm text-slate-400 leading-relaxed max-w-sm mx-auto">ได้รับชำระเงินแล้ว คำสั่งซื้อถูกส่งไปที่ร้านค้าเพื่อดำเนินการเตรียมจัดส่ง</p>
                <a href="index.php" class="inline-block mt-6 px-6 py-2.5 bg-slate-900 border border-slate-800 text-sm font-semibold rounded-xl text-slate-300 hover:bg-slate-800 transition-colors">กลับหน้าหลัก</a>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Real-time JavaScript Countdown code -->
<?php if ($order['status'] === 'pending'): ?>
<script>
    const totalDuration = 20 * 60; // 20 minutes in seconds
    let remainingSeconds = <?= (int)$order['remaining_seconds'] ?>;
    
    const clockElement = document.getElementById('countdown-clock');
    const progressBar = document.getElementById('progress-bar');
    
    function updateClock() {
        if (remainingSeconds <= 0) {
            clockElement.textContent = "00:00";
            progressBar.style.width = "0%";
            // Reload page to update the order status to Expired
            location.reload();
            return;
        }
        
        const minutes = Math.floor(remainingSeconds / 60);
        const seconds = remainingSeconds % 60;
        
        // Format display e.g. 05:09
        const formattedMin = minutes.toString().padStart(2, '0');
        const formattedSec = seconds.toString().padStart(2, '0');
        
        clockElement.textContent = `${formattedMin}:${formattedSec}`;
        
        // Update visual progress bar width
        const percentage = (remainingSeconds / totalDuration) * 100;
        progressBar.style.width = `${percentage}%`;
        
        remainingSeconds--;
    }
    
    // Initial run and setInterval
    updateClock();
    const interval = setInterval(updateClock, 1000);
</script>
<?php endif; ?>

<?php require_once 'includes/footer.php'; ?>
