<?php

/**

 * Fraud Review - Enterprise Dashboard

 *

 * @package    SensFRX

 * @subpackage SensFRX/admin/partials

 */



// If this file is called directly, abort.

if (!defined('WPINC')) {

    die;

}

?>



<div class="sensfrx-enterprise-wrapper">

    <!-- Centralized Navigation -->

    <?php include(plugin_dir_path(__FILE__) . 'sensfrx-navigation.php'); ?>



    <!-- Page Header -->

    <div style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%); padding: 32px; border-radius: 12px; margin-bottom: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">

        <div style="display: flex; justify-content: space-between; align-items: center;">

            <div>

                <h1 style="margin: 0 0 8px; font-size: 32px; font-weight: 700; color: white;">Fraud Review Center</h1>

                <p style="margin: 0; color: rgba(255,255,255,0.9); font-size: 16px;">Review flagged transactions and take action on suspicious activity</p>

            </div>

            <div style="text-align: right;">

                <div style="display: inline-block; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); padding: 16px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3);">

                    <div style="font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 4px; font-weight: 600;">PENDING REVIEW</div>

                    <div style="font-size: 36px; font-weight: 700; color: white;" id="header-queue-count">-</div>

                </div>

            </div>

        </div>

    </div>



    <!-- Filter & Actions Bar -->

    <div style="background: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">

        <!-- Quick Action Buttons -->

        <div style="display: flex; gap: 12px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #F3F4F6;">

            <button onclick="applyQuickFilter('challenge', 'trans')" class="quick-filter-btn" data-filter="pending-trans" style="flex: 1; padding: 14px 20px; background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border: 2px solid #F59E0B; border-radius: 10px; color: #92400E; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 14px;">

                <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; opacity: 0.8;">Need Review</div>

                <div style="font-size: 18px;">Pending Transactions</div>

            </button>

            <button onclick="applyQuickFilter('challenge', 'reg')" class="quick-filter-btn" data-filter="pending-reg" style="flex: 1; padding: 14px 20px; background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); border: 2px solid #3B82F6; border-radius: 10px; color: #1E40AF; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 14px;">

                <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; opacity: 0.8;">Need Review</div>

                <div style="font-size: 18px;">Pending Registrations</div>

            </button>

            <!-- <button onclick="applyQuickFilter('all', 'trans')" class="quick-filter-btn" data-filter="all-trans" style="flex: 1; padding: 14px 20px; background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%); border: 2px solid #D1D5DB; border-radius: 10px; color: #374151; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 14px;">

                <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; opacity: 0.8;">View All</div>

                <div style="font-size: 18px;">All Activity</div>

            </button> -->

        </div>



        <!-- Advanced Filters -->

        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;">

            <div>

                <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">Status</label>

                <select id="review-filter" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white; cursor: pointer; transition: all 0.2s;">

                    <option value="challenge">Pending Review</option>

                    <!-- <option value="all">All Statuses</option>

                    <option value="approved">Approved</option>

                    <option value="blocked">Blocked</option> -->

                </select>

            </div>

            <div>

                <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">Type</label>

                <select id="review-type" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white; cursor: pointer; transition: all 0.2s;">

                    <option value="trans">Transactions</option>

                    <option value="reg">Registrations</option>

                </select>

            </div>

            <div>

                <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">Risk Level</label>

                <select id="risk-filter" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white; cursor: pointer; transition: all 0.2s;">

                    <option value="all">Review list</option>

                    <!-- <option value="high">High Risk (70+)</option>

                    <option value="medium">Medium Risk (40-69)</option>

                    <option value="low">Low Risk (0-39)</option> -->

                </select>

            </div>

            <div>

                <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">Date Range</label>

                <select id="date-range-filter" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white; cursor: pointer; transition: all 0.2s;">

                    <option value="all">All Time</option>

                    <!-- <option value="today">Today</option>

                    <option value="yesterday">Yesterday</option>

                    <option value="7days">Last 7 Days</option>

                    <option value="30days">Last 30 Days</option>

                    <option value="custom">Custom Range</option> -->

                </select>

            </div>

        </div>



        <!-- Custom Date Range (Initially Hidden) -->

        <div id="custom-date-range" style="display: none; background: #F9FAFB; padding: 16px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #E5E7EB;">

            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;">

                <div>

                    <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">From Date</label>

                    <input type="date" id="from-date" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white;">

                </div>

                <div>

                    <label style="display: block; font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">To Date</label>

                    <input type="date" id="to-date" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1f2937; background: white;">

                </div>

                <div>

                    <button onclick="applyCustomDateRange()" style="padding: 12px 24px; background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">

                        Apply

                    </button>

                </div>

            </div>

        </div>



        <!-- Action Buttons -->

        <div style="display: flex; gap: 12px; justify-content: flex-end;">

            <button onclick="clearAllFilters()" style="padding: 12px 24px; background: white; color: #6B7280; border: 2px solid #E5E7EB; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">

                Clear Filters

            </button>

            <button onclick="sensFrxRefreshReviewQueue()" style="padding: 12px 24px; background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);">

                Refresh Queue

            </button>

        </div>

    </div>



    <!-- Statistics Cards -->

    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px;">

        <div style="background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); padding: 24px; border-radius: 12px; border-left: 6px solid #F59E0B; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">

            <div style="font-size: 12px; color: #78350F; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px;">Waiting for You</div>

            <div style="font-size: 36px; font-weight: 800; color: #D97706;" id="queue-pending">-</div>

        </div>

        <div style="background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); padding: 24px; border-radius: 12px; border-left: 6px solid #10B981; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">

            <div style="font-size: 12px; color: #065F46; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px;">Approved Today</div>

            <div style="font-size: 36px; font-weight: 800; color: #059669;" id="queue-approved">-</div>

        </div>

        <div style="background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); padding: 24px; border-radius: 12px; border-left: 6px solid #EF4444; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">

            <div style="font-size: 12px; color: #7F1D1D; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px;">Blocked Today</div>

            <div style="font-size: 36px; font-weight: 800; color: #DC2626;" id="queue-blocked">-</div>

        </div>

        <div style="background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); padding: 24px; border-radius: 12px; border-left: 6px solid #3B82F6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">

            <div style="font-size: 12px; color: #1E3A8A; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px;">Total Reviewed</div>

            <div style="font-size: 36px; font-weight: 800; color: #1D4ED8;" id="queue-total">-</div>

        </div>

    </div>



    <!-- Review Queue -->

    <div id="review-loading" style="background: white; border-radius: 12px; padding: 80px 40px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">

        <div style="width: 60px; height: 60px; border: 6px solid #F3F4F6; border-top-color: #3B82F6; border-radius: 50%; margin: 0 auto 24px; animation: sensfrx-spin 1s linear infinite;"></div>

        <h3 style="margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #1F2937;">Loading Review Queue</h3>

        <p style="margin: 0; color: #6B7280; font-size: 14px;">Fetching fraud cases from SensFRX API...</p>

    </div>



    <div id="review-content" style="display: none;">

        <div id="review-items"></div>

    </div>



    <div id="review-empty" style="background: white; border-radius: 12px; padding: 80px 40px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: none;">

        <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); border-radius: 50%; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center;">

            <svg width="60" height="60" viewBox="0 0 60 60" fill="none">

                <path d="M15 30l12 12 24-24" stroke="#10B981" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>

            </svg>

        </div>

        <h3 style="margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #1F2937;">All Caught Up!</h3>

        <p style="margin: 0; color: #6B7280; font-size: 16px;">No items pending review at the moment. Great work!</p>

    </div>

