<?php
/**
 * Colors and icons settings tab template.
 *
 * @package KooKoa_Folders
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; }
?>
	<!-- ============================================
		TAB 4: Colors & Icons
		============================================ -->
	<div class="kookoawpf-tab-panel" data-panel="colors-icons" style="display:none;">

		<!-- Custom Colors -->
		<div class="kookoawpf-settings-section">
			<h2><?php esc_html_e( 'Custom Colors', 'kookoa-folders' ); ?></h2>
			<p class="description" style="margin-bottom:16px;">
				<?php esc_html_e( 'The 14 default colors cannot be changed. You can add up to 6 custom colors that will appear in the color picker.', 'kookoa-folders' ); ?>
			</p>

			<div class="kookoawpf-ci-colors-base">
				<span class="kookoawpf-ci-label"><?php esc_html_e( 'Default colors', 'kookoa-folders' ); ?></span>
				<div class="kookoawpf-ci-palette">
					<?php
					$kookoawpf_base_colors = array( '#39FF14', '#34C759', '#00BCD4', '#007AFF', '#9966FF', '#FF66FF', '#FF3300', '#FF9500', '#FFCC00', '#CC9933', '#FFCCFF', '#999999', '#FFFFFF', '#000000' );
					foreach ( $kookoawpf_base_colors as $kookoawpf_c ) :
						?>
						<span class="kookoawpf-ci-dot kookoawpf-ci-dot-locked" style="background-color:<?php echo esc_attr( $kookoawpf_c ); ?>;<?php echo esc_attr( ( '#000000' === $kookoawpf_c ) ? 'border:2px solid var(--kookoawpf-green);' : '' ); ?>"></span>
					<?php endforeach; ?>
				</div>
			</div>

			<div class="kookoawpf-ci-colors-custom">
				<span class="kookoawpf-ci-label"><?php esc_html_e( 'Custom colors', 'kookoa-folders' ); ?></span>
				<div class="kookoawpf-ci-custom-slots">
					<?php
					for ( $kookoawpf_i = 0; $kookoawpf_i < 6; $kookoawpf_i++ ) :
						$kookoawpf_val = isset( $kookoawpf_custom_colors[ $kookoawpf_i ] ) ? $kookoawpf_custom_colors[ $kookoawpf_i ] : '';
						?>
						<div class="kookoawpf-ci-custom-slot" data-index="<?php echo esc_attr( $kookoawpf_i ); ?>">
							<?php if ( $kookoawpf_val ) : ?>
								<span class="kookoawpf-ci-dot kookoawpf-ci-dot-custom" style="background-color:<?php echo esc_attr( $kookoawpf_val ); ?>;" data-color="<?php echo esc_attr( $kookoawpf_val ); ?>"></span>
								<button type="button" class="kookoawpf-ci-slot-remove" title="<?php esc_attr_e( 'Remove', 'kookoa-folders' ); ?>">&times;</button>
							<?php else : ?>
								<span class="kookoawpf-ci-dot kookoawpf-ci-dot-empty"></span>
							<?php endif; ?>
							<input type="hidden" name="kookoawpf_custom_colors[]" value="<?php echo esc_attr( $kookoawpf_val ); ?>">
							<input type="color" class="kookoawpf-ci-color-input" value="<?php echo esc_attr( $kookoawpf_val ? $kookoawpf_val : '#39FF14' ); ?>">
						</div>
					<?php endfor; ?>
				</div>
			</div>
		</div>

		<!-- Icon Blocks -->
		<div class="kookoawpf-settings-section" style="margin-top:30px;">
			<h2><?php esc_html_e( 'Icon Blocks', 'kookoa-folders' ); ?></h2>
			<p class="description" style="margin-bottom:20px;">
				<?php esc_html_e( 'Choose which icon categories are available in the icon picker. Disabled categories will be hidden.', 'kookoa-folders' ); ?>
			</p>

			<?php
			$kookoawpf_icon_blocks = array(
				'folders'     => array(
					'label' => __( 'Folders', 'kookoa-folders' ),
					'icons' => array( '⭐', '🔒', '🔗', '🗂️', '📂', '📌', '📍', '✂️', '❓', '🔍', '📚', '🧱', '🧻', '🧰' ),
					'force' => true,
				),
				'images'      => array(
					'label' => __( 'Images', 'kookoa-folders' ),
					'icons' => array( '🖼️', '🌄', '🎨', '🧩', '🏞️', '🌇', '📷' ),
				),
				'documents'   => array(
					'label' => __( 'Documents', 'kookoa-folders' ),
					'icons' => array( '📄', '📝', '📕', '📘', '📗', '📒', '📊', '📑', '📰', '📋', '🧮', '📶', '📈', '📉' ),
				),
				'video-audio' => array(
					'label' => __( 'Video / Audio', 'kookoa-folders' ),
					'icons' => array( '🎬', '▶️', '🎞️', '🎵', '🎧', '💿', '📀' ),
				),
				'tech'        => array(
					'label' => __( 'Tech', 'kookoa-folders' ),
					'icons' => array( '⚙️', '🧠', '🔧', '💻', '🖥️', '📱', '🌐', '📟', '🤖', '🧭', '🔋', '🛡️', '💡', '🧲' ),
				),
				'actions'     => array(
					'label' => __( 'Actions', 'kookoa-folders' ),
					'icons' => array( '➕', '📥', '✏️', '🗑️', '🔍', '🏷️', '🔄', '✅', '✴️', '🚀', '🧹', '♻️', '🧬', '🔥' ),
				),
				'states'      => array(
					'label' => __( 'States', 'kookoa-folders' ),
					'icons' => array( '✔️', '❌', '🌍', '⏳', '⚠️', '🕘', '🎯', '🔴', '🟢', '🟡', '🟠', '🔵', '🟣', '⚪' ),
				),
				'special'     => array(
					'label' => __( 'Special', 'kookoa-folders' ),
					'icons' => array( '🐹', '🐭', '🐶', '🐼', '🍒', '🍉', '🍎', '❤️', '💛', '🩵', '🤍', '🎁', '🛒', '☎️', '⏰', '🚚', '💰', '🌟', '✨', '🔆', '💩', '😍', '😁', '😎', '🤮', '👽', '👻', '🤡', '👍', '👎', '👆', '👌', '✌️', '👈', '🤘' ),
				),
			);
			?>
			<div class="kookoawpf-ci-blocks-compact">
			<?php
			foreach ( $kookoawpf_icon_blocks as $kookoawpf_key => $kookoawpf_block ) :
				$kookoawpf_is_forced  = ! empty( $kookoawpf_block['force'] );
				$kookoawpf_is_enabled = $kookoawpf_is_forced || ! in_array( $kookoawpf_key, $kookoawpf_icon_blocks_disabled, true );
				?>
				<div class="kookoawpf-ci-row-compact">
					<div class="kookoawpf-ci-row-header">
						<label class="kookoawpf-toggle-switch kookoawpf-toggle-sm<?php echo esc_attr( $kookoawpf_is_forced ? ' kookoawpf-toggle-forced' : '' ); ?>">
							<input type="checkbox" name="kookoawpf_icon_blocks[]" value="<?php echo esc_attr( $kookoawpf_key ); ?>"
								<?php checked( $kookoawpf_is_enabled ); ?>
								<?php disabled( $kookoawpf_is_forced ); ?>>
							<span class="kookoawpf-toggle-slider"></span>
						</label>
						<span class="kookoawpf-ci-row-label"><?php echo esc_html( $kookoawpf_block['label'] ); ?></span>
						<?php if ( $kookoawpf_is_forced ) : ?>
							<span class="kookoawpf-ci-block-badge"><?php esc_html_e( 'always on', 'kookoa-folders' ); ?></span>
						<?php endif; ?>
					</div>
					<div class="kookoawpf-ci-row-icons">
						<?php foreach ( $kookoawpf_block['icons'] as $kookoawpf_ico ) : ?>
							<span class="kookoawpf-ci-emoji"><?php echo esc_html( $kookoawpf_ico ); ?></span>
						<?php endforeach; ?>
					</div>
				</div>
			<?php endforeach; ?>
			</div>
		</div>

		<p>
			<button type="button" id="kookoawpf-save-ci-settings" class="button button-primary kookoawpf-btn-save">
				<?php esc_html_e( 'Save Settings', 'kookoa-folders' ); ?>
			</button>
		</p>

	</div>
