<?php
/**
 * BoostBot Visual Audit Template (admin-only)
 *
 * Side-by-side comparison of Preview vs Live rendering.
 * Used when visiting any page with `?boostbot_visual_audit=1` (guarded below).
 *
 * Left column: Admin Preview (via iframe to wp-admin)
 * Right column: Live Widget (via iframe to showcase mode)
 *
 * @since 1.6.0
 */
// phpcs:ignoreFile WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template-scope variables set by the includer, not true globals.
defined( 'ABSPATH' ) || exit;

// Hard block for non-editors
if ( ! is_user_logged_in() || ! current_user_can( 'edit_posts' ) ) {
    status_header( 404 );
    nocache_headers();
    exit;
}

nocache_headers();

// Get which widget to show (default: leadform)
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Gated by is_user_logged_in() && current_user_can('edit_posts') above; exits with 404 otherwise.
$widget = isset( $_GET['widget'] ) ? sanitize_key( wp_unslash( $_GET['widget'] ) ) : 'leadform';

// Build URLs for iframes
$current_url = home_url( add_query_arg( array() ) );
$base_url = home_url( '/' );

// Preview URL - loads admin preview endpoint
$preview_url = admin_url( 'admin.php?page=boostbot-preview-only&widget=' . $widget );

// Live URL - loads showcase mode with specific widget
$live_url = add_query_arg( array(
    'boostbot_showcase' => '1',
    'widget' => $widget,
), $base_url );
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><?php echo esc_html__( 'BoostBot Visual Audit - Preview vs Live', 'boostbot' ); ?></title>
    <?php
    wp_enqueue_style( 'boostbot-visual-audit', plugins_url( 'assets/css/boostbot-visual-audit.css', BOOSTBOT_PLUGIN_FILE ), array(), BOOSTBOT_VERSION );
    wp_enqueue_script( 'boostbot-visual-audit', plugins_url( 'assets/js/boostbot-visual-audit.js', BOOSTBOT_PLUGIN_FILE ), array(), BOOSTBOT_VERSION, true );
    ?>
</head>
<body>
    <div class="audit-container">
        <header class="audit-header">
            <h1><?php echo esc_html__( 'BoostBot Visual Audit - Preview vs Live', 'boostbot' ); ?></h1>
            <div class="widget-selector">
                <label for="widget-select">Widget:</label>
                <select id="widget-select" onchange="changeWidget(this.value)">
                    <option value="leadform" <?php selected( $widget, 'leadform' ); ?>><?php esc_html_e( 'Lead Form', 'boostbot' ); ?></option>
                    <option value="calendar" <?php selected( $widget, 'calendar' ); ?>><?php esc_html_e( 'Calendar', 'boostbot' ); ?></option>
                    <option value="gallery" <?php selected( $widget, 'gallery' ); ?>><?php esc_html_e( 'Gallery', 'boostbot' ); ?></option>
                    <option value="youtube" <?php selected( $widget, 'youtube' ); ?>><?php esc_html_e( 'YouTube', 'boostbot' ); ?></option>
                    <option value="productcard" <?php selected( $widget, 'productcard' ); ?>><?php esc_html_e( 'Product Card', 'boostbot' ); ?></option>
                    <option value="survey" <?php selected( $widget, 'survey' ); ?>><?php esc_html_e( 'Survey', 'boostbot' ); ?></option>
                    <option value="contactcard" <?php selected( $widget, 'contactcard' ); ?>><?php esc_html_e( 'Contact Card', 'boostbot' ); ?></option>
                    <option value="whatsapp" <?php selected( $widget, 'whatsapp' ); ?>><?php esc_html_e( 'WhatsApp', 'boostbot' ); ?></option>
                    <option value="chat" <?php selected( $widget, 'chat' ); ?>><?php esc_html_e( 'Full Chat Window', 'boostbot' ); ?></option>
                </select>
            </div>
            <div class="info">
                <?php esc_html_e( 'Visual Verification | Compare Admin Preview vs Live Widget', 'boostbot' ); ?>
            </div>
        </header>
        
        <div class="columns-container">
            <!-- Left Column: Admin Preview -->
            <div class="column">
                <div class="column-header preview">
                    <?php echo esc_html__( 'PREVIEW (Admin Bundle - No Theme)', 'boostbot' ); ?>
                </div>
                <div class="column-content">
                    <div id="preview-loading" class="loading-overlay"><?php esc_html_e( 'Loading Preview...', 'boostbot' ); ?></div>
                    <iframe 
                        id="preview-iframe" 
                        src="<?php echo esc_url( $preview_url ); ?>"
                        onload="document.getElementById('preview-loading').classList.add('hidden')"
                    ></iframe>
                </div>
            </div>
            
            <!-- Right Column: Live Widget -->
            <div class="column">
                <div class="column-header live">
                    <?php echo esc_html__( 'LIVE (Frontend Bundle - With Theme)', 'boostbot' ); ?>
                </div>
                <div class="column-content">
                    <div id="live-loading" class="loading-overlay"><?php esc_html_e( 'Loading Live Widget...', 'boostbot' ); ?></div>
                    <iframe 
                        id="live-iframe" 
                        src="<?php echo esc_url( $live_url ); ?>"
                        onload="document.getElementById('live-loading').classList.add('hidden')"
                    ></iframe>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