</div>



<style>

@keyframes sensfrx-spin {

    to { transform: rotate(360deg); }

}



.sensfrx-review-item {

    background: white;

    border: 2px solid #E5E7EB;

    border-radius: 12px;

    padding: 24px;

    margin-bottom: 20px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.sensfrx-review-item:hover {

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    border-color: #3B82F6;

    transform: translateY(-2px);

}



.sensfrx-review-item.high-risk {

    border-left: 6px solid #EF4444;

    background: linear-gradient(to right, #FEF2F2 0%, white 100%);

}



.sensfrx-review-item.medium-risk {

    border-left: 6px solid #F59E0B;

    background: linear-gradient(to right, #FFFBEB 0%, white 100%);

}



.sensfrx-review-item.low-risk {

    border-left: 6px solid #10B981;

    background: linear-gradient(to right, #F0FDF4 0%, white 100%);

}



.sensfrx-risk-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.sensfrx-action-btn {

    padding: 12px 24px;

    border: none;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.sensfrx-action-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.15);

}



.sensfrx-action-btn-approve {

    background: linear-gradient(135deg, #10B981 0%, #059669 100%);

    color: white;

}



.sensfrx-action-btn-block {

    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    color: white;

}



.sensfrx-action-btn-note {

    background: white;

    color: #4B5563;

    border: 2px solid #E5E7EB;

}



#review-filter:hover, #review-type:hover, #risk-filter:hover, #date-range-filter:hover {

    border-color: #3B82F6;

}



.quick-filter-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.quick-filter-btn:active {

    transform: translateY(0);

}



.quick-filter-btn.active {

    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);

    transform: scale(1.02);

}

</style>



<script>

jQuery(document).ready(function($) {

    loadReviewQueue();

    updateReviewCount();



    $('#review-filter, #review-type, #risk-filter').on('change', function() {

        loadReviewQueue();

    });



    // Date range filter handler

    $('#date-range-filter').on('change', function() {

        const value = $(this).val();

        if (value === 'custom') {

            $('#custom-date-range').slideDown(200);

        } else {

            $('#custom-date-range').slideUp(200);

            loadReviewQueue();

        }

    });



    // Auto-refresh every 30 seconds

    setInterval(function() {

        updateReviewCount();

    }, 30000);

});



function sensFrxRefreshReviewQueue() {

    loadReviewQueue();

    updateReviewCount();

}



function applyQuickFilter(status, type) {

    const $ = jQuery;



    // Update dropdowns

    $('#review-filter').val(status);

    $('#review-type').val(type);

    $('#risk-filter').val('all');

    $('#date-range-filter').val('all');

    $('#custom-date-range').slideUp(200);



    // Highlight active button

    $('.quick-filter-btn').removeClass('active');

    $(`button[data-filter="${status}-${type}"]`).addClass('active');



    // Load filtered data

    loadReviewQueue();

}



function clearAllFilters() {

    const $ = jQuery;



    // Reset all filters to default

    $('#review-filter').val('challenge');

    $('#review-type').val('trans');

    $('#risk-filter').val('all');

    $('#date-range-filter').val('all');

    $('#custom-date-range').slideUp(200);

    $('#from-date').val('');

    $('#to-date').val('');



    // Remove active state from quick filter buttons

    $('.quick-filter-btn').removeClass('active');



    // Reload with defaults

    loadReviewQueue();

}



function applyCustomDateRange() {

    const $ = jQuery;

    const fromDate = $('#from-date').val();

    const toDate = $('#to-date').val();



    if (!fromDate || !toDate) {

        alert('Please select both from and to dates.');

        return;

    }



    if (new Date(fromDate) > new Date(toDate)) {

        alert('From date must be before to date.');

        return;

    }



    loadReviewQueue();

}



function getDateRange() {

    const $ = jQuery;

    const dateFilter = $('#date-range-filter').val();

    const today = new Date();

    let fromDate = null;

    let toDate = null;



    if (dateFilter === 'custom') {

        fromDate = $('#from-date').val();

        toDate = $('#to-date').val();

    } else if (dateFilter === 'today') {

        fromDate = toDate = today.toISOString().split('T')[0];

    } else if (dateFilter === 'yesterday') {

        const yesterday = new Date(today);

        yesterday.setDate(yesterday.getDate() - 1);

        fromDate = toDate = yesterday.toISOString().split('T')[0];

    } else if (dateFilter === '7days') {

        const sevenDaysAgo = new Date(today);

        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

        fromDate = sevenDaysAgo.toISOString().split('T')[0];

        toDate = today.toISOString().split('T')[0];

    } else if (dateFilter === '30days') {

        const thirtyDaysAgo = new Date(today);

        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

        fromDate = thirtyDaysAgo.toISOString().split('T')[0];

        toDate = today.toISOString().split('T')[0];

    }



    return { fromDate, toDate };

}



function updateReviewCount() {

    const $ = jQuery;



    $.ajax({

        url: sensfrxData.restUrl + 'review-count',

        method: 'GET',

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            if (response.status === 'success' && response.data) {

                const count = response.data.count || 0;

                $('.sensfrx-nav-badge, #header-queue-count').text(count);

            }

        }

    });

}



function loadReviewQueue() {

    const $ = jQuery;

    const filter = $('#review-filter').val();

    const type = $('#review-type').val();

    const riskFilter = $('#risk-filter').val();

    const dateRange = getDateRange();



    $('#review-loading').show();

    $('#review-content').hide();

    $('#review-empty').hide();



    // Build AJAX data

    const ajaxData = {

        filter: filter,

        type: type

    };



    // Add date range if specified

    if (dateRange.fromDate && dateRange.toDate) {

        ajaxData.from_date = dateRange.fromDate;

        ajaxData.to_date = dateRange.toDate;

    }



    $.ajax({

        url: sensfrxData.restUrl + 'review-queue',

        method: 'GET',

        data: ajaxData,

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            if (response.status === 'success') {

                // Update statistics

                if (response.stats) {

                    $('#queue-pending').text(response.stats.pending || 0);

                    $('#queue-approved').text(response.stats.approved || 0);

                    $('#queue-blocked').text(response.stats.blocked || 0);

                    const total = (response.stats.approved || 0) + (response.stats.blocked || 0);

                    $('#queue-total').text(total);

                }



                if (response.data && response.data.length > 0) {

                    // Apply client-side risk filtering if needed

                    let filteredData = response.data;

                    if (riskFilter !== 'all') {

                        filteredData = response.data.filter(function(item) {

                            const score = parseInt(item.risk_score) || 0;

                            if (riskFilter === 'high') {

                                return score >= 60;

                            } else if (riskFilter === 'medium') {

                                return score >= 30 && score < 60;

                            } else if (riskFilter === 'low') {

                                return score < 30;

                            }

                            return true;

                        });

                    }



                    if (filteredData.length > 0) {

                        renderReviewQueue(filteredData);

                        $('#review-loading').hide();

                        $('#review-content').show();

                    } else {

                        $('#review-loading').hide();

                        $('#review-empty').show();

                    }

                } else {

                    $('#review-loading').hide();

                    $('#review-empty').show();

                }

            } else {

                $('#review-loading').hide();

                $('#review-empty').show();

            }

        },

        error: function() {

            $('#review-loading').hide();

            $('#review-empty').show();

        }

    });

}



