<?php

/**

 * SensFRX Protection Tabs for SMB

 * Modern, simplified interface for small/medium businesses

 *

 * Features:

 * 1. Quick Block List - One-click blocking of bad actors

 * 2. Trust List - Whitelist your regular customers

 * 3. Smart Rules - Pre-configured rules that just work

 * 4. AI Shield - Automatic protection, no configuration needed

 */

?>



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

    <style>

    .sensfrx-protection-wrapper {

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        background: #f7f8fc;

        padding: 20px;

        min-height: 600px;

    }



    /* Main Tabs */

    .protection-tabs {

        background: white;

        border-radius: 12px;

        box-shadow: 0 2px 8px rgba(0,0,0,0.06);

        margin-bottom: 20px;

    }



    .protection-tab-nav {

        display: flex;

        border-bottom: 1px solid #e5e7eb;

        padding: 0 20px;

    }



    .protection-tab-btn {

        padding: 16px 24px;

        background: none;

        border: none;

        border-bottom: 3px solid transparent;

        color: #6b7280;

        font-size: 14px;

        font-weight: 500;

        cursor: pointer;

        transition: all 0.2s;

        position: relative;

    }



    .protection-tab-btn:hover {

        color: #4f46e5;

    }



    .protection-tab-btn.active {

        color: #4f46e5;

        border-bottom-color: #4f46e5;

    }



    .tab-badge {

        background: #ef4444;

        color: white;

        border-radius: 10px;

        padding: 2px 6px;

        font-size: 11px;

        margin-left: 8px;

        font-weight: 600;

    }



    /* Quick Actions Bar */

    .quick-actions {

        background: #fef3c7;

        border: 1px solid #fbbf24;

        border-radius: 8px;

        padding: 12px 20px;

        margin-bottom: 20px;

        display: flex;

        align-items: center;

        gap: 20px;

    }



    .quick-actions-icon {

        color: #f59e0b;

    }



    .quick-actions-text {

        flex: 1;

        font-size: 14px;

        color: #92400e;

    }



    .quick-action-btn {

        background: #f59e0b;

        color: white;

        border: none;

        padding: 8px 16px;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 500;

        cursor: pointer;

    }



    /* Protection Content */

    .protection-content {

        background: white;

        border-radius: 12px;

        box-shadow: 0 2px 8px rgba(0,0,0,0.06);

        padding: 24px;

    }



    /* Simple List View */

    .simple-list-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 20px;

    }



    .simple-list-title {

        font-size: 18px;

        font-weight: 600;

        color: #1f2937;

    }



    .simple-list-subtitle {

        font-size: 14px;

        color: #6b7280;

        margin-top: 4px;

    }



    .add-item-form {

        display: flex;

        gap: 12px;

        margin-bottom: 24px;

        padding: 16px;

        background: #f9fafb;

        border-radius: 8px;

    }



    .add-item-input {

        flex: 1;

        padding: 10px 14px;

        border: 1px solid #d1d5db;

        border-radius: 6px;

        font-size: 14px;

    }



    .add-item-select {

        padding: 10px 14px;

        border: 1px solid #d1d5db;

        border-radius: 6px;

        font-size: 14px;

        background: white;

    }



    .add-item-btn {

        background: #10b981;

        color: white;

        border: none;

        padding: 10px 20px;

        border-radius: 6px;

        font-weight: 500;

        cursor: pointer;

    }



    /* Items List */

    .list-items {

        border: 1px solid #e5e7eb;

        border-radius: 8px;

    }



    .list-item {

        display: flex;

        align-items: center;

        padding: 16px;

        border-bottom: 1px solid #f3f4f6;

    }



    .list-item:last-child {

        border-bottom: none;

    }



    .list-item-icon {

        width: 40px;

        height: 40px;

        background: #fee2e2;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 16px;

    }



    .list-item-icon.trusted {

        background: #d1fae5;

    }



    .list-item-content {

        flex: 1;

    }



    .list-item-value {

        font-weight: 500;

        color: #1f2937;

        font-size: 14px;

    }



    .list-item-meta {

        font-size: 12px;

        color: #9ca3af;

        margin-top: 4px;

    }



    .list-item-action {

        color: #ef4444;

        background: none;

        border: none;

        padding: 8px;

        cursor: pointer;

    }



    /* Smart Rules (Simple Toggle View) */

    .smart-rules-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 16px;

        margin-bottom: 20px;

    }



    .smart-rule-card {

        background: #f9fafb;

        border: 2px solid #e5e7eb;

        border-radius: 8px;

        padding: 16px;

        transition: all 0.2s;

    }



    .smart-rule-card.enabled {

        background: #f0fdf4;

        border-color: #10b981;

    }



    .rule-header {

        display: flex;

        justify-content: space-between;

        align-items: flex-start;

        margin-bottom: 12px;

    }



    .rule-title {

        font-weight: 600;

        color: #1f2937;

        font-size: 14px;

    }



    .rule-toggle {

        position: relative;

        width: 44px;

        height: 24px;

    }



    .rule-toggle input {

        display: none;

    }



    .rule-toggle-slider {

        position: absolute;

        cursor: pointer;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: #cbd5e1;

        transition: 0.4s;

        border-radius: 24px;

    }



    .rule-toggle-slider:before {

        position: absolute;

        content: "";

        height: 18px;

        width: 18px;

        left: 3px;

        bottom: 3px;

        background: white;

        transition: 0.4s;

        border-radius: 50%;

    }



    .rule-toggle input:checked + .rule-toggle-slider {

        background: #10b981;

    }



    .rule-toggle input:checked + .rule-toggle-slider:before {

        transform: translateX(20px);

    }



    .rule-description {

        font-size: 13px;

        color: #6b7280;

        line-height: 1.5;

    }



    /* AI Protection Status */

    .ai-status-card {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        border-radius: 12px;

        padding: 24px;

        color: white;

        margin-bottom: 20px;

    }



    .ai-status-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 20px;

    }



    .ai-status-title {

        font-size: 20px;

        font-weight: 600;

    }



    .ai-status-badge {

        background: rgba(255,255,255,0.2);

        padding: 6px 12px;

        border-radius: 20px;

        font-size: 13px;

        font-weight: 500;

    }



    .ai-stats-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 20px;

    }



    .ai-stat {

        text-align: center;

    }



    .ai-stat-value {

        font-size: 32px;

        font-weight: 700;

    }



    .ai-stat-label {

        font-size: 13px;

        opacity: 0.9;

        margin-top: 4px;

    }

    </style>



    <!-- Main Protection Tabs -->

    <div class="protection-tabs">

        <div class="protection-tab-nav">

            <button class="protection-tab-btn active" data-tab="block-list">

                <span class="dashicons dashicons-shield-alt"></span> Block List

                <span class="tab-badge" id="block-count">0</span>

            </button>

            <button class="protection-tab-btn" data-tab="trust-list">

                <span class="dashicons dashicons-yes-alt"></span> Trust List

                <span class="tab-badge" style="background: #10b981;" id="trust-count">0</span>

            </button>

            <button class="protection-tab-btn" data-tab="smart-rules">

                <span class="dashicons dashicons-admin-settings"></span> Smart Rules

            </button>

            <button class="protection-tab-btn" data-tab="ai-shield">

                <span class="dashicons dashicons-superhero"></span> AI Shield

            </button>

        </div>

    </div>



    <!-- Quick Actions Bar -->

    <div class="quick-actions" id="quick-actions">

        <span class="dashicons dashicons-warning quick-actions-icon"></span>

        <span class="quick-actions-text">

            Found a suspicious IP attacking your store? Block it instantly!

        </span>

        <button class="quick-action-btn" onclick="quickBlockIP()">Quick Block</button>

    </div>



    <!-- Tab Content -->

    <div class="protection-content">

        <!-- Block List Tab -->

        <div class="tab-content" id="block-list-tab">

            <div class="simple-list-header">

                <div>

                    <h2 class="simple-list-title">Blocked Threats</h2>

                    <p class="simple-list-subtitle">IPs and emails that are permanently blocked from your store</p>

                </div>

            </div>



            <div class="add-item-form">

                <input type="text" class="add-item-input" id="block-value" placeholder="Enter IP address or email to block">

                <select class="add-item-select" id="block-type">

                    <option value="ip">IP Address</option>

                    <option value="email">Email</option>

                </select>

                <button class="add-item-btn" onclick="addToBlockList()">

                    <span class="dashicons dashicons-plus-alt2"></span> Block

                </button>

            </div>



            <div class="list-items" id="block-list-items">

                <!-- Sample items -->

                <div class="list-item">

                    <div class="list-item-icon">

                        <span class="dashicons dashicons-desktop" style="color: #ef4444;"></span>

                    </div>

                    <div class="list-item-content">

                        <div class="list-item-value">192.168.1.100</div>

                        <div class="list-item-meta">Blocked 2 days ago • 15 attempts blocked</div>

                    </div>

                    <button class="list-item-action" onclick="removeFromList('block', this)">

                        <span class="dashicons dashicons-trash"></span>

                    </button>

                </div>

                <div class="list-item">

                    <div class="list-item-icon">

                        <span class="dashicons dashicons-email-alt" style="color: #ef4444;"></span>

                    </div>

                    <div class="list-item-content">

                        <div class="list-item-value">spammer@badmail.com</div>

                        <div class="list-item-meta">Blocked 5 days ago • 8 attempts blocked</div>

                    </div>

                    <button class="list-item-action" onclick="removeFromList('block', this)">

                        <span class="dashicons dashicons-trash"></span>

                    </button>

                </div>

            </div>

        </div>



        <!-- Trust List Tab -->

        <div class="tab-content" id="trust-list-tab" style="display: none;">

            <div class="simple-list-header">

                <div>

                    <h2 class="simple-list-title">Trusted Customers</h2>

                    <p class="simple-list-subtitle">Always allow these IPs and emails - your VIP customers</p>

                </div>

            </div>



            <div class="add-item-form">

                <input type="text" class="add-item-input" id="trust-value" placeholder="Enter trusted IP or email">

                <select class="add-item-select" id="trust-type">

                    <option value="ip">IP Address</option>

                    <option value="email">Email</option>

                </select>

                <button class="add-item-btn" onclick="addToTrustList()">

                    <span class="dashicons dashicons-yes"></span> Trust

                </button>

            </div>



            <div class="list-items" id="trust-list-items">

                <div class="list-item">

                    <div class="list-item-icon trusted">

                        <span class="dashicons dashicons-email-alt" style="color: #10b981;"></span>

                    </div>

                    <div class="list-item-content">

                        <div class="list-item-value">vip@customer.com</div>

                        <div class="list-item-meta">Trusted customer • 142 successful orders</div>

                    </div>

                    <button class="list-item-action" onclick="removeFromList('trust', this)">

                        <span class="dashicons dashicons-trash"></span>

                    </button>

                </div>

            </div>

        </div>



        <!-- Smart Rules Tab -->

        <div class="tab-content" id="smart-rules-tab" style="display: none;">

            <div class="simple-list-header">

                <div>

                    <h2 class="simple-list-title">Smart Protection Rules</h2>

                    <p class="simple-list-subtitle">Pre-configured rules optimized for online stores - just toggle on/off</p>

                </div>

            </div>



            <div class="smart-rules-grid">

                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">🛡️ Multiple Failed Logins</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleRule(this, 'failed_logins')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Block IPs after 5 failed login attempts in 10 minutes. Protects against brute force attacks.</p>

                </div>



                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">💳 High-Risk Countries</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleRule(this, 'high_risk_countries')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Extra verification for orders from countries with high fraud rates.</p>

                </div>



                <div class="smart-rule-card">

                    <div class="rule-header">

                        <h3 class="rule-title">📧 Disposable Emails</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" onchange="toggleRule(this, 'disposable_emails')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Block temporary email addresses often used by fraudsters.</p>

                </div>



                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">🚀 Velocity Check</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleRule(this, 'velocity_check')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Flag multiple orders from same IP in short time (card testing).</p>

                </div>



                <div class="smart-rule-card">

                    <div class="rule-header">

                        <h3 class="rule-title">🏠 Address Mismatch</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" onchange="toggleRule(this, 'address_mismatch')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Flag orders where billing and shipping differ significantly.</p>

                </div>



                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">💰 Large First Order</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleRule(this, 'large_first_order')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Review first-time customers placing orders over $500.</p>

                </div>

            </div>

        </div>



        <!-- AI Shield Tab -->

        <div class="tab-content" id="ai-shield-tab" style="display: none;">

            <div class="ai-status-card">

                <div class="ai-status-header">

                    <h2 class="ai-status-title">AI Protection Active</h2>

                    <span class="ai-status-badge">LEARNING MODE</span>

                </div>

                <div class="ai-stats-grid">

                    <div class="ai-stat">

                        <div class="ai-stat-value">2,847</div>

                        <div class="ai-stat-label">Patterns Learned</div>

                    </div>

                    <div class="ai-stat">

                        <div class="ai-stat-value">98.5%</div>

                        <div class="ai-stat-label">Accuracy Rate</div>

                    </div>

                    <div class="ai-stat">

                        <div class="ai-stat-value">$12,450</div>

                        <div class="ai-stat-label">Fraud Prevented</div>

                    </div>

                </div>

            </div>



            <div class="simple-list-header">

                <div>

                    <h2 class="simple-list-title">AI-Powered Protection</h2>

                    <p class="simple-list-subtitle">Machine learning that adapts to your store's unique patterns</p>

                </div>

            </div>



            <div class="smart-rules-grid">

                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">🤖 Bot Detection</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleAI(this, 'bot_detection')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Automatically identify and block automated attacks, scrapers, and card testing bots.</p>

                </div>



                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">🎯 Behavioral Analysis</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleAI(this, 'behavioral')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Detect unusual shopping patterns that indicate fraud (even from new attackers).</p>

                </div>



                <div class="smart-rule-card enabled">

                    <div class="rule-header">

                        <h3 class="rule-title">🔍 Device Fingerprinting</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" checked onchange="toggleAI(this, 'device_fingerprint')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Track devices across multiple accounts to catch repeat offenders.</p>

                </div>



                <div class="smart-rule-card">

                    <div class="rule-header">

                        <h3 class="rule-title">📊 Risk Scoring</h3>

                        <label class="rule-toggle">

                            <input type="checkbox" onchange="toggleAI(this, 'risk_scoring')">

                            <span class="rule-toggle-slider"></span>

                        </label>

                    </div>

                    <p class="rule-description">Real-time risk scores for every transaction based on 50+ factors.</p>

                </div>

            </div>

        </div>

    </div>

