<?php
/**
 * Options Page Builder Edit Page Template
 * 3-column layout matching Admin Columns Manager
 *
 * @package Switchboard
 * @since 1.0.0
 */

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

// Page data should be passed from admin.php
if (!isset($page_data)) {
    $page_data = [
        'id' => '',
        'page_title' => '',
        'page_description' => '',
        'menu_title' => '',
        'slug' => '',
        'parent_slug' => '',
        'capability' => 'manage_options',
        'icon' => 'dashicons-admin-generic',
        'position' => 30,
        'fields' => [],
    ];
}

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

// Get all menu pages for parent select
$menu_pages = [
    'none' => __('Top Level (root menu)', 'wpswitchboard'),
    'index.php' => __('Dashboard', 'wpswitchboard'),
    'edit.php' => __('Posts', 'wpswitchboard'),
    'upload.php' => __('Media', 'wpswitchboard'),
    'edit.php?post_type=page' => __('Pages', 'wpswitchboard'),
    'edit-comments.php' => __('Comments', 'wpswitchboard'),
    'themes.php' => __('Appearance', 'wpswitchboard'),
    'plugins.php' => __('Plugins', 'wpswitchboard'),
    'users.php' => __('Users', 'wpswitchboard'),
    'tools.php' => __('Tools', 'wpswitchboard'),
    'options-general.php' => __('Settings', 'wpswitchboard'),
    'switchboard' => __('Switchboard', 'wpswitchboard'),
];
?>