function renderReviewQueue(items) {

    const $ = jQuery;

    const container = $('#review-items');

    const type = $('#review-type').val();

    container.empty();



    items.forEach(function(item) {

        const riskLevel = item.risk_score >= 60 ? 'high' : item.risk_score >= 30 ? 'medium' : 'low';

        const riskColor = riskLevel === 'high' ? '#EF4444' : riskLevel === 'medium' ? '#F59E0B' : '#10B981';

        const riskBg = riskLevel === 'high' ? '#FEF2F2' : riskLevel === 'medium' ? '#FFFBEB' : '#F0FDF4';

        const riskLabel = riskLevel === 'high' ? 'HIGH RISK' : riskLevel === 'medium' ? 'MEDIUM RISK' : 'LOW RISK';

        const reviewItem = `

            <div class="sensfrx-review-item ${riskLevel}-risk">

                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px;">

                    <div style="flex: 1;">

                        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">

                            <h3 style="margin: 0; font-size: 18px; font-weight: 700; color: #1F2937;">

                                ${(item.order_id && item.order_id > 0) ? ('Order #' + item.order_id + (item.id ? ' • ' + item.id : '')) : (item.id || item.event_type || 'N/A')}

                            </h3>

                            <span class="sensfrx-risk-badge" style="background: ${riskBg}; color: ${riskColor};">

                                ${riskLabel} • Score: ${item.risk_score}

                            </span>

                        </div>

                        <div style="display: flex; gap: 20px; font-size: 14px; color: #6B7280;">

                            <span><strong>Date:</strong> ${item.timestamp}</span>

                            <span><strong>IP:</strong> ${item.ip_address}</span>

                            <span><strong>Email:</strong> ${item.email}</span>

                        </div>

                    </div>

                    <div style="text-align: right;">

                        <div style="background: ${item.status === 'Challenge' ? '#FEF3C7' : item.status === 'Allow' ? '#D1FAE5' : '#FEE2E2'}; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; color: ${item.status === 'Challenge' ? '#D97706' : item.status === 'Allow' ? '#059669' : '#DC2626'};">

                            ${item.status === 'Challenge' ? 'Review' : item.status === 'Allow' ? 'Approved' : 'Blocked'}

                        </div>

                    </div>

                </div>



                <div style="background: #F9FAFB; border-radius: 10px; padding: 16px; margin-bottom: 20px; border: 1px solid #E5E7EB;">

                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; font-size: 14px;">

                        <div>

                            <span style="color: #9CA3AF; font-weight: 600;">User:</span>

                            <strong style="color: #1F2937; margin-left: 8px;">${item.user || 'Guest'}</strong>

                        </div>

                        <div>

                            <span style="color: #9CA3AF; font-weight: 600;">ID:</span>

                            <strong style="color: #1F2937; margin-left: 8px;">${(item.order_id && item.order_id > 0) ? ('Order #' + item.order_id + (item.id ? ' • ' + item.id : '')) : (item.id || 'N/A')}</strong>

                        </div>

                        <div>

                            <span style="color: #9CA3AF; font-weight: 600;">Location:</span>

                            <strong style="color: #1F2937; margin-left: 8px;">${item.location || 'Unknown'}</strong>

                        </div>

                        <div>

                            <span style="color: #9CA3AF; font-weight: 600;">Device:</span>

                            <strong style="color: #1F2937; margin-left: 8px;">${item.device || 'Unknown'}</strong>

                        </div>

                    </div>

                </div>



                ${item.indicators && item.indicators.length > 0 ? `

                <div style="margin-bottom: 20px;">

                    <div style="font-size: 12px; color: #6B7280; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">FRAUD INDICATORS</div>

                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">

                        ${renderFraudIndicators(item.indicators)}

                    </div>

                </div>

                ` : ''}



                ${item.notes ? `

                <div style="margin-bottom: 20px;">

                    <div style="font-size: 12px; color: #6B7280; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">NOTES</div>

                    <div style="font-size: 14px; color: #374151; background: #FFFBEB; padding: 12px 16px; border-radius: 8px; border-left: 4px solid #F59E0B;">

                        ${item.notes}

                    </div>

                </div>

                ` : ''}



                <div style="display: flex; gap: 12px; justify-content: flex-end;">

                    <button onclick="${type === 'trans' 

                        ? `reviewAction('${item.id}', '${item.order_id}', 'approve', '${type}')` 

                        : `reviewActionReg('${item.id}', '${item.username}', '${item.email}', 'approve', '${type}')`

                    }" 

                    class="sensfrx-action-btn sensfrx-action-btn-approve">

                        Approve

                    </button>



                    <button onclick="${type === 'trans' 

                        ? `reviewAction('${item.id}', '${item.order_id}', 'reject', '${type}')` 

                        : `reviewActionReg('${item.id}', '${item.username}', '${item.email}', 'reject', '${type}')`

                    }" 

                    class="sensfrx-action-btn sensfrx-action-btn-block">

                        Block

                    </button>

                </div>

            </div>

        `;



        container.append(reviewItem);

    });

}



