<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Classes\Sifency_Addons_Widget_Base;
class Sifency_Addons_Widget_Table_Of_Contents extends Sifency_Addons_Widget_Base {

	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-table-of-contents',
			'title'          => 'Sifency Table of Contents',
			'icon'           => 'eicon-table-of-contents',
			'category'       => 'sifency-advance-widgets',
			'keywords'       => array( 'table of contents', 'toc', 'navigation', 'heading' ),
			'style_depends'  => array( 'sifency-table-of-content-style', 'sifency-icons' ),
			'script_depends' => array( 'sifency-table-of-content-script' ),
		);}
	protected function register_controls() {
		$this->start_controls_section(
			'section_content',
			array( 'label' => esc_html__( 'Table Content', 'sifency-addons' ) )
		);
		$this->add_control(
			'title',
			array(
				'label'   => esc_html__( 'Header Title', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Table of Contents', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'headings',
			array(
				'label'    => esc_html__( 'Include Headings', 'sifency-addons' ),
				'type'     => Controls_Manager::SELECT2,
				'multiple' => true,
				'options'  => array(
					'h1' => 'H1',
					'h2' => 'H2',
					'h3' => 'H3',
					'h4' => 'H4',
					'h5' => 'H5',
					'h6' => 'H6',
				),
				'default'  => array( 'h2', 'h3', 'h4' ),
			)
		);
		$this->add_control(
			'container_selector',
			array(
				'label'       => esc_html__( 'Search Container', 'sifency-addons' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => '.elementor-page',
				'default'     => '',
				'description' => esc_html__( 'Leave empty to search whole page, or enter a class (e.g. .main-content) to limit scope.', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'exclude_selector',
			array(
				'label'       => esc_html__( 'Exclude Selectors', 'sifency-addons' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => '.ignore-me, #footer',
				'description' => esc_html__( 'Comma separated selectors to ignore.', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'marker_type',
			array(
				'label'   => esc_html__( 'List Marker', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'numbers',
				'options' => array(
					'none'    => 'None',
					'numbers' => 'Numbers (1, 2, 3...)',
					'bullets' => 'Bullets (•)',
					'icon'    => 'Custom Icon',
				),
			)
		);
		$this->add_control(
			'marker_icon',
			array(
				'label'     => esc_html__( 'Icon', 'sifency-addons' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-angle-right',
					'library' => 'solid',
				),
				'condition' => array( 'marker_type' => 'icon' ),
			)
		);
		$this->add_control(
			'collapsible',
			array(
				'label'   => esc_html__( 'Collapsible Box', 'sifency-addons' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);
		$this->add_control(
			'start_collapsed',
			array(
				'label'     => esc_html__( 'Start Minimized', 'sifency-addons' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'condition' => array( 'collapsible' => 'yes' ),
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();
		$this->start_controls_section(
			'style_box',
			array(
				'label' => 'Box Container',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'box_bg',
				'selector' => '{{WRAPPER}} .sifency-toc-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'box_border',
				'selector' => '{{WRAPPER}} .sifency-toc-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'box_shadow',
				'selector' => '{{WRAPPER}} .sifency-toc-wrapper',
			)
		);
		$this->add_responsive_control(
			'box_padding',
			array(
				'label'     => 'Padding',
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-wrapper' => 'padding: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;' ),
			)
		);
		$this->add_responsive_control(
			'box_radius',
			array(
				'label'     => 'Radius',
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-wrapper' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;' ),
			)
		);

		$this->end_controls_section();

		// --- STYLE: HEADER ---
		$this->start_controls_section(
			'style_header',
			array(
				'label' => 'Header',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'header_typo',
				'selector' => '{{WRAPPER}} .sifency-toc-header-title',
			)
		);
		$this->add_control(
			'header_color',
			array(
				'label'     => 'Text Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-header' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'header_bg',
			array(
				'label'     => 'Header Background',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-header' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'header_separator',
			array(
				'label'     => 'Separator Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-header' => 'border-bottom: 1px solid {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'header_padding',
			array(
				'label'     => 'Padding',
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-header' => 'padding: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;' ),
			)
		);

		$this->end_controls_section();

		// --- STYLE: LIST ---
		$this->start_controls_section(
			'style_list',
			array(
				'label' => 'List Items',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'list_typo',
				'selector' => '{{WRAPPER}} .sifency-toc-list-item span',
			)
		);

		$this->start_controls_tabs( 'tabs_list_style' );

		$this->start_controls_tab( 'tab_list_normal', array( 'label' => 'Normal' ) );
		$this->add_control(
			'list_color',
			array(
				'label'     => 'Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'marker_color',
			array(
				'label'     => 'Marker Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-marker' => 'color: {{VALUE}};' ),
			)
		);
		$this->end_controls_tab();

		$this->start_controls_tab( 'tab_list_hover', array( 'label' => 'Hover' ) );
		$this->add_control(
			'list_color_hover',
			array(
				'label'     => 'Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link:hover' => 'color: {{VALUE}};' ),
			)
		);
		$this->end_controls_tab();

		$this->start_controls_tab( 'tab_list_active', array( 'label' => 'Active' ) );
		$this->add_control(
			'list_color_active',
			array(
				'label'     => 'Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link.is-active' => 'color: {{VALUE}}; font-weight: bold;' ),
			)
		);
		$this->add_control(
			'marker_color_active',
			array(
				'label'     => 'Marker Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link.is-active .sifency-toc-marker' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'left_border_color',
			array(
				'label'     => 'Left Indicator Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link.is-active' => 'border-left-color: {{VALUE}}; background: linear-gradient(90deg, {{VALUE}}1A 0%, transparent 100%);' ),
			)
		);
		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control(
			'list_padding',
			array(
				'label'     => 'Item Padding',
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => array( '{{WRAPPER}} .sifency-toc-link' => 'padding: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;' ),
			)
		);
		$this->add_responsive_control(
			'indent',
			array(
				'label'     => 'Indentation',
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}}' => '--toc-indent: {{SIZE}}px;' ),
			)
		);

		$this->end_controls_section();
		$this->add_Sifency_Addons_Animation_Controls();
	}

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

		$this->add_render_attribute( 'wrapper', 'class', 'sifency-toc-wrapper' );
		if ( 'yes' === $settings['start_collapsed'] ) {
			$this->add_render_attribute( 'wrapper', 'class', 'collapsed' );
		}

		// Pass settings to JS
		$js_settings = array(
			'headings'  => implode( ',', $settings['headings'] ),
			'container' => $settings['container_selector'],
			'exclude'   => $settings['exclude_selector'],
			'marker'    => $settings['marker_type'],
			// pass icon markup if needed
			'icon'      => ( 'icon' === $settings['marker_type'] && ! empty( $settings['marker_icon']['value'] ) ) ? Icons_Manager::render_icon( $settings['marker_icon'], array( 'aria-hidden' => 'true' ), 'span' ) : '',
		);
		$this->add_render_attribute( 'wrapper', 'data-toc-settings', wp_json_encode( $js_settings ) );

		?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" <?php echo wp_kses_post( $this->get_render_attribute_string( 'wrapper' ) ); ?>>
			
			<div class="sifency-toc-header">
				<span class="sifency-toc-header-title"><?php echo esc_html( $settings['title'] ); ?></span>
				<?php if ( 'yes' === $settings['collapsible'] ) : ?>
					<span class="sifency-toc-toggle">
						<i class="eicon-plus" aria-hidden="true"></i>
					</span>
				<?php endif; ?>
			</div>

			<div class="sifency-toc-body">
				<!-- Content generated via JS -->
				<div class="sifency-toc-spinner"></div>
				<nav class="sifency-toc-nav"></nav>
			</div>

		</div>
		<?php
	}
}