</div>



<script>

// Tab switching

document.querySelectorAll('.protection-tab-btn').forEach(btn => {

    btn.addEventListener('click', function() {

        // Update active tab

        document.querySelectorAll('.protection-tab-btn').forEach(b => b.classList.remove('active'));

        this.classList.add('active');



        // Show corresponding content

        document.querySelectorAll('.tab-content').forEach(content => {

            content.style.display = 'none';

        });

        document.getElementById(this.dataset.tab + '-tab').style.display = 'block';



        // Update quick actions based on tab

        updateQuickActions(this.dataset.tab);

    });

});



// Update quick actions bar

function updateQuickActions(tab) {

    const quickActions = document.getElementById('quick-actions');

    const messages = {

        'block-list': 'Found a suspicious IP attacking your store? Block it instantly!',

        'trust-list': 'Want to ensure your VIP customers never get blocked? Add them here!',

        'smart-rules': 'Recommended: Keep the default rules enabled for optimal protection.',

        'ai-shield': 'AI is learning from your store patterns. No action needed!'

    };



    quickActions.querySelector('.quick-actions-text').textContent = messages[tab];

}



// Add to block list

function addToBlockList() {

    const value = document.getElementById('block-value').value;

    const type = document.getElementById('block-type').value;



    if (!value) {

        alert('Please enter a value to block');

        return;

    }



    // Call SDK

    jQuery.ajax({

        url: sensfrx_ajax_object.ajax_url,

        type: 'POST',

        data: {

            action: 'sensfrx_add_blacklist',

            value: value,

            type: type,

            nonce: sensfrx_ajax_object.nonce

        },

        success: function(response) {

            if (response.success) {

                location.reload();

            }

        }

    });

}



