<?php
/**
 * WP AI Workflows - Workflow Viewer
 *
 * Handles the frontend workflow viewer functionality
 *
 * @package WP_AI_Workflows
 */

// Exit if accessed directly
if ( ! defined( 'WPINC' ) ) {
    die;
}

/**
 * Workflow Viewer class
 */
class WP_AI_Workflows_Viewer {
    private static $instance = null;
    private $script_loaded = false;

    /**
     * Get singleton instance
     */
    public static function get_instance() {
        if (self::$instance === null) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Initialize the workflow viewer
     */
    public function init() {
        // Register shortcode
        add_shortcode( 'wp_ai_workflow_preview', array( $this, 'render_workflow_preview' ) );
        
        // Register scripts and styles
        add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );
    }

    /**
     * Register necessary scripts and styles
     */
    public function register_scripts() {
        if (is_admin()) {
            return;
        }
        
        // Register scripts
        $js_files = glob(WP_AI_WORKFLOWS_PLUGIN_DIR . 'build/static/js/main.*.js');
        $css_files = glob(WP_AI_WORKFLOWS_PLUGIN_DIR . 'build/static/css/main.*.css');
    
        if (!empty($js_files)) {
            wp_register_script(
                'wp-ai-workflows-viewer',
                WP_AI_WORKFLOWS_PLUGIN_URL . 'build/static/js/' . basename($js_files[0]),
                array('react', 'react-dom'), 
                WP_AI_WORKFLOWS_PRO_VERSION,
                true
            );
    
            // Localize script with required data
            wp_localize_script('wp-ai-workflows-viewer', 'wpAiWorkflowsSettings', array(
                'apiUrl' => rest_url('wp-ai-workflows/v1'),
                'nonce' => wp_create_nonce('wp_rest'),
                'siteUrl' => get_site_url(),
                'assetsUrl' => WP_AI_WORKFLOWS_PLUGIN_URL . 'assets',
                'isViewer' => true
            ));
        }
    
        if (!empty($css_files)) {
            wp_register_style(
                'wp-ai-workflows-viewer',
                WP_AI_WORKFLOWS_PLUGIN_URL . 'build/static/css/' . basename($css_files[0]),
                array(),
                WP_AI_WORKFLOWS_PRO_VERSION
            );
        }
    
        // Also register React and ReactDOM
        wp_register_script(
            'react',
            'https://unpkg.com/react@18/umd/react.production.min.js',
            array(),
            '18.0.0',
            true
        );
    
        wp_register_script(
            'react-dom',
            'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js',
            array('react'),
            '18.0.0',
            true
        );
    }
    
    /**
     * Enqueue all necessary assets
     */
    public function enqueue_assets() {
        if (!$this->script_loaded) {
            // Enqueue React first
            wp_enqueue_script('react');
            wp_enqueue_script('react-dom');
            
            // Then enqueue our scripts
            wp_enqueue_script('wp-ai-workflows-viewer');
            wp_enqueue_style('wp-ai-workflows-viewer');
            
            $this->script_loaded = true;
        }
    }

    /**
     * Check if current device is mobile
     * 
     * @return boolean True if mobile, false otherwise
     */
    private function is_mobile() {
        // Check server-side if possible using User-Agent
        if (isset($_SERVER['HTTP_USER_AGENT'])) {
            $user_agent = sanitize_text_field($_SERVER['HTTP_USER_AGENT']);
            if (preg_match('/(android|iphone|ipod|ipad|blackberry|webos|windows\s+phone)/i', $user_agent)) {
                return true;
            }
        }
        
        // We can't reliably detect all mobile devices server-side,
        // so we'll also use JS for client-side detection
        return false;
    }

