<?php

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

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

if ( ! current_user_can( 'manage_options' ) ) {
	return;
}

if ( ! isset( $module_id ) || empty( $module_id ) ) {
	$module_id = 'custom-admin-css';
}

$settings = OptionStoreModuleSettingsRepository::forModule( $module_id )->all( [] );

$custom_css = isset( $settings['custom_css'] ) && is_string( $settings['custom_css'] )
	? $settings['custom_css']
	: '';
?>

<div class="wp-powersuite-module-settings wp-powersuite-cac-settings wpps-cs-wrap">
	<p class="description">
		<?php esc_html_e( 'Add CSS that runs only in wp-admin. Change colors, fonts, spacing, or hide elements. No theme edits—just paste and save.', 'wp-powersuite' ); ?>
	</p>

	<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' ); ?>

		<table class="form-table" role="presentation">
			<tbody>
				<tr>
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id ); ?>_custom_css"><?php esc_html_e( 'CSS', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<p class="description wpps-cac-field-desc">
							<?php esc_html_e( 'Applies on all wp-admin screens. Use selectors like #wpadminbar, #adminmenu, .wrap, .wp-list-table.', 'wp-powersuite' ); ?>
						</p>
						<div class="wpps-cs-edit-panel wpps-cs-code-panel wpps-cac-code-panel" data-editor-height="420" style="--cs-editor-height: 420px;">
							<div class="wpps-cs-code-wrap">
								<textarea
									id="<?php echo esc_attr( $module_id ); ?>_custom_css"
									name="custom_css"
									class="large-text wp-powersuite-advanced-setting wpps-cs-code-editor"
									data-setting-key="custom_css"
									rows="14"
									placeholder="<?php esc_attr_e( '/* e.g. #wpadminbar { background: #1a1a1a; } */', 'wp-powersuite' ); ?>"
								><?php echo esc_textarea( $custom_css ); ?></textarea>
							</div>
						</div>
						<ul class="description" style="margin-top: 12px; list-style: disc; padding-left: 20px;">
							<li><?php esc_html_e( 'CSS loads late in the page so it can override other admin styles.', 'wp-powersuite' ); ?></li>
							<li><?php esc_html_e( 'Use browser dev tools to inspect elements and find the right selectors.', 'wp-powersuite' ); ?></li>
							<li><?php esc_html_e( 'Test changes on staging before applying to production.', 'wp-powersuite' ); ?></li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</div>