// Add to trust list

function addToTrustList() {

    const value = document.getElementById('trust-value').value;

    const type = document.getElementById('trust-type').value;



    if (!value) {

        alert('Please enter a value to trust');

        return;

    }



    // Call SDK

    jQuery.ajax({

        url: sensfrx_ajax_object.ajax_url,

        type: 'POST',

        data: {

            action: 'sensfrx_add_whitelist',

            value: value,

            type: type,

            nonce: sensfrx_ajax_object.nonce

        },

        success: function(response) {

            if (response.success) {

                location.reload();

            }

        }

    });

}



// Toggle rule

function toggleRule(checkbox, ruleId) {

    const card = checkbox.closest('.smart-rule-card');

    if (checkbox.checked) {

        card.classList.add('enabled');

    } else {

        card.classList.remove('enabled');

    }



    // Save rule state

    jQuery.ajax({

        url: sensfrx_ajax_object.ajax_url,

        type: 'POST',

        data: {

            action: 'sensfrx_toggle_rule',

            rule_id: ruleId,

            enabled: checkbox.checked,

            nonce: sensfrx_ajax_object.nonce

        }

    });

}



// Remove from list

function removeFromList(listType, button) {

    if (confirm('Are you sure you want to remove this item?')) {

        const item = button.closest('.list-item');

        item.remove();



        // Update count

        const count = document.querySelectorAll(`#${listType}-list-items .list-item`).length;

        document.getElementById(`${listType}-count`).textContent = count;

    }

}



// Quick block IP

function quickBlockIP() {

    const ip = prompt('Enter IP address to block:');

    if (ip) {

        document.getElementById('block-value').value = ip;

        document.getElementById('block-type').value = 'ip';

        addToBlockList();

    }

}



// Initialize counts

document.addEventListener('DOMContentLoaded', function() {

    // Update counts

    document.getElementById('block-count').textContent = document.querySelectorAll('#block-list-items .list-item').length;

    document.getElementById('trust-count').textContent = document.querySelectorAll('#trust-list-items .list-item').length;

});

</script>