<transition name="fade">
    <div
        v-if="show"
        class="wpuf-fixed wpuf-inset-0 wpuf-z-50 wpuf-overflow-y-auto wpuf-bg-black wpuf-bg-opacity-50"
        @keydown.esc="handleKeydown"
        @click.self="handleCancel">
        <div class="wpuf-flex wpuf-items-center wpuf-justify-center wpuf-min-h-screen wpuf-px-4">
            <div
                class="wpuf-relative wpuf-bg-white wpuf-rounded-lg wpuf-shadow-xl wpuf-max-w-2xl wpuf-p-6 wpuf-w-[50vw]"
                @click.stop>
                <!-- Modal Header -->
                <div class="wpuf-flex wpuf-items-center wpuf-justify-between wpuf-mb-4">
                    <h3 class="wpuf-text-lg wpuf-font-semibold wpuf-text-gray-900 wpuf-m-0">
                        <?php esc_html_e( 'Bulk Add Options', 'wpuf-pro' ); ?>
                    </h3>
                    <button
                        type="button"
                        @click="handleCancel"
                        class="wpuf-text-gray-400 hover:wpuf-text-gray-600 wpuf-transition-colors">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="wpuf-size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <!-- Help Text -->
                <div class="wpuf-mb-4 wpuf-p-3 wpuf-bg-gray-50 wpuf-rounded-md">
                    <p class="wpuf-text-sm wpuf-text-gray-600 wpuf-mb-0">
                        <?php esc_html_e( 'Enter one option per line. Empty lines will be automatically removed. Maximum 1000 options total.', 'wpuf-pro' ); ?>
                    </p>
                </div>

                <!-- Textarea -->
                <div class="wpuf-mb-4">
                    <textarea
                        v-model="inputText"
                        rows="12"
                        class="wpuf-w-full wpuf-px-3 wpuf-py-2 wpuf-border wpuf-border-gray-300 wpuf-rounded-md wpuf-text-sm wpuf-font-mono wpuf-resize-none focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-primary focus:wpuf-border-transparent"
                        :placeholder="'<?php esc_attr_e( 'Option 1\nOption 2\nOption 3', 'wpuf-pro' ); ?>'"
                        @keydown.esc="handleKeydown"></textarea>
                </div>

                <!-- Preview Count -->
                <div class="wpuf-mb-4 wpuf-text-sm wpuf-text-gray-600">
                    <span v-if="parseOptions().length > 0">
                        <?php esc_html_e( 'Will add', 'wpuf-pro' ); ?> <strong>{{ parseOptions().length }}</strong> <?php esc_html_e( 'option(s)', 'wpuf-pro' ); ?>
                        <span v-if="existingOptionsCount > 0">
                            (<?php esc_html_e( 'Total:', 'wpuf-pro' ); ?> {{ existingOptionsCount + parseOptions().length }})
                        </span>
                    </span>
                    <span v-else class="wpuf-text-gray-400">
                        <?php esc_html_e( 'No options to add', 'wpuf-pro' ); ?>
                    </span>
                </div>

                <!-- Modal Footer -->
                <div class="wpuf-flex wpuf-items-center wpuf-justify-end wpuf-gap-x-3">
                    <button
                        type="button"
                        @click="handleCancel"
                        class="wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-font-medium wpuf-text-gray-700 wpuf-bg-white wpuf-border wpuf-border-gray-300 wpuf-rounded-md hover:wpuf-bg-gray-50 focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-offset-2 focus:wpuf-ring-primary">
                        <?php esc_html_e( 'Cancel', 'wpuf-pro' ); ?>
                    </button>
                    <button
                        type="button"
                        @click="handleAddOptions"
                        class="wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-font-medium wpuf-text-white wpuf-bg-primary wpuf-border wpuf-border-transparent wpuf-rounded-md hover:wpuf-bg-primary-dark focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-offset-2 focus:wpuf-ring-primary">
                        <?php esc_html_e( 'Add Options', 'wpuf-pro' ); ?>
                    </button>
                </div>
            </div>
        </div>
    </div>
</transition>

