<div class="wrap pcfb-wrap">
    <h1 class="wp-heading-inline">
        <span class="pcfb-heading-icon dashicons dashicons-feedback"></span>
        <?php esc_html_e( 'Form Builder', 'pc-form-builder-xyz123' ); ?>
    </h1>
    <a href="<?php echo admin_url( 'admin.php?page=pcfb-all-forms' ); ?>" class="page-title-action">
        <span class="dashicons dashicons-list-view"></span>
        <?php esc_html_e( 'All Forms', 'pc-form-builder-xyz123' ); ?>
    </a>

    <hr class="wp-header-end">

    <?php
    require_once PCFB_PLUGIN_DIR . 'admin/class-admin-helper.php';
    $helper = PCFB_Admin_Helper::get_instance();

    $form_id = isset( $_GET['form_id'] ) ? intval( $_GET['form_id'] ) : 0;
    $is_new = $form_id === 0;

    if ( ! $is_new ) {
        $form = PC_Form_Handler::get_form_by_id( $form_id );
        if ( ! $form ) {
            echo '<div class="notice notice-error"><p>' . esc_html__( 'Form not found.', 'pc-form-builder-xyz123' ) . '</p></div>';
            return;
        }
        $fields = $helper->get_form_fields( $form_id );
        $settings = maybe_unserialize( $form->settings );
    } else {
        $form = (object) array(
            'id'          => 0,
            'name'        => '',
            'description' => '',
            'status'      => 'active',
            'settings'    => array(),
        );
        $fields = array();
        $settings = array();
    }

    $field_types = $helper->get_field_types();
    ?>

    <?php if ( ! $is_new ) : ?>
    <div class="pcfb-shortcode-notice" style="background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 6px; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px;">
        <span class="dashicons dashicons-shortcode" style="color: #2271b1; font-size: 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;"></span>
        <div style="flex: 1;">
            <strong style="display: block; margin-bottom: 4px;"><?php esc_html_e( 'Form Shortcode', 'pc-form-builder-xyz123' ); ?></strong>
            <code onclick="this.select(); document.execCommand('copy');" style="background: #fff; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; display: inline-block;">[pcfb-form id="<?php echo esc_attr( $form->id ); ?>"]</code>
            <span class="description" style="display: block; margin-top: 4px; font-size: 12px;"><?php esc_html_e( 'Click the shortcode to copy it', 'pc-form-builder-xyz123' ); ?></span>
        </div>
    </div>
    <?php endif; ?>

    <form method="post" id="pcfb-form-builder" class="pcfb-form-builder">
        <?php wp_nonce_field( 'pcfb_admin_action', '_wpnonce' ); ?>
        <input type="hidden" name="pcfb_action" value="save_form">
        <input type="hidden" name="form[id]" value="<?php echo esc_attr( $form->id ); ?>">

        <div class="pcfb-builder-layout">
            <div class="pcfb-builder-main">
                <div class="pcfb-card pcfb-form-settings-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Form Details', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>
                    <div class="pcfb-card-body">
                        <div class="pcfb-form-group">
                            <label for="form-name"><?php esc_html_e( 'Form Name', 'pc-form-builder-xyz123' ); ?> *</label>
                            <input type="text" id="form-name" name="form[name]" value="<?php echo esc_attr( $form->name ); ?>" required placeholder="<?php esc_attr_e( 'Enter form name', 'pc-form-builder-xyz123' ); ?>">
                        </div>
                        <div class="pcfb-form-group">
                            <label for="form-description"><?php esc_html_e( 'Description', 'pc-form-builder-xyz123' ); ?></label>
                            <textarea id="form-description" name="form[description]" rows="2" placeholder="<?php esc_attr_e( 'Brief description of this form', 'pc-form-builder-xyz123' ); ?>"><?php echo esc_textarea( $form->description ); ?></textarea>
                        </div>
                        <div class="pcfb-form-group">
                            <label for="form-status"><?php esc_html_e( 'Status', 'pc-form-builder-xyz123' ); ?></label>
                            <select id="form-status" name="form[status]">
                                <option value="active" <?php selected( $form->status, 'active' ); ?>><?php esc_html_e( 'Active', 'pc-form-builder-xyz123' ); ?></option>
                                <option value="inactive" <?php selected( $form->status, 'inactive' ); ?>><?php esc_html_e( 'Inactive', 'pc-form-builder-xyz123' ); ?></option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="pcfb-card pcfb-fields-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Form Fields', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>

                    <div class="pcfb-field-types-section">
                        <h3><?php esc_html_e( 'Add Fields to Your Form', 'pc-form-builder-xyz123' ); ?></h3>
                        <p class="description"><?php esc_html_e( 'Click on any field type below to add it to your form. You can then customize the label, placeholder, and other options.', 'pc-form-builder-xyz123' ); ?></p>
                        <div class="pcfb-field-type-buttons">
                            <?php foreach ( $field_types as $type => $label ) : ?>
                                <button type="button" class="pcfb-add-field-btn" data-field-type="<?php echo esc_attr( $type ); ?>">
                                    <span class="dashicons <?php echo esc_attr( PCFB_Field_Icons::get_field_icon( $type ) ); ?>"></span>
                                    <span class="pcfb-field-label"><?php echo esc_html( $label ); ?></span>
                                </button>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="pcfb-form-fields">
                        <h3><?php esc_html_e( 'Form Structure', 'pc-form-builder-xyz123' ); ?></h3>
                        <p class="description"><?php esc_html_e( 'Drag and drop fields to reorder them. Click on a field to expand and edit its properties.', 'pc-form-builder-xyz123' ); ?></p>
                        <div id="pcfb-fields-container" class="pcfb-fields-container">
                            <?php if ( empty( $fields ) ) : ?>
                                <div class="pcfb-empty-fields">
                                    <span class="dashicons dashicons-plus-alt2 pcfb-empty-icon"></span>
                                    <p><?php esc_html_e( 'No fields added yet.', 'pc-form-builder-xyz123' ); ?></p>
                                    <p class="description"><?php esc_html_e( 'Click a field type above to start building your form.', 'pc-form-builder-xyz123' ); ?></p>
                                </div>
                            <?php else : ?>
                                <?php foreach ( $fields as $index => $field ) : ?>
                                    <?php echo $helper->render_field_item( $field, $index ); ?>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <div class="pcfb-card pcfb-sections-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Form Sections', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>
                    <div class="pcfb-card-body">
                        <p class="description"><?php esc_html_e( 'Organize your form fields into sections for better user experience.', 'pc-form-builder-xyz123' ); ?></p>
                        <div id="pcfb-sections-container" class="pcfb-sections-container">
                            <div class="pcfb-section-box pcfb-default-section">
                                <div class="pcfb-section-header">
                                    <span class="dashicons dashicons-menu"></span>
                                    <span class="pcfb-section-title"><?php esc_html_e( 'Default Section', 'pc-form-builder-xyz123' ); ?></span>
                                </div>
                                <div class="pcfb-section-content">
                                    <p class="description"><?php esc_html_e( 'All fields are placed in this default section by default. You can add section breaks between fields.', 'pc-form-builder-xyz123' ); ?></p>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="button pcfb-add-section-btn" id="pcfb-add-section">
                            <span class="dashicons dashicons-plus"></span>
                            <?php esc_html_e( 'Add Section', 'pc-form-builder-xyz123' ); ?>
                        </button>
                    </div>
                </div>
            </div>

            <div class="pcfb-builder-sidebar">
                <div class="pcfb-card pcfb-publish-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Publish', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>
                    <div class="pcfb-card-body">
                        <button type="submit" class="button button-primary button-large pcfb-save-btn">
                            <span class="dashicons dashicons-saved"></span>
                            <?php esc_html_e( 'Save Form', 'pc-form-builder-xyz123' ); ?>
                        </button>
                        <a href="<?php echo admin_url( 'admin.php?page=pcfb-all-forms' ); ?>" class="button button-large">
                            <?php esc_html_e( 'Cancel', 'pc-form-builder-xyz123' ); ?>
                        </a>
                    </div>
                </div>

                <div class="pcfb-card pcfb-settings-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Form Settings', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>
                    <div class="pcfb-card-body">
                        <div class="pcfb-form-group">
                            <label for="form-success-message"><?php esc_html_e( 'Success Message', 'pc-form-builder-xyz123' ); ?></label>
                            <textarea id="form-success-message" name="form[settings][success_message]" rows="3" placeholder="<?php esc_attr_e( 'Thank you! Your response has been submitted.', 'pc-form-builder-xyz123' ); ?>"><?php echo isset( $settings['success_message'] ) ? esc_textarea( $settings['success_message'] ) : ''; ?></textarea>
                        </div>
                        <div class="pcfb-form-group">
                            <label for="form-submit-text"><?php esc_html_e( 'Submit Button Text', 'pc-form-builder-xyz123' ); ?></label>
                            <input type="text" id="form-submit-text" name="form[settings][submit_text]" value="<?php echo isset( $settings['submit_text'] ) ? esc_attr( $settings['submit_text'] ) : __( 'Submit', 'pc-form-builder-xyz123' ); ?>">
                        </div>
                    </div>
                </div>

                <div class="pcfb-card pcfb-help-card">
                    <div class="pcfb-card-header">
                        <h2><?php esc_html_e( 'Quick Tips', 'pc-form-builder-xyz123' ); ?></h2>
                    </div>
                    <div class="pcfb-card-body">
                        <p><strong><?php esc_html_e( 'Available Field Types:', 'pc-form-builder-xyz123' ); ?></strong></p>
                        <ul>
                            <li><span class="dashicons dashicons-text"></span> <strong><?php esc_html_e( 'Text', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Single line text input', 'pc-form-builder-xyz123' ); ?></li>
                            <li><span class="dashicons dashicons-email"></span> <strong><?php esc_html_e( 'Email', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Email address with validation', 'pc-form-builder-xyz123' ); ?></li>
                            <li><span class="dashicons dashicons-admin-users"></span> <strong><?php esc_html_e( 'Name', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Full name field', 'pc-form-builder-xyz123' ); ?></li>
                            <li><span class="dashicons dashicons-editor-quote"></span> <strong><?php esc_html_e( 'Response', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Multi-line textarea for responses', 'pc-form-builder-xyz123' ); ?></li>
                            <li><span class="dashicons dashicons-arrow-down-alt2"></span> <strong><?php esc_html_e( 'Dropdown', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Select from predefined options', 'pc-form-builder-xyz123' ); ?></li>
                            <li><span class="dashicons dashicons-yes"></span> <strong><?php esc_html_e( 'Checkbox', 'pc-form-builder-xyz123' ); ?></strong> - <?php esc_html_e( 'Checkbox options', 'pc-form-builder-xyz123' ); ?></li>
                        </ul>
                        <hr>
                        <p><?php esc_html_e( 'After saving, use the shortcode to embed this form on any page or post.', 'pc-form-builder-xyz123' ); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
