<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Controls_Manager;
use Sifency\Traits\Sifency_Addons_Help_Controls;

class Sifency_Interactive_Field extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-interactive-field',
			'title'          => 'Sifency Magnetic Field',
			'icon'           => 'eicon-apps',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'gsap', 'sifency-magnetic-script' ),
			'style_depends'  => array( 'sifency-master-style' ),
			'keywords'       => array( 'particles', 'magnetic', 'field', 'canvas', 'hover' ),
		);
	}

	protected function register_controls() {
		// --- Field Settings Section ---
		$this->start_controls_section(
			'section_field_settings',
			array( 'label' => esc_html__( 'Magnetic Field Settings', 'sifency-addons' ) )
		);

		$this->add_control(
			'grid_size',
			array(
				'label'       => esc_html__( 'Grid Density', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => array(
					'px' => array(
						'min'  => 10,
						'max'  => 50,
						'step' => 1,
					),
				),
				'default'     => array( 'size' => 20 ),
				'description' => 'Distance between each particle. Lower = More dense (Heavy on CPU).',
			)
		);

		$this->add_control(
			'particle_width',
			array(
				'label'   => esc_html__( 'Particle Width (px)', 'sifency-addons' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min'  => 1,
						'max'  => 10,
						'step' => 1,
					),
				),
				'default' => array( 'size' => 2 ),
			)
		);

		$this->add_control(
			'particle_height',
			array(
				'label'   => esc_html__( 'Particle Height (px)', 'sifency-addons' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min'  => 2,
						'max'  => 30,
						'step' => 1,
					),
				),
				'default' => array( 'size' => 10 ),
			)
		);

		$this->add_control(
			'interaction_radius',
			array(
				'label'       => esc_html__( 'Hover Radius', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => array(
					'px' => array(
						'min'  => 50,
						'max'  => 500,
						'step' => 10,
					),
				),
				'default'     => array( 'size' => 200 ),
				'description' => 'How far the mouse affects the particles.',
			)
		);

		$this->end_controls_section();

		// --- Style Section ---
		$this->start_controls_section(
			'section_style',
			array(
				'label' => esc_html__( 'Colors & Styling', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'container_height',
			array(
				'label'      => esc_html__( 'Container Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh' ),
				'range'      => array(
					'px' => array(
						'min' => 200,
						'max' => 1000,
					),
					'vh' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'default'    => array(
					'size' => 60,
					'unit' => 'vh',
				),
				'selectors'  => array( '{{WRAPPER}} .sifency-field-wrapper' => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);

		$this->add_control(
			'bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-field-wrapper' => 'background-color: {{VALUE}};' ),
			)
		);

		$this->add_control(
			'particle_color',
			array(
				'label'   => esc_html__( 'Particle Color', 'sifency-addons' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#ffffff',
			)
		);

		$this->add_control(
			'base_opacity',
			array(
				'label'       => esc_html__( 'Base Opacity', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1,
						'step' => 0.05,
					),
				),
				'default'     => array( 'size' => 0.15 ),
				'description' => 'Opacity of particles when mouse is far away.',
			)
		);

		$this->add_control(
			'hover_opacity',
			array(
				'label'       => esc_html__( 'Hover Opacity', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1,
						'step' => 0.05,
					),
				),
				'default'     => array( 'size' => 1 ),
				'description' => 'Opacity of particles when mouse is directly over them.',
			)
		);

		$this->end_controls_section();
	}

	protected function render_dom( array $context ) {
		$settings   = $this->get_settings_for_display();
		$wrapper_id = esc_attr( $context['dom_id'] );

		$config = array(
			'gridSize'     => $settings['grid_size']['size'] ?? 20,
			'pWidth'       => $settings['particle_width']['size'] ?? 2,
			'pHeight'      => $settings['particle_height']['size'] ?? 10,
			'radius'       => $settings['interaction_radius']['size'] ?? 200,
			'color'        => $settings['particle_color'],
			'baseOpacity'  => $settings['base_opacity']['size'] ?? 0.15,
			'hoverOpacity' => $settings['hover_opacity']['size'] ?? 1,
		);

		?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" class="sifency-field-wrapper">
			<!-- The Canvas element that JS will draw on -->
			<canvas class="sifency-field-canvas" data-config='<?php echo esc_attr( wp_json_encode( $config ) ); ?>'></canvas>
		</div>
		<?php
	}
}
