<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;

/**
 * Class Epicformbuilder_Integrations_Elementor
 *
 * This class defines a custom Elementor widget for the Epic Forms Builder plugin.
 * It extends the base Widget_Base class provided by Elementor and implements
 * various methods to define the widget's properties, controls, and rendering logic.
 *
 * @since 1.0.0
 */
class Epicformbuilder_Integrations_Elementor extends Widget_Base {
	/**
	 * Constructor method for the Epicformbuilder_Integrations_Elementor class.
	 *
	 * This constructor registers the necessary scripts and styles for the Elementor widget.
	 *
	 * @since 1.0.0
	 *
	 * @param array $data Optional. Widget data. Default is an empty array.
	 * @param mixed $args Optional. Additional arguments. Default is null.
	 */
	public function __construct( $data = [], $args = null ) {
		parent::__construct( $data, $args );

		// Elementor loads widget assets via classic script handles (get_script_depends),
		// which cannot reference an ES module. So the Elementor widget uses its own IIFE
		// bundle (dist/elementor.iife.js), like the Gutenberg block, while the shortcode
		// and public paths stay ESM. The bundle self-injects its CSS; the public stylesheet
		// is also registered for get_style_depends().
		// Note: do NOT depend on 'elementor-frontend' here — it is not always
		// registered when the widget enqueues (which raises a "dependencies that are
		// not registered" notice). The frontend path initializes on DOMContentLoaded
		// and only reads window.elementorFrontend (already present in the editor
		// preview) as an optional global, so a hard dependency is unnecessary.
		wp_register_script(
			'epicforms-elementor-client',
			EPICFORMS_URL . 'dist/elementor.iife.js',
			[ 'wp-api', 'wp-element', 'jquery' ],
			EPICFORMS_VERSION,
			true
		);
		if ( ! wp_style_is( 'epicforms-public-css', 'registered' ) ) {
			wp_register_style(
				'epicforms-public-css',
				EPICFORMS_URL . 'dist/public.css',
				[],
				EPICFORMS_VERSION
			);
		}

		add_action(
			'elementor/editor/after_enqueue_styles',
			function () {
				$logo_url = esc_url( EPICFORMS_URL . 'assets/logo-red-28.svg' );
				wp_add_inline_style(
					'elementor-editor',
					'.elementor-panel .elementor-element .icon i.epicforms-logo-red-28::before {'
					. "content: '';"
					. 'display: inline-block;'
					. 'width: 28px;'
					. 'height: 28px;'
					. "background: url('" . $logo_url . "') no-repeat center center / contain;"
					. '}'
				);
			}
		);
	}

	/**
	 * Get a list of script handles that the widget depends on.
	 *
	 * @since 1.0.0
	 *
	 * @return array An array of script handles that the widget depends on.
	 */
	public function get_script_depends() {
		return [ 'epicforms-elementor-client' ];
	}

	/**
	 * Get a list of style handles that the widget depends on.
	 *
	 * @since 1.0.0
	 *
	 * @return array An array of style handles that the widget depends on.
	 */
	public function get_style_depends(): array {
		return [ 'epicforms-public-css' ];
	}

