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

	protected function get_allowed_template_types() {
		return 'team';
	}
	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-team-skills',
			'title'          => 'Member Skills',
			'icon'           => 'eicon-meta-data',
			'category'       => array( 'sifency-team-components' ),
			'style_depends'  => array( 'sifency-theme-builder-style' ),
			'script_depends' => array( 'sifency-progressbar-script' ),
			'keywords'       => array( 'team', 'skills', 'progress', 'bar', 'repeater', 'meta', 'dynamic', 'sifency' ),
		);}

	protected function register_controls() {
		$this->start_controls_section(
			'section_title_content',
			array( 'label' => esc_html__( 'Title', 'sifency-addons' ) )
		);
		$this->add_control(
			'title_text',
			array(
				'label'   => esc_html__( 'Title', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXT,
				'dynamic' => array( 'active' => true ),
				'default' => esc_html__( 'Professional Skills', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'title_tag',
			array(
				'label'   => esc_html__( 'Title HTML Tag', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'h1' => 'H1',
					'h2' => 'H2',
					'h3' => 'H3',
					'h4' => 'H4',
					'h5' => 'H5',
					'h6' => 'H6',
				),
				'default' => 'h3',
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();

		// --- Style Tab: Title Styling ---
		$this->start_controls_section(
			'section_title_style',
			array(
				'label'     => esc_html__( 'Title', 'sifency-addons' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'title_text!' => '' ),
			)
		);
		$this->add_control(
			'title_color',
			array(
				'label'     => esc_html__( 'Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-skills-title' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .sifency-skills-title',
			)
		);
		$this->add_responsive_control(
			'title_spacing',
			array(
				'label'     => esc_html__( 'Spacing', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-skills-title' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// --- Style Tab: Skills Styling ---
		$this->start_controls_section(
			'section_skills_style',
			array(
				'label' => esc_html__( 'Skills', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'item_spacing',
			array(
				'label'     => esc_html__( 'Spacing Between', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_control(
			'skill_title_color',
			array(
				'label'     => esc_html__( 'Skill Title Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-title' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'skill_title_typography',
				'label'    => esc_html__( 'Skill Title Typography', 'sifency-addons' ),
				'selector' => '{{WRAPPER}} .sifency-skill-title',
			)
		);
		$this->add_control(
			'percentage_color',
			array(
				'label'     => esc_html__( 'Percentage Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-percentage' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'percentage_typography',
				'label'    => esc_html__( 'Percentage Typography', 'sifency-addons' ),
				'selector' => '{{WRAPPER}} .sifency-skill-percentage',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_bar_style',
			array(
				'label' => esc_html__( 'Progress Bar', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'bar_color',
			array(
				'label'     => esc_html__( 'Fill Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-bar-fill' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'bar_bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-bar' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'bar_height',
			array(
				'label'     => esc_html__( 'Height', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-bar' => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_control(
			'bar_border_radius',
			array(
				'label'     => esc_html__( 'Border Radius', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-skill-bar, {{WRAPPER}} .sifency-skill-bar-fill' => 'border-radius: {{SIZE}}{{UNIT}};' ),
			)
		);
		$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();

		$skills = sifency_get_field( 'skills_items' );

		if ( empty( $skills ) ) {
			if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
				$skills = array(
					array(
						'skills_title'     => 'Web Design',
						'skill_percentage' => 95,
					),
					array(
						'skills_title'     => 'Branding',
						'skill_percentage' => 85,
					),
					array(
						'skills_title'     => 'Development',
						'skill_percentage' => 90,
					),
				);
			} else {
				return;
			}
		}
		$animation_manager = new Sifency_Addons_Animation_Manager( $settings );
		$animation_attrs   = $animation_manager->get_wrapper_attributes( array() ); ?>
		<div id="<?php echo esc_attr ( $wrapper_id ); ?>" class="sifency-skills-wrapper" <?php echo wp_kses_post ( $animation_attrs ); // phpcs:ignore ?>>
			<?php
			if ( ! empty( $settings['title_text'] ) ) :
				$this->add_render_attribute( 'title', 'class', 'sifency-skills-title' );
				?>
				<<?php echo tag_escape( $settings['title_tag'] ); ?> <?php echo wp_kses( $this->get_render_attribute_string( 'title' ), array() ); ?>>
					<?php echo esc_html( $settings['title_text'] ); ?>
				</<?php echo tag_escape( $settings['title_tag'] ); ?>>
			<?php endif; ?>

			<div class="sifency-skills-list">
				<?php
				foreach ( $skills as $skill ) :
					if ( empty( $skill['skills_title'] ) || ! isset( $skill['skill_percentage'] ) ) {
						continue;
					}
					$percentage = (int) $skill['skill_percentage'];
					?>
					<div class="sifency-skill-item">
						<div class="sifency-skill-header">
							<span class="sifency-skill-title"><?php echo esc_html( $skill['skills_title'] ); ?></span>
							<span class="sifency-skill-percentage"><?php echo esc_html( $percentage ); ?>%</span>
						</div>
						<div class="sifency-skill-bar">
							<div class="sifency-skill-bar-fill" data-percentage="<?php echo esc_attr( $percentage ); ?>"></div>
						</div>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}
}
