<?php
// Real-time transaction status monitor
require_once '../includes/db.php';
require_once '../includes/auth.php';

requireLogin();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Monitor - Shinda</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="dashboard.php">Shinda Admin</a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="dashboard.php">Dashboard</a>
                <a class="nav-link" href="logout.php">Logout</a>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <h2>📊 Real-Time Transaction Monitor</h2>
                <p class="text-muted">Auto-refreshes every 2 seconds</p>
                <hr>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="transactionsList" class="row"></div>
            </div>
        </div>
    </div>

    <script>
        // Auto-refresh transaction status every 2 seconds
        async function updateTransactions() {
            try {
                const response = await fetch('/Shinda/api/get_recent_transactions.php');
                const data = await response.json();
                
                let html = '';
                
                if (data.success && data.transactions.length > 0) {
                    data.transactions.forEach(tx => {
                        const statusColor = tx.status === 'completed' ? 'success' : (tx.status === 'failed' ? 'danger' : 'warning');
                        const statusIcon = tx.status === 'completed' ? '✅' : (tx.status === 'failed' ? '❌' : '⏳');
                        const elapsed = data.elapsed_time[tx.id] || 0;
                        
                        html += `
                            <div class="col-md-6 mb-3">
                                <div class="card border-${statusColor}">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <span class="badge bg-${statusColor}">${statusIcon} ${tx.status.toUpperCase()}</span>
                                        </h5>
                                        <p class="mb-1"><strong>Phone:</strong> ${tx.phone}</p>
                                        <p class="mb-1"><strong>Amount:</strong> Ksh ${tx.amount}</p>
                                        <p class="mb-1"><strong>Receipt:</strong> ${tx.receipt || 'Pending'}</p>
                                        <p class="mb-1"><strong>Elapsed:</strong> ${elapsed}s</p>
                                        <small class="text-muted">${new Date(tx.created_at).toLocaleString()}</small>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                } else {
                    html = '<div class="col-md-12"><p class="text-muted">No transactions</p></div>';
                }
                
                document.getElementById('transactionsList').innerHTML = html;
            } catch (error) {
                console.error('Error:', error);
            }
        }

        // Initial load and set interval
        updateTransactions();
        setInterval(updateTransactions, 2000);
    </script>
</body>
</html>