    /**
     * Render the workflow preview shortcode
     *
     * @param array $atts Shortcode attributes
     * @return string HTML output
     */
    public function render_workflow_preview($atts) {
        // Parse shortcode attributes
        $atts = shortcode_atts(
            array(
                'id'                  => 0,             // Workflow ID
                'height'              => '500px',       // Height of the viewer
                'dark_mode'           => 'false',       // Dark mode toggle
                'show_minimap'        => 'true',        // Show minimap toggle
                'show_controls'       => 'true',        // Show controls toggle
                'nodes_draggable'     => 'false',       // Allow node dragging
                'nodes_connectable'   => 'false',       // Allow node connecting
                'elements_selectable' => 'false',       // Allow element selection
                'show_sidebar'        => 'false',       // Show simplified sidebar
                'allow_pan_zoom'      => 'true',        // Allow pan and zoom
                'show_toolbar'        => 'false',       // Show toolbar
                'allow_download'      => 'false',       // Allow workflow download
                'hide_on_mobile'      => 'false',       // Hide on mobile devices
                'hide_powered_by'     => 'false',       // Hide powered by text
                'overlay_text'        => 'Click to Explore Workflow', // Text for the overlay
            ),
            $atts,
            'wp_ai_workflow_preview'
        );

        // Generate a unique ID for this instance
        $viewer_id = 'workflow-viewer-' . uniqid();
        
        // Check for mobile and hide_on_mobile setting
        $hide_on_mobile = $atts['hide_on_mobile'] === 'true';
        $is_mobile = $this->is_mobile();
        
        // Mobile detection script that runs before any workflow data is loaded
        $mobile_detection_script = '';
        $mobile_message = '';
        
        if ($hide_on_mobile) {
            // Add a script to detect mobile devices on the client side
            $mobile_detection_script = '<script>
                (function() {
                    function isMobileDevice() {
                        return window.innerWidth < 768 || 
                            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                    }
                    
                    // Add to window for later use
                    window.wpAiWorkflowsMobile = isMobileDevice();
                    
                    // Show/hide elements immediately based on mobile detection
                    if (window.wpAiWorkflowsMobile) {
                        document.addEventListener("DOMContentLoaded", function() {
                            var container = document.getElementById("' . esc_js($viewer_id) . '");
                            var mobileMsg = document.getElementById("' . esc_js($viewer_id) . '-mobile-message");
                            
                            if (container) container.style.display = "none";
                            if (mobileMsg) mobileMsg.style.display = "block";
                        });
                    }
                })();
            </script>';
            
            // Create mobile message
            $mobile_message = '<div id="' . esc_attr($viewer_id) . '-mobile-message" style="display:none; padding:20px; text-align:center; border:1px solid #eee; border-radius:4px; background-color:#f9f9f9; color:#666; margin-bottom:20px;">
                <div style="font-size:16px; margin-bottom:8px;">
                    This workflow preview is not available on mobile devices
                </div>
                <div style="font-size:13px;">
                    Please view on a desktop or tablet for the full experience
                </div>
            </div>';
        }

        // If we're on mobile and hide_on_mobile is true, just return the mobile message
        if ($is_mobile && $hide_on_mobile) {
            return $mobile_detection_script . $mobile_message;
        }
        
        // Validate workflow ID
        if (empty($atts['id'])) {
            return '<div class="workflow-viewer-error">Invalid workflow ID</div>';
        }
        
        // Get workflow data
        $workflow_data = $this->get_workflow_data($atts['id']);
        if (!$workflow_data) {
            return '<div class="workflow-viewer-error">Workflow not found or not accessible</div>';
        }
        
        // Enqueue necessary scripts and styles
        $this->enqueue_assets();

        // Auto-enable toolbar if download is enabled
        if ($atts['allow_download'] === 'true' && $atts['show_toolbar'] === 'false') {
            $atts['show_toolbar'] = 'true';
        }
        
        // Convert string booleans to actual booleans for the config
        $config = array(
            'workflowData'      => $workflow_data,
            'height'            => esc_attr($atts['height']),
            'darkMode'          => $atts['dark_mode'] === 'true',
            'showMinimap'       => $atts['show_minimap'] === 'true',
            'showControls'      => $atts['show_controls'] === 'true',
            'nodesDraggable'    => $atts['nodes_draggable'] === 'true',
            'nodesConnectable'  => $atts['nodes_connectable'] === 'true',
            'elementsSelectable'=> $atts['elements_selectable'] === 'true',
            'showSidebar'       => $atts['show_sidebar'] === 'true',
            'allowPanZoom'      => $atts['allow_pan_zoom'] === 'true',
            'showToolbar'       => $atts['show_toolbar'] === 'true',
            'allowDownload'     => $atts['allow_download'] === 'true',
            'hideOnMobile'      => $hide_on_mobile,
            'hidePoweredBy'     => $atts['hide_powered_by'] === 'true',
            'overlayText'       => esc_attr($atts['overlay_text']),
        );
        
        // Encode the config for the data attribute
        $encoded_config = base64_encode(wp_json_encode($config));
        
        // Conditional loading script - only load workflow data if not on mobile
        $conditional_loading_script = '';
        if ($hide_on_mobile) {
            $conditional_loading_script = '<script>
                (function() {
                    document.addEventListener("DOMContentLoaded", function() {
                        // If not mobile or hide_on_mobile is false, initialize the viewer
                        if (!window.wpAiWorkflowsMobile) {
                            if (typeof window.wpAiWorkflowsViewer !== "undefined" && 
                                typeof window.wpAiWorkflowsViewer.init === "function") {
                                window.wpAiWorkflowsViewer.init("' . esc_js($viewer_id) . '");
                            }
                        }
                    });
                })();
            </script>';
        } else {
            // If hide_on_mobile is false, always initialize
            $conditional_loading_script = '<script>
                document.addEventListener("DOMContentLoaded", function() {
                    if (typeof window.wpAiWorkflowsViewer !== "undefined" && 
                        typeof window.wpAiWorkflowsViewer.init === "function") {
                        window.wpAiWorkflowsViewer.init("' . esc_js($viewer_id) . '");
                    }
                });
            </script>';
        }
        
        // Return container HTML with proper styling and conditional loading
        $output = $mobile_detection_script . $mobile_message;
        $output .= sprintf(
            '<div id="%s" class="wp-ai-workflows-viewer-container" data-workflow-id="%s" data-config="%s" style="height: %s; width: 100%%;">
                <div class="workflow-viewer-loading">
                    <div class="loading-spinner"></div>
                    <div class="loading-text">Loading workflow preview...</div>
                </div>
            </div>',
            esc_attr($viewer_id),
            esc_attr($atts['id']),
            esc_attr($encoded_config),
            esc_attr($atts['height'])
        );
        $output .= $conditional_loading_script;
        
        return $output;
    }
    
    /**
     * Get workflow data from the options table
     *
     * @param string $workflow_id The workflow ID
     * @return array|null Workflow data or null if not found
     */
    private function get_workflow_data($workflow_id) {
        // Get workflow using DBAL
        $workflow = WP_AI_Workflows_Workflow_DBAL::get_workflow_by_id($workflow_id);
        
        if (!$workflow) {
            WP_AI_Workflows_Utilities::debug_log("Workflow not found", "error", [
                'workflow_id' => $workflow_id
            ]);
            return null;
        }
        
        return $workflow;
    }
}