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

use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Sifency\Traits\Sifency_Addons_Toggle_Style_Controls;
use Sifency\Traits\Sifency_Addons_Help_Controls;
class Sifency_Addons_Widget_Dark_Mode extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Toggle_Style_Controls;
	use Sifency_Addons_Help_Controls;
	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-dark-mode',
			'title'          => 'Sifency Dark Mode Switcher',
			'icon'           => 'eicon-adjust',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'sifency-dark-mode-script' ),
			'style_depends'  => array( 'sifency-moon-style' ),
		);
	}
	protected function register_controls() {
		$this->start_controls_section( 'section_engine', array( 'label' => 'Global Color & Mix Blend Mode' ) );
		$this->add_control(
			'dark_mode_engine',
			array(
				'label'       => 'Dark Mode Engine',
				'type'        => Controls_Manager::SELECT,
				'default'     => 'blend',
				'options'     => array(
					'blend'     => '1. Mix Blend Mode (Smart Invert)',
					'variables' => '2. Global Color Override (CSS Variables)',
				),
				'description' => 'Blend Mode automatically inverts the site. Global Color Override lets you manually map light colors to dark colors.',
			)
		);
		$this->add_control(
			'global_bg_color',
			array(
				'label'     => 'Dark Base Background',
				'type'      => Controls_Manager::COLOR,
				'default'   => '#121212',
				'condition' => array( 'dark_mode_engine' => 'variables' ),
			)
		);
		$this->add_control(
			'global_text_color',
			array(
				'label'     => 'Dark Base Text Color',
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'condition' => array( 'dark_mode_engine' => 'variables' ),
			)
		);
		$this->add_control(
			'add_global_heading',
			array(
				'label'     => 'Add Global Colour Dark Mode Alternative Shade',
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => array( 'dark_mode_engine' => 'variables' ),
			)
		);
		$repeater = new Repeater();
		$repeater->add_control(
			'css_variable',
			array(
				'label'       => 'Elementor CSS Variable',
				'type'        => Controls_Manager::TEXT,
				'default'     => '--e-global-color-primary',
				'description' => 'e.g., --e-global-color-primary, --e-global-color-secondary',
			)
		);
		$repeater->add_control(
			'dark_shade',
			array(
				'label' => 'Dark Mode Alternative Shade',
				'type'  => Controls_Manager::COLOR,
			)
		);
		$this->add_control(
			'color_overrides',
			array(
				'label'       => 'Map Global Colors',
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'title_field' => 'Override: {{{ css_variable }}}',
				'condition'   => array( 'dark_mode_engine' => 'variables' ),
			)
		);
		$this->end_controls_section();
		$this->start_controls_section(
			'section_blend',
			array(
				'label'     => 'Dark Mode Blend Mode',
				'condition' => array( 'dark_mode_engine' => 'blend' ),
			)
		);

		$this->add_control(
			'ignore_classes',
			array(
				'label'       => 'Ignore Particular Classes or Images with CSS Classes',
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => 'img, picture, video, iframe, .ignore-dark, .elementor-background-overlay',
				'description' => 'Enter comma-separated selectors. These will be reverse-inverted to look normal.',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section( 'section_toggle', array( 'label' => 'Switcher Layout & Position' ) );

		$this->add_control(
			'toggle_style',
			array(
				'label'   => 'Multiple Dark Mode Toggle Style',
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-pill',
				'options' => array(
					'style-pill'     => '1. Modern Pill (Sun/Moon)',
					'style-floating' => '2. Floating Circle',
					'style-minimal'  => '3. Minimal Text (Dark / Light)',
					'style-cyber'    => '4. Cyberpunk Switch',
					'style-neumorph' => '5. Neumorphic Button',
				),
			)
		);

		$this->add_control(
			'switcher_position',
			array(
				'label'   => 'Adjust Dark Mode Switcher Position',
				'type'    => Controls_Manager::SELECT,
				'default' => 'fixed-br',
				'options' => array(
					'inline'   => 'Inline (Place in header/menu)',
					'fixed-br' => 'Fixed - Bottom Right',
					'fixed-bl' => 'Fixed - Bottom Left',
					'fixed-tr' => 'Fixed - Top Right',
					'fixed-tl' => 'Fixed - Top Left',
				),
			)
		);
		$this->end_controls_section();
		$this->start_controls_section( 'section_system', array( 'label' => 'System & Preferences' ) );

		$this->add_control(
			'save_cookie',
			array(
				'label'       => 'Save Switcher Theme in Browser Cookie',
				'type'        => Controls_Manager::SWITCHER,
				'default'     => 'yes',
				'description' => 'Remembers the user\'s choice across pages via LocalStorage/Cookies.',
			)
		);

		$this->add_control(
			'auto_match_os',
			array(
				'label'   => 'Auto-Match OS Browser Theme for Toggle Switcher',
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();

		$this->start_controls_section(
			'section_style',
			array(
				'label' => 'Customize Everything',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'toggle_size',
			array(
				'label'     => 'Switcher Size',
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0.5,
						'max'  => 3,
						'step' => 0.1,
					),
				),
				'default'   => array( 'size' => 1 ),
				'selectors' => array( '{{WRAPPER}} .sifency-dark-toggle' => 'transform: scale({{SIZE}});' ),
			)
		);

		$this->add_control(
			'toggle_color_light',
			array(
				'label'     => 'Toggle Color (Light Mode)',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-dark-toggle' => '--sf-toggle-light: {{VALUE}};' ),
			)
		);

		$this->add_control(
			'toggle_color_dark',
			array(
				'label'     => 'Toggle Color (Dark Mode)',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-dark-toggle' => '--sf-toggle-dark: {{VALUE}};' ),
			)
		);
		$this->end_controls_section();
	}

	protected function render_dom( array $context ) {
		$settings  = $this->get_settings_for_display();
		$overrides = array();
		if ( $settings['dark_mode_engine'] === 'variables' && ! empty( $settings['color_overrides'] ) ) {
			foreach ( $settings['color_overrides'] as $item ) {
				if ( ! empty( $item['css_variable'] ) && ! empty( $item['dark_shade'] ) ) {
					$overrides[ trim( $item['css_variable'] ) ] = $item['dark_shade'];
				}
			}
		}

		$data_settings = array(
			'engine'      => $settings['dark_mode_engine'],
			'ignore'      => $settings['ignore_classes'],
			'saveCookie'  => $settings['save_cookie'] === 'yes',
			'autoMatchOs' => $settings['auto_match_os'] === 'yes',
			'bgDark'      => $settings['global_bg_color'],
			'textDark'    => $settings['global_text_color'],
			'overrides'   => $overrides,
		);

		$pos_class   = 'sf-pos-' . $settings['switcher_position'];
		$style_class = $settings['toggle_style'];
		?>
		<div class="sifency-dark-mode-wrapper <?php echo esc_attr( $pos_class ); ?>" data-darkmode='<?php echo json_encode( $data_settings ); ?>'>
			
			<button class="sifency-dark-toggle <?php echo esc_attr( $style_class ); ?>" aria-label="Toggle Dark Mode">
				<?php if ( $style_class === 'style-pill' ) : ?>
					<span class="sf-icon sf-sun"><i class="fas fa-sun"></i></span>
					<span class="sf-icon sf-moon"><i class="fas fa-moon"></i></span>
					<span class="sf-ball"></span>
				<?php elseif ( $style_class === 'style-floating' ) : ?>
					<i class="fas fa-adjust"></i>
				<?php elseif ( $style_class === 'style-minimal' ) : ?>
					<span class="sf-text-light">DARK</span>
					<span class="sf-text-dark" style="display:none;">LIGHT</span>
				<?php elseif ( $style_class === 'style-cyber' ) : ?>
					<span class="sf-glitch" data-text="OS:LIGHT">OS:LIGHT</span>
				<?php elseif ( $style_class === 'style-neumorph' ) : ?>
					<i class="fas fa-power-off"></i>
				<?php endif; ?>
			</button>

		</div>
		<?php
	}
}
