<?php
/**
 * A1 Tools Services Elementor Widget
 *
 * Displays a grid or list of services with optional icons, images, descriptions,
 * and phone numbers. Supports responsive column layouts and featured-only filtering.
 * Data comes from the a1tools_shortcode_services() shortcode function.
 *
 * @package A1_Tools
 * @since   1.9.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class A1Tools_Services_Elementor_Widget
 */
class A1Tools_Services_Elementor_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 */
	public function get_name() {
		return 'a1tools_services';
	}

	/**
	 * Get widget title.
	 */
	public function get_title() {
		return __( 'A1 Services', 'a1-tools' );
	}

	/**
	 * Get widget icon.
	 */
	public function get_icon() {
		return 'eicon-gallery-grid';
	}

	/**
	 * Get widget categories.
	 */
	public function get_categories() {
		return array( 'general' );
	}

	/**
	 * Get widget keywords.
	 */
	public function get_keywords() {
		return array( 'service', 'services', 'grid', 'cards', 'a1' );
	}

	/**
	 * Register widget controls.
	 */
	protected function register_controls() {
		// ── Content Tab ─────────────────────────────────────────────
		$this->start_controls_section(
			'content_section',
			array(
				'label' => __( 'Content', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
			)
		);

		// Layout.
		$this->add_control(
			'layout',
			array(
				'label'   => __( 'Layout', 'a1-tools' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => 'grid',
				'options' => array(
					'grid' => __( 'Grid', 'a1-tools' ),
					'list' => __( 'List', 'a1-tools' ),
				),
			)
		);

		// Columns count.
		$this->add_responsive_control(
			'columns',
			array(
				'label'     => __( 'Columns', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 4,
				'default'   => 3,
				'condition' => array( 'layout' => 'grid' ),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-services-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
				),
			)
		);

		// Show description.
		$this->add_control(
			'show_description',
			array(
				'label'        => __( 'Show Description', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Show icon.
		$this->add_control(
			'show_icon',
			array(
				'label'        => __( 'Show Icon', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Show image.
		$this->add_control(
			'show_image',
			array(
				'label'        => __( 'Show Image', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Show phone.
		$this->add_control(
			'show_phone',
			array(
				'label'        => __( 'Show Phone', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => '',
			)
		);

		// Featured only.
		$this->add_control(
			'featured_only',
			array(
				'label'        => __( 'Featured Only', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => '',
			)
		);

		// Link target.
		$this->add_control(
			'link_target',
			array(
				'label'   => __( 'Link Target', 'a1-tools' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => '_self',
				'options' => array(
					'_self'  => __( 'Same Window', 'a1-tools' ),
					'_blank' => __( 'New Tab', 'a1-tools' ),
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Card ────────────────────────────────────────────
		$this->start_controls_section(
			'style_card_section',
			array(
				'label' => __( 'Card', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'card_bg_color',
			array(
				'label'     => __( 'Background Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-service-card' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			array(
				'name'     => 'card_border',
				'selector' => '{{WRAPPER}} .a1tools-service-card',
			)
		);

		$this->add_control(
			'card_border_radius',
			array(
				'label'      => __( 'Border Radius', 'a1-tools' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .a1tools-service-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'card_padding',
			array(
				'label'      => __( 'Padding', 'a1-tools' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .a1tools-service-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'card_shadow',
				'selector' => '{{WRAPPER}} .a1tools-service-card',
			)
		);

		$this->end_controls_section();

		// ── Style: Title ───────────────────────────────────────────
		$this->start_controls_section(
			'style_title_section',
			array(
				'label' => __( 'Title', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .a1tools-service-title',
			)
		);

		$this->add_control(
			'title_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-service-title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Description ─────────────────────────────────────
		$this->start_controls_section(
			'style_description_section',
			array(
				'label' => __( 'Description', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'description_typography',
				'selector' => '{{WRAPPER}} .a1tools-service-description',
			)
		);

		$this->add_control(
			'description_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-service-description' => 'color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Column Layout ───────────────────────────────────
		$this->start_controls_section(
			'style_columns_section',
			array(
				'label'     => __( 'Column Layout', 'a1-tools' ),
				'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
				'condition' => array( 'layout' => 'grid' ),
			)
		);

		$this->add_responsive_control(
			'column_gap',
			array(
				'label'     => __( 'Gap', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::SLIDER,
				'range'     => array( 'px' => array( 'min' => 0, 'max' => 60 ) ),
				'default'   => array( 'size' => 20, 'unit' => 'px' ),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-services-grid' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Render widget output on the frontend.
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped inside shortcode function.
		echo a1tools_shortcode_services(
			array(
				'layout'           => $settings['layout'] ?? 'grid',
				'columns'          => $settings['columns'] ?? '3',
				'show_description' => $settings['show_description'] ?? 'yes',
				'show_icon'        => $settings['show_icon'] ?? 'yes',
				'show_image'       => $settings['show_image'] ?? 'yes',
				'show_phone'       => $settings['show_phone'] ?? '',
				'featured_only'    => $settings['featured_only'] ?? '',
				'target'           => $settings['link_target'] ?? '_self',
				'_elementor'       => 'yes',
			)
		);
	}

	/**
	 * Render widget preview in the Elementor editor.
	 */
	protected function content_template() {
		?>
		<#
		var isGrid   = (settings.layout === 'grid');
		var showDesc = (settings.show_description === 'yes');
		var showIcon = (settings.show_icon === 'yes');
		var showImg  = (settings.show_image === 'yes');
		var showPhone = (settings.show_phone === 'yes');

		var services = [
			{ title: 'Chimney Sweep', desc: 'Professional chimney cleaning and inspection services.', icon: '\uf06d', phone: '(555) 123-4567' },
			{ title: 'Chimney Repair', desc: 'Expert masonry repair and restoration for all chimney types.', icon: '\uf0ad', phone: '(555) 123-4567' },
			{ title: 'Fireplace Install', desc: 'Full fireplace installation including gas and wood-burning units.', icon: '\uf015', phone: '(555) 123-4567' }
		];
		#>
		<div class="a1tools-services-wrapper">
			<div class="a1tools-services-grid" style="<# if(isGrid){#>display:grid;grid-template-columns:repeat({{ settings.columns || 3 }},1fr);gap:20px;<#}else{#>display:flex;flex-direction:column;gap:16px;<#}#>">
				<# _.each( services, function( svc ) { #>
				<div class="a1tools-service-card" style="background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;">
					<# if(showImg){#>
					<div style="background:#f0f0f0;height:120px;border-radius:4px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">Image Placeholder</div>
					<#}#>
					<# if(showIcon){#>
					<div style="font-size:24px;margin-bottom:8px;color:#e67e22;">&#9733;</div>
					<#}#>
					<h3 class="a1tools-service-title" style="margin:0 0 8px;font-size:18px;">{{ svc.title }}</h3>
					<# if(showDesc){#>
					<p class="a1tools-service-description" style="margin:0 0 8px;font-size:14px;color:#666;">{{ svc.desc }}</p>
					<#}#>
					<# if(showPhone){#>
					<p style="margin:0;font-size:13px;color:#333;">{{ svc.phone }}</p>
					<#}#>
				</div>
				<# }); #>
			</div>
		</div>

		<div style="margin-top:10px;padding:8px 12px;background:#f0f0f0;border-radius:4px;font-size:12px;color:#666;">
			<strong>Note:</strong> Actual service data loads on the frontend from the A1 Tools API.
		</div>
		<?php
	}
}