<?php

/**

 * Order Review Settings - Enterprise Dashboard

 *

 * @package    SensFRX

 * @subpackage SensFRX/admin/partials

 */



// If this file is called directly, abort.

if (!defined('WPINC')) {

    die;

}



// Get current settings - use default_policy_options() as fallback

$options = get_option('sensfrx_policy_options', SensFRX::default_policy_options());



// Auto-fix: If email templates are empty, restore defaults

$defaults = SensFRX::default_policy_options();

$email_template_fields = [

    'sensfrx_allow_payment_email',

    'sensfrx_challenge_payment_email',

    'sensfrx_deny_payment_email',

    'sensfrx_allow_register_email',

    'sensfrx_challenge_register_email',

    'sensfrx_deny_register_email'

];



$needs_update = false;

foreach ($email_template_fields as $field) {

    if (empty($options[$field]) && !empty($defaults[$field])) {

        $options[$field] = $defaults[$field];

        $needs_update = true;

    }

}



// Save restored templates back to database

if ($needs_update) {

    update_option('sensfrx_policy_options', $options);

}



// Check if banner should be shown

$banner_dismissed = get_user_meta(get_current_user_id(), 'sensfrx_banner_dismissed', true);

$has_email_data = !empty($options['sensfrx_allow_payment_email']) ||

                  !empty($options['sensfrx_challenge_payment_email']) ||

                  !empty($options['sensfrx_deny_payment_email']);

$show_banner = !$banner_dismissed || !$has_email_data;



function sensfrx_render_email_editor($name1, $editor_id) {

    global $wpdb;



    // Table name

    $table_name = esc_sql( $wpdb->prefix . 'sensfrx_email_templates' );



    // Fetch email template by name1

    $template = $wpdb->get_row(

        $wpdb->prepare(

            // phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared -- Table name is sanitized with esc_sql(). WHERE value is properly prepared with %s placeholder.

            "SELECT * FROM {$table_name} WHERE name1 = %s",

            $name1

        )

    );



    // If found, use message1, otherwise empty

    $content = $template ? wp_unslash($template->message1) : '';



    $editor_settings = array(

        'textarea_name' => 'sensfrx_email_templates[' . $name1 . ']',

        'media_buttons' => false,

        'textarea_rows' => 6,

        'teeny' => true,

        'quicktags' => array('buttons' => 'strong,em,link,ul,li'),

        'tinymce' => array(

            'toolbar1' => 'bold,italic,underline,link,unlink,bullist,forecolor,removeformat',

            'toolbar2' => '',

            'height' => 150,

            'remove_linebreaks' => false,

            'convert_newlines_to_brs' => false

        )

    );



    wp_editor($content, $editor_id, $editor_settings);

}



