<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Sifency\Traits\Sifency_Addons_Help_Controls;

class Sifency_Addons_Widget_Content_Loading 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-content-loading',
			'title'    => 'Sifency Content Loading',
			'icon'     => 'eicon-loading',
			'category' => array( 'sifency-creative-widgets' ),
			'keywords' => array( 'loading', 'skeleton', 'placeholder', 'shimmer', 'animation' ),
		);}

	protected function register_controls() {

		/*
		-------------------------
		Layout
		--------------------------*/
		$this->start_controls_section(
			'section_layout',
			array( 'label' => esc_html__( 'Layout', 'sifency-addons' ) )
		);
		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Skeleton Type', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'lines',
				'options' => array(
					'lines'  => esc_html__( 'Lines (Pills)', 'sifency-addons' ),
					'card'   => esc_html__( 'Card', 'sifency-addons' ),
					'avatar' => esc_html__( 'Avatar + Text', 'sifency-addons' ),
					'image'  => esc_html__( 'Image Block', 'sifency-addons' ),
				),
			)
		);
		$this->add_control(
			'count',
			array(
				'label'   => esc_html__( 'Items Count', 'sifency-addons' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 5,
				'min'     => 1,
				'max'     => 20,
			)
		);
		$this->add_responsive_control(
			'line_height',
			array(
				'label'     => esc_html__( 'Line Height', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 45 ),
				'range'     => array(
					'px' => array(
						'min' => 5,
						'max' => 200,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .sk-item:not(.avatar)' => 'height: {{SIZE}}{{UNIT}};',
				),
				'condition' => array( 'layout' => array( 'lines', 'image' ) ),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			array(
				'label' => esc_html__( 'Skeleton Style', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		/* Base Color */
		$this->add_control(
			'base_color',
			array(
				'label'     => esc_html__( 'Base Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#222222',
				'selectors' => array(
					'{{WRAPPER}} .sk-item' => 'background-color: {{VALUE}};',
				),
			)
		);

		/* Shimmer Color */
		$this->add_control(
			'shine_color',
			array(
				'label'     => esc_html__( 'Shimmer Highlight', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(255,255,255,0.08)',
				'selectors' => array(
					'{{WRAPPER}} .sk-item::after' => 'background: linear-gradient(90deg, transparent, {{VALUE}}, transparent);',
				),
			)
		);

		/* Border Radius */
		$this->add_control(
			'border_radius',
			array(
				'label'     => esc_html__( 'Border Radius', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 25 ),
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .sk-item' => 'border-radius: {{SIZE}}{{UNIT}};',
				),
			)
		);

		/* Spacing */
		$this->add_responsive_control(
			'item_spacing',
			array(
				'label'     => esc_html__( 'Spacing Between', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 12 ),
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .sifency-skeleton-container' => 'gap: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .sk-avatar-group' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				),
			)
		);

		/* Animation Speed */
		$this->add_control(
			'animation_speed',
			array(
				'label'     => esc_html__( 'Shimmer Speed (sec)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 1.5 ),
				'range'     => array(
					'px' => array(
						'min'  => 0.5,
						'max'  => 4,
						'step' => 0.1,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .sk-item::after' => 'animation-duration: {{SIZE}}s;',
				),
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();

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

		<style>
		/* Core structural CSS */
		.sifency-skeleton-container {
			display: flex;
			flex-direction: column;
		}
		.sk-item {
			position: relative;
			overflow: hidden;
			width: 100%;
		}
		.sk-item::after {
			content: '';
			position: absolute;
			inset: 0;
			transform: translateX(-100%);
			animation: sk-shimmer 1.5s infinite linear;
		}
		@keyframes sk-shimmer {
			100% { transform: translateX(100%); }
		}

		/* Layout Helpers */
		.sk-avatar-group { display: flex; gap: 15px; align-items: center; }
		.sk-item.avatar { width: 50px; height: 50px; flex-shrink: 0; }
		.sk-avatar-text { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
		</style>

		<div id="<?php echo esc_attr( $wrapper_id ); ?>" class="sifency-skeleton-container sk-layout-<?php echo esc_attr( $settings['layout'] ); ?>">
			<?php for ( $i = 0; $i < $settings['count']; $i++ ) : ?>

				<?php if ( 'lines' === $settings['layout'] ) : ?>
					<div class="sk-item"></div>

				<?php elseif ( 'card' === $settings['layout'] ) : ?>
					<div style="margin-bottom:20px">
						<div class="sk-item" style="height:180px; margin-bottom:10px;"></div>
						<div class="sk-item" style="height:15px; width:70%; margin-bottom:8px;"></div>
						<div class="sk-item" style="height:15px; width:40%;"></div>
					</div>

				<?php elseif ( 'avatar' === $settings['layout'] ) : ?>
					<div class="sk-avatar-group">
						<div class="sk-item avatar"></div>
						<div class="sk-avatar-text">
							<div class="sk-item" style="height:12px; width:60%"></div>
							<div class="sk-item" style="height:12px; width:90%"></div>
						</div>
					</div>

				<?php elseif ( 'image' === $settings['layout'] ) : ?>
					<div class="sk-item"></div>

				<?php endif; ?>

			<?php endfor; ?>
		</div>
		<?php
	}
}