<form method="post" id="opb-form" class="sb-module-opb-form">
    <input type="hidden" id="opb-page-id" value="<?php echo isset($page_data['id']) ? esc_attr($page_data['id']) : ''; ?>">
    <input type="hidden" id="opb-is-edit" value="<?php echo $is_edit ? '1' : '0'; ?>">

    <!-- Full Width: Page Settings -->
    <div class="opb-page-settings-full">
        <div class="sb-module-card">
            <div class="sb-module-card-header">
                <div class="sb-module-card-header-left">
                    <h2 class="sb-module-card-title"><?php esc_html_e('Page Settings', 'wpswitchboard'); ?></h2>
                    <p class="sb-module-card-desc"><?php esc_html_e('Configure where this page appears', 'wpswitchboard'); ?></p>
                </div>
            </div>
            <div class="sb-module-card-body">
                <div class="opb-page-settings-grid">
                <!-- Row 1: Page Title, Menu Title, Menu Slug -->
                <div class="sb-module-form-group">
                    <label for="opb-page-title" class="sb-module-form-label">
                        <?php esc_html_e('Page Title', 'wpswitchboard'); ?>
                        <span class="sb-module-required">*</span>
                    </label>
                    <input type="text" id="opb-page-title" class="sb-module-input" value="<?php echo esc_attr($page_data['page_title']); ?>" placeholder="<?php esc_attr_e('e.g., Site Settings', 'wpswitchboard'); ?>" required>
                    <p class="sb-module-form-help"><?php esc_html_e('Shown in browser title', 'wpswitchboard'); ?></p>
                </div>

                <div class="sb-module-form-group">
                    <label for="opb-menu-title" class="sb-module-form-label">
                        <?php esc_html_e('Menu Title', 'wpswitchboard'); ?>
                        <span class="sb-module-required">*</span>
                    </label>
                    <input type="text" id="opb-menu-title" class="sb-module-input" value="<?php echo esc_attr($page_data['menu_title']); ?>" placeholder="<?php esc_attr_e('e.g., Settings', 'wpswitchboard'); ?>" required>
                    <p class="sb-module-form-help"><?php esc_html_e('Appears in admin menu', 'wpswitchboard'); ?></p>
                </div>

                <div class="sb-module-form-group">
                    <label for="opb-menu-slug" class="sb-module-form-label">
                        <?php esc_html_e('Menu Slug', 'wpswitchboard'); ?>
                        <span class="sb-module-required">*</span>
                    </label>
                    <input type="text" id="opb-menu-slug" class="sb-module-input" value="<?php echo esc_attr($page_data['slug']); ?>" <?php echo $is_edit ? 'readonly' : ''; ?> placeholder="<?php esc_attr_e('e.g., site-settings', 'wpswitchboard'); ?>" pattern="[a-z0-9_-]+" required>
                    <p class="sb-module-form-help">
                        <?php echo $is_edit
                            ? esc_html__('Cannot be changed after creation', 'wpswitchboard')
                            : esc_html__('Lowercase letters, numbers, hyphens, underscores only', 'wpswitchboard'); ?>
                    </p>
                </div>

                <!-- Row 2: Page Description (full width) -->
                <div class="sb-module-form-group opb-page-description-group">
                    <label for="opb-page-description" class="sb-module-form-label">
                        <?php esc_html_e('Page Description', 'wpswitchboard'); ?>
                    </label>
                    <textarea id="opb-page-description" class="sb-module-input" rows="2" placeholder="<?php esc_attr_e('Brief description of this options page', 'wpswitchboard'); ?>"><?php echo esc_textarea(isset($page_data['page_description']) ? $page_data['page_description'] : ''); ?></textarea>
                    <p class="sb-module-form-help"><?php esc_html_e('Shown below the page title', 'wpswitchboard'); ?></p>
                </div>

                <!-- Row 3: Parent Menu, Capability, Icon & Position -->
                <div class="sb-module-form-group">
                    <label for="opb-parent-menu" class="sb-module-form-label"><?php esc_html_e('Parent Menu', 'wpswitchboard'); ?></label>
                    <select id="opb-parent-menu" class="sb-module-select">
                        <option value="" <?php selected($page_data['parent_slug'], ''); ?>><?php esc_html_e('Top Level (root menu)', 'wpswitchboard'); ?></option>
                        <option value="index.php" <?php selected($page_data['parent_slug'], 'index.php'); ?>><?php esc_html_e('Dashboard', 'wpswitchboard'); ?></option>
                        <option value="edit.php" <?php selected($page_data['parent_slug'], 'edit.php'); ?>><?php esc_html_e('Posts', 'wpswitchboard'); ?></option>
                        <option value="upload.php" <?php selected($page_data['parent_slug'], 'upload.php'); ?>><?php esc_html_e('Media', 'wpswitchboard'); ?></option>
                        <option value="edit.php?post_type=page" <?php selected($page_data['parent_slug'], 'edit.php?post_type=page'); ?>><?php esc_html_e('Pages', 'wpswitchboard'); ?></option>
                        <option value="edit-comments.php" <?php selected($page_data['parent_slug'], 'edit-comments.php'); ?>><?php esc_html_e('Comments', 'wpswitchboard'); ?></option>
                        <option value="themes.php" <?php selected($page_data['parent_slug'], 'themes.php'); ?>><?php esc_html_e('Appearance', 'wpswitchboard'); ?></option>
                        <option value="plugins.php" <?php selected($page_data['parent_slug'], 'plugins.php'); ?>><?php esc_html_e('Plugins', 'wpswitchboard'); ?></option>
                        <option value="users.php" <?php selected($page_data['parent_slug'], 'users.php'); ?>><?php esc_html_e('Users', 'wpswitchboard'); ?></option>
                        <option value="tools.php" <?php selected($page_data['parent_slug'], 'tools.php'); ?>><?php esc_html_e('Tools', 'wpswitchboard'); ?></option>
                        <option value="options-general.php" <?php selected($page_data['parent_slug'], 'options-general.php'); ?>><?php esc_html_e('Settings', 'wpswitchboard'); ?></option>
                        <option value="switchboard" <?php selected($page_data['parent_slug'], 'switchboard'); ?>><?php esc_html_e('Switchboard', 'wpswitchboard'); ?></option>
                    </select>
                    <p class="sb-module-form-help"><?php esc_html_e('Where to nest this page', 'wpswitchboard'); ?></p>
                </div>

                <div class="sb-module-form-group">
                    <label for="opb-capability" class="sb-module-form-label"><?php esc_html_e('Required Capability', 'wpswitchboard'); ?></label>
                    <select id="opb-capability" class="sb-module-select">
                        <option value="manage_options" <?php selected($page_data['capability'], 'manage_options'); ?>><?php esc_html_e('Administrator (manage_options)', 'wpswitchboard'); ?></option>
                        <option value="edit_pages" <?php selected($page_data['capability'], 'edit_pages'); ?>><?php esc_html_e('Editor (edit_pages)', 'wpswitchboard'); ?></option>
                        <option value="edit_posts" <?php selected($page_data['capability'], 'edit_posts'); ?>><?php esc_html_e('Author (edit_posts)', 'wpswitchboard'); ?></option>
                        <option value="read" <?php selected($page_data['capability'], 'read'); ?>><?php esc_html_e('Subscriber (read)', 'wpswitchboard'); ?></option>
                    </select>
                    <p class="sb-module-form-help"><?php esc_html_e('Who can access this page', 'wpswitchboard'); ?></p>
                </div>

                <div class="sb-module-form-group" id="opb-icon-position-wrapper">
                    <label class="sb-module-form-label"><?php esc_html_e('Icon & Position', 'wpswitchboard'); ?></label>
                    <div class="opb-icon-position-row">
                        <input type="text" id="opb-icon" class="sb-module-input opb-icon-input" value="<?php echo esc_attr($page_data['icon']); ?>" placeholder="<?php esc_attr_e('dashicons-admin-generic', 'wpswitchboard'); ?>">
                        <input type="number" id="opb-position" class="sb-module-input opb-position-input" value="<?php echo esc_attr($page_data['position']); ?>" min="1" max="100" placeholder="30">
                    </div>
                    <p class="sb-module-form-help"><?php esc_html_e('Icon class (click to pick) & menu position', 'wpswitchboard'); ?></p>
                </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Two Column Layout: Fields Editor + Quick Add -->
    <div class="opb-editor-layout">
        <!-- Left: Fields Editor -->
        <div class="opb-fields-column">
        <div class="sb-module-card sb-module-form-section">
            <div class="sb-module-card-header">
                <div class="sb-module-card-header-left">
                    <h2 class="sb-module-card-title"><?php esc_html_e('Fields', 'wpswitchboard'); ?></h2>
                    <p class="sb-module-card-desc"><?php esc_html_e('Add and configure fields for your options page', 'wpswitchboard'); ?></p>
                </div>
            </div>
            <div class="sb-module-card-body">
                <div id="opb-fields-list" class="opb-fields-list">
                    <?php if ($is_edit && !empty($page_data['fields'])): ?>
                        <!-- Fields will be rendered by JavaScript in edit mode -->
                    <?php else: ?>
                        <div class="sb-module-empty">
                            <div class="sb-module-empty-icon"></div>
                            <p class="sb-module-empty-title"><?php esc_html_e('No fields yet', 'wpswitchboard'); ?></p>
                            <p class="sb-module-empty-desc"><?php esc_html_e('Use Quick Add to create fields', 'wpswitchboard'); ?></p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            <div class="sb-module-card-footer">
                <div id="opb-save-indicator" class="sb-module-save-indicator">
                    <svg fill="currentColor" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
                    <span><?php esc_html_e('Saved', 'wpswitchboard'); ?></span>
                </div>
                <div class="sb-module-button-group" style="margin-left: auto;">
                    <?php if ($is_edit): ?>
                        <button type="button" id="opb-delete-page" class="sb-module-button sb-module-button-danger">
                            <?php esc_html_e('Delete Page', 'wpswitchboard'); ?>
                        </button>
                    <?php endif; ?>
                    <button type="button" id="opb-save-page" class="sb-module-button sb-module-button-primary">
                        <?php esc_html_e('Save Options Page', 'wpswitchboard'); ?>
                    </button>
                </div>
            </div>
        </div>
        </div>

        <!-- Right: Quick Add -->
        <div class="opb-quickadd-column">
        <div class="sb-module-card">
            <div class="sb-module-card-header">
                <div class="sb-module-card-header-left">
                    <h2 class="sb-module-card-title"><?php esc_html_e('Quick Add', 'wpswitchboard'); ?></h2>
                    <p class="sb-module-card-desc"><?php esc_html_e('Common field types', 'wpswitchboard'); ?></p>
                </div>
            </div>
            <div class="sb-module-card-body">
                <div class="sb-module-quick-add-grid">
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="text">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
                        <span><?php esc_html_e('Text', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="textarea">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path></svg>
                        <span><?php esc_html_e('Textarea', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="select">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('Select', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="checkbox">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span><?php esc_html_e('Checkbox', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="radio">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span><?php esc_html_e('Radio', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="number">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
                        <span><?php esc_html_e('Number', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="email">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('Email', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="url">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('URL', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="color">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('Color', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="image">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('Image', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="wysiwyg">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('WYSIWYG', 'wpswitchboard'); ?></span>
                    </button>
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field" data-type="date">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <span><?php esc_html_e('Date', 'wpswitchboard'); ?></span>
                    </button>
                </div>
                <div class="opb-quick-add-divider"></div>
                <div class="sb-module-quick-add-grid opb-quick-add-layout">
                    <button type="button" class="sb-module-quick-add-btn opb-quick-add-field opb-quick-add-group" data-type="group">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
                        <span><?php esc_html_e('Group', 'wpswitchboard'); ?></span>
                    </button>
                </div>
            </div>
        </div>
        </div>
    </div>
</form>

<script>
// Page data for JavaScript
window.opbPageData = <?php echo wp_json_encode($page_data); ?>;
window.opbIsEdit = <?php echo $is_edit ? 'true' : 'false'; ?>;
</script>
