<?php
/**
 * Admin UI for Header & Footer Code module.
 *
 * @package HeaderFooterCode
 * @since 1.0.0
 */

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

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

if ( ! isset( $module_id ) || empty( $module_id ) ) {
	$module_id = 'header-footer-code';
}

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

$header_code = isset( $settings['header_code'] ) && is_string( $settings['header_code'] ) ? $settings['header_code'] : '';
$body_code   = isset( $settings['body_code'] ) && is_string( $settings['body_code'] ) ? $settings['body_code'] : '';
$footer_code = isset( $settings['footer_code'] ) && is_string( $settings['footer_code'] ) ? $settings['footer_code'] : '';

/**
 * Render a compact code editor panel (Code Snippet editor styling, no per-panel chrome).
 *
 * @param string $module_id   Module ID prefix for field IDs.
 * @param string $field_key   Setting key (header_code, body_code, footer_code).
 * @param string $description Help text above the editor.
 * @param string $value       Current code value.
 * @param string $placeholder Textarea placeholder.
 */
function wpps_hfc_render_code_editor_panel(
	string $module_id,
	string $field_key,
	string $description,
	string $value,
	string $placeholder
): void {
	$textarea_id = $module_id . '_' . $field_key;
	?>
	<p class="description wpps-hfc-field-desc"><?php echo esc_html( $description ); ?></p>
	<div class="wpps-cs-edit-panel wpps-cs-code-panel wpps-hfc-code-panel" data-editor-height="220" style="--cs-editor-height: 220px;">
		<div class="wpps-cs-code-wrap">
			<textarea
				id="<?php echo esc_attr( $textarea_id ); ?>"
				name="<?php echo esc_attr( $field_key ); ?>"
				class="large-text wp-powersuite-advanced-setting wpps-cs-code-editor"
				data-setting-key="<?php echo esc_attr( $field_key ); ?>"
				rows="10"
				placeholder="<?php echo esc_attr( $placeholder ); ?>"
			><?php echo esc_textarea( $value ); ?></textarea>
		</div>
	</div>
	<?php
}
?>
<div class="wp-powersuite-module-settings wp-powersuite-hfc-settings wpps-cs-wrap">
	<p class="description">
		<?php esc_html_e( 'Add custom HTML, CSS, or JavaScript to your site\'s header, body, or footer. WordPress shortcodes (e.g. from other plugins) are expanded on the front end. Use for analytics, verification meta, chat widgets, and other site-wide snippets.', 'wp-powersuite' ); ?>
	</p>

	<form class="wp-powersuite-module-settings-form" data-module-id="<?php echo esc_attr( $module_id ); ?>">
		<table class="form-table" role="presentation">
			<tbody>
				<tr>
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id ); ?>_header_code"><?php esc_html_e( 'Header Code', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<?php
						wpps_hfc_render_code_editor_panel(
							$module_id,
							'header_code',
							__( 'Injected in <head> on every front-end page. Use for meta tags, preconnect, and analytics. Tip: add async or defer to script tags so they do not block page rendering.', 'wp-powersuite' ),
							$header_code,
							'<!-- e.g. Google Analytics, meta verification -->'
						);
						?>
					</td>
				</tr>
				<tr>
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id ); ?>_body_code"><?php esc_html_e( 'Body Code', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<?php
						wpps_hfc_render_code_editor_panel(
							$module_id,
							'body_code',
							__( 'Injected right after <body>. Use for chat widgets, GTM noscript, etc.', 'wp-powersuite' ),
							$body_code,
							'<!-- e.g. Chat widget, GTM noscript -->'
						);
						?>
					</td>
				</tr>
				<tr>
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id ); ?>_footer_code"><?php esc_html_e( 'Footer Code', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<?php
						wpps_hfc_render_code_editor_panel(
							$module_id,
							'footer_code',
							__( 'Injected before </body>. Use for analytics, tracking scripts, chat widgets.', 'wp-powersuite' ),
							$footer_code,
							'<!-- e.g. Google Tag Manager, Facebook Pixel -->'
						);
						?>
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</div>