	/**
	 * Retrieve the widget name.
	 *
	 * @return string The widget name.
	 */
	public function get_name(): string {
		return 'epicforms';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @return string The widget title.
	 */
	public function get_title(): string {
		return esc_html__( 'Epic Forms', 'epicforms' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @return string The widget icon.
	 */
	public function get_icon(): string {
		return 'epicforms-logo-red-28';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @return array The list of categories.
	 */
	public function get_categories(): array {
		return [ 'general' ];
	}

	/**
	 * Retrieve the list of keywords the widget belongs to.
	 *
	 * @return array The list of keywords.
	 */
	public function get_keywords(): array {
		/** This filter is documented in docs/hooks.md */
		$keywords = (array) apply_filters( 'epicforms_search_keywords', [ 'epic', 'form', 'forms', 'contact', 'lead' ] );

		return array_values( array_unique( array_map( 'strval', $keywords ) ) );
	}

	/**
	 * Indicates whether the widget has inner wrapper.
	 *
	 * @return bool False because the widget does not have an inner wrapper.
	 */
	public function has_widget_inner_wrapper(): bool {
		return false;
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 */
	protected function register_controls(): void {
		// Content Tab.
		$this->form_settings();

		// Styles Tab.
		$this->field_styles();
		$this->label_styles();
		$this->button_styles();
		$this->block_styles();
	}

	/**
	 * Adds a section in the content tab of the Elementor editor to select a form to display.
	 *
	 * @return void
	 */
	private function form_settings() {
		$this->start_controls_section(
			'form_settings',
			[
				'label' => __( 'Pick a Form', 'epicforms' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'form_id',
			[
				'label'   => __( 'Form to display', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => $this->get_forms(),
				'default' => '',
			]
		);
		$this->end_controls_section();
	}

	/**
	 * Adds a section in the style tab of the Elementor editor to customize the appearance of form fields.
	 *
	 * @return void
	 */
	private function field_styles(): void {
		$this->start_controls_section(
			'field_styles',
			[
				'label' => esc_html__( 'Field Styles', 'epicforms' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'inputSize',
			[
				'label'   => esc_html__( 'Size', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'small'  => esc_html__( 'Small', 'epicforms' ),
					'medium' => esc_html__( 'Medium', 'epicforms' ),
					'large'  => esc_html__( 'Large', 'epicforms' ),
				],
				'default' => 'medium',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--font-size: var(--font-size-{{VALUE}});',
				],
			]
		);

		$this->add_control(
			'inputBorderStyle',
			[
				'label'     => esc_html__( 'Border Style', 'epicforms' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => [
					'none'   => esc_html__( 'None', 'epicforms' ),
					'solid'  => esc_html__( 'Solid', 'epicforms' ),
					'dashed' => esc_html__( 'Dashed', 'epicforms' ),
					'dotted' => esc_html__( 'Dotted', 'epicforms' ),
				],
				'default'   => 'solid',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inputBorderWidth',
			[
				'label'     => esc_html__( 'Border Size (px)', 'epicforms' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => '1',
				'min'       => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-border-width: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'inputBorderRadius',
			[
				'label'     => esc_html__( 'Border Radius (px)', 'epicforms' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => '0',
				'default'   => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-border-radius: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'inputBackgroundColor',
			[
				'label'     => esc_html__( 'Background', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'alpha'     => true,
				'default'   => '#FFFFFF',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inputBorderColor',
			[
				'label'     => esc_html__( 'Border', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'alpha'     => true,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inputTextColor',
			[
				'label'     => esc_html__( 'Text', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'alpha'     => true,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-text-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inputPlaceholderColor',
			[
				'label'     => esc_html__( 'Placeholder', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'alpha'     => true,
				'default'   => '#EFEFEF',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--input-placeholder-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Adds a section in the style tab of the Elementor editor to customize the appearance of form labels.
	 *
	 * @return void
	 */
	private function label_styles(): void {
		$this->start_controls_section(
			'label_styles',
			[
				'label' => esc_html__( 'Label Styles', 'epicforms' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'labelSize',
			[
				'label'   => esc_html__( 'Size', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'small'  => esc_html__( 'Small', 'epicforms' ),
					'medium' => esc_html__( 'Medium', 'epicforms' ),
					'large'  => esc_html__( 'Large', 'epicforms' ),
				],
				'default' => 'medium',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--hint-size: var(--hint-size-{{VALUE}}); --label-size: var(--label-size-{{VALUE}}); --subtitle-size: var(--subtitle-size-{{VALUE}}); --title-size: var(--title-size-{{VALUE}});',
				],
			]
		);

		$this->add_control(
			'labelColor',
			[
				'label'   => esc_html__( 'Label', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'alpha'   => true,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--label-text-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'textColor',
			[
				'label'   => esc_html__( 'Text', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'alpha'   => true,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--text-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'hintColor',
			[
				'label'   => esc_html__( 'Hint', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'alpha'   => true,
				'default' => '#888888',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--hint-text-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'errorColor',
			[
				'label'   => esc_html__( 'Error', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#D00D00',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--error-text-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Adds a section in the style tab of the Elementor editor to customize the appearance of form buttons.
	 *
	 * @return void
	 */
	private function button_styles(): void {
		$this->start_controls_section(
			'button_styles',
			[
				'label' => esc_html__( 'Button Styles', 'epicforms' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'buttonSize',
			[
				'label'   => esc_html__( 'Size', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'none'   => esc_html__( 'None', 'epicforms' ),
					'small'  => esc_html__( 'Small', 'epicforms' ),
					'medium' => esc_html__( 'Medium', 'epicforms' ),
					'large'  => esc_html__( 'Large', 'epicforms' ),
				],
				'default' => 'medium',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => 'var(--button-size-{{VALUE}});',
				],
			]
		);

		$this->add_control(
			'buttonBorderStyle',
			[
				'label'   => esc_html__( 'Border', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'none'   => esc_html__( 'None', 'epicforms' ),
					'solid'  => esc_html__( 'Solid', 'epicforms' ),
					'dashed' => esc_html__( 'Dashed', 'epicforms' ),
					'dotted' => esc_html__( 'Dotted', 'epicforms' ),
				],
				'default' => 'solid',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'buttonBorderWidth',
			[
				'label'     => esc_html__( 'Border Size (px)', 'epicforms' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => '1',
				'min'       => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-border-width: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'buttonBorderRadius',
			[
				'label'   => esc_html__( 'Border Radius (px)', 'epicforms' ),
				'type'    => Controls_Manager::NUMBER,
				'min'     => '0',
				'default' => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-border-radius: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'buttonBackgroundColor',
			[
				'label'   => esc_html__( 'Background', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#FFFFFF',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'buttonBorderColor',
			[
				'label'     => esc_html__( 'Border', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'buttonTextColor',
			[
				'label'   => esc_html__( 'Text', 'epicforms' ),
				'type'    => Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--button-text-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Adds a section in the style tab of the Elementor editor to customize the appearance of form block.
	 *
	 * @return void
	 */
	private function block_styles(): void {
		$this->start_controls_section(
			'block_styles',
			[
				'label' => esc_html__( 'Block Styles', 'epicforms' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'containerPadding',
			[
				'label'   => esc_html__( 'Padding (px)', 'epicforms' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => '0',
				'min'     => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-padding: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'blockBorderStyle',
			[
				'label'   => esc_html__( 'Border Style', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'none'   => esc_html__( 'None', 'epicforms' ),
					'solid'  => esc_html__( 'Solid', 'epicforms' ),
					'dashed' => esc_html__( 'Dashed', 'epicforms' ),
					'dotted' => esc_html__( 'Dotted', 'epicforms' ),
				],
				'default' => 'solid',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'blockBorderWidth',
			[
				'label'     => esc_html__( 'Border Size (px)', 'epicforms' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => '0',
				'min'       => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-border-width: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'blockBorderRadius',
			[
				'label'   => esc_html__( 'Border Radius (px)', 'epicforms' ),
				'type'    => Controls_Manager::NUMBER,
				'min'     => '0',
				'default' => '0',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-border-radius: {{VALUE}}px;',
				],
			]
		);

		$this->add_control(
			'blockShadow',
			[
				'label'   => esc_html__( 'Shadow', 'epicforms' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'none'   => esc_html__( 'None', 'epicforms' ),
					'small'  => esc_html__( 'Small', 'epicforms' ),
					'medium' => esc_html__( 'Medium', 'epicforms' ),
					'large'  => esc_html__( 'Large', 'epicforms' ),
				],
				'default' => 'none',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-shadow: var(--block-shadow-{{VALUE}});',
				],
			]
		);

		$this->add_control(
			'blockBackgroundColor',
			[
				'label'     => esc_html__( 'Background', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'transparent',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'blockBorderColor',
			[
				'label'     => esc_html__( 'Border', 'epicforms' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#000000',
				'selectors' => [
					'{{WRAPPER}} .epicforms' => '--block-border-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * @since 1.0.0
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();
		$id       = $settings['form_id'] ?? '';

		wp_enqueue_script( 'epicforms-elementor-client' );
		wp_enqueue_style( 'epicforms-public-css' );

		echo '<div class="epicforms" data-id="' . esc_attr( $id ) . '" data-initialized="false"></div>';
	}

	/**
	 * Retrieve a list of published forms.
	 *
	 * This method fetches a list of published forms from the database
	 * and formats them for use in the Elementor widget control.
	 *
	 * @return array An array of published forms with 'value' and 'label' keys.
	 */
	private function get_forms(): array {
		$form_factory     = new Epicformbuilder_Factories_Form();
		$forms_repository = new Epicformbuilder_Repositories_Forms( $form_factory );

		$forms = $forms_repository->published( 0, 1000 );

		return array_reduce(
			$forms,
			function ( $acc, $form ) {
				$acc[ $form->uid ] = $form->json->title;
				return $acc;
			},
			[
				'' => __( 'Pick a form', 'epicforms' ),
			]
		);
	}
}