<?php

/**

 * SensFRX SMB Setup Wizard

 * Quick 3-step setup for small/medium businesses

 */

?>



<div class="sensfrx-wizard-wrapper" id="sensfrx-wizard">

    <style>

    .sensfrx-wizard-wrapper {

        max-width: 800px;

        margin: 40px auto;

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

    }



    .wizard-header {

        text-align: center;

        margin-bottom: 40px;

    }



    .wizard-logo {

        width: 120px;

        height: auto;

        margin-bottom: 20px;

    }



    .wizard-title {

        font-size: 28px;

        font-weight: 600;

        color: #1f2937;

        margin-bottom: 8px;

    }



    .wizard-subtitle {

        font-size: 16px;

        color: #6b7280;

    }



    /* Progress Bar */

    .wizard-progress {

        display: flex;

        justify-content: space-between;

        margin-bottom: 40px;

        position: relative;

    }



    .wizard-progress::before {

        content: '';

        position: absolute;

        top: 20px;

        left: 0;

        right: 0;

        height: 2px;

        background: #e5e7eb;

        z-index: 0;

    }



    .progress-step {

        position: relative;

        z-index: 1;

        text-align: center;

        flex: 1;

    }



    .step-number {

        width: 40px;

        height: 40px;

        background: #e5e7eb;

        color: #9ca3af;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto 8px;

        font-weight: 600;

        transition: all 0.3s;

    }



    .progress-step.active .step-number {

        background: #4f46e5;

        color: white;

        transform: scale(1.1);

    }



    .progress-step.completed .step-number {

        background: #10b981;

        color: white;

    }



    .step-label {

        font-size: 13px;

        color: #6b7280;

        font-weight: 500;

    }



    /* Wizard Content */

    .wizard-content {

        background: white;

        border-radius: 12px;

        box-shadow: 0 4px 16px rgba(0,0,0,0.08);

        padding: 40px;

        min-height: 400px;

    }



    .wizard-step {

        display: none;

    }



    .wizard-step.active {

        display: block;

        animation: fadeIn 0.3s;

    }



    @keyframes fadeIn {

        from { opacity: 0; transform: translateY(10px); }

        to { opacity: 1; transform: translateY(0); }

    }



    .step-title {

        font-size: 24px;

        font-weight: 600;

        color: #1f2937;

        margin-bottom: 12px;

    }



    .step-description {

        font-size: 15px;

        color: #6b7280;

        margin-bottom: 32px;

        line-height: 1.6;

    }



    /* Business Type Selection */

    .business-types {

        display: grid;

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

        gap: 16px;

        margin-bottom: 24px;

    }



    .business-type-card {

        border: 2px solid #e5e7eb;

        border-radius: 8px;

        padding: 20px;

        cursor: pointer;

        transition: all 0.2s;

        text-align: center;

    }



    .business-type-card:hover {

        border-color: #4f46e5;

        background: #f9fafb;

    }



    .business-type-card.selected {

        border-color: #4f46e5;

        background: #eef2ff;

    }



    .business-icon {

        font-size: 32px;

        margin-bottom: 12px;

    }



    .business-name {

        font-weight: 600;

        color: #1f2937;

        margin-bottom: 4px;

    }



    .business-desc {

        font-size: 13px;

        color: #6b7280;

    }



    /* Protection Level Selection */

    .protection-levels {

        display: grid;

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

        gap: 16px;

        margin-bottom: 24px;

    }



    .protection-card {

        border: 2px solid #e5e7eb;

        border-radius: 8px;

        padding: 20px;

        cursor: pointer;

        transition: all 0.2s;

        position: relative;

    }



    .protection-card:hover {

        border-color: #4f46e5;

    }



    .protection-card.selected {

        border-color: #4f46e5;

        background: #eef2ff;

    }



    .protection-card.recommended {

        border-color: #10b981;

    }



    .recommended-badge {

        position: absolute;

        top: -10px;

        right: 10px;

        background: #10b981;

        color: white;

        padding: 4px 8px;

        border-radius: 4px;

        font-size: 11px;

        font-weight: 600;

    }



    .protection-level {

        font-weight: 600;

        color: #1f2937;

        margin-bottom: 8px;

    }



    .protection-desc {

        font-size: 13px;

        color: #6b7280;

        margin-bottom: 12px;

    }



    .protection-features {

        font-size: 12px;

        color: #6b7280;

    }



    .protection-features li {

        margin-bottom: 4px;

    }



    /* Quick Settings */

    .quick-settings {

        background: #f9fafb;

        border-radius: 8px;

        padding: 24px;

        margin-bottom: 24px;

    }



    .setting-row {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 20px;

    }



    .setting-row:last-child {

        margin-bottom: 0;

    }



    .setting-label {

        display: flex;

        align-items: center;

        gap: 12px;

    }



    .setting-icon {

        width: 40px;

        height: 40px;

        background: white;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #4f46e5;

    }



    .setting-text {

        flex: 1;

    }



    .setting-name {

        font-weight: 600;

        color: #1f2937;

        margin-bottom: 2px;

    }



    .setting-desc {

        font-size: 13px;

        color: #6b7280;

    }



    .setting-toggle {

        position: relative;

        width: 52px;

        height: 28px;

    }



    .setting-toggle input {

        display: none;

    }



    .toggle-slider {

        position: absolute;

        cursor: pointer;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: #cbd5e1;

        transition: 0.4s;

        border-radius: 28px;

    }



    .toggle-slider:before {

        position: absolute;

        content: "";

        height: 22px;

        width: 22px;

        left: 3px;

        bottom: 3px;

        background: white;

        transition: 0.4s;

        border-radius: 50%;

    }



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

        background: #10b981;

    }



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

        transform: translateX(24px);

    }



    /* Navigation Buttons */

    .wizard-nav {

        display: flex;

        justify-content: space-between;

        margin-top: 40px;

        padding-top: 24px;

        border-top: 1px solid #e5e7eb;

    }



    .wizard-btn {

        padding: 12px 24px;

        border-radius: 6px;

        font-weight: 500;

        cursor: pointer;

        transition: all 0.2s;

        border: none;

        font-size: 15px;

    }



    .btn-back {

        background: #f3f4f6;

        color: #6b7280;

    }



    .btn-back:hover {

        background: #e5e7eb;

    }



    .btn-next {

        background: #4f46e5;

        color: white;

    }



    .btn-next:hover {

        background: #4338ca;

    }



    .btn-finish {

        background: #10b981;

        color: white;

    }



    .btn-finish:hover {

        background: #059669;

    }

    </style>



    <!-- Wizard Header -->

    <div class="wizard-header">

        <h1 class="wizard-title">Welcome to SensFRX Protection</h1>

        <p class="wizard-subtitle">Let's set up fraud protection for your store in 3 easy steps</p>

    </div>



    <!-- Progress Bar -->

    <div class="wizard-progress">

        <div class="progress-step active" data-step="1">

            <div class="step-number">1</div>

            <div class="step-label">Business Type</div>

        </div>

        <div class="progress-step" data-step="2">

            <div class="step-number">2</div>

            <div class="step-label">Protection Level</div>

        </div>

        <div class="progress-step" data-step="3">

            <div class="step-number">3</div>

            <div class="step-label">Quick Settings</div>

        </div>

    </div>



    <!-- Wizard Content -->

    <div class="wizard-content">

        <!-- Step 1: Business Type -->

        <div class="wizard-step active" data-step="1">

            <h2 class="step-title">What type of business do you run?</h2>

            <p class="step-description">This helps us customize protection rules for your specific needs</p>



            <div class="business-types">

                <div class="business-type-card" data-type="physical">

                    <div class="business-icon">📦</div>

                    <div class="business-name">Physical Products</div>

                    <div class="business-desc">Clothing, electronics, home goods</div>

                </div>

                <div class="business-type-card" data-type="digital">

                    <div class="business-icon">💻</div>

                    <div class="business-name">Digital Products</div>

                    <div class="business-desc">Software, courses, downloads</div>

                </div>

                <div class="business-type-card" data-type="services">

                    <div class="business-icon">🛠️</div>

                    <div class="business-name">Services</div>

                    <div class="business-desc">Consulting, subscriptions</div>

                </div>

                <div class="business-type-card" data-type="mixed">

                    <div class="business-icon">🏪</div>

                    <div class="business-name">Mixed/Other</div>

                    <div class="business-desc">Combination or other</div>

                </div>

            </div>



            <input type="hidden" id="business-type" value="">

        </div>



        <!-- Step 2: Protection Level -->

        <div class="wizard-step" data-step="2">

            <h2 class="step-title">Choose your protection level</h2>

            <p class="step-description">You can always adjust these settings later</p>



            <div class="protection-levels">

                <div class="protection-card" data-level="light">

                    <div class="protection-level">Light Protection</div>

                    <p class="protection-desc">Minimal friction for customers</p>

                    <ul class="protection-features">

                        <li>• Block obvious threats</li>

                        <li>• Allow most transactions</li>

                        <li>• Best for low-risk stores</li>

                    </ul>

                </div>

                <div class="protection-card recommended" data-level="balanced">

                    <span class="recommended-badge">RECOMMENDED</span>

                    <div class="protection-level">Balanced Protection</div>

                    <p class="protection-desc">Best for most stores</p>

                    <ul class="protection-features">

                        <li>• Smart fraud detection</li>

                        <li>• Review suspicious orders</li>

                        <li>• Optimal security/UX balance</li>

                    </ul>

                </div>

                <div class="protection-card" data-level="strict">

                    <div class="protection-level">Strict Protection</div>

                    <p class="protection-desc">Maximum security</p>

                    <ul class="protection-features">

                        <li>• Block all suspicious activity</li>

                        <li>• Extra verification steps</li>

                        <li>• For high-value stores</li>

                    </ul>

                </div>

            </div>



            <input type="hidden" id="protection-level" value="">

        </div>



        <!-- Step 3: Quick Settings -->

        <div class="wizard-step" data-step="3">

            <h2 class="step-title">Almost done! Review your settings</h2>

            <p class="step-description">These are recommended based on your selections. You can change them anytime.</p>



            <div class="quick-settings">

                <div class="setting-row">

                    <div class="setting-label">

                        <div class="setting-icon">

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

                        </div>

                        <div class="setting-text">

                            <div class="setting-name">Block Multiple Failed Logins</div>

                            <div class="setting-desc">Stop brute force attacks automatically</div>

                        </div>

                    </div>

                    <label class="setting-toggle">

                        <input type="checkbox" id="setting-failed-logins" checked>

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

                    </label>

                </div>



                <div class="setting-row">

                    <div class="setting-label">

                        <div class="setting-icon">

                            <span class="dashicons dashicons-email-alt"></span>

                        </div>

                        <div class="setting-text">

                            <div class="setting-name">Email Notifications</div>

                            <div class="setting-desc">Get alerts when fraud is blocked</div>

                        </div>

                    </div>

                    <label class="setting-toggle">

                        <input type="checkbox" id="setting-email-alerts" checked>

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

                    </label>

                </div>



                <div class="setting-row">

                    <div class="setting-label">

                        <div class="setting-icon">

                            <span class="dashicons dashicons-chart-bar"></span>

                        </div>

                        <div class="setting-text">

                            <div class="setting-name">Weekly Reports</div>

                            <div class="setting-desc">Receive protection summary every Monday</div>

                        </div>

                    </div>

                    <label class="setting-toggle">

                        <input type="checkbox" id="setting-weekly-reports" checked>

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

                    </label>

                </div>



                <div class="setting-row">

                    <div class="setting-label">

                        <div class="setting-icon">

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

                        </div>

                        <div class="setting-text">

                            <div class="setting-name">AI Protection</div>

                            <div class="setting-desc">Machine learning fraud detection</div>

                        </div>

                    </div>

                    <label class="setting-toggle">

                        <input type="checkbox" id="setting-ai-protection" checked>

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

                    </label>

                </div>

            </div>

        </div>

    </div>



    <!-- Navigation -->

    <div class="wizard-nav">

        <button class="wizard-btn btn-back" onclick="wizardBack()" style="display: none;">Back</button>

        <button class="wizard-btn btn-next" onclick="wizardNext()">Next</button>

        <button class="wizard-btn btn-finish" onclick="wizardFinish()" style="display: none;">Finish Setup</button>

    </div>

