<?php
/**
 * A1 Tools Team Elementor Widget
 *
 * Displays team members in a grid or list layout with photos, roles, bios,
 * contact information, and certifications. Supports responsive column layouts
 * and featured-only filtering. Data comes from the a1tools_shortcode_team()
 * shortcode function.
 *
 * @package A1_Tools
 * @since   1.9.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class A1Tools_Team_Elementor_Widget
 */
class A1Tools_Team_Elementor_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 */
	public function get_name() {
		return 'a1tools_team';
	}

	/**
	 * Get widget title.
	 */
	public function get_title() {
		return __( 'A1 Team', 'a1-tools' );
	}

	/**
	 * Get widget icon.
	 */
	public function get_icon() {
		return 'eicon-person';
	}

	/**
	 * Get widget categories.
	 */
	public function get_categories() {
		return array( 'general' );
	}

	/**
	 * Get widget keywords.
	 */
	public function get_keywords() {
		return array( 'team', 'staff', 'member', 'people', '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-team-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
				),
			)
		);

		// Show photo.
		$this->add_control(
			'show_photo',
			array(
				'label'        => __( 'Show Photo', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Show role.
		$this->add_control(
			'show_role',
			array(
				'label'        => __( 'Show Role', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// Show bio.
		$this->add_control(
			'show_bio',
			array(
				'label'        => __( 'Show Bio', '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'      => '',
			)
		);

		// Show email.
		$this->add_control(
			'show_email',
			array(
				'label'        => __( 'Show Email', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => '',
			)
		);

		// Show certifications.
		$this->add_control(
			'show_certifications',
			array(
				'label'        => __( 'Show Certifications', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		// 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'      => '',
			)
		);

		// Category filter.
		$this->add_control(
			'category',
			array(
				'label'       => __( 'Category Filter', 'a1-tools' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'placeholder' => __( 'e.g., Management', 'a1-tools' ),
				'description' => __( 'Show only members in this category. Leave blank for all.', 'a1-tools' ),
			)
		);

		// Category order.
		$this->add_control(
			'category_order',
			array(
				'label'       => __( 'Category Order', 'a1-tools' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'placeholder' => __( 'Management, Technicians, Office', 'a1-tools' ),
				'description' => __( 'Comma-separated category names in display order. Leave blank for default order.', 'a1-tools' ),
			)
		);

		// Show category headings.
		$this->add_control(
			'show_category_heading',
			array(
				'label'        => __( 'Show Category Headings', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$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-team-card' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			array(
				'name'     => 'card_border',
				'selector' => '{{WRAPPER}} .a1tools-team-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-team-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-team-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-team-card',
			)
		);

		$this->end_controls_section();

		// ── Style: Photo ───────────────────────────────────────────
		$this->start_controls_section(
			'style_photo_section',
			array(
				'label' => __( 'Photo', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'photo_size',
			array(
				'label'     => __( 'Size', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::SLIDER,
				'range'     => array( 'px' => array( 'min' => 40, 'max' => 200 ) ),
				'default'   => array( 'size' => 100, 'unit' => 'px' ),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-photo' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			array(
				'name'     => 'photo_border',
				'selector' => '{{WRAPPER}} .a1tools-team-photo',
			)
		);

		$this->end_controls_section();

		// ── Style: Name ────────────────────────────────────────────
		$this->start_controls_section(
			'style_name_section',
			array(
				'label' => __( 'Name', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'name_typography',
				'selector' => '{{WRAPPER}} .a1tools-team-name',
			)
		);

		$this->add_control(
			'name_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-name' => 'color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Role ────────────────────────────────────────────
		$this->start_controls_section(
			'style_role_section',
			array(
				'label' => __( 'Role', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'role_typography',
				'selector' => '{{WRAPPER}} .a1tools-team-role',
			)
		);

		$this->add_control(
			'role_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-role' => 'color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Bio ─────────────────────────────────────────────
		$this->start_controls_section(
			'style_bio_section',
			array(
				'label' => __( 'Bio', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'bio_typography',
				'selector' => '{{WRAPPER}} .a1tools-team-bio',
			)
		);

		$this->add_control(
			'bio_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-bio' => '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-team-grid' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();

		// ── Style: Category Heading ───────────────────────────────
		$this->start_controls_section(
			'style_category_heading_section',
			array(
				'label' => __( 'Category Heading', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			array(
				'name'     => 'category_heading_typography',
				'selector' => '{{WRAPPER}} .a1tools-team-category-heading',
			)
		);

		$this->add_control(
			'category_heading_color',
			array(
				'label'     => __( 'Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-category-heading' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'category_heading_border_color',
			array(
				'label'     => __( 'Border Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-category-heading' => 'border-bottom-color: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'category_heading_spacing',
			array(
				'label'     => __( 'Bottom Spacing', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::SLIDER,
				'range'     => array( 'px' => array( 'min' => 0, 'max' => 50 ) ),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-team-category-heading' => 'margin-bottom: {{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_team(
			array(
				'layout'             => $settings['layout'] ?? 'grid',
				'columns'            => $settings['columns'] ?? '3',
				'show_photo'         => $settings['show_photo'] ?? 'yes',
				'show_role'          => $settings['show_role'] ?? 'yes',
				'show_bio'           => $settings['show_bio'] ?? 'yes',
				'show_phone'         => $settings['show_phone'] ?? '',
				'show_email'         => $settings['show_email'] ?? '',
				'show_certifications' => $settings['show_certifications'] ?? 'yes',
				'featured_only'      => $settings['featured_only'] ?? '',
				'category'               => $settings['category'] ?? '',
				'category_order'         => $settings['category_order'] ?? '',
				'show_category_heading'  => $settings['show_category_heading'] ?? 'yes',
				'_elementor'         => 'yes',
			)
		);
	}

	/**
	 * Render widget preview in the Elementor editor.
	 */
	protected function content_template() {
		?>
		<#
		var isGrid    = (settings.layout === 'grid');
		var showPhoto = (settings.show_photo === 'yes');
		var showRole  = (settings.show_role === 'yes');
		var showBio   = (settings.show_bio === 'yes');
		var showPhone = (settings.show_phone === 'yes');
		var showEmail = (settings.show_email === 'yes');
		var showCerts = (settings.show_certifications === 'yes');

		var members = {
			'Management': [
				{ name: 'Mike Johnson', role: 'Owner / Lead Technician', bio: 'Over 20 years of experience in chimney services.', phone: '(555) 123-4567', email: 'mike@example.com', certs: 'CSIA Certified' }
			],
			'Technicians': [
				{ name: 'Tom Williams', role: 'Senior Technician', bio: 'Specializes in fireplace installations and chimney inspections.', phone: '(555) 234-5678', email: 'tom@example.com', certs: 'NFI Certified' },
				{ name: 'Dave Brown', role: 'Technician', bio: 'Expert in chimney sweeping and dryer vent cleaning.', phone: '(555) 345-6789', email: 'dave@example.com', certs: 'CSIA Certified' }
			]
		};

		var showCategoryHeading = (settings.show_category_heading === 'yes');
		#>
		<div class="a1tools-team-wrapper">
			<# _.each( members, function( catMembers, catName ) { #>
			<# if(showCategoryHeading){#>
			<h3 class="a1tools-team-category-heading" style="margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid #e67e22;font-size:1.3em;font-weight:600;">{{ catName }}</h3>
			<#}#>
			<div class="a1tools-team-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( catMembers, function( m ) { #>
				<div class="a1tools-team-card" style="background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;text-align:center;">
					<# if(showPhoto){#>
					<div class="a1tools-team-photo" style="width:100px;height:100px;border-radius:50%;background:#e0e0e0;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#999;">&#9786;</div>
					<#}#>
					<h3 class="a1tools-team-name" style="margin:0 0 4px;font-size:18px;">{{ m.name }}</h3>
					<# if(showRole){#>
					<p class="a1tools-team-role" style="margin:0 0 8px;font-size:14px;color:#e67e22;font-weight:500;">{{ m.role }}</p>
					<#}#>
					<# if(showBio){#>
					<p class="a1tools-team-bio" style="margin:0 0 8px;font-size:13px;color:#666;">{{ m.bio }}</p>
					<#}#>
					<# if(showCerts){#>
					<p style="margin:0 0 6px;font-size:12px;color:#27ae60;font-weight:500;">{{ m.certs }}</p>
					<#}#>
					<# if(showPhone){#>
					<p style="margin:0 0 2px;font-size:13px;color:#333;">{{ m.phone }}</p>
					<#}#>
					<# if(showEmail){#>
					<p style="margin:0;font-size:13px;color:#333;">{{ m.email }}</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 team member data loads on the frontend from the A1 Tools API.
		</div>
		<?php
	}
}