<?php
/**
 * Pawfect Responsive Range Control
 *
 * @package Pawfect
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

if (!class_exists('WP_Customize_Control')) {
    return;
}

/**
 * Responsive Range Slider Control
 */
class pawfect_Customize_Responsive_Range_Control extends pawfect_Customize_Base_Control {

    public $type = 'pawfect-responsive-range-slider';
    public $suffix = '';

    public function __construct($manager, $id, $args = array()) {
        parent::__construct($manager, $id, $args);
    }

    public function to_json() {
        parent::to_json();

        $this->json['suffix'] = $this->suffix;

        // Get default values from setting
        $default = $this->setting->default;
        if (is_array($default)) {
            $this->json['default'] = $default;
        } else {
            $this->json['default'] = array(
                'desktop' => intval($default),
                'tablet' => intval($default),
                'mobile' => intval($default),
            );
        }

        // Pass current value properly formatted
        $current_value = $this->value();
        if (is_string($current_value)) {
            $decoded = json_decode($current_value, true);
            if (is_array($decoded)) {
                $this->json['value'] = $decoded;
            } else {
                $this->json['value'] = $this->json['default'];
            }
        } elseif (is_array($current_value)) {
            $this->json['value'] = $current_value;
        } else {
            $this->json['value'] = $this->json['default'];
        }
    }

    public function enqueue() {
        // Call parent enqueue to load base scripts (includes controls.js with our responsive range control)
        parent::enqueue();

        // Enqueue our specific responsive range control CSS
        wp_enqueue_style('pawfect-responsive-range-slider', PAWFECT_THEME_URL . '/inc/customizer/assets/css/responsive-range-control.css', array('pawfect-controls'), PAWFECT_THEME_VERSION);


    }

    public function render_content() {
        $value = $this->value();

        // Handle different value formats
        if (is_string($value)) {
            $decoded = json_decode($value, true);
            if (is_array($decoded)) {
                $value = $decoded;
            } else {
                $value = array(
                    'desktop' => intval($value),
                    'tablet' => intval($value),
                    'mobile' => intval($value),
                );
            }
        } elseif (!is_array($value)) {
            $value = array(
                'desktop' => intval($value),
                'tablet' => intval($value),
                'mobile' => intval($value),
            );
        }

        // Get defaults from setting
        $defaults = array('desktop' => 0, 'tablet' => 0, 'mobile' => 0);
        if (isset($this->setting->default)) {
            if (is_string($this->setting->default)) {
                $decoded_default = json_decode($this->setting->default, true);
                if (is_array($decoded_default)) {
                    $defaults = $decoded_default;
                }
            } elseif (is_array($this->setting->default)) {
                $defaults = $this->setting->default;
            }
        }

        $value = wp_parse_args($value, $defaults);
        ?>
        <label>
            <?php if (!empty($this->label)) : ?>
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
            <?php endif;
            if (!empty($this->description)) : ?>
                <span class="description customize-control-description"><?php echo esc_html($this->description); ?></span>
            <?php endif; ?>

            <div class="pawfect-responsive-range-control">
                <!-- Device Switcher -->
                <div class="pawfect-device-switcher">
                    <button type="button" class="pawfect-device-btn active" data-device="desktop">
                        <span class="dashicons dashicons-desktop"></span>
                    </button>
                    <button type="button" class="pawfect-device-btn" data-device="tablet">
                        <span class="dashicons dashicons-tablet"></span>
                    </button>
                    <button type="button" class="pawfect-device-btn" data-device="mobile">
                        <span class="dashicons dashicons-smartphone"></span>
                    </button>
                </div>

                <!-- Desktop Range -->
                <div class="pawfect-range-wrapper active" data-device="desktop">
                    <div class="pawfect-range-slider">
                        <input class="pawfect-range-slider-range" type="range"
                               value="<?php echo esc_attr($value['desktop']); ?>"
                               data-device="desktop"
                               <?php $this->input_attrs(); ?> />
                        <input class="pawfect-range-slider-value" type="number"
                               value="<?php echo esc_attr($value['desktop']); ?>"
                               data-device="desktop"
                               <?php $this->input_attrs(); ?> />
                        <?php if (!empty($this->suffix)) : ?>
                            <span class="pawfect-range-suffix"><?php echo esc_html($this->suffix); ?></span>
                        <?php endif; ?>
                        <button type="button" class="pawfect-range-reset" data-device="desktop">
                            <span class="dashicons dashicons-image-rotate"></span>
                        </button>
                    </div>
                </div>

                <!-- Tablet Range -->
                <div class="pawfect-range-wrapper" data-device="tablet">
                    <div class="pawfect-range-slider">
                        <input class="pawfect-range-slider-range" type="range"
                               value="<?php echo esc_attr($value['tablet']); ?>"
                               data-device="tablet"
                               <?php $this->input_attrs(); ?> />
                        <input class="pawfect-range-slider-value" type="number"
                               value="<?php echo esc_attr($value['tablet']); ?>"
                               data-device="tablet"
                               <?php $this->input_attrs(); ?> />
                        <?php if (!empty($this->suffix)) : ?>
                            <span class="pawfect-range-suffix"><?php echo esc_html($this->suffix); ?></span>
                        <?php endif; ?>
                        <button type="button" class="pawfect-range-reset" data-device="tablet">
                            <span class="dashicons dashicons-image-rotate"></span>
                        </button>
                    </div>
                </div>

                <!-- Mobile Range -->
                <div class="pawfect-range-wrapper" data-device="mobile">
                    <div class="pawfect-range-slider">
                        <input class="pawfect-range-slider-range" type="range"
                               value="<?php echo esc_attr($value['mobile']); ?>"
                               data-device="mobile"
                               <?php $this->input_attrs(); ?> />
                        <input class="pawfect-range-slider-value" type="number"
                               value="<?php echo esc_attr($value['mobile']); ?>"
                               data-device="mobile"
                               <?php $this->input_attrs(); ?> />
                        <?php if (!empty($this->suffix)) : ?>
                            <span class="pawfect-range-suffix"><?php echo esc_html($this->suffix); ?></span>
                        <?php endif; ?>
                        <button type="button" class="pawfect-range-reset" data-device="mobile">
                            <span class="dashicons dashicons-image-rotate"></span>
                        </button>
                    </div>
                </div>

                <!-- Hidden input to store the JSON value -->
                <input type="hidden" class="pawfect-responsive-range-value" <?php $this->link(); ?> value="<?php echo esc_attr(json_encode($value)); ?>" />
            </div>
        </label>
        <?php
    }
}