?>



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

    <!-- Navigation Tabs -->

    <?php require_once(SENSFRX_DIR . 'admin/partials/sensfrx-navigation.php'); ?>



    <!-- Main Content -->

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

        <!-- Page Header -->

        <div class="sensfrx-order-header">

            <div>

                <h1 class="sensfrx-page-title">Email Notifications</h1>

                <p class="sensfrx-page-subtitle">Customize email messages sent to customers based on fraud risk level.</p>

            </div>

            <div>

                <!-- <button type="button" id="load-default-templates" class="sensfrx-default-btn">

                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 6px;">

                        <path d="M8 3V1L5 4l3 3V5c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4H2c0 3.31 2.69 6 6 6s6-2.69 6-6-2.69-6-6-6z" fill="currentColor"/>

                    </svg>

                    Load Default Templates

                </button> -->

            </div>

        </div>



        <?php

        // Check email configuration

        $admin_email = get_option('admin_email');

        $wc_from_email = get_option('woocommerce_email_from_address');

        $wc_from_name = get_option('woocommerce_email_from_name');

        $has_email_config = !empty($admin_email) && !empty($wc_from_email);



        if (!$has_email_config):

        ?>

        <div class="notice notice-error" style="margin: 20px 0; padding: 15px; border-left: 4px solid #dc3232;">

            <h3 style="margin-top: 0;">⚠️ Email Configuration Required</h3>

            <p>Your email settings are not fully configured. Emails may not be sent to customers.</p>

            <p><strong>Please configure:</strong></p>

            <ul>

                <li>WordPress Admin Email: <a href="<?php echo esc_url( admin_url('options-general.php') ); ?>">Settings → General</a></li>

                <li>WooCommerce Email Settings: <a href="<?php echo esc_url (admin_url('admin.php?page=wc-settings&tab=email') ); ?>">WooCommerce → Settings → Emails</a></li>

            </ul>

        </div>

        <?php else: ?>

        <div class="notice notice-success" style="margin: 20px 0; padding: 15px; border-left: 4px solid #46b450;">

            <p style="margin: 0;">

                <strong>✓ Email Configuration:</strong>

                Emails will be sent from <strong><?php echo esc_html($wc_from_name); ?></strong>

                &lt;<?php echo esc_html($wc_from_email); ?>&gt;

            </p>

        </div>

        <?php endif; ?>



        <form id="sensfrx-order-review-form" method="post" action="options.php">

            <?php settings_fields('sensfrx_plugin_policy_options'); ?>



            <!-- How It Works Section -->

            <?php if ($show_banner): ?>

            <div class="sensfrx-info-banner" id="sensfrx-info-banner">

                <div class="sensfrx-info-icon">

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

                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>

                        <path d="M12 16v-4m0-4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

                    </svg>

                </div>

                <div class="sensfrx-info-content">

                    <h3 class="sensfrx-info-title">How It Works</h3>

                    <p class="sensfrx-info-text">

                        We automatically scan every order and assign a risk score. <strong>Low risk orders go through automatically.</strong>

                        Medium risk orders wait for your review. High risk orders are blocked. You can customize email messages for each scenario below.

                    </p>

                </div>

                <button type="button" class="sensfrx-banner-close" id="sensfrx-close-banner" title="Dismiss">

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

                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" fill="currentColor"/>

                    </svg>

                </button>

            </div>

            <?php endif; ?>



            <!-- Available Variables Section -->

            <!-- <div class="sensfrx-info-banner" style="background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border-left: 4px solid #3B82F6; margin: 20px 0;">

                <div class="sensfrx-info-icon" style="color: #3B82F6;">

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

                        <path d="M7 8h10M7 12h10M7 16h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

                        <path d="M3 4h18v16H3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>

                    </svg>

                </div>

                <div class="sensfrx-info-content">

                    <h3 class="sensfrx-info-title" style="color: #1E40AF;">Available Variables</h3>

                    <p class="sensfrx-info-text" style="color: #1E3A8A;">

                        Use these dynamic variables in your email templates. They will be automatically replaced with actual data when emails are sent:

                    </p>

                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;">

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{customer_name}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Customer's name</span>

                        </div>

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{store_name}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Your store name</span>

                        </div>

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{order_id}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Order number</span>

                        </div>

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{support_email}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Support email</span>

                        </div>

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{customer_email}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Customer's email</span>

                        </div>

                        <div style="background: white; padding: 8px 12px; border-radius: 6px; border: 1px solid #BFDBFE;">

                            <code style="color: #3B82F6; font-weight: 600;">{order_total}</code>

                            <span style="font-size: 12px; color: #6B7280; margin-left: 8px;">Order amount</span>

                        </div>

                    </div>

                </div>

            </div> -->



            <!-- Attempt Risk Levels Section -->

            <div class="sensfrx-section">

                <h2 class="sensfrx-section-title">Attempt Order: What Happens to Each Order?</h2>

                <p class="sensfrx-section-subtitle">Configure how orders are handled based on their fraud risk level</p>



                <div class="sensfrx-risk-grid">



                    <!-- Low Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-low">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-low">

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

                                    <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Medium Risk</h3>

                                <p class="sensfrx-risk-description">Orders automatically approved</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible">

                                <p class="sensfrx-preview">Safe orders are processed immediately...</p>

                                <p class="sensfrx-full-content">These orders look safe and will be <strong>processed immediately</strong> without any delays. Your customer gets a smooth checkout experience.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Send a confirmation when order is approved</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_medium_severity_Mail_Send 123',

                                    'sensfrx_allow_payment_email'

                                );



                                ?>

                            </div>

                        </div>

                    </div>



                    <!-- Medium Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-medium">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-medium">

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

                                    <path d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">High Risk</h3>

                                <p class="sensfrx-risk-description">Needs your manual review</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">Orders with warning signs need your review...</p>

                                <p class="sensfrx-full-content">These orders show some warning signs. They'll appear in your <strong>Fraud Review tab</strong> where you can approve or block them manually.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">What customers see while order is being reviewed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_challenge_severity_Mail_Send 123',

                                    'sensfrx_challenge_payment_email'

                                );

                                ?>

                            </div>



                            <!-- <div class="sensfrx-checkbox-wrapper">

                                <label class="sensfrx-checkbox-label">

                                    <input

                                        type="checkbox"

                                        name="sensfrx_policy_options[hold_medium_risk]"

                                        value="1"

                                        <?php checked(isset($options['hold_medium_risk']) ? $options['hold_medium_risk'] : 1, 1); ?>

                                        class="sensfrx-checkbox-input"

                                    />

                                    <span class="sensfrx-checkbox-text">

                                        <strong>Put medium risk orders on hold</strong> until I review them

                                    </span>

                                </label>

                            </div> -->

                        </div>

                    </div>



                    <!-- High Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-high">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-high">

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

                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Critical Risk</h3>

                                <p class="sensfrx-risk-description">Automatically blocked</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">Fraudulent orders are blocked to protect your business...</p>

                                <p class="sensfrx-full-content">These orders show clear fraud patterns and are <strong>blocked immediately</strong> to protect your business. The customer is notified professionally.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Message shown when an order cannot be processed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_deny_severity_Mail_Send',

                                    'sensfrx_deny_payment_email'

                                );

                                ?>

                            </div>

                        </div>

                    </div>



                </div>

            </div>



            <!-- Succeeded Risk Levels Section -->

            <div class="sensfrx-section">

                <h2 class="sensfrx-section-title">Completed Order: What Happens to Each Order?</h2>

                <p class="sensfrx-section-subtitle">Configure how orders are handled based on their fraud risk level</p>



                <div class="sensfrx-risk-grid">



                    <!-- Low Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-low">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-low">

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

                                    <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Medium Risk</h3>

                                <p class="sensfrx-risk-description">Orders automatically approved</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible">

                                <p class="sensfrx-preview">Safe orders are processed immediately...</p>

                                <p class="sensfrx-full-content">These orders look safe and will be <strong>processed immediately</strong> without any delays. Your customer gets a smooth checkout experience.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Send a confirmation when order is approved</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_medium_severity_Mail_Send_succeeded 123',

                                    'sensfrx_allow_payment_succeeded_email'

                                );



                                ?>

                            </div>

                        </div>

                    </div>



                    <!-- Medium Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-medium">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-medium">

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

                                    <path d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">High Risk</h3>

                                <p class="sensfrx-risk-description">Needs your manual review</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">Orders with warning signs need your review...</p>

                                <p class="sensfrx-full-content">These orders show some warning signs. They'll appear in your <strong>Fraud Review tab</strong> where you can approve or block them manually.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">What customers see while order is being reviewed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_challenge_severity_Mail_Send_succeeded 123',

                                    'sensfrx_challenge_payment_succeeded_email'

                                );

                                ?>

                            </div>



                            <!-- <div class="sensfrx-checkbox-wrapper">

                                <label class="sensfrx-checkbox-label">

                                    <input

                                        type="checkbox"

                                        name="sensfrx_policy_options[hold_medium_risk]"

                                        value="1"

                                        <?php checked(isset($options['hold_medium_risk']) ? $options['hold_medium_risk'] : 1, 1); ?>

                                        class="sensfrx-checkbox-input"

                                    />

                                    <span class="sensfrx-checkbox-text">

                                        <strong>Put medium risk orders on hold</strong> until I review them

                                    </span>

                                </label>

                            </div> -->

                        </div>

                    </div>



                    <!-- High Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-high">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-high">

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

                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Critical Risk</h3>

                                <p class="sensfrx-risk-description">Automatically blocked</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">Fraudulent orders are blocked to protect your business...</p>

                                <p class="sensfrx-full-content">These orders show clear fraud patterns and are <strong>blocked immediately</strong> to protect your business. The customer is notified professionally.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Message shown when an order cannot be processed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'Trans_deny_severity_Mail_Send_succeeded',

                                    'sensfrx_deny_payment_succeeded_email'

                                );

                                ?>

                            </div>

                        </div>

                    </div>



                </div>

            </div>



            <!-- Customer Registration Section -->

            <div class="sensfrx-section">

                <h2 class="sensfrx-section-title">Customer Registration</h2>

                <p class="sensfrx-section-subtitle">Email messages for new customer signups</p>

                <div class="sensfrx-two-column-grid">

                    <div class="sensfrx-settings-card">

                        <h3 class="sensfrx-card-heading">When Registration is Approved</h3>

                        <div class="sensfrx-field-group">

                            <label class="sensfrx-field-label">

                                <span class="sensfrx-label-text">Welcome Email <span class="sensfrx-optional">(Optional)</span></span>

                            </label>

                            <?php

                            sensfrx_render_email_editor(

                                'Registration Medium',

                                'sensfrx_allow_register_email'

                            );

                            ?>

                        </div>

                    </div>



                    <div class="sensfrx-settings-card">

                        <h3 class="sensfrx-card-heading">When Registration Needs Review</h3>

                        <div class="sensfrx-field-group">

                            <label class="sensfrx-field-label">

                                <span class="sensfrx-label-text">Verification Email <span class="sensfrx-optional">(Optional)</span></span>

                            </label>

                            <?php

                            sensfrx_render_email_editor(

                                'Registration Challenge',

                                'sensfrx_challenge_register_email'

                            );

                            ?>

                        </div>

                    </div>



                    <div class="sensfrx-settings-card">

                        <h3 class="sensfrx-card-heading">When Registration is Blocked</h3>

                        <div class="sensfrx-field-group">

                            <label class="sensfrx-field-label">

                                <span class="sensfrx-label-text">Blocked Email <span class="sensfrx-optional">(Optional)</span></span>

                            </label>

                            <?php

                            sensfrx_render_email_editor(

                                'Registration Deny',

                                'sensfrx_deny_register_email'

                            );

                            ?>

                        </div>

                    </div>



                    <!-- <div class="sensfrx-settings-card">

                        <h3 class="sensfrx-card-heading">Advanced Options</h3>



                        <div class="sensfrx-field-group" style="margin-bottom: 20px;">

                            <label class="sensfrx-field-label">

                                <span class="sensfrx-label-text">Webhook URL <span class="sensfrx-optional">(Optional)</span></span>

                                <span class="sensfrx-label-help">Get instant notifications about order reviews</span>

                            </label>

                            <input

                                type="url"

                                name="sensfrx_policy_options[sensfrx_webhook_allow]"

                                value="<?php echo esc_attr(isset($options['sensfrx_webhook_allow']) ? $options['sensfrx_webhook_allow'] : ''); ?>"

                                class="sensfrx-field-input"

                                placeholder="https://yoursite.com/webhook"

                            />

                        </div>



                        <div class="sensfrx-field-group">

                            <label class="sensfrx-field-label">

                                <span class="sensfrx-label-text">Trusted Customer Emails <span class="sensfrx-optional">(Optional)</span></span>

                                <span class="sensfrx-label-help">One email per line - these customers skip fraud checks</span>

                            </label>

                            <textarea

                                name="sensfrx_policy_options[sensfrx_whitle_list_email]"

                                rows="3"

                                class="sensfrx-field-textarea"

                                placeholder="john@example.com&#10;jane@example.com"

                            ><?php echo esc_textarea(isset($options['sensfrx_whitle_list_email']) ? $options['sensfrx_whitle_list_email'] : ''); ?></textarea>

                        </div>

                    </div> -->

                </div>

            </div>



            <!-- Account Security -->

            <div class="sensfrx-section">

                <h2 class="sensfrx-section-title">What Happens to Each Login?</h2>

                <p class="sensfrx-section-subtitle">Configure how login attempt are handled based on their fraud risk level</p>



                <div class="sensfrx-risk-grid">



                    <!-- Low Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-low">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-low">

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

                                    <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Medium Risk</h3>

                                <p class="sensfrx-risk-description">Login automatically approved</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible">

                                <p class="sensfrx-preview">Safe login are processed immediately...</p>

                                <p class="sensfrx-full-content">These login look safe and will be <strong>processed immediately</strong> without any delays. Your customer gets a smooth login experience.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Send a confirmation when login is approved</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'SensFRX client login login ogin 123',

                                    'sensfrx_allow_ato_email'

                                );



                                ?>

                            </div>

                        </div>

                    </div>



                    <!-- Medium Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-medium">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-medium">

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

                                    <path d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">High Risk</h3>

                                <p class="sensfrx-risk-description">Login automatically approved</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">login with warning signs need your review...</p>

                                <p class="sensfrx-full-content">These login show some warning signs. They'll appear in your <strong>Fraud Review tab</strong> where you can approve or block them manually.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">What customers see while login is being reviewed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'SensFRX - Suspicious Behavior tyy 123',

                                    'sensfrx_challenge_ato_email'

                                );

                                ?>

                            </div>



                            <!-- <div class="sensfrx-checkbox-wrapper">

                                <label class="sensfrx-checkbox-label">

                                    <input

                                        type="checkbox"

                                        name="sensfrx_policy_options[hold_medium_risk]"

                                        value="1"

                                        <?php checked(isset($options['hold_medium_risk']) ? $options['hold_medium_risk'] : 1, 1); ?>

                                        class="sensfrx-checkbox-input"

                                    />

                                    <span class="sensfrx-checkbox-text">

                                        <strong>Put medium risk orders on hold</strong> until I review them

                                    </span>

                                </label>

                            </div> -->

                        </div>

                    </div>



                    <!-- High Risk -->

                    <div class="sensfrx-risk-panel sensfrx-risk-high">

                        <div class="sensfrx-risk-header">

                            <div class="sensfrx-risk-badge sensfrx-badge-high">

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

                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill="currentColor"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-risk-title">Critical Risk</h3>

                                <p class="sensfrx-risk-description">Automatically blocked</p>

                            </div>

                        </div>



                        <div class="sensfrx-risk-body">

                            <div class="sensfrx-risk-explanation sensfrx-collapsible collapsed">

                                <p class="sensfrx-preview">Fraudulent login are blocked to protect your business...</p>

                                <p class="sensfrx-full-content">These login show clear fraud patterns and are <strong>blocked immediately</strong> to protect your business. The customer is notified professionally.</p>

                                <button type="button" class="sensfrx-toggle-btn" onclick="this.parentElement.classList.toggle('collapsed')">

                                    <span class="show-more">See more</span>

                                    <span class="show-less">See less</span>

                                </button>

                            </div>



                            <div class="sensfrx-field-group">

                                <label class="sensfrx-field-label">

                                    <span class="sensfrx-label-text">Customer Email Message <span class="sensfrx-optional">(Optional)</span></span>

                                    <span class="sensfrx-label-help">Message shown when an login cannot be processed</span>

                                </label>

                                <?php

                                sensfrx_render_email_editor(

                                    'SensFRX reset password uuu',

                                    'sensfrx_deny_ato_email'

                                );

                                ?>

                            </div>

                        </div>

                    </div>



                </div>

            </div>



            <!-- Email Activity Log Section -->

            <div class="sensfrx-section">

                <h2 class="sensfrx-section-title">Recent Email Activity</h2>

                <p class="sensfrx-section-subtitle">Track emails sent to your customers</p>



                <?php

                global $wpdb;

                $activity_table = $wpdb->prefix . 'sensfrx_real_activity';

                $safe_table_name = esc_sql( $activity_table );



                // Check if table exists

                if ($wpdb->get_var($wpdb->prepare("SHOW TABLES LIKE %s", $safe_table_name)) == $safe_table_name) {

                    // Query for email-specific logs

                    // Table names cannot be parameterized. We use esc_sql for safety and 

                    // the ignore comment to satisfy the linter after manual verification.

                    $recent_emails = $wpdb->get_results(

                        $wpdb->prepare(

                            "SELECT * FROM `{$safe_table_name}` WHERE sensfrx_log_type LIKE %s ORDER BY created_at DESC LIMIT %d", // phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared

                            'Email:%',

                            20

                        ),

                        ARRAY_A

                    );



                    if (!empty($recent_emails)):

                    ?>

                    <table class="wp-list-table widefat fixed striped" style="border: 1px solid #e5e7eb; border-radius: 8px;">

                        <thead>

                            <tr>

                                <th style="padding: 12px; width: 180px;">Date/Time</th>

                                <th style="padding: 12px; width: 120px;">Order ID</th>

                                <th style="padding: 12px; width: 200px;">Customer Email</th>

                                <th style="padding: 12px;">Email Type</th>

                                <th style="padding: 12px;">Subject</th>

                                <th style="padding: 12px; width: 100px;">Status</th>

                            </tr>

                        </thead>

                        <tbody>

                            <?php foreach ($recent_emails as $email):

                                // Extract details from log message

                                preg_match('/Order #(\d+)/', $email['sensfrx_log1'], $order_matches);

                                $order_id = !empty($order_matches[1]) ? $order_matches[1] : '-';



                                preg_match('/Customer: ([^\|]+)/', $email['sensfrx_log1'], $customer_matches);

                                $customer_email = !empty($customer_matches[1]) ? trim($customer_matches[1]) : '-';



                                preg_match('/Subject: ([^\|]+)/', $email['sensfrx_log1'], $subject_matches);

                                $subject = !empty($subject_matches[1]) ? trim($subject_matches[1]) : '-';



                                preg_match('/Status: (.+)/', $email['sensfrx_log1'], $status_matches);

                                $status = !empty($status_matches[1]) ? trim($status_matches[1]) : 'Sent';



                                // Determine color based on email type

                                $email_type = str_replace('Email: ', '', $email['sensfrx_log_type']);

                                $badge_color = '#46b450'; // Green default

                                if (strpos($email_type, 'Medium Risk') !== false) {

                                    $badge_color = '#f59e0b'; // Orange for medium risk

                                } elseif (strpos($email_type, 'High Risk') !== false || strpos($email_type, 'Blocked') !== false) {

                                    $badge_color = '#ef4444'; // Red for high risk/blocked

                                }

                            ?>

                            <tr>

                                <td style="padding: 12px; white-space: nowrap; font-size: 13px;">

                                    <?php echo esc_html(date('M d, Y H:i', strtotime($email['created_at']))); ?>

                                </td>

                                <td style="padding: 12px;">

                                    <?php if ($order_id !== '-'): ?>

                                        <a href="<?php echo esc_url( admin_url('post.php?post=' . $order_id . '&action=edit') ); ?>" style="color: #0254ff; text-decoration: none; font-weight: 600;">

                                            #<?php echo esc_html($order_id); ?>

                                        </a>

                                    <?php else: ?>

                                        <span style="color: #9ca3af;">-</span>

                                    <?php endif; ?>

                                </td>

                                <td style="padding: 12px; font-size: 13px;">

                                    <?php echo esc_html($customer_email); ?>

                                </td>

                                <td style="padding: 12px;">

                                    <span style="display: inline-block; padding: 4px 10px; border-radius: 6px; background: <?php echo esc_html( $badge_color ); ?>; color: white; font-size: 12px; font-weight: 600;">

                                        <?php echo esc_html($email_type); ?>

                                    </span>

                                </td>

                                <td style="padding: 12px; font-size: 13px; color: #6b7280;">

                                    <?php echo esc_html($subject); ?>

                                </td>

                                <td style="padding: 12px;">

                                    <span style="display: inline-block; padding: 4px 10px; border-radius: 6px; background: #10b981; color: white; font-size: 11px; font-weight: 600;">

                                        ✓ <?php echo esc_html($status); ?>

                                    </span>

                                </td>

                            </tr>

                            <?php endforeach; ?>

                        </tbody>

                    </table>

                    <?php else: ?>

                    <div style="padding: 40px; text-align: center; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;">

                        <p style="color: #6b7280; margin: 0;">No email activity recorded yet. Emails will appear here once sent to customers.</p>

                    </div>

                    <?php endif;

                } else {

                    echo '<div style="padding: 20px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px;">';

                    echo '<p style="margin: 0;"><strong>Note:</strong> Email activity logging will be available once the plugin processes transactions.</p>';

                    echo '</div>';

                }

                ?>

            </div>



            <!-- Save Actions -->

            <div class="sensfrx-save-section">

                <div class="sensfrx-save-inner">

                    <div class="sensfrx-save-info sensfrx-highlight">

                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="opacity: 0.6;">

                            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9V6h2v3h3v2h-3v3H9v-3H6V9h3z" fill="currentColor"/>

                        </svg>

                        <span>Changes are saved automatically</span>

                    </div>

                    <!-- <div class="sensfrx-save-actions">

                        <?php submit_button('Save Changes', 'primary sensfrx-save-btn', 'submit', false); ?>

                        <button type="button" onclick="location.reload()" class="sensfrx-cancel-btn">Reset</button>

                    </div> -->

                </div>

            </div>



        </form>

    </div>

