<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

if ( ! isset( $module_id ) || empty( $module_id ) ) {
	$module_id = 'disable-drag-drop';
}

$settings     = OptionStoreModuleSettingsRepository::forModule( $module_id )->all( [] );
if ( ! is_array( $settings ) ) {
	$settings = [];
}

$defaults = [
	'roles'              => [],
	'apply_to_visitors'   => true,
	'message'            => __( 'This function is disabled', 'wp-powersuite' ),
	'message_position'   => 'top-right',
	'message_duration'   => 3000,
];
$settings = array_merge( $defaults, $settings );

$selected_roles = $settings['roles'] ?? [];
if ( ! is_array( $selected_roles ) ) {
	$selected_roles = [];
}

$all_roles = wp_roles()->get_names();

?>

<div class="wp-powersuite-module-settings" data-module-id="<?php echo esc_attr( $module_id ); ?>">
	<form class="wp-powersuite-module-settings-form" data-module-id="<?php echo esc_attr( $module_id ); ?>">
		<?php wp_nonce_field( 'wp_powersuite_save_module_settings_' . $module_id, 'wp_powersuite_nonce' ); ?>

					<?php wpps_render_content_protection_notice(); ?>

					<p class="description" style="margin-bottom: 16px;">
						<?php esc_html_e( 'Disable drag and drop on the frontend. Protection applies to visitors (non-logged-in users) by default.', 'wp-powersuite' ); ?>
					</p>
					<p class="description" style="margin-bottom: 16px;">
						<?php esc_html_e( 'File upload fields are not blocked. For a custom file dropzone add data-wpps-allow-file-drop="1". For sortable lists or other intentional HTML5 drag UI, add data-wpps-allow-drag="1" to the container.', 'wp-powersuite' ); ?>
					</p>

					<table class="form-table" role="presentation">
						<tbody>
							<tr>
								<th scope="row">
									<label><?php esc_html_e( 'Apply to roles:', 'wp-powersuite' ); ?></label>
									<?php
									wpps_render_modal_settings_tip(
										__( 'Help: role targeting', 'wp-powersuite' ),
										__( 'Optionally extend protection to logged-in roles. Leave empty so only anonymous visitors match (when "Apply to visitors" is enabled).', 'wp-powersuite' )
									);
									?>
								</th>
								<td>
									<?php if ( empty( $all_roles ) ) : ?>
										<p class="description"><?php esc_html_e( 'No roles found.', 'wp-powersuite' ); ?></p>
									<?php else : ?>
										<div class="wpps-ct-multiselect" id="<?php echo esc_attr( $module_id ); ?>_roles_ms"
											data-label-none="<?php echo esc_attr( __( 'Select roles...', 'wp-powersuite' ) ); ?>"
											data-label-single="<?php echo esc_attr( __( '1 selected', 'wp-powersuite' ) ); ?>"
											<?php /* translators: %d: number value. */ ?>
											data-label-multi="<?php echo esc_attr( __( '%d selected', 'wp-powersuite' ) ); ?>">
											<button type="button" class="wpps-ct-multiselect__trigger" aria-expanded="false" aria-haspopup="listbox" aria-controls="<?php echo esc_attr( $module_id ); ?>_roles_list">
												<span class="wpps-ct-multiselect__trigger-text"><?php esc_html_e( 'Select roles...', 'wp-powersuite' ); ?></span>
												<span class="dashicons dashicons-arrow-down-alt2 wpps-ct-multiselect__chevron"></span>
											</button>
											<div class="wpps-ct-multiselect__dropdown" id="<?php echo esc_attr( $module_id ); ?>_roles_list" role="listbox" hidden>
												<input type="text" class="wpps-ct-multiselect__search" placeholder="<?php esc_attr_e( 'Search roles...', 'wp-powersuite' ); ?>" autocomplete="off" />
												<div class="wpps-ct-multiselect__actions">
													<button type="button" class="wpps-ct-multiselect__action" data-action="select-all"><?php esc_html_e( 'Select all', 'wp-powersuite' ); ?></button>
													<button type="button" class="wpps-ct-multiselect__action" data-action="clear"><?php esc_html_e( 'Clear', 'wp-powersuite' ); ?></button>
												</div>
												<div class="wpps-ct-multiselect__options">
													<?php foreach ( $all_roles as $role_key => $role_label ) : ?>
														<?php $checked = in_array( $role_key, $selected_roles, true ); ?>
														<label class="wpps-ct-multiselect__option" data-slug="<?php echo esc_attr( $role_key ); ?>" data-label="<?php echo esc_attr( $role_label ); ?>">
															<input type="checkbox" name="roles[]" class="wp-powersuite-advanced-setting" data-setting-key="roles" value="<?php echo esc_attr( $role_key ); ?>" <?php checked( $checked ); ?> />
															<span class="wpps-ct-multiselect__option-label"><?php echo esc_html( $role_label ); ?></span>
															<span class="wpps-ct-multiselect__option-slug">(<?php echo esc_html( $role_key ); ?>)</span>
														</label>
													<?php endforeach; ?>
												</div>
											</div>
										</div>
									<?php endif; ?>
								</td>
							</tr>
							<tr>
								<th scope="row"><?php esc_html_e( 'Apply to visitors', 'wp-powersuite' ); ?></th>
								<td>
									<label>
										<input type="checkbox" name="apply_to_visitors" class="wp-powersuite-advanced-setting" data-setting-key="apply_to_visitors" value="1" <?php checked( ! empty( $settings['apply_to_visitors'] ) ); ?> />
										<?php esc_html_e( 'Restrict drag-and-drop for anonymous (not logged in) visitors', 'wp-powersuite' ); ?>
									</label>
									<p class="description"><?php esc_html_e( 'Turn off if you want the rule to apply only to the selected logged-in roles.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr>
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_message"><?php esc_html_e( 'Message', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="text" id="<?php echo esc_attr( $module_id ); ?>_message" name="message" class="regular-text wp-powersuite-advanced-setting" data-setting-key="message" value="<?php echo esc_attr( $settings['message'] ); ?>" />
									<p class="description"><?php esc_html_e( 'Shown when a disabled action is attempted. Style with .wpps-cp-toast and .wpps-cp-toast__text in Custom CSS.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
						</tbody>
					</table>
</form>

	<?php if ( ! empty( $all_roles ) ) : ?>
	<style>
		.wpps-ct-multiselect { position: relative; max-width: 360px; }
		.wpps-ct-multiselect__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; font-size: 14px; text-align: left; cursor: pointer; line-height: 1.4; color: #1d2327; }
		.wpps-ct-multiselect__trigger:hover { border-color: #2271b1; }
		.wpps-ct-multiselect__chevron { font-size: 18px; width: 18px; height: 18px; color: #787c82; flex-shrink: 0; margin-left: 8px; }
		.wpps-ct-multiselect__trigger[aria-expanded="true"] .wpps-ct-multiselect__chevron { transform: rotate(180deg); }
		.wpps-ct-multiselect__dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 100; max-height: 280px; display: flex; flex-direction: column; }
		.wpps-ct-multiselect__dropdown[hidden] { display: none !important; }
		.wpps-ct-multiselect__search { width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid #dcdcde; font-size: 13px; box-sizing: border-box; outline: none; }
		.wpps-ct-multiselect__search::placeholder { color: #a7aaad; }
		.wpps-ct-multiselect__actions { padding: 6px 10px; border-bottom: 1px solid #dcdcde; display: flex; gap: 12px; flex-shrink: 0; }
		.wpps-ct-multiselect__action { background: none; border: none; color: #2271b1; cursor: pointer; font-size: 12px; padding: 0; }
		.wpps-ct-multiselect__action:hover { color: #135e96; text-decoration: underline; }
		.wpps-ct-multiselect__options { overflow-y: auto; padding: 4px 0; max-height: 200px; }
		.wpps-ct-multiselect__option { display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; }
		.wpps-ct-multiselect__option:hover { background: #f0f0f1; }
		.wpps-ct-multiselect__option input { flex-shrink: 0; margin: 0; }
		.wpps-ct-multiselect__option-slug { color: #646970; font-size: 12px; }
		.wpps-ct-multiselect__option.wpps-ct-multiselect__option--hidden { display: none; }
	</style>
	<?php endif; ?>
</div>

