<?php
/**
 * Button builder edit view.
 *
 * @package Rsmspark_Content_Widgets
 *
 * @var int                  $button_id
 * @var bool                 $is_new
 * @var string               $title
 * @var array<string, mixed> $config
 */

defined( 'ABSPATH' ) || exit;

$shortcode  = $button_id > 0 ? '[rsm_button id="' . absint( $button_id ) . '"]' : '';
$show_buttons_nav = true;
$icon_value         = Rsmspark_Buttons_Config::sanitize_icon( $config['icon'] ?? '' );
$icon_type          = (string) ( $config['icon_type'] ?? 'sprite' );
if ( 'dashicon' === $icon_type ) {
	$icon_type = 'sprite';
}
$icon_choices       = Rsmspark_Buttons_Icons::get_picker_choices();
$icon_categories    = Rsmspark_Buttons_Icons::get_categories();
$icon_image_id      = absint( $config['icon_image_id'] ?? 0 );
$icon_image_url     = $icon_image_id > 0 ? wp_get_attachment_image_url( $icon_image_id, 'thumbnail' ) : '';
$link_post_options  = Rsmspark_Buttons::get_link_post_options();
$selected_link_post = (string) absint( $config['link_post_id'] ?? 0 );
$hover_effects      = array( 'none', 'lift', 'scale', 'glow', 'lift-glow' );
?>
<?php Rsmspark_Buttons_Icons::print_sprite( true ); ?>
<div class="wrap rsm-buttons-admin rsm-buttons-edit rsmspark-content-widgets-admin rsmspark-suite-admin-hub rsmspark-suite-ui">
	<?php
	Rsmspark_Admin_Header::render(
		__( 'Buttons', 'rsm-content-widgets' ),
		array( 'slug' => 'buttons' )
	);
	?>

	<h2 class="rsmspark-cw-screen-title">
		<?php echo $is_new ? esc_html__( 'Add New Button', 'rsm-content-widgets' ) : esc_html__( 'Edit Button', 'rsm-content-widgets' ); ?>
	</h2>
	<p><a href="<?php echo esc_url( Rsmspark_Buttons_Admin::tab_url( 'buttons' ) ); ?>">&larr; <?php esc_html_e( 'Back to all buttons', 'rsm-content-widgets' ); ?></a></p>

	<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" id="rsm-buttons-builder-form">
		<?php wp_nonce_field( 'rsmspark_buttons_save' ); ?>
		<input type="hidden" name="action" value="rsmspark_buttons_save" />
		<input type="hidden" name="button_id" value="<?php echo esc_attr( (string) absint( $button_id ) ); ?>" />

		<div class="rsm-buttons-builder">
			<div class="rsm-buttons-builder__main">
				<div class="rsm-buttons-card">
					<h2><?php esc_html_e( 'Style Preset', 'rsm-content-widgets' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Apply a starting style, then customize below.', 'rsm-content-widgets' ); ?></p>
					<p>
						<select id="rsmspark_buttons_style_preset" class="regular-text">
							<option value=""><?php esc_html_e( 'Choose a preset…', 'rsm-content-widgets' ); ?></option>
							<?php foreach ( Rsmspark_Buttons_Presets::all() as $slug => $preset ) : ?>
								<?php if ( ! empty( $preset['pro'] ) ) : ?>
									<?php continue; ?>
								<?php endif; ?>
								<option value="<?php echo esc_attr( (string) $slug ); ?>" data-pro="<?php echo ! empty( $preset['pro'] ) ? '1' : '0'; ?>">
									<?php echo esc_html( (string) ( $preset['label'] ?? $slug ) ); ?>
								</option>
							<?php endforeach; ?>
						</select>
						<button type="button" class="button" id="rsmspark_buttons_apply_preset"><?php esc_html_e( 'Apply Preset', 'rsm-content-widgets' ); ?></button>
					</p>
				</div>

				<div class="rsm-buttons-card">
					<h2><?php esc_html_e( 'Content', 'rsm-content-widgets' ); ?></h2>
					<p>
						<label for="button_title"><strong><?php esc_html_e( 'Button Name', 'rsm-content-widgets' ); ?></strong></label><br />
						<input type="text" class="regular-text" id="button_title" name="button_title" value="<?php echo esc_attr( $title ); ?>" placeholder="<?php esc_attr_e( 'Internal name, e.g. Primary Hero CTA', 'rsm-content-widgets' ); ?>" />
					</p>
					<p>
						<label for="rsmspark_button_text_line_1"><strong><?php esc_html_e( 'Text Line 1', 'rsm-content-widgets' ); ?> *</strong></label><br />
						<input type="text" class="large-text rsm-buttons-live" id="rsmspark_button_text_line_1" name="rsm_button[text_line_1]" value="<?php echo esc_attr( (string) $config['text_line_1'] ); ?>" required />
					</p>
					<p>
						<label for="rsmspark_button_text_line_2"><?php esc_html_e( 'Text Line 2', 'rsm-content-widgets' ); ?></label><br />
						<input type="text" class="regular-text rsm-buttons-live" id="rsmspark_button_text_line_2" name="rsm_button[text_line_2]" value="<?php echo esc_attr( (string) $config['text_line_2'] ); ?>" />
					</p>
					<div class="rsm-buttons-icon-field">
						<label><strong><?php esc_html_e( 'Icon', 'rsm-content-widgets' ); ?></strong></label>
						<p>
							<label><input type="radio" class="rsm-buttons-live rsm-buttons-icon-type" name="rsm_button[icon_type]" value="sprite" <?php checked( $icon_type, 'sprite' ); ?> /> <?php esc_html_e( 'SVG Icon', 'rsm-content-widgets' ); ?></label>
							<label><input type="radio" class="rsm-buttons-live rsm-buttons-icon-type" name="rsm_button[icon_type]" value="image" <?php checked( $icon_type, 'image' ); ?> /> <?php esc_html_e( 'Image', 'rsm-content-widgets' ); ?></label>
						</p>
						<div class="rsm-buttons-icon-sprite-panel">
						<p class="rsm-buttons-icon-toolbar">
							<label class="screen-reader-text" for="rsmspark_buttons_icon_search"><?php esc_html_e( 'Search icons', 'rsm-content-widgets' ); ?></label>
							<input type="search" class="regular-text" id="rsmspark_buttons_icon_search" placeholder="<?php esc_attr_e( 'Search icons…', 'rsm-content-widgets' ); ?>" />
							<label class="screen-reader-text" for="rsmspark_buttons_icon_category"><?php esc_html_e( 'Icon category', 'rsm-content-widgets' ); ?></label>
							<select id="rsmspark_buttons_icon_category">
								<option value=""><?php esc_html_e( 'All categories', 'rsm-content-widgets' ); ?></option>
								<?php foreach ( $icon_categories as $icon_category ) : ?>
									<option value="<?php echo esc_attr( (string) ( $icon_category['id'] ?? '' ) ); ?>"><?php echo esc_html( (string) ( $icon_category['label'] ?? '' ) ); ?></option>
								<?php endforeach; ?>
							</select>
						</p>
						<input type="hidden" class="rsm-buttons-live" id="rsmspark_button_icon" name="rsm_button[icon]" value="<?php echo esc_attr( $icon_value ); ?>" />
						<div class="rsm-buttons-icon-picker" id="rsmspark_buttons_icon_picker" aria-label="<?php esc_attr_e( 'Choose an icon', 'rsm-content-widgets' ); ?>">
							<?php foreach ( $icon_choices as $icon_choice ) : ?>
								<?php
								$slug      = (string) ( $icon_choice['slug'] ?? '' );
								$selected  = $slug === $icon_value ? ' is-selected' : '';
								$btn_label = (string) ( $icon_choice['label'] ?? $slug );
								$category  = (string) ( $icon_choice['category'] ?? 'general' );
								?>
								<button type="button" class="rsm-buttons-icon-choice<?php echo esc_attr( $selected ); ?>" data-icon="<?php echo esc_attr( $slug ); ?>" data-category="<?php echo esc_attr( $category ); ?>" title="<?php echo esc_attr( $btn_label ); ?>">
									<?php if ( '' !== $slug ) : ?>
										<svg class="rsm-buttons-icon-choice__svg" aria-hidden="true" focusable="false"><use href="#rsm-icon-<?php echo esc_attr( $slug ); ?>"></use></svg>
									<?php else : ?>
										<span class="rsm-buttons-icon-choice__none-label" aria-hidden="true">—</span>
									<?php endif; ?>
									<span class="screen-reader-text"><?php echo esc_html( $btn_label ); ?></span>
								</button>
							<?php endforeach; ?>
						</div>
						<p class="description"><?php esc_html_e( 'Click an icon above, or enter a sprite slug below (e.g. cart, arrow-right, facebook).', 'rsm-content-widgets' ); ?></p>
						<p>
							<label for="rsmspark_button_icon_custom"><?php esc_html_e( 'Custom icon slug', 'rsm-content-widgets' ); ?></label><br />
							<input type="text" class="regular-text" id="rsmspark_button_icon_custom" value="<?php echo esc_attr( $icon_value ); ?>" placeholder="cart" />
						</p>
						</div>
						<div class="rsm-buttons-icon-image-panel">
							<input type="hidden" class="rsm-buttons-live" id="rsmspark_button_icon_image_id" name="rsm_button[icon_image_id]" value="<?php echo esc_attr( (string) $icon_image_id ); ?>" />
							<div class="rsm-buttons-icon-image-preview" id="rsmspark_buttons_icon_image_preview">
								<?php if ( $icon_image_url ) : ?>
									<img src="<?php echo esc_url( $icon_image_url ); ?>" alt="" />
								<?php endif; ?>
							</div>
							<p>
								<button type="button" class="button" id="rsmspark_buttons_pick_icon_image"><?php esc_html_e( 'Select Image', 'rsm-content-widgets' ); ?></button>
								<button type="button" class="button" id="rsmspark_buttons_remove_icon_image"><?php esc_html_e( 'Remove', 'rsm-content-widgets' ); ?></button>
							</p>
						</div>
					</div>
					<p class="rsm-buttons-icon-color-row">
						<label for="rsmspark_button_icon_color"><?php esc_html_e( 'Icon color', 'rsm-content-widgets' ); ?></label><br />
						<input type="text" class="rsm-color-picker rsm-buttons-live" id="rsmspark_button_icon_color" name="rsm_button[icon_color]" value="<?php echo esc_attr( (string) ( $config['icon_color'] ?? '' ) ); ?>" data-default-color="<?php echo esc_attr( (string) ( $config['text_color'] ?? '#ffffff' ) ); ?>" />
						<span class="description"><?php esc_html_e( 'Leave empty to match the button text color.', 'rsm-content-widgets' ); ?></span>
					</p>
					<p>
						<label><?php esc_html_e( 'Icon Position', 'rsm-content-widgets' ); ?></label><br />
						<label><input type="radio" class="rsm-buttons-live" name="rsm_button[icon_position]" value="left" <?php checked( $config['icon_position'], 'left' ); ?> /> <?php esc_html_e( 'Left', 'rsm-content-widgets' ); ?></label>
						<label><input type="radio" class="rsm-buttons-live" name="rsm_button[icon_position]" value="right" <?php checked( $config['icon_position'], 'right' ); ?> /> <?php esc_html_e( 'Right', 'rsm-content-widgets' ); ?></label>
					</p>
				</div>

				<div class="rsm-buttons-card rsm-buttons-card--link">
					<h2><?php esc_html_e( 'Button Link', 'rsm-content-widgets' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Set where this button goes. The destination is saved with the button and used by the shortcode.', 'rsm-content-widgets' ); ?></p>
					<p>
						<label><input type="radio" name="rsm_button[link_type]" value="url" class="rsm-buttons-live rsm-buttons-link-type" <?php checked( $config['link_type'], 'url' ); ?> /> <?php esc_html_e( 'Custom URL', 'rsm-content-widgets' ); ?></label>
						<label><input type="radio" name="rsm_button[link_type]" value="post" class="rsm-buttons-live rsm-buttons-link-type" <?php checked( $config['link_type'], 'post' ); ?> /> <?php esc_html_e( 'WordPress Page/Post', 'rsm-content-widgets' ); ?></label>
					</p>
					<div class="rsm-buttons-link-url">
						<p>
							<label for="rsmspark_button_link_url"><strong><?php esc_html_e( 'Link URL', 'rsm-content-widgets' ); ?></strong></label><br />
							<input type="text" class="large-text rsm-buttons-live" id="rsmspark_button_link_url" name="rsm_button[link_url]" value="<?php echo esc_attr( (string) $config['link_url'] ); ?>" placeholder="#section-id, /page#section, https://example.com" />
							<span class="description"><?php esc_html_e( 'Use a full URL, a same-page anchor (#section-id), or a site path (/page#section).', 'rsm-content-widgets' ); ?></span>
						</p>
					</div>
					<div class="rsm-buttons-link-post">
						<p>
							<label for="rsmspark_button_link_post_id"><strong><?php esc_html_e( 'Page or post', 'rsm-content-widgets' ); ?></strong></label><br />
							<select id="rsmspark_button_link_post_id" name="rsm_button[link_post_id]" class="regular-text rsm-buttons-live">
								<?php foreach ( $link_post_options as $post_id => $label ) : ?>
									<option value="<?php echo esc_attr( (string) $post_id ); ?>" <?php selected( $selected_link_post, (string) $post_id ); ?>><?php echo esc_html( $label ); ?></option>
								<?php endforeach; ?>
							</select>
						</p>
					</div>
					<p>
						<label><input type="checkbox" name="rsm_button[target_blank]" value="1" class="rsm-buttons-live" <?php checked( ! empty( $config['target_blank'] ) ); ?> /> <?php esc_html_e( 'Open in new tab', 'rsm-content-widgets' ); ?></label>
					</p>
				</div>

				<div class="rsm-buttons-card">
					<h2><?php esc_html_e( 'Shape & Size', 'rsm-content-widgets' ); ?></h2>
					<p>
						<label for="rsmspark_button_shape"><?php esc_html_e( 'Shape', 'rsm-content-widgets' ); ?></label><br />
						<select id="rsmspark_button_shape" name="rsm_button[shape]" class="rsm-buttons-live">
							<option value="rectangle" <?php selected( $config['shape'], 'rectangle' ); ?>><?php esc_html_e( 'Rectangle', 'rsm-content-widgets' ); ?></option>
							<option value="rounded" <?php selected( $config['shape'], 'rounded' ); ?>><?php esc_html_e( 'Rounded', 'rsm-content-widgets' ); ?></option>
							<option value="pill" <?php selected( $config['shape'], 'pill' ); ?>><?php esc_html_e( 'Pill', 'rsm-content-widgets' ); ?></option>
						</select>
					</p>
					<p class="rsm-buttons-radius-row">
						<label for="rsmspark_button_border_radius"><?php esc_html_e( 'Border Radius (px)', 'rsm-content-widgets' ); ?></label><br />
						<input type="range" min="0" max="50" class="rsm-buttons-live" id="rsmspark_button_border_radius" name="rsm_button[border_radius]" value="<?php echo esc_attr( (string) absint( $config['border_radius'] ) ); ?>" />
						<span class="rsm-buttons-range-value"><?php echo esc_html( (string) absint( $config['border_radius'] ) ); ?></span>
					</p>
					<p>
						<label for="rsmspark_button_size"><?php esc_html_e( 'Size', 'rsm-content-widgets' ); ?></label><br />
						<select id="rsmspark_button_size" name="rsm_button[size]" class="rsm-buttons-live">
							<option value="small" <?php selected( $config['size'], 'small' ); ?>><?php esc_html_e( 'Small', 'rsm-content-widgets' ); ?></option>
							<option value="medium" <?php selected( $config['size'], 'medium' ); ?>><?php esc_html_e( 'Medium', 'rsm-content-widgets' ); ?></option>
							<option value="large" <?php selected( $config['size'], 'large' ); ?>><?php esc_html_e( 'Large', 'rsm-content-widgets' ); ?></option>
						</select>
					</p>
					<p>
						<label for="rsmspark_button_width"><?php esc_html_e( 'Width', 'rsm-content-widgets' ); ?></label><br />
						<select id="rsmspark_button_width" name="rsm_button[width]" class="rsm-buttons-live">
							<option value="auto" <?php selected( $config['width'], 'auto' ); ?>><?php esc_html_e( 'Auto', 'rsm-content-widgets' ); ?></option>
							<option value="full" <?php selected( $config['width'], 'full' ); ?>><?php esc_html_e( 'Full width', 'rsm-content-widgets' ); ?></option>
							<option value="custom_px" <?php selected( $config['width'], 'custom_px' ); ?>><?php esc_html_e( 'Fixed (px)', 'rsm-content-widgets' ); ?></option>
						</select>
						<input type="number" min="40" max="1200" class="small-text rsm-buttons-live" name="rsm_button[custom_width_px]" value="<?php echo esc_attr( (string) absint( $config['custom_width_px'] ) ); ?>" />
					</p>
				</div>

				<div class="rsm-buttons-card">
					<h2><?php esc_html_e( 'Colors & Border', 'rsm-content-widgets' ); ?></h2>
					<p class="description rsm-buttons-colors-hint"><?php esc_html_e( 'After applying a style preset, adjust colors here.', 'rsm-content-widgets' ); ?></p>
					<div class="rsm-buttons-color-grid rsm-buttons-color-grid--solid">
						<?php
						$colors = array(
							'bg_color'           => __( 'Background', 'rsm-content-widgets' ),
							'bg_hover_color'     => __( 'Background Hover', 'rsm-content-widgets' ),
							'text_color'         => __( 'Text', 'rsm-content-widgets' ),
							'text_hover_color'   => __( 'Text Hover', 'rsm-content-widgets' ),
							'border_color'       => __( 'Border', 'rsm-content-widgets' ),
							'border_hover_color' => __( 'Border Hover', 'rsm-content-widgets' ),
						);
						foreach ( $colors as $key => $label ) :
							?>
							<p>
								<label for="rsmspark_button_<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label><br />
								<input type="text" class="rsm-color-picker rsm-buttons-live" id="rsmspark_button_<?php echo esc_attr( $key ); ?>" name="rsm_button[<?php echo esc_attr( $key ); ?>]" value="<?php echo esc_attr( (string) $config[ $key ] ); ?>" data-default-color="<?php echo esc_attr( (string) $config[ $key ] ); ?>" />
							</p>
						<?php endforeach; ?>
					</div>
					<p>
						<label for="rsmspark_button_border_width"><?php esc_html_e( 'Border Width', 'rsm-content-widgets' ); ?></label>
						<input type="number" min="0" max="8" class="small-text rsm-buttons-live" id="rsmspark_button_border_width" name="rsm_button[border_width]" value="<?php echo esc_attr( (string) absint( $config['border_width'] ) ); ?>" />
					</p>
					<input type="hidden" name="rsm_button[bg_type]" value="solid" />
				</div>

				<div class="rsm-buttons-card">
					<h2><?php esc_html_e( 'Effects', 'rsm-content-widgets' ); ?></h2>
					<p>
						<label for="rsmspark_button_shadow"><?php esc_html_e( 'Shadow', 'rsm-content-widgets' ); ?></label>
						<select id="rsmspark_button_shadow" name="rsm_button[shadow]" class="rsm-buttons-live">
							<?php foreach ( array( 'none', 'soft', 'medium', 'strong' ) as $shadow ) : ?>
								<option value="<?php echo esc_attr( $shadow ); ?>" <?php selected( $config['shadow'], $shadow ); ?>><?php echo esc_html( ucfirst( $shadow ) ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p>
						<label for="rsmspark_button_hover_effect"><?php esc_html_e( 'Hover Effect', 'rsm-content-widgets' ); ?></label>
						<select id="rsmspark_button_hover_effect" name="rsm_button[hover_effect]" class="rsm-buttons-live">
							<?php foreach ( $hover_effects as $effect ) : ?>
								<option value="<?php echo esc_attr( $effect ); ?>" <?php selected( $config['hover_effect'], $effect ); ?>><?php echo esc_html( ucfirst( str_replace( '-', ' + ', $effect ) ) ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p>
						<label for="rsmspark_button_extra_class"><?php esc_html_e( 'Extra CSS class', 'rsm-content-widgets' ); ?></label>
						<input type="text" class="regular-text" id="rsmspark_button_extra_class" name="rsm_button[extra_class]" value="<?php echo esc_attr( (string) $config['extra_class'] ); ?>" />
					</p>
				</div>
			</div>

			<aside class="rsm-buttons-builder__sidebar">
				<div class="rsm-buttons-card rsm-buttons-preview-card">
					<h2><?php esc_html_e( 'Live Preview', 'rsm-content-widgets' ); ?></h2>
					<div id="rsm-buttons-live-preview" class="rsm-buttons-preview-stage">
						<?php echo wp_kses( Rsmspark_Buttons_Render::render( $config, $button_id, true ), Rsmspark_Content_Widgets_Kses::allowed_html() ); ?>
					</div>
					<?php if ( $shortcode ) : ?>
						<p class="rsm-buttons-shortcode-row">
							<code id="rsm-buttons-shortcode-display"><?php echo esc_html( $shortcode ); ?></code>
							<button type="button" class="button rsm-buttons-copy-shortcode" data-shortcode="<?php echo esc_attr( $shortcode ); ?>"><?php esc_html_e( 'Copy Shortcode', 'rsm-content-widgets' ); ?></button>
						</p>
					<?php endif; ?>
					<p class="submit">
						<button type="submit" class="button button-primary button-large"><?php esc_html_e( 'Save Button', 'rsm-content-widgets' ); ?></button>
						<button type="submit" class="button button-secondary" name="save_duplicate" value="1"><?php esc_html_e( 'Save & Duplicate', 'rsm-content-widgets' ); ?></button>
					</p>
				</div>
			</aside>
		</div>
	</form>
</div>