</div>



<script>

let currentStep = 1;

const totalSteps = 3;



// Business type selection

document.querySelectorAll('.business-type-card').forEach(card => {

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

        document.querySelectorAll('.business-type-card').forEach(c => c.classList.remove('selected'));

        this.classList.add('selected');

        document.getElementById('business-type').value = this.dataset.type;

    });

});



// Protection level selection

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

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

        document.querySelectorAll('.protection-card').forEach(c => c.classList.remove('selected'));

        this.classList.add('selected');

        document.getElementById('protection-level').value = this.dataset.level;

    });

});



// Navigation functions

function wizardNext() {

    // Validation

    if (currentStep === 1 && !document.getElementById('business-type').value) {

        alert('Please select your business type');

        return;

    }

    if (currentStep === 2 && !document.getElementById('protection-level').value) {

        alert('Please select a protection level');

        return;

    }



    if (currentStep < totalSteps) {

        // Mark current step as completed

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.add('completed');

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.remove('active');



        // Hide current step

        document.querySelector(`.wizard-step[data-step="${currentStep}"]`).classList.remove('active');



        // Move to next step

        currentStep++;



        // Show next step

        document.querySelector(`.wizard-step[data-step="${currentStep}"]`).classList.add('active');

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.add('active');



        // Update navigation buttons

        updateNavButtons();

    }

}