</div>



<style>

    /* Page Header */

    

    .sensfrx-order-header {

        margin-bottom: 40px;

        padding-bottom: 24px;

        border-bottom: 2px solid #f3f4f6;

        display: flex;

        justify-content: space-between;

        align-items: flex-start;

    }



    .sensfrx-default-btn {

        display: flex;

        align-items: center;

        padding: 10px 18px;

        background: #fff;

        border: 2px solid #0254ff;

        color: #0254ff;

        border-radius: 8px;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.2s ease;

    }



    .sensfrx-default-btn:hover {

        background: #0254ff;

        color: white;

    }



    .sensfrx-default-btn svg {

        transition: transform 0.3s ease;

    }



    .sensfrx-default-btn:hover svg {

        transform: rotate(180deg);

    }



    .sensfrx-page-title {

        margin: 0 0 8px 0;

        font-size: 32px;

        font-weight: 700;

        color: #111827;

        letter-spacing: -0.02em;

    }



    .sensfrx-page-subtitle {

        margin: 0;

        font-size: 16px;

        color: #6b7280;

        line-height: 1.6;

    }



    /* Info Banner */

    .sensfrx-info-banner {

        display: flex;

        gap: 20px;

        padding: 24px;

        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

        border-radius: 12px;

        border: 1px solid #bfdbfe;

        margin-bottom: 48px;

        position: relative;

    }



    .sensfrx-info-icon {

        flex-shrink: 0;

        width: 48px;

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: white;

        border-radius: 12px;

        color: #2563eb;

    }



    .sensfrx-info-content {

        flex: 1;

    }



    .sensfrx-info-title {

        margin: 0 0 8px 0;

        font-size: 18px;

        font-weight: 600;

        color: #1e40af;

    }



    .sensfrx-info-text {

        margin: 0;

        font-size: 15px;

        line-height: 1.7;

        color: #1e40af;

    }



    .sensfrx-banner-close {

        position: absolute;

        top: 16px;

        right: 16px;

        background: white;

        border: none;

        width: 32px;

        height: 32px;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        color: #6b7280;

        transition: all 0.2s ease;

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    }



    .sensfrx-banner-close:hover {

        background: #f3f4f6;

        color: #111827;

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

    }



    /* Section Styling */

    .sensfrx-section {

        margin-bottom: 56px;

    }



    .sensfrx-section-title {

        margin: 0 0 8px 0;

        font-size: 24px;

        font-weight: 700;

        color: #111827;

    }



    .sensfrx-section-subtitle {

        margin: 0 0 32px 0;

        font-size: 15px;

        color: #6b7280;

        line-height: 1.5;

    }



    /* Risk Grid */

    .sensfrx-risk-grid {

        display: grid;

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

        gap: 24px;

    }



    /* Risk Panels */

    .sensfrx-risk-panel {

        background: white;

        border-radius: 16px;

        overflow: hidden;

        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

        transition: all 0.3s ease;

    }



    .sensfrx-risk-panel:hover {

        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

        transform: translateY(-2px);

    }



    .sensfrx-risk-low {

        border-top: 4px solid #10b981;

    }



    .sensfrx-risk-medium {

        border-top: 4px solid #f59e0b;

    }



    .sensfrx-risk-high {

        border-top: 4px solid #ef4444;

    }



    .sensfrx-risk-header {

        display: flex;

        align-items: center;

        gap: 16px;

        padding: 24px 24px 20px 24px;

        background: #fafafa;

    }



    .sensfrx-risk-badge {

        width: 56px;

        height: 56px;

        border-radius: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

    }



    .sensfrx-badge-low {

        background: #10b981;

        color: white;

    }



    .sensfrx-badge-medium {

        background: #f59e0b;

        color: white;

    }



    .sensfrx-badge-high {

        background: #ef4444;

        color: white;

    }



    .sensfrx-risk-title {

        margin: 0 0 4px 0;

        font-size: 20px;

        font-weight: 700;

        color: #111827;

    }



    .sensfrx-risk-description {

        margin: 0;

        font-size: 14px;

        color: #6b7280;

        font-weight: 500;

    }



    .sensfrx-risk-body {

        padding: 24px;

    }



    .sensfrx-risk-explanation {

        padding: 16px;

        background: #f9fafb;

        border-radius: 10px;

        margin-bottom: 24px;

        border-left: 3px solid #e5e7eb;

        position: relative;

    }



    .sensfrx-risk-explanation p {

        margin: 0;

        font-size: 14px;

        line-height: 1.7;

        color: #374151;

    }



    /* Collapsible functionality */

    .sensfrx-collapsible {

        transition: all 0.3s ease;

    }



    /* Preview text - shown when collapsed */

    .sensfrx-preview {

        margin: 0 0 8px 0;

        font-size: 14px;

        line-height: 1.7;

        color: #374151;

        display: none;

    }



    .sensfrx-collapsible.collapsed .sensfrx-preview {

        display: block;

    }



    /* Full content - shown when expanded */

    .sensfrx-full-content {

        margin: 0;

        font-size: 14px;

        line-height: 1.7;

        color: #374151;

        display: block;

    }



    .sensfrx-collapsible.collapsed .sensfrx-full-content {

        display: none;

    }



    .sensfrx-collapsible.collapsed {

        padding: 8px 16px;

        margin-bottom: 16px;

    }



    .sensfrx-toggle-btn {

        background: none;

        border: none;

        color: #2563eb;

        font-size: 13px;

        font-weight: 600;

        cursor: pointer;

        padding: 8px 0 0 0;

        display: block;

        text-decoration: underline;

        transition: color 0.2s;

    }



    .sensfrx-toggle-btn:hover {

        color: #1d4ed8;

    }



    .sensfrx-collapsible .show-less {

        display: inline;

    }



    .sensfrx-collapsible .show-more {

        display: none;

    }



    .sensfrx-collapsible.collapsed .show-less {

        display: none;

    }



    .sensfrx-collapsible.collapsed .show-more {

        display: inline;

    }



    /* Form Fields */

    .sensfrx-field-group {

        margin-bottom: 0;

    }



    .sensfrx-field-label {

        display: block;

        margin-bottom: 10px;

    }



    .sensfrx-label-text {

        display: block;

        font-size: 14px;

        font-weight: 600;

        color: #111827;

        margin-bottom: 4px;

    }



    .sensfrx-optional {

        font-weight: 400;

        color: #9ca3af;

        font-size: 13px;

    }



    .sensfrx-label-help {

        display: block;

        font-size: 13px;

        color: #6b7280;

        font-weight: 400;

        line-height: 1.5;

    }



    .sensfrx-field-input,

    .sensfrx-field-textarea {

        width: 100%;

        padding: 12px 16px;

        border: 2px solid #e5e7eb;

        border-radius: 10px;

        font-size: 14px;

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

        line-height: 1.6;

        color: #111827;

        transition: all 0.2s ease;

        background: white;

    }



    .sensfrx-field-textarea {

        resize: vertical;

        min-height: 100px;

    }



    .sensfrx-field-input:focus,

    .sensfrx-field-textarea:focus {

        outline: none;

        border-color: #3b82f6;

        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

    }



    .sensfrx-field-input::placeholder,

    .sensfrx-field-textarea::placeholder {

        color: #9ca3af;

    }



    /* Checkbox */

    .sensfrx-checkbox-wrapper {

        margin-top: 20px;

    }



    .sensfrx-checkbox-label {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        padding: 16px;

        background: #fef3c7;

        border-radius: 10px;

        cursor: pointer;

        border: 2px solid transparent;

        transition: all 0.2s ease;

    }



    .sensfrx-checkbox-label:hover {

        background: #fde68a;

        border-color: #f59e0b;

    }



    .sensfrx-checkbox-input {

        width: 20px;

        height: 20px;

        margin-top: 2px;

        cursor: pointer;

        flex-shrink: 0;

        accent-color: #f59e0b;

    }



    .sensfrx-checkbox-text {

        font-size: 14px;

        line-height: 1.6;

        color: #92400e;

    }



    /* Two Column Grid */

    .sensfrx-two-column-grid {

        display: grid;

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

        gap: 24px;

    }



    .sensfrx-settings-card {

        background: white;

        padding: 28px;

        border-radius: 12px;

        border: 1px solid #e5e7eb;

    }



    .sensfrx-card-heading {

        margin: 0 0 20px 0;

        font-size: 17px;

        font-weight: 600;

        color: #111827;

        padding-bottom: 12px;

        border-bottom: 2px solid #f3f4f6;

    }



    /* Save Section */

    .sensfrx-save-section {

        position: sticky;

        bottom: 0;

        margin: 48px -32px -32px -32px;

        padding: 20px 32px;

        background: white;

        border-top: 1px solid #e5e7eb;

        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);

        z-index: 10;

    }



    .sensfrx-save-inner {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 24px;

        max-width: 100%;

    }



    .sensfrx-save-info {

        display: flex;

        align-items: center;

        gap: 10px;

        color: #6b7280;

        font-size: 14px;

        flex: 1;

    }



    .sensfrx-save-info svg {

        flex-shrink: 0;

    }



    .sensfrx-save-actions {

        display: flex;

        gap: 12px;

        align-items: center;

    }



    .sensfrx-save-btn {

        padding: 12px 28px !important;

        font-size: 15px !important;

        font-weight: 600 !important;

        background: #047857 !important;

        border: none !important;

        border-radius: 8px !important;

        cursor: pointer !important;

        transition: all 0.2s ease !important;

        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

        white-space: nowrap !important;

    }



    .sensfrx-save-btn:hover {

        background: #065f46 !important;

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

        transform: translateY(-1px);

    }



    .sensfrx-cancel-btn {

        padding: 12px 24px;

        font-size: 14px;

        font-weight: 500;

        background: white;

        color: #6b7280;

        border: 1px solid #d1d5db;

        border-radius: 8px;

        cursor: pointer;

        transition: all 0.2s ease;

        white-space: nowrap;

    }



    .sensfrx-cancel-btn:hover {

        background: #f9fafb;

        color: #374151;

        border-color: #9ca3af;

    }



    /* Responsive */

    @media (max-width: 1200px) {

        .sensfrx-risk-grid {

            grid-template-columns: 1fr;

        }



        .sensfrx-two-column-grid {

            grid-template-columns: 1fr;

        }

    }



    @media (max-width: 768px) {

        .sensfrx-page-title {

            font-size: 24px;

        }



        .sensfrx-section-title {

            font-size: 20px;

        }



        .sensfrx-info-banner {

            flex-direction: column;

        }



        .sensfrx-save-inner {

            flex-direction: column;

            align-items: stretch;

            gap: 16px;

        }



        .sensfrx-save-info {

            order: 2;

            justify-content: center;

            font-size: 13px;

        }



        .sensfrx-save-actions {

            order: 1;

            flex-direction: column-reverse;

            width: 100%;

        }



        .sensfrx-save-btn,

        .sensfrx-cancel-btn {

            width: 100% !important;

            text-align: center;

        }

    }



    /* Email Editor Styling */

    .sensfrx-field-textarea {

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    }



    .mce-tinymce {

        border: 1px solid #e5e7eb !important;

        border-radius: 8px !important;

        overflow: hidden !important;

    }



    .mce-panel {

        background: #f9fafb !important;

        border-color: #e5e7eb !important;

    }



    .sensfrx-save-info.sensfrx-highlight {

        display: flex;

        align-items: center;

        gap: 8px;

        background: rgba(0, 200, 0, 0.08);

        color: #0E8A16; 

        padding: 10px 14px;

        border-left: 4px solid #0E8A16;

        border-radius: 6px;

        font-weight: 600;

        margin-top: 10px;

    }



    .sensfrx-save-info.sensfrx-highlight svg {

        color: #0E8A16;

        opacity: 0.9;

    }



