<?php
/**
 * Options Page Builder - Edit View
 *
 * @package OptionsPageBuilder
 * @since 1.0.0
 */

use WP_PowerSuite\Core\ModuleRegistry;

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

$page_data = $page_data ?? [];
$is_edit   = ! empty( $page_data['id'] );

$parent_options = $parent_options ?? [
	''           => __( 'Top Level (root menu)', 'wp-powersuite' ),
	'powersuite' => __( 'WP PowerSuite', 'wp-powersuite' ),
];

$module_meta = ModuleRegistry::getInstance()->getModuleMetadata( 'options-page-builder' );
$is_pro      = ! empty( $module_meta['is_pro'] );

/**
 * Save / delete bar (top or bottom), matching Login Page Customizer layout.
 *
 * @param bool   $is_edit   Whether editing an existing page.
 * @param string $modifier  Optional modifier class.
 */
$render_opb_actions_bar = static function ( bool $is_edit, string $modifier = '' ): void {
	$wrapper_class = 'wpps-opb-actions-wrapper';
	if ( $modifier !== '' ) {
		$wrapper_class .= ' ' . $modifier;
	}
	$show_indicator = $modifier === '';
	?>
	<div class="<?php echo esc_attr( $wrapper_class ); ?>">
		<div class="wpps-opb-actions">
			<?php if ( $show_indicator ) : ?>
				<div id="opb-save-indicator" class="wpps-opb-save-indicator"></div>
			<?php endif; ?>
			<?php if ( $is_edit ) : ?>
				<button type="button" class="button button-link-delete opb-delete-page"><?php esc_html_e( 'Delete Page', 'wp-powersuite' ); ?></button>
			<?php endif; ?>
			<button type="button" class="button button-primary opb-save-page"><?php esc_html_e( 'Save Options Page', 'wp-powersuite' ); ?></button>
		</div>
	</div>
	<?php
};
?>
<div class="wrap wpps-opb-page">
	<hr class="wp-header-end" style="margin:0;padding:0;border:none;height:0;overflow:hidden;">
	<?php
	\WP_PowerSuite\Admin\PageHero::render_for_module(
		[
			'icon'    => 'dashicons-admin-settings',
			'title'   => $is_edit ? __( 'Editing Options Page', 'wp-powersuite' ) : __( 'Creating Options Page', 'wp-powersuite' ),
			'tagline' => $is_edit
				? __( 'Edit your options page settings and fields', 'wp-powersuite' )
				: __( 'Create a new custom admin page with settings fields', 'wp-powersuite' ),
			'status'  => $is_pro ? __( 'Premium', 'wp-powersuite' ) : '',
			'actions' => [
				[
					'label' => __( 'All pages', 'wp-powersuite' ),
					'url'   => admin_url( 'admin.php?page=powersuite-options-page-builder' ),
					'icon'  => 'dashicons-arrow-left-alt',
				],
				[
					'label' => __( 'Add New Page', 'wp-powersuite' ),
					'url'   => admin_url( 'admin.php?page=powersuite-options-page-builder&action=add' ),
					'icon'  => 'dashicons-plus-alt',
				],
			],
		]
	);
	?>

	<form id="wpps-opb-form" class="wpps-opb-form">
		<input type="hidden" id="opb-page-id" value="<?php echo esc_attr( $page_data['id'] ?? '' ); ?>">
		<input type="hidden" id="opb-nonce" value="<?php echo esc_attr( wp_create_nonce( 'wpps_opb' ) ); ?>">

		<?php $render_opb_actions_bar( $is_edit ); ?>

		<div class="wpps-opb-panel wpps-opb-page-settings">
			<h2><?php esc_html_e( 'Page Settings', 'wp-powersuite' ); ?></h2>
			<p class="description"><?php esc_html_e( 'Configure where this page appears in the admin and who can access it.', 'wp-powersuite' ); ?></p>
			<table class="form-table" role="presentation">
				<tbody>
					<tr>
						<th scope="row">
							<label for="opb-page-title"><?php esc_html_e( 'Page Title', 'wp-powersuite' ); ?> <span class="wpps-opb-required">*</span></label>
						</th>
						<td>
							<input type="text" id="opb-page-title" class="regular-text" value="<?php echo esc_attr( $page_data['page_title'] ?? '' ); ?>" placeholder="<?php esc_attr_e( 'e.g., Site Settings', 'wp-powersuite' ); ?>" required>
							<p class="description"><?php esc_html_e( 'Shown in the browser title bar.', 'wp-powersuite' ); ?></p>
						</td>
						<th scope="row">
							<label for="opb-menu-title"><?php esc_html_e( 'Menu Title', 'wp-powersuite' ); ?> <span class="wpps-opb-required">*</span></label>
						</th>
						<td>
							<input type="text" id="opb-menu-title" class="regular-text" value="<?php echo esc_attr( $page_data['menu_title'] ?? '' ); ?>" placeholder="<?php esc_attr_e( 'e.g., Settings', 'wp-powersuite' ); ?>" required>
							<p class="description"><?php esc_html_e( 'Label shown in the admin menu.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row">
							<label for="opb-menu-slug"><?php esc_html_e( 'Menu Slug', 'wp-powersuite' ); ?> <span class="wpps-opb-required">*</span></label>
						</th>
						<td>
							<input type="text" id="opb-menu-slug" class="regular-text" value="<?php echo esc_attr( $page_data['slug'] ?? '' ); ?>" <?php echo $is_edit ? 'readonly' : ''; ?> placeholder="<?php esc_attr_e( 'e.g., site-settings', 'wp-powersuite' ); ?>" pattern="[a-z0-9_-]+" required>
							<p class="description"><?php echo $is_edit ? esc_html__( 'Cannot be changed after creation.', 'wp-powersuite' ) : esc_html__( 'Lowercase letters, numbers, hyphens, and underscores only.', 'wp-powersuite' ); ?></p>
						</td>
						<th scope="row">
							<label for="opb-parent-menu"><?php esc_html_e( 'Parent Menu', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<select id="opb-parent-menu" class="regular-text">
								<?php foreach ( $parent_options as $val => $label ) : ?>
									<option value="<?php echo esc_attr( $val ); ?>" <?php selected( $page_data['parent_slug'] ?? '', $val ); ?>><?php echo esc_html( $label ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php esc_html_e( 'Where to nest this page in the admin menu.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row">
							<label for="opb-page-description"><?php esc_html_e( 'Page Description', 'wp-powersuite' ); ?></label>
						</th>
						<td colspan="3">
							<textarea id="opb-page-description" class="large-text" rows="2" placeholder="<?php esc_attr_e( 'Brief description of this options page', 'wp-powersuite' ); ?>"><?php echo esc_textarea( $page_data['page_description'] ?? '' ); ?></textarea>
							<p class="description"><?php esc_html_e( 'Shown below the page title on the live options screen.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row">
							<label for="opb-capability"><?php esc_html_e( 'Required Capability', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<select id="opb-capability" class="regular-text">
								<option value="manage_options" <?php selected( $page_data['capability'] ?? 'manage_options', 'manage_options' ); ?>><?php esc_html_e( 'Administrator (manage_options)', 'wp-powersuite' ); ?></option>
								<option value="edit_others_posts" <?php selected( $page_data['capability'] ?? '', 'edit_others_posts' ); ?>><?php esc_html_e( 'Editor (edit_others_posts)', 'wp-powersuite' ); ?></option>
								<option value="edit_pages" <?php selected( $page_data['capability'] ?? '', 'edit_pages' ); ?>><?php esc_html_e( 'Editor (edit_pages)', 'wp-powersuite' ); ?></option>
								<option value="edit_posts" <?php selected( ( $page_data['capability'] ?? '' ) === 'read' ? 'edit_posts' : ( $page_data['capability'] ?? 'manage_options' ), 'edit_posts' ); ?>><?php esc_html_e( 'Author (edit_posts)', 'wp-powersuite' ); ?></option>
							</select>
							<p class="description"><?php esc_html_e( 'Minimum capability required to view and save this settings page in wp-admin (Subscriber/read is not offered — use Author or higher). Frontend output (Elementor, shortcodes, blocks) is visible to all visitors.', 'wp-powersuite' ); ?></p>
						</td>
						<th scope="row" id="opb-icon-row">
							<label for="opb-icon"><?php esc_html_e( 'Icon', 'wp-powersuite' ); ?></label>
						</th>
						<td id="opb-icon-cell">
							<div class="wpps-opb-icon-picker-wrap">
								<button type="button" class="wpps-opb-icon-picker-btn" id="opb-icon-picker-btn" aria-label="<?php esc_attr_e( 'Pick icon', 'wp-powersuite' ); ?>">
									<span class="dashicons <?php echo esc_attr( $page_data['icon'] ?? 'dashicons-admin-generic' ); ?>"></span>
								</button>
								<input type="text" id="opb-icon" class="regular-text wpps-opb-icon-input" value="<?php echo esc_attr( $page_data['icon'] ?? 'dashicons-admin-generic' ); ?>" placeholder="dashicons-admin-generic">
							</div>
							<p class="description">
								<?php esc_html_e( 'Dashicon class for top-level menu items. Click the icon to browse the full WordPress icon set or type a class name.', 'wp-powersuite' ); ?>
								<a href="https://developer.wordpress.org/resource/dashicons/" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Dashicons reference', 'wp-powersuite' ); ?></a>
							</p>
						</td>
					</tr>
					<tr id="opb-position-row">
						<th scope="row">
							<label for="opb-position"><?php esc_html_e( 'Menu Position', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<input type="number" id="opb-position" class="small-text" value="<?php echo esc_attr( $page_data['position'] ?? 30 ); ?>" data-wpps-min="1" data-wpps-max="100" data-wpps-step="1" placeholder="30">
							<p class="description"><?php esc_html_e( 'Position in the admin menu (top-level pages only).', 'wp-powersuite' ); ?></p>
						</td>
						<th scope="row">
							<label for="opb-save-button"><?php esc_html_e( 'Save Button Label', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<input type="text" id="opb-save-button" class="regular-text" value="<?php echo esc_attr( $page_data['save_button'] ?? '' ); ?>" placeholder="<?php esc_attr_e( 'Save Changes', 'wp-powersuite' ); ?>">
							<p class="description"><?php esc_html_e( 'Leave blank to use the default label.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
					<tr>
						<th scope="row">
							<label for="opb-updated-message"><?php esc_html_e( 'Saved Message', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<input type="text" id="opb-updated-message" class="regular-text" value="<?php echo esc_attr( $page_data['updated_message'] ?? '' ); ?>" placeholder="<?php esc_attr_e( 'Settings saved.', 'wp-powersuite' ); ?>">
							<p class="description"><?php esc_html_e( 'Message shown after saving values on the live page.', 'wp-powersuite' ); ?></p>
						</td>
						<th scope="row">
							<label for="opb-autoload"><?php esc_html_e( 'Autoload Values', 'wp-powersuite' ); ?></label>
						</th>
						<td>
							<label>
								<input type="checkbox" id="opb-autoload" value="1" <?php checked( ! isset( $page_data['autoload'] ) || ! empty( $page_data['autoload'] ) ); ?>>
								<?php esc_html_e( 'Load option on every page request', 'wp-powersuite' ); ?>
							</label>
							<p class="description"><?php esc_html_e( 'Disable for large pages to improve front-end performance.', 'wp-powersuite' ); ?></p>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="wpps-opb-container wpps-opb-editor-container">
			<div class="wpps-opb-main">
				<div class="wpps-opb-panel">
					<h2><?php esc_html_e( 'Fields', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Drag to reorder. Click a field to expand and configure it.', 'wp-powersuite' ); ?></p>
					<div id="opb-fields-list" class="wpps-opb-fields-list">
						<div class="wpps-opb-empty-fields"><?php esc_html_e( 'No fields yet. Use Quick Add to create fields.', 'wp-powersuite' ); ?></div>
					</div>
				</div>

				<?php $render_opb_actions_bar( $is_edit, 'wpps-opb-actions-wrapper--bottom' ); ?>
			</div>
			<div class="wpps-opb-sidebar">
				<div class="wpps-opb-panel wpps-opb-quickadd-panel">
					<h2><?php esc_html_e( 'Quick Add', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Click a field type to add it to your page.', 'wp-powersuite' ); ?></p>
					<div class="wpps-opb-quick-add-grid">
						<?php
						$types = [
							'text'     => 'M4 6h16M4 12h16m-7 6h7',
							'textarea' => 'M4 6h16M4 12h16M4 18h7',
							'password' => 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
							'select'   => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
							'checkbox' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
							'radio'    => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
							'number'   => 'M7 20l4-16m2 16l4-16M6 9h14M4 15h14',
							'email'    => 'M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207',
							'url'      => 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
							'color'    => 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01',
							'image'    => 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z',
							'wysiwyg'  => 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
							'date'     => 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
							'file'     => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
							'gallery'  => 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z',
							'toggle'   => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
							'link'     => 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
							'repeater' => 'M4 6h16M4 10h16M4 14h16M4 18h16',
							'message'  => 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
							'group'    => 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10',
						];
						foreach ( $types as $t => $path ) :
							$is_group = ( $t === 'group' );
							?>
							<button type="button" class="wpps-opb-quick-add-btn <?php echo $is_group ? 'wpps-opb-quick-add-group' : ''; ?> opb-add-field" data-type="<?php echo esc_attr( $t ); ?>">
								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<?php echo esc_attr( $path ); ?>"></path></svg>
								<span><?php echo esc_html( $t === 'group' ? __( 'Section', 'wp-powersuite' ) : ucfirst( $t ) ); ?></span>
							</button>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

<script>
window.wppsOpbPageData = <?php echo wp_json_encode( $page_data ); ?>;
</script>
