<?php

namespace Unlockafe_addons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;

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

class Product_Tour extends Widget_Base
{
	public function get_name()
	{
		return 'unlockafe-product-tour';
	}

	public function get_title()
	{
		return \esc_html__('Product Tour', 'unlock-addons-for-elementor');
	}

	public function get_icon()
	{
		return 'eicon-walkthrough ulicon';
	}

	public function get_categories()
	{
		return ['unlockafe-addons'];
	}

	protected function register_controls()
	{
		$this->start_controls_section(
			'content_section',
			[
				'label' => \esc_html__('Content', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control('tour_title', [
			'label' => \esc_html__('Tour Title', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::TEXT,
			'default' => \esc_html__('Quick product tour', 'unlock-addons-for-elementor'),
			'dynamic' => ['active' => true],
		]);

		$repeater = new Repeater();
		$repeater->add_control('step_title', [
			'label' => \esc_html__('Step Title', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::TEXT,
			'default' => \esc_html__('Welcome', 'unlock-addons-for-elementor'),
			'dynamic' => ['active' => true],
		]);
		$repeater->add_control('step_content', [
			'label' => \esc_html__('Step Content', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::TEXTAREA,
			'default' => \esc_html__('This tour will guide you through the key features.', 'unlock-addons-for-elementor'),
			'dynamic' => ['active' => true],
		]);
		$repeater->add_control('target_selector', [
			'label' => \esc_html__('Target CSS Selector (optional)', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::TEXT,
			'placeholder' => '.header .cta-button',
		]);
		$repeater->add_control('redirect_url', [
			'label' => \esc_html__('Redirect URL on Next (optional)', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::URL,
			'default' => [ 'url' => '' ],
		]);
		$repeater->add_control('placement', [
			'label' => \esc_html__('Placement', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::SELECT,
			'options' => [
				'auto' => \esc_html__('Auto', 'unlock-addons-for-elementor'),
				'top' => \esc_html__('Top', 'unlock-addons-for-elementor'),
				'right' => \esc_html__('Right', 'unlock-addons-for-elementor'),
				'bottom' => \esc_html__('Bottom', 'unlock-addons-for-elementor'),
				'left' => \esc_html__('Left', 'unlock-addons-for-elementor'),
			],
			'default' => 'auto',
		]);

		$this->add_control('steps', [
			'label' => \esc_html__('Steps', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::REPEATER,
			'fields' => $repeater->get_controls(),
			'default' => [
				['step_title' => 'Welcome', 'step_content' => 'This tour will guide you through the key features.', 'target_selector' => '', 'placement' => 'auto', 'redirect_url' => [ 'url' => '' ]],
				['step_title' => 'Key action', 'step_content' => 'Use this button to start creating.', 'target_selector' => '.elementor-button', 'placement' => 'bottom', 'redirect_url' => [ 'url' => '' ]],
			],
			'title_field' => '{{{ step_title }}}',
		]);

		$this->add_control('brand_color', [
			'label' => \esc_html__('Brand Color', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::COLOR,
			'default' => '#3b82f6',
		]);

		$this->add_control('bg_color', [
			'label' => \esc_html__('Background Color', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::COLOR,
			'default' => '#ffffff',
		]);

		$this->add_control('show_overlay', [
			'label' => \esc_html__('Dim background overlay', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::SWITCHER,
			'default' => 'yes',
		]);

		$this->add_control('autoplay', [
			'label' => \esc_html__('Autoplay steps', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::SWITCHER,
			'default' => '',
		]);
		$this->add_control('autoplay_delay', [
			'label' => \esc_html__('Autoplay delay (ms)', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::NUMBER,
			'default' => 2500,
			'condition' => ['autoplay' => 'yes'],
			'min' => 800,
			'max' => 10000,
			'step' => 100,
		]);

		$this->add_control('finish_redirect_url', [
			'label' => \esc_html__('Finish Redirect URL (optional)', 'unlock-addons-for-elementor'),
			'type' => Controls_Manager::URL,
			'default' => [ 'url' => '' ],
		]);

		$this->end_controls_section();
	}

	protected function render()
	{
		$settings = $this->get_settings_for_display();

		// Ensure assets are loaded
		if (!wp_style_is('unlockafe-product-tour-style', 'enqueued')) {
			wp_enqueue_style(
				'unlockafe-product-tour-style',
				UNLOCKAFE_ASSETS . 'front-end/css/product-tour.css',
				[],
				UNLOCKAFE_VERSION
			);
		}
		if (!wp_script_is('unlockafe-product-tour', 'enqueued')) {
			wp_enqueue_script(
				'unlockafe-product-tour',
				UNLOCKAFE_ASSETS . 'front-end/js/product-tour.js',
				['jquery', 'elementor-frontend'],
				UNLOCKAFE_VERSION,
				true
			);
		}

		$data = [
			'title' => $settings['tour_title'] ?? '',
			'brandColor' => $settings['brand_color'] ?? '#3b82f6',
			'showOverlay' => !empty($settings['show_overlay']) && $settings['show_overlay'] === 'yes',
			'autoplay' => !empty($settings['autoplay']) && $settings['autoplay'] === 'yes',
			'autoplayDelay' => isset($settings['autoplay_delay']) ? intval($settings['autoplay_delay']) : 2500,
			'finishRedirect' => isset($settings['finish_redirect_url']['url']) ? $settings['finish_redirect_url']['url'] : '',
			'steps' => array_map(function($step){
				return [
					'title' => $step['step_title'] ?? '',
					'content' => $step['step_content'] ?? '',
					'selector' => $step['target_selector'] ?? '',
					'placement' => $step['placement'] ?? 'auto',
					'redirect' => isset($step['redirect_url']['url']) ? $step['redirect_url']['url'] : '',
				];
			}, is_array($settings['steps'] ?? null) ? $settings['steps'] : []),
		];

		$style_vars = sprintf('--tour-brand:%s;--tour-bg:%s;', isset($settings['brand_color']) ? $settings['brand_color'] : '#3b82f6', isset($settings['bg_color']) ? $settings['bg_color'] : '#ffffff');
		?>
		<div class="unlockafe-product-tour" data-settings='<?php echo json_encode($data); ?>' style="<?php echo \esc_attr($style_vars); ?>">
			<div class="upt-overlay" aria-hidden="true"></div>
			<div class="upt-popover" role="dialog" aria-modal="true" aria-live="polite">
				<div class="upt-header">
					<div class="upt-title"></div>
					<button type="button" class="upt-close" aria-label="Close">×</button>
				</div>
				<div class="upt-body"></div>
				<div class="upt-footer">
					<button type="button" class="upt-prev">Prev</button>
					<button type="button" class="upt-next upt-primary">Next</button>
				</div>
			</div>
		</div>
		<?php
	}
}


