<?php
/**
 * Debug Console — Queue Events + Live Logs.
 *
 * @package CapiFlow
 */

namespace CapiFlow\Core;

defined( 'ABSPATH' ) || exit;

$capiflow_stats = DB_Manager::get_queue_stats();
?>

<div class="capiflow-debug-console">

    <!-- Queue Stats -->
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:14px;text-align:center;">
            <div style="font-size:28px;font-weight:800;color:#1d2327;"><?php echo esc_html( $capiflow_stats['pending'] ?? 0 ); ?></div>
            <div style="font-size:12px;color:#6b7280;margin-top:4px;">⏳ <?php esc_html_e( 'Pending', 'capiflow' ); ?></div>
        </div>
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:14px;text-align:center;">
            <div style="font-size:28px;font-weight:800;color:#1d2327;"><?php echo esc_html( $capiflow_stats['processing'] ?? 0 ); ?></div>
            <div style="font-size:12px;color:#6b7280;margin-top:4px;">⚙️ <?php esc_html_e( 'Processing', 'capiflow' ); ?></div>
        </div>
        <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:14px;text-align:center;">
            <div style="font-size:28px;font-weight:800;color:#16a34a;"><?php echo esc_html( $capiflow_stats['sent'] ?? 0 ); ?></div>
            <div style="font-size:12px;color:#6b7280;margin-top:4px;">✅ <?php esc_html_e( 'Sent', 'capiflow' ); ?></div>
        </div>
        <div style="background:#fff1f2;border:1px solid #fca5a5;border-radius:8px;padding:14px;text-align:center;">
            <div style="font-size:28px;font-weight:800;color:#dc2626;"><?php echo esc_html( $capiflow_stats['failed'] ?? 0 ); ?></div>
            <div style="font-size:12px;color:#6b7280;margin-top:4px;">❌ <?php esc_html_e( 'Failed', 'capiflow' ); ?></div>
        </div>
    </div>

    <!-- Sub-tabs -->
    <div class="capiflow-debug-tabs" style="margin-bottom:14px;display:flex;gap:6px;">
        <button type="button" class="button capiflow-debug-tab active" data-tab="queue">
            <?php esc_html_e( '📋 Queue Events', 'capiflow' ); ?>
        </button>
        <button type="button" class="button capiflow-debug-tab" data-tab="logs">
            <?php esc_html_e( '📜 Live Logs', 'capiflow' ); ?>
        </button>
    </div>

    <!-- Filters -->
    <div class="capiflow-debug-filters" style="display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap;">
        <select id="capiflow-filter-event" style="min-width:150px;">
            <option value=""><?php esc_html_e( 'All Events', 'capiflow' ); ?></option>
            <option value="Purchase">Purchase</option>
            <option value="PageView">PageView</option>
            <option value="ViewContent">ViewContent</option>
            <option value="AddToCart">AddToCart</option>
            <option value="InitiateCheckout">InitiateCheckout</option>
            <option value="Order_Cancelled">Order_Cancelled</option>
            <option value="Order_Refunded">Order_Refunded</option>
        </select>
        <select id="capiflow-filter-status" style="min-width:140px;">
            <option value=""><?php esc_html_e( 'All Statuses', 'capiflow' ); ?></option>
            <option value="pending">Pending</option>
            <option value="processing">Processing</option>
            <option value="sent">Sent</option>
            <option value="failed">Failed</option>
        </select>
        <button type="button" class="button capiflow-refresh-debug">
            <?php esc_html_e( '🔄 Refresh', 'capiflow' ); ?>
        </button>
    </div>

    <!-- Queue Table Panel -->
    <div id="capiflow-debug-queue" class="capiflow-debug-panel">
        <table id="capiflow-queue-table" class="widefat striped">
            <thead>
                <tr>
                    <th><?php esc_html_e( 'Event', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Event ID', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Order', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Status', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'HTTP', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Retries', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Created', 'capiflow' ); ?></th>
                </tr>
            </thead>
            <tbody id="capiflow-queue-tbody">
                <tr><td colspan="7" style="text-align:center;padding:20px;color:#9ca3af;">
                    <?php esc_html_e( 'Loading...', 'capiflow' ); ?>
                </td></tr>
            </tbody>
        </table>
    </div>

    <!-- Logs Table Panel -->
    <div id="capiflow-debug-logs" class="capiflow-debug-panel" style="display:none;">
        <table id="capiflow-logs-table" class="widefat striped">
            <thead>
                <tr>
                    <th><?php esc_html_e( 'Time', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Level', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Event', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Event ID', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'HTTP', 'capiflow' ); ?></th>
                    <th><?php esc_html_e( 'Details', 'capiflow' ); ?></th>
                </tr>
            </thead>
            <tbody id="capiflow-logs-tbody">
                <tr><td colspan="6" style="text-align:center;padding:20px;color:#9ca3af;">
                    <?php esc_html_e( 'Loading...', 'capiflow' ); ?>
                </td></tr>
            </tbody>
        </table>
    </div>

</div>
