<?php
/**
 * A1 Tools Store Locator Elementor Widget
 *
 * Displays a searchable store locator with store cards and map embeds.
 * Data comes from the group_stores API (group-level).
 *
 * @package A1_Tools
 * @since   1.7.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class A1Tools_Stores_Elementor_Widget extends \Elementor\Widget_Base {

	public function get_name() {
		return 'a1tools_store_locator';
	}

	public function get_title() {
		return __( 'A1 Store Locator', 'a1-tools' );
	}

	public function get_icon() {
		return 'eicon-google-maps';
	}

	public function get_categories() {
		return array( 'general' );
	}

	public function get_keywords() {
		return array( 'store', 'locator', 'map', 'locations', 'search', 'a1' );
	}

	// ────────────────────────────────────────────────────────────────
	// Controls
	// ────────────────────────────────────────────────────────────────

	protected function register_controls() {

		// ── Content ─────────────────────────────────────────────────
		$this->start_controls_section(
			'content_section',
			array(
				'label' => __( 'Content', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'map_height',
			array(
				'label'   => __( 'Map Height', 'a1-tools' ),
				'type'    => \Elementor\Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min' => 200,
						'max' => 800,
					),
				),
				'default' => array(
					'size' => 400,
					'unit' => 'px',
				),
			)
		);

		$this->add_control(
			'show_search',
			array(
				'label'        => __( 'Show Search Bar', 'a1-tools' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'a1-tools' ),
				'label_off'    => __( 'No', 'a1-tools' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'show_filters',
			array(
				'label'        => __( 'Show State Filter', '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: Cards ────────────────────────────────────────────
		$this->start_controls_section(
			'style_cards_section',
			array(
				'label' => __( 'Store Cards', 'a1-tools' ),
				'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'card_bg_color',
			array(
				'label'     => __( 'Card Background', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => array(
					'{{WRAPPER}} .a1tools-sl-card' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'card_text_color',
			array(
				'label'     => __( 'Text Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '#333333',
				'selectors' => array(
					'{{WRAPPER}} .a1tools-sl-card' => 'color: {{VALUE}};',
					'{{WRAPPER}} .a1tools-sl-card-name' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'card_accent_color',
			array(
				'label'     => __( 'Accent Color', 'a1-tools' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '#0066cc',
				'selectors' => array(
					'{{WRAPPER}} .a1tools-sl-card-links a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .a1tools-sl-card-phone a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .a1tools-sl-card-email a' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'card_border_radius',
			array(
				'label'   => __( 'Border Radius', 'a1-tools' ),
				'type'    => \Elementor\Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min' => 0,
						'max' => 20,
					),
				),
				'default' => array(
					'size' => 8,
					'unit' => 'px',
				),
				'selectors' => array(
					'{{WRAPPER}} .a1tools-sl-card' => 'border-radius: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	// ────────────────────────────────────────────────────────────────
	// Render
	// ────────────────────────────────────────────────────────────────

	protected function render() {
		$settings = $this->get_settings_for_display();

		echo a1tools_shortcode_store_locator( array(
			'map_height'   => $settings['map_height']['size'] ?? '400',
			'show_search'  => $settings['show_search'] ?? 'yes',
			'show_filters' => $settings['show_filters'] ?? 'yes',
		) );
	}

	protected function content_template() {
		?>
		<div class="a1tools-store-locator">
			<# if ( settings.show_search === 'yes' || settings.show_filters === 'yes' ) { #>
			<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
				<# if ( settings.show_search === 'yes' ) { #>
				<input type="text" placeholder="Search by name, city, state, or zip..." style="flex:1;min-width:200px;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;" disabled />
				<# } #>
				<# if ( settings.show_filters === 'yes' ) { #>
				<select style="padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;" disabled>
					<option>All States</option>
				</select>
				<# } #>
			</div>
			<# } #>
			<div style="display:flex;gap:20px;">
				<div style="flex:1;">
					<div style="padding:16px;border:1px solid #eee;border-radius:8px;margin-bottom:12px;">
						<h4 style="margin:0 0 6px;">Store Location 1</h4>
						<p style="margin:0;font-size:0.9em;color:#666;">123 Main St, City, ST 12345</p>
					</div>
					<div style="padding:16px;border:1px solid #eee;border-radius:8px;margin-bottom:12px;">
						<h4 style="margin:0 0 6px;">Store Location 2</h4>
						<p style="margin:0;font-size:0.9em;color:#666;">456 Oak Ave, Town, ST 67890</p>
					</div>
				</div>
				<div style="flex:1;min-width:300px;background:#e5e5e5;height:{{ settings.map_height.size }}px;border-radius:8px;display:flex;align-items:center;justify-content:center;">
					<span style="color:#999;">Map loads on frontend</span>
				</div>
			</div>
		</div>
		<?php
	}
}