function renderFraudIndicators(indicators) {

    if (!indicators || indicators.length === 0) {

        return '<span style="color: #9CA3AF; font-size: 13px;">No specific indicators</span>';

    }



    return indicators.map(indicator => {

        return `<span style="padding: 6px 14px; background: #FEE2E2; color: #991B1B; border-radius: 16px; font-size: 12px; font-weight: 600; border: 1px solid #FCA5A5;">

            ${indicator}

        </span>`;

    }).join('');

}



function reviewAction(itemId, order_id, action, type) {

    const $ = jQuery;



    if (!confirm(`Are you sure you want to ${action} this item?`)) {

        return;

    }



    // Show loading state on button

    const btn = event.target;

    const originalText = btn.innerHTML;

    btn.disabled = true;

    btn.innerHTML = action === 'approve' ? 'Approving...' : 'Blocking...';



    $.ajax({

        url: sensfrxData.restUrl + 'post_sensfrx_trans_review',

        method: 'POST',

        data: JSON.stringify({

            orderID: order_id,

            transID: itemId,

            transAction: action,

            type: type

        }),

        contentType: 'application/json',

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            btn.disabled = false;

            btn.innerHTML = originalText;



            if (response.status === 'success') {

                alert(action === 'approve' ? 'Item approved successfully!' : 'Item blocked successfully!');

                loadReviewQueue();

                updateReviewCount();

            } else {

                alert('Action failed: ' + (response.message || 'Please try again.'));

            }

        },

        error: function() {

            btn.disabled = false;

            btn.innerHTML = originalText;

            alert('Action failed. Please try again.');

        }

    });

}



