<?php
/**
 * A1 Tools FAQ Elementor Widget
 *
 * Displays frequently asked questions in an accordion layout with optional
 * category filtering, category badges, and FAQ schema markup for SEO.
 * Data comes from the a1tools_shortcode_faq() shortcode function.
 *
 * @package A1_Tools
 * @since   1.9.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class A1Tools_FAQ_Elementor_Widget
 */
class A1Tools_FAQ_Elementor_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 */
	public function get_name() {
		return 'a1tools_faq';
	}

	/**
	 * Get widget title.
	 */
	public function get_title() {
		return __( 'A1 FAQ', 'a1-tools' );
	}

	/**
	 * Get widget icon.
	 */
	public function get_icon() {
		return 'eicon-help-o';
	}

	/**
	 * Get widget categories.
	 */
	public function get_categories() {
		return array( 'general' );
	}

	/**
	 * Get widget keywords.
	 */
	public function get_keywords() {
		return array( 'faq', 'question', 'answer', 'accordion', 'a1', 'schema' );
	}

	/**
	 * 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,
			)
		);

		// Category filter.
		$this->add_control(
			'category',
			array(
				'label'       => __( 'Category Filter', 'a1-tools' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'default'     => '',
				'placeholder' => __( 'e.g. Chimney Sweep', 'a1-tools' ),
				'description' => __( 'Show only FAQs in a specific category. Leave blank for all.', 'a1-tools' ),
			)
		);

		// Show category.
		$this->add_control(
			'show_category',
			array(
				'label'        => __( 'Show Category Badge', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Accordion icon.
		$this->add_control(
			'accordion_icon',
			array(
				'label'        => __( 'Show Arrow Indicator', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Enable schema.
		$this->add_control(
			'enable_schema',
			array(
				'label'        => __( 'Enable FAQ Schema', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
				'description'  => __( 'Output FAQPage structured data (JSON-LD) for search engines.', 'a1-tools' ),
			)
		);

		$this->end_controls_section();

		// ── Style: Question ────────────────────────────────────────
		$this->start_controls_section(
			'style_question_section',
			array(
				'label' => __( 'Question', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'question_typography',
				'selector' => '{{WRAPPER}} .a1tools-faq-question',
			)
		);

		$this->add_control(
			'question_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-question' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'question_bg_color',
			array(
				'label'     => __( 'Background Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-question' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'question_padding',
			array(
				'label'      => __( 'Padding', 'a1-tools' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .a1tools-faq-question' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Answer ──────────────────────────────────────────
		$this->start_controls_section(
			'style_answer_section',
			array(
				'label' => __( 'Answer', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'answer_typography',
				'selector' => '{{WRAPPER}} .a1tools-faq-answer',
			)
		);

		$this->add_control(
			'answer_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-answer' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'answer_padding',
			array(
				'label'      => __( 'Padding', 'a1-tools' ),
				'type'       => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .a1tools-faq-answer' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Accordion ───────────────────────────────────────
		$this->start_controls_section(
			'style_accordion_section',
			array(
				'label' => __( 'Accordion', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'arrow_color',
			array(
				'label'     => __( 'Arrow Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-icon' => 'border-left-color: {{VALUE}};',
				),
				'condition' => array( 'accordion_icon' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'arrow_size',
			array(
				'label'     => __( 'Arrow Size', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::SLIDER,
				'range'     => array( 'px' => array( 'min' => 4, 'max' => 12 ) ),
				'default'   => array( 'size' => 6, 'unit' => 'px' ),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-icon' => 'border-left-width: {{SIZE}}{{UNIT}}; border-top-width: calc({{SIZE}}{{UNIT}} - 1px); border-bottom-width: calc({{SIZE}}{{UNIT}} - 1px);',
				),
				'condition' => array( 'accordion_icon' => 'yes' ),
			)
		);

		$this->end_controls_section();

		// ── Style: Category Badge ──────────────────────────────────
		$this->start_controls_section(
			'style_category_section',
			array(
				'label'     => __( 'Category Badge', 'a1-tools' ),
				'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_category' => 'yes' ),
			)
		);

		$this->add_control(
			'category_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-category' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'category_bg_color',
			array(
				'label'     => __( 'Background Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-faq-category' => 'background-color: {{VALUE}};',
				),
			)
		);

		$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_faq(
			array(
				'category'       => $settings['category'] ?? '',
				'show_category'  => $settings['show_category'] ?? 'yes',
				'accordion_icon' => $settings['accordion_icon'] ?? 'yes',
				'enable_schema'  => $settings['enable_schema'] ?? 'yes',
				'_elementor'     => 'yes',
			)
		);
	}

	/**
	 * Render widget preview in the Elementor editor.
	 */
	protected function content_template() {
		?>
		<#
		var showCat  = (settings.show_category === 'yes');
		var showIcon = (settings.accordion_icon === 'yes');

		var faqs = [
			{ q: 'How often should I have my chimney cleaned?', a: 'The National Fire Protection Association recommends annual chimney inspections and cleaning as needed, typically at least once per year for regular use.', cat: 'Chimney Sweep' },
			{ q: 'What are signs that my chimney needs repair?', a: 'Look for cracked or missing mortar joints, white staining (efflorescence), damaged chimney cap, leaning structure, or water stains on interior walls near the chimney.', cat: 'Chimney Repair' },
			{ q: 'Do you offer free estimates?', a: 'Yes, we provide free on-site estimates for all chimney repair and installation projects. Call us to schedule a convenient time.', cat: 'General' }
		];
		#>
		<div class="a1tools-faq-wrapper">
			<# _.each( faqs, function( faq, idx ) { #>
			<div class="a1tools-faq-item" style="border:1px solid #e0e0e0;border-radius:6px;margin-bottom:8px;overflow:hidden;">
				<div class="a1tools-faq-question" style="display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-weight:600;font-size:15px;background:#fafafa;" role="button" aria-expanded="{{ idx === 0 ? 'true' : 'false' }}">
					<# if(showIcon){#>
					<span class="a1tools-faq-icon" style="display:inline-block;width:0;height:0;border-left:6px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .3s ease;flex-shrink:0;<# if(idx===0){#>transform:rotate(90deg);<#}#>"></span>
					<#}#>
					<span>{{ faq.q }}</span>
					<# if(showCat){#>
					<span class="a1tools-faq-category" style="margin-left:auto;font-size:11px;font-weight:400;background:#e8f4f8;color:#2980b9;padding:2px 8px;border-radius:3px;white-space:nowrap;">{{ faq.cat }}</span>
					<#}#>
				</div>
				<div class="a1tools-faq-answer" style="padding:0 18px 14px;font-size:14px;color:#555;<# if(idx!==0){#>display:none;<#}#>">
					{{ faq.a }}
				</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 FAQ data loads on the frontend from the A1 Tools API.
			<# if(settings.enable_schema === 'yes'){#><br>FAQ schema (JSON-LD) is output on the frontend for SEO.<#}#>
		</div>
		<?php
	}
}