</style>



<script>

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

        const restUrl = '<?php echo esc_url(rest_url('sensfrx-fraud-prevention-for-woocommerce/')); ?>';

        // Auto-save indicator

        let saveTimeout;

        $('#sensfrx-order-review-form :input').on('change keyup', function() {

            clearTimeout(saveTimeout);

            const $info = $('.sensfrx-save-info span');

            $info.text('Unsaved changes...');



            saveTimeout = setTimeout(function() {

                $info.text('Changes are saved automatically');

            }, 2000);

        });



        fetch(restUrl + 'get_sensfrx_review_count', {

            method: 'GET',

            headers: {

                'Content-Type': 'application/json'

            }

        })

        .then(response => response.json())

        .then(data => {

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

                const badge = document.querySelector('.sensfrx-nav-badge');

                if (badge) {

                    badge.textContent = data.reviewCount || 0;

                }

            }

        })

        .catch(error => console.error('Error fetching review count:', error));





        setTimeout(() => {



            const iframeMap = {

                '#sensfrx_challenge_payment_email_ifr': 'trans_challenge_before',

                '#sensfrx_allow_payment_email_ifr': 'trans_medium_before',

                '#sensfrx_deny_payment_email_ifr': 'trans_deny_before',

                '#sensfrx_challenge_payment_succeeded_email_ifr': 'trans_challenge_after',

                '#sensfrx_allow_payment_succeeded_email_ifr': 'trans_medium_after',

                '#sensfrx_deny_payment_succeeded_email_ifr': 'trans_deny_after',

                '#sensfrx_allow_ato_email_ifr': 'medium',

                '#sensfrx_challenge_ato_email_ifr': 'challenge',

                '#sensfrx_deny_ato_email_ifr': 'deny',

                '#sensfrx_allow_register_email_ifr': 'reg_medium',

                '#sensfrx_challenge_register_email_ifr': 'reg_challenge',

                '#sensfrx_deny_register_email_ifr': 'reg_deny',

            };



            Object.keys(iframeMap).forEach((selector) => {

                const iframe = $(selector);

                let typingTimer;



                iframe.contents().find('body[data-id]').on('keyup input paste', function () {

                    const editorId = $(this).data('id');



                    clearTimeout(typingTimer); // reset debounce timer



                    typingTimer = setTimeout(() => {



                        const plainText = tinymce.get(editorId).getContent({ format: "text" });



                        $.ajax({

                            url: restUrl + 'save_email_modify',

                            method: 'POST',

                            data: JSON.stringify({

                                type: iframeMap[selector],  // <-- custom email type

                                message: plainText,

                                is_test_email: false,

                            }),

                            contentType: 'application/json',

                            success: function(response) {

                            },

                            error: function() {

                                alert('Failed to update email for ' + selector);

                            }

                        });



                    }, 2000); // 2 sec debounce

                });

            });



        }, 1000);







        // Banner close functionality

        $('#sensfrx-close-banner').on('click', function() {

            const $banner = $('#sensfrx-info-banner');



            // Fade out the banner

            $banner.fadeOut(300, function() {

                $(this).remove();

            });



            // Save dismissal state via AJAX

            $.ajax({

                url: ajaxurl,

                type: 'POST',

                data: {

                    action: 'sensfrx_dismiss_banner',

                    nonce: '<?php echo esc_js( wp_create_nonce('sensfrx_banner_nonce') ); ?>'

                }

            });

        });



    });

</script>

