<?php
/**
 * DTE Default Colours — Kit Tab
 *
 * Replaces Elementor's "Global Colors" tab.
 * Identical structure (System Colours + Custom Colours repeater) with
 * one addition: each colour entry has a "Dark Mode" colour picker that
 * overrides the same CSS variable under [data-ecs-scheme="alt"].
 *
 * Registered with the original 'global-colors' key so the kit data
 * (system_colors / custom_colors) is fully backward-compatible.
 */

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

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Controls\Repeater as Global_Style_Repeater;
use Elementor\Repeater;

class ECS_Default_Colours_Tab extends Global_Colors {

	public function get_title(): string {
		return esc_html__( 'Default Colours', 'ele-custom-skin' );
	}

	/**
	 * Override the parent's register_tab_controls() to inject a
	 * "Dark Mode" colour picker into every repeater row.
	 */
	protected function register_tab_controls(): void {

		$this->start_controls_section(
			'section_global_colors',
			[
				'label' => esc_html__( 'Default Colours', 'ele-custom-skin' ),
				'tab'   => $this->get_id(),
			]
		);

		// ── System Auto: follow OS dark/light preference ─────────────
		$this->add_control(
			'ecs_system_auto',
			[
				'label'       => esc_html__( 'Follow System Preference', 'ele-custom-skin' ),
				'type'        => Controls_Manager::SWITCHER,
				'label_on'    => esc_html__( 'Yes', 'ele-custom-skin' ),
				'label_off'   => esc_html__( 'No', 'ele-custom-skin' ),
				'default'     => '',
				'description' => esc_html__( 'Automatically apply Dark Mode for visitors whose OS uses a dark theme. Users can still override by clicking the switcher.', 'ele-custom-skin' ),
			]
		);

		// ── Mode selector (rendered as tabs by editor JS) ────────────
		$this->add_control(
			'ecs_view_mode',
			[
				'type'         => Controls_Manager::CHOOSE,
				'label'        => esc_html__( 'Preview Mode', 'ele-custom-skin' ),
				'default'      => 'default',
				'toggle'       => false,
				'render_type'  => 'ui',
				'options'      => [
					'default' => [
						'title' => esc_html__( 'Default', 'ele-custom-skin' ),
						'icon'  => 'eicon-sun-o',
					],
					'dark' => [
						'title' => esc_html__( 'Dark Mode', 'ele-custom-skin' ),
						'icon'  => 'eicon-adjust',
					],
				],
			]
		);

		// ── Build repeater with default + dark mode fields ────────────

		$repeater = new Repeater();

		// Colour name
		$repeater->add_control(
			'title',
			[
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'required'    => true,
			]
		);

		// Default colour → outputs --e-global-color-{id} on :root
		$repeater->add_control(
			'color',
			[
				'label'       => esc_html__( 'Default', 'ele-custom-skin' ),
				'type'        => Controls_Manager::COLOR,
				'label_block' => true,
				'selectors'   => [
					'{{WRAPPER}}' => '--e-global-color-{{_id.VALUE}}: {{VALUE}}',
				],
				'global' => [ 'active' => false ],
			]
		);

		// Dark mode colour — saved in kit data, CSS generated by
		// ECS_Color_Scheme_Module::inject_dark_mode_css() with correct specificity.
		$repeater->add_control(
			'dark_color',
			[
				'label'       => esc_html__( 'Dark Mode', 'ele-custom-skin' ),
				'type'        => Controls_Manager::COLOR,
				'label_block' => true,
				'global'      => [ 'active' => false ],
			]
		);

		// ── System Colours (fixed 4, no add/remove) ───────────────────

		$default_colors = [
			[
				'_id'   => 'primary',
				'title' => esc_html__( 'Primary', 'elementor' ),
				'color' => '#6EC1E4',
			],
			[
				'_id'   => 'secondary',
				'title' => esc_html__( 'Secondary', 'elementor' ),
				'color' => '#54595F',
			],
			[
				'_id'   => 'text',
				'title' => esc_html__( 'Text', 'elementor' ),
				'color' => '#7A7A7A',
			],
			[
				'_id'   => 'accent',
				'title' => esc_html__( 'Accent', 'elementor' ),
				'color' => '#61CE70',
			],
		];

		$this->add_control(
			'heading_system_colors',
			[
				'type'  => Controls_Manager::HEADING,
				'label' => esc_html__( 'System Colours', 'ele-custom-skin' ),
			]
		);

		$this->add_control(
			'system_colors',
			[
				'type'         => Global_Style_Repeater::CONTROL_TYPE,
				'fields'       => $repeater->get_controls(),
				'default'      => $default_colors,
				'item_actions' => [
					'add'    => false,
					'remove' => false,
				],
				'separator' => 'after',
			]
		);

		// ── Custom Colours (user-managed) ─────────────────────────────

		$this->add_control(
			'heading_custom_colors',
			[
				'type'  => Controls_Manager::HEADING,
				'label' => esc_html__( 'Custom Colours', 'ele-custom-skin' ),
			]
		);

		$this->add_control(
			'custom_colors',
			[
				'type'   => Global_Style_Repeater::CONTROL_TYPE,
				'fields' => $repeater->get_controls(),
			]
		);

		// ── Dark Mode Logo (visible only in Dark Mode tab) ────────────

		$this->add_control(
			'ecs_dark_logo_heading',
			[
				'type'      => Controls_Manager::HEADING,
				'label'     => esc_html__( 'Dark Mode Logo', 'ele-custom-skin' ),
				'separator' => 'before',
			]
		);

		$this->add_control(
			'ecs_dark_logo',
			[
				'label'       => esc_html__( 'Logo for Dark Mode', 'ele-custom-skin' ),
				'type'        => Controls_Manager::MEDIA,
				'description' => esc_html__( 'Replaces the site logo when Dark Mode is active. Leave empty to keep the default logo.', 'ele-custom-skin' ),
				'default'     => [ 'url' => '', 'id' => '' ],
			]
		);

		$this->end_controls_section();
	}
}