function wizardBack() {

    if (currentStep > 1) {

        // Remove active from current step

        document.querySelector(`.wizard-step[data-step="${currentStep}"]`).classList.remove('active');

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.remove('active');



        // Move to previous step

        currentStep--;



        // Show previous step

        document.querySelector(`.wizard-step[data-step="${currentStep}"]`).classList.add('active');

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.add('active');

        document.querySelector(`.progress-step[data-step="${currentStep}"]`).classList.remove('completed');



        // Update navigation buttons

        updateNavButtons();

    }

}



function updateNavButtons() {

    const backBtn = document.querySelector('.btn-back');

    const nextBtn = document.querySelector('.btn-next');

    const finishBtn = document.querySelector('.btn-finish');



    // Show/hide back button

    backBtn.style.display = currentStep === 1 ? 'none' : 'block';



    // Show next or finish button

    if (currentStep === totalSteps) {

        nextBtn.style.display = 'none';

        finishBtn.style.display = 'block';

    } else {

        nextBtn.style.display = 'block';

        finishBtn.style.display = 'none';

    }

}



function wizardFinish() {

    // Collect all settings

    const settings = {

        business_type: document.getElementById('business-type').value,

        protection_level: document.getElementById('protection-level').value,

        failed_logins: document.getElementById('setting-failed-logins').checked,

        email_alerts: document.getElementById('setting-email-alerts').checked,

        weekly_reports: document.getElementById('setting-weekly-reports').checked,

        ai_protection: document.getElementById('setting-ai-protection').checked

    };



    // Save settings via AJAX

    jQuery.ajax({

        url: sensfrx_ajax_object.ajax_url,

        type: 'POST',

        data: {

            action: 'sensfrx_save_wizard_settings',

            settings: settings,

            nonce: sensfrx_ajax_object.nonce

        },

        success: function(response) {

            if (response.success) {

                // Show success message

                document.getElementById('sensfrx-wizard').innerHTML = `

                    <div style="text-align: center; padding: 60px 20px;">

                        <div style="font-size: 48px; margin-bottom: 20px;">✅</div>

                        <h2 style="font-size: 28px; margin-bottom: 12px;">Setup Complete!</h2>

                        <p style="font-size: 16px; color: #6b7280; margin-bottom: 32px;">

                            Your fraud protection is now active and protecting your store.

                        </p>

                        <button onclick="location.href='admin.php?page=sensfrx-protection'"

                                class="wizard-btn btn-finish">

                            Go to Dashboard

                        </button>

                    </div>

                `;

            }

        }

    });

}



// Auto-select recommended option

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

    // Pre-select balanced protection

    document.querySelector('.protection-card[data-level="balanced"]').classList.add('selected');

    document.getElementById('protection-level').value = 'balanced';

});

</script>