function reviewActionReg(itemId, username, email, action, type) {

    const $ = jQuery;



    if (!confirm(`Are you sure you want to ${action} this item?`)) {

        return;

    }



    // Show loading state on button

    const btn = event.target;

    const originalText = btn.innerHTML;

    btn.disabled = true;

    btn.innerHTML = action === 'approve' ? 'Approving...' : 'Blocking...';



    $.ajax({

        url: sensfrxData.restUrl + 'post_sensfrx_register_review',

        method: 'POST',

        data: JSON.stringify({

            userName: username,

            eMail: email,

            regID: itemId,

            regAction: action,

            type: type

        }),

        contentType: 'application/json',

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            btn.disabled = false;

            btn.innerHTML = originalText;



            if (response.status === 'success') {

                alert(action === 'approve' ? 'Item approved successfully!' : 'Item blocked successfully!');

                loadReviewQueue();

                updateReviewCount();

            } else {

                alert('Action failed: ' + (response.message || 'Please try again.'));

            }

        },

        error: function() {

            btn.disabled = false;

            btn.innerHTML = originalText;

            alert('Action failed. Please try again.');

        }

    });

}



function addNote(itemId, type) {

    const note = prompt('Enter a note for this review item:');

    if (!note) return;



    const $ = jQuery;



    $.ajax({

        url: sensfrxData.restUrl + 'review-note',

        method: 'POST',

        data: JSON.stringify({

            item_id: itemId,

            note: note,

            type: type

        }),

        contentType: 'application/json',

        beforeSend: function(xhr) {

            xhr.setRequestHeader('X-WP-Nonce', sensfrxData.nonce);

        },

        success: function(response) {

            if (response.status === 'success') {

                alert('Note added successfully!');

                loadReviewQueue();

            } else {

                alert('Failed to add note: ' + (response.message || 'Please try again.'));

            }

        },

        error: function() {

            alert('Failed to add note. Please try again.');

        }

    });

}

</script>

