<?php
/**
 * FAQ Builder Page Template
 *
 * Renders the WPFAQBlock admin page with live data from the database.
 * FAQs are fetched via WPFAQBlock_Data and grouped by faq_group taxonomy.
 *
 * @package WPFAQBlock
 * @since   2.0.0
 *
 * Security: Only loaded via WPFAQBlock_Admin::render_builder_page()
 * after a current_user_can() check.
 */

// Prevent direct file access.
if (!defined('ABSPATH')) {
    exit;
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

// ── Fetch real data ───────────────────────────────────────────────
$data = new WPFAQBlock_Data();
$grouped_faqs = $data->get_grouped_faqs();   // [ { term, faqs[] }, … ]
$groups_select = $data->get_groups_for_select(); // For edit panel <select>

$has_groups = !empty($grouped_faqs);

// Count real categories (terms) vs the fallback "Uncategorized" group.
$real_category_count = 0;
foreach ($grouped_faqs as $group) {
    if ($group['term'] instanceof WP_Term) {
        $real_category_count++;
    }
}
?>

<div id="wpfaqblock-builder">

    <!-- ══════════════════════════════════════
         TOP BAR
    ═══════════════════════════════════════ -->
    <div class="faqb-topbar">

        <div class="faqb-topbar__brand">
            <img src="<?php echo esc_url(WPFAQBLOCK_URL . 'assets/images/logo.svg'); ?>" alt="WPFAQBlock Logo"
                style="height: 45px; width: auto;">
        </div>

        <div class="faqb-topbar__actions">
            <!-- Search Bar -->
            <div class="faqb-search-wrap">
                <span class="dashicons dashicons-search"></span>
                <input type="text" id="faqb-builder-search"
                    placeholder="<?php esc_attr_e('Search FAQs...', 'wpfaqblock'); ?>" autocomplete="off" />
            </div>

            <button type="button" class="faqb-btn faqb-btn--outline faqb-btn--sm" id="faqb-btn-export">
                <span class="dashicons dashicons-download" style="font-size:14px;width:14px;height:14px;"></span>
                <?php esc_html_e('Export FAQs', 'wpfaqblock'); ?>
            </button>

            <button type="button" class="faqb-btn faqb-btn--outline faqb-btn--sm" id="faqb-btn-import">
                <span class="dashicons dashicons-upload" style="font-size:14px;width:14px;height:14px;"></span>
                <?php esc_html_e('Import FAQs', 'wpfaqblock'); ?>
            </button>

            <a href="<?php echo esc_url(admin_url('edit-tags.php?taxonomy=' . WPFAQBlock_Taxonomy::SLUG . '&post_type=' . WPFAQBlock_CPT::SLUG)); ?>"
                class="faqb-btn faqb-btn--outline faqb-btn--sm" id="faqb-btn-faq-categories">
                <span class="dashicons dashicons-category" style="font-size:14px;width:14px;height:14px;"></span>
                <?php esc_html_e('FAQ Categories', 'wpfaqblock'); ?>
            </a>
            <button type="button" class="faqb-btn faqb-btn--ai faqb-btn--sm" id="faqb-btn-ai">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
                    </path>
                    <path d="M5 3v4"></path>
                    <path d="M19 17v4"></path>
                    <path d="M3 5h4"></path>
                    <path d="M17 19h4"></path>
                </svg>
                <?php esc_html_e('Write with AI', 'wpfaqblock'); ?>
            </button>
            <button type="button" class="faqb-btn faqb-btn--primary faqb-btn--sm" id="faqb-btn-add-group">
                <span class="dashicons dashicons-plus-alt2" style="font-size:14px;width:14px;height:14px;"></span>
                <?php esc_html_e('Add Category', 'wpfaqblock'); ?>
            </button>
        </div>

    </div><!-- /.faqb-topbar -->


    <!-- ══════════════════════════════════════
         TWO-COLUMN LAYOUT
    ═══════════════════════════════════════ -->
    <div class="faqb-layout">

        <!-- ─────────────────────────────────
             LEFT: Builder Column
        ──────────────────────────────────── -->
        <div class="faqb-builder-col">

            <div class="faqb-builder-col__header">
                <h2 class="faqb-builder-col__title" id="faqb-category-count-header">
                    <?php
                    printf(
                        /* translators: %d = number of categories */
                        esc_html(_n('%d Category', '%d Categories', $real_category_count, 'wpfaqblock')),
                        (int) $real_category_count
                    );
                    ?>
                </h2>
                <span class="faqb-status faqb-status--active" id="faqb-saved-status" style="display:none;"
                    aria-live="polite">
                    ✓ <?php esc_html_e('Saved', 'wpfaqblock'); ?>
                </span>
            </div>

            <!-- AJAX notice area -->
            <div id="faqb-notices" role="alert" aria-live="polite"></div>

            <!-- Add Group dashed bar -->
            <button type="button" class="faqb-add-group-bar" id="faqb-add-group-bar"
                aria-label="<?php esc_attr_e('Add FAQ Category', 'wpfaqblock'); ?>">
                <span class="dashicons dashicons-plus-alt2"></span>
                <?php esc_html_e('Add New Category', 'wpfaqblock'); ?>
            </button>

            <!-- ── Groups Container ─────────────────────────────── -->
            <div id="faqb-groups-container">

                <?php if ($has_groups): ?>

                    <?php foreach ($grouped_faqs as $group): ?>
                        <?php
                        /** @var WP_Term|null $term */
                        $term = $group['term'];
                        /** @var WP_Post[] $faqs */
                        $faqs = $group['faqs'];
                        $term_id = $term instanceof WP_Term ? $term->term_id : 0;
                        $term_name = $term instanceof WP_Term
                            ? $term->name
                            : __('Uncategorized', 'wpfaqblock');
                        $faq_count = count($faqs);
                        ?>

                        <div class="faqb-group" data-group-id="<?php echo esc_attr((string) $term_id); ?>"
                            data-group-term="<?php echo esc_attr((string) $term_id); ?>">

                            <!-- Group Header -->
                            <div class="faqb-group__header" role="button" tabindex="0" aria-expanded="true"
                                aria-label="<?php esc_attr_e('Expand / collapse group', 'wpfaqblock'); ?>">

                                <span class="faqb-group__drag-handle"
                                    title="<?php esc_attr_e('Drag to reorder', 'wpfaqblock'); ?>">⠿</span>

                                <span class="faqb-group__name">
                                    <?php echo esc_html($term_name); ?>
                                    <?php if (!$term instanceof WP_Term): ?>
                                        <small
                                            class="faqb-text-xs faqb-text-muted faqb-ml-2 faqb-font-normal">(<?php esc_html_e('FAQs with no category', 'wpfaqblock'); ?>)</small>
                                    <?php endif; ?>
                                </span>

                                <span class="faqb-group__badge"><?php echo esc_html((string) $faq_count); ?></span>

                                <?php if ($term instanceof WP_Term): ?>
                                    <span class="faqb-group__actions">
                                        <!-- Category Active Toggle -->
                                        <label class="faqb-toggle faqb-mr-3"
                                            title="<?php esc_attr_e('Enable / disable this Category', 'wpfaqblock'); ?>"
                                            aria-label="<?php esc_attr_e('Toggle Category visibility', 'wpfaqblock'); ?>">
                                            <?php
                                            $group_status = get_term_meta($term_id, 'faqb_group_status', true);
                                            $group_is_active = ('' === $group_status || '1' === $group_status);
                                            ?>
                                            <input type="checkbox" class="faqb-group-status-toggle"
                                                data-group-id="<?php echo esc_attr((string) $term_id); ?>" <?php checked($group_is_active); ?>>
                                            <span class="faqb-toggle__slider"></span>
                                        </label>

                                        <button type="button"
                                            class="faqb-btn faqb-btn--ghost faqb-btn--icon-only faqb-group-edit-btn"
                                            data-term-id="<?php echo esc_attr((string) $term_id); ?>"
                                            data-term-name="<?php echo esc_attr($term_name); ?>"
                                            title="<?php esc_attr_e('Edit category name', 'wpfaqblock'); ?>"
                                            aria-label="<?php esc_attr_e('Edit category name', 'wpfaqblock'); ?>">
                                            <span class="dashicons dashicons-edit"></span>
                                        </button>
                                        <button type="button"
                                            class="faqb-btn faqb-btn--danger faqb-btn--icon-only faqb-group-delete-btn"
                                            data-term-id="<?php echo esc_attr((string) $term_id); ?>"
                                            title="<?php esc_attr_e('Delete category', 'wpfaqblock'); ?>"
                                            aria-label="<?php esc_attr_e('Delete category', 'wpfaqblock'); ?>">
                                            <span class="dashicons dashicons-trash"></span>
                                        </button>
                                    </span>
                                <?php endif; ?>

                                <span class="faqb-group__chevron dashicons dashicons-arrow-down-alt2"></span>
                            </div><!-- /.faqb-group__header -->


                            <!-- Group Body -->
                            <div class="faqb-group__body">

                                <?php if (!empty($faqs)): ?>

                                    <?php foreach ($faqs as $faq): ?>
                                        <?php
                                        $is_active = ('publish' === $faq->post_status);
                                        $question = get_the_title($faq);
                                        $answer = $faq->post_content;
                                        ?>
                                        <div class="faqb-item<?php echo $is_active ? '' : ' faqb-item--inactive'; ?>"
                                            data-faq-id="<?php echo esc_attr((string) $faq->ID); ?>"
                                            data-group-id="<?php echo esc_attr((string) $term_id); ?>"
                                            data-question="<?php echo esc_attr($question); ?>"
                                            data-answer="<?php echo esc_attr($answer); ?>"
                                            data-status="<?php echo $is_active ? '1' : '0'; ?>" role="button" tabindex="0"
                                            aria-label="<?php echo esc_attr($question); ?>">

                                            <span class="faqb-item__drag"
                                                title="<?php esc_attr_e('Drag to reorder', 'wpfaqblock'); ?>">⠿</span>

                                            <span class="faqb-item__question" <?php echo $is_active ? '' : 'class="faqb-opacity-50"'; ?>>
                                                <?php echo esc_html($question); ?>
                                            </span>

                                            <!-- Publish/Draft toggle -->
                                            <label class="faqb-toggle"
                                                title="<?php esc_attr_e('Enable / disable this FAQ', 'wpfaqblock'); ?>"
                                                aria-label="<?php esc_attr_e('Toggle FAQ visibility', 'wpfaqblock'); ?>">
                                                <input type="checkbox" class="faqb-status-toggle"
                                                    data-faq-id="<?php echo esc_attr((string) $faq->ID); ?>" <?php checked($is_active); ?>>
                                                <span class="faqb-toggle__slider"></span>
                                            </label>

                                            <div class="faqb-item__actions">
                                                <button type="button"
                                                    class="faqb-btn faqb-btn--danger faqb-btn--icon-only faqb-item-delete-btn"
                                                    data-faq-id="<?php echo esc_attr((string) $faq->ID); ?>"
                                                    title="<?php esc_attr_e('Delete FAQ', 'wpfaqblock'); ?>"
                                                    aria-label="<?php esc_attr_e('Delete FAQ', 'wpfaqblock'); ?>">
                                                    <span class="dashicons dashicons-trash"></span>
                                                </button>
                                            </div>

                                        </div><!-- /.faqb-item -->
                                    <?php endforeach; ?>

                                <?php else: ?>

                                    <!-- Empty group message -->
                                    <div class="faqb-empty-state faqb-group__empty-state">
                                        <span class="faqb-empty-state__text faqb-text-sm faqb-text-muted">
                                            <?php esc_html_e('No FAQs in this category yet.', 'wpfaqblock'); ?>
                                        </span>
                                    </div>

                                <?php endif; ?>

                                <!-- Add FAQ row -->
                                <div class="faqb-group__add-row">
                                    <button type="button" class="faqb-btn faqb-btn--outline faqb-btn--sm faqb-add-faq-btn"
                                        data-group-id="<?php echo esc_attr((string) $term_id); ?>"
                                        aria-label="<?php esc_attr_e('Add FAQ to this category', 'wpfaqblock'); ?>">
                                        <span class="dashicons dashicons-plus-alt2 faqb-icon-sm"></span>
                                        <?php esc_html_e('Add FAQ', 'wpfaqblock'); ?>
                                    </button>
                                </div>

                            </div><!-- /.faqb-group__body -->

                        </div><!-- /.faqb-group -->

                    <?php endforeach; ?>

                <?php else: ?>

                    <!-- Global empty state -->
                    <div class="faqb-empty-state" id="faqb-empty-state">
                        <span class="faqb-empty-state__icon">🗂</span>
                        <span class="faqb-empty-state__text">
                            <?php esc_html_e('No FAQ categories yet. Click "+ Add New Category" to get started.', 'wpfaqblock'); ?>
                        </span>
                        <button type="button" class="faqb-btn faqb-btn--primary" id="faqb-empty-add-group">
                            <?php esc_html_e('+ Add New Category', 'wpfaqblock'); ?>
                        </button>
                    </div>

                <?php endif; ?>

            </div><!-- /#faqb-groups-container -->

        </div><!-- /.faqb-builder-col -->


        <!-- ─────────────────────────────────
             RIGHT: Edit Panel Column
        ──────────────────────────────────── -->
        <div class="faqb-edit-col">
            <div class="faqb-edit-panel" id="faqb-edit-panel">

                <!-- Placeholder: nothing selected -->
                <div class="faqb-edit-panel__placeholder" id="faqb-panel-placeholder">
                    <span class="faqb-edit-panel__placeholder-icon">✏️</span>
                    <p class="faqb-edit-panel__placeholder-text">
                        <?php esc_html_e('Select a FAQ on the left to edit it here.', 'wpfaqblock'); ?>
                    </p>
                </div>

                <!-- Edit Form (hidden until a FAQ is selected) -->
                <div id="faqb-panel-form" style="display:none; flex-direction:column; flex:1;">

                    <!-- Panel Header -->
                    <div class="faqb-edit-panel__header">
                        <h3 class="faqb-edit-panel__header-title" id="faqb-panel-title">
                            <?php esc_html_e('Edit FAQ', 'wpfaqblock'); ?>
                        </h3>
                        <button type="button" class="faqb-btn faqb-btn--ghost faqb-btn--icon-only" id="faqb-panel-close"
                            aria-label="<?php esc_attr_e('Close edit panel', 'wpfaqblock'); ?>">
                            <span class="dashicons dashicons-no-alt"></span>
                        </button>
                    </div>

                    <!-- Panel Body -->
                    <div class="faqb-edit-panel__body">

                        <!-- Hidden: FAQ Post ID -->
                        <input type="hidden" id="faqb-edit-post-id" value="">

                        <!-- Field: FAQ Category -->
                        <div class="faqb-field">
                            <label class="faqb-field__label" for="faqb-edit-group">
                                <?php esc_html_e('FAQ Category', 'wpfaqblock'); ?>
                            </label>
                            <select id="faqb-edit-group" class="faqb-field__select" name="faqb_group">
                                <option value="0"><?php esc_html_e('— No Category —', 'wpfaqblock'); ?></option>
                                <?php foreach ($groups_select as $g): ?>
                                    <option value="<?php echo esc_attr((string) $g['id']); ?>">
                                        <?php echo esc_html($g['name']); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <!-- Field: Question -->
                        <div class="faqb-field">
                            <label class="faqb-field__label" for="faqb-edit-question">
                                <?php esc_html_e('Question', 'wpfaqblock'); ?>
                            </label>
                            <input type="text" id="faqb-edit-question" class="faqb-field__input" name="faqb_question"
                                placeholder="<?php esc_attr_e('Enter the question…', 'wpfaqblock'); ?>"
                                autocomplete="off" value="">
                        </div>

                        <!-- Field: Answer -->
                        <div class="faqb-field">
                            <label class="faqb-field__label" for="faqb-edit-answer">
                                <?php esc_html_e('Answer', 'wpfaqblock'); ?> <span class="faqb-required-star">*</span>
                            </label>

                            <div class="faqb-editor-container">
                                <div class="faqb-editor-toolbar">
                                    <div class="faqb-editor-toolbar__group">
                                        <button type="button" class="faqb-editor-btn" data-command="bold"
                                            title="Bold"><b>B</b></button>
                                        <button type="button" class="faqb-editor-btn" data-command="italic"
                                            title="Italic"><i>I</i></button>
                                        <button type="button" class="faqb-editor-btn" data-command="underline"
                                            title="Underline"><u>U</u></button>
                                        <button type="button" class="faqb-editor-btn" data-command="strikeThrough"
                                            title="Strike"><s>S</s></button>
                                    </div>
                                    <div class="faqb-editor-divider"></div>
                                    <div class="faqb-editor-toolbar__group">
                                        <select class="faqb-editor-select" id="faqb-editor-heading" title="Text Style">
                                            <option value="p"><?php esc_html_e('Normal', 'wpfaqblock'); ?></option>
                                            <option value="h1"><?php esc_html_e('H1', 'wpfaqblock'); ?></option>
                                            <option value="h2"><?php esc_html_e('H2', 'wpfaqblock'); ?></option>
                                            <option value="h3"><?php esc_html_e('H3', 'wpfaqblock'); ?></option>
                                        </select>
                                    </div>
                                    <div class="faqb-editor-divider"></div>
                                    <div class="faqb-editor-toolbar__group">
                                        <button type="button" class="faqb-editor-btn" data-command="insertUnorderedList"
                                            title="Bullet List"><span
                                                class="dashicons dashicons-editor-ul"></span></button>
                                        <button type="button" class="faqb-editor-btn" data-command="insertOrderedList"
                                            title="Numbered List"><span
                                                class="dashicons dashicons-editor-ol"></span></button>
                                    </div>
                                    <div class="faqb-editor-divider"></div>
                                    <div class="faqb-editor-toolbar__group">
                                        <button type="button" class="faqb-editor-btn" data-command="justifyLeft"
                                            title="Align Left"><span
                                                class="dashicons dashicons-editor-alignleft"></span></button>
                                        <button type="button" class="faqb-editor-btn" data-command="justifyCenter"
                                            title="Align Center"><span
                                                class="dashicons dashicons-editor-aligncenter"></span></button>
                                        <button type="button" class="faqb-editor-btn" data-command="justifyRight"
                                            title="Align Right"><span
                                                class="dashicons dashicons-editor-alignright"></span></button>
                                        <button type="button" class="faqb-editor-btn" data-command="justifyFull"
                                            title="Justify"><span
                                                class="dashicons dashicons-editor-justify"></span></button>
                                    </div>
                                    <div class="faqb-editor-divider"></div>
                                    <div class="faqb-editor-toolbar__group">
                                        <button type="button" class="faqb-editor-btn" data-command="createLink"
                                            title="Link"><span class="dashicons dashicons-admin-links"></span></button>
                                        <button type="button" class="faqb-editor-btn" data-command="unlink"
                                            title="Unlink"><span
                                                class="dashicons dashicons-editor-unlink"></span></button>
                                        <!-- Emoji Picker Trigger -->
                                        <div style="position:relative; display:inline-block;">
                                            <button type="button" class="faqb-editor-btn" id="faqb-emoji-trigger"
                                                title="Insert Emoji">
                                                <span class="dashicons dashicons-smiley"></span>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                                <div id="faqb-edit-answer" class="faqb-editor-content" contenteditable="true"
                                    placeholder="<?php esc_attr_e('Enter the answer…', 'wpfaqblock'); ?>"></div>
                            </div>
                        </div>

                        <!-- Field: Active toggle -->
                        <div class="faqb-field faqb-field--toggle">
                            <label class="faqb-field__label">
                                <?php esc_html_e('Published / Active', 'wpfaqblock'); ?>
                            </label>
                            <label class="faqb-toggle"
                                aria-label="<?php esc_attr_e('Toggle FAQ active status', 'wpfaqblock'); ?>">
                                <input type="checkbox" id="faqb-edit-status" name="faqb_status">
                                <span class="faqb-toggle__slider"></span>
                            </label>
                        </div>

                    </div><!-- /.faqb-edit-panel__body -->

                    <!-- Panel Footer -->
                    <div class="faqb-edit-panel__footer">
                        <button type="button" class="faqb-btn faqb-btn--outline" id="faqb-edit-discard">
                            <?php esc_html_e('Discard', 'wpfaqblock'); ?>
                        </button>
                        <button type="button" class="faqb-btn faqb-btn--primary" id="faqb-edit-save">
                            <span class="dashicons dashicons-saved"
                                style="font-size:14px;width:14px;height:14px;margin-top:2px;"></span>
                            <?php esc_html_e('Update FAQ', 'wpfaqblock'); ?>
                        </button>
                    </div>

                </div><!-- /#faqb-panel-form -->

            </div><!-- /#faqb-edit-panel -->
        </div><!-- /.faqb-edit-col -->

    </div><!-- /.faqb-layout -->

    <!-- ══════════════════════════════════════
         ADD / EDIT GROUP MODAL (Step 9)
    ═══════════════════════════════════════ -->
    <div id="faqb-modal-overlay" class="faqb-modal-overlay"></div>

    <div id="faqb-group-modal" class="faqb-modal">

        <!-- Modal Header -->
        <div class="faqb-modal__header">
            <div class="faqb-modal__header-left">
                <span class="dashicons dashicons-category"
                    style="color:var(--faq-primary); font-size:20px; width:20px; height:20px;"></span>
                <h3 id="faqb-modal-title" class="faqb-modal__title">
                    <?php esc_html_e('Add New Category', 'wpfaqblock'); ?>
                </h3>
            </div>
            <button type="button" id="faqb-modal-close" class="faqb-modal__close"
                aria-label="<?php esc_attr_e('Close modal', 'wpfaqblock'); ?>">✕</button>
        </div>

        <!-- Modal Body -->
        <div class="faqb-modal__body">
            <div id="faqb-modal-notices" class="faqb-modal__notices"></div>

            <div class="faqb-modal__field">
                <label class="faqb-modal__label" for="faqb-modal-group-name">
                    <?php esc_html_e('Category Name', 'wpfaqblock'); ?>
                </label>
                <input type="text" id="faqb-modal-group-name" class="faqb-modal__input"
                    placeholder="<?php esc_attr_e('Enter Category Name', 'wpfaqblock'); ?>" autocomplete="off"
                    data-edit-term-id="">
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="faqb-modal__footer">
            <button type="button" id="faqb-modal-cancel" class="faqb-btn faqb-btn--outline">
                <?php esc_html_e('Cancel', 'wpfaqblock'); ?>
            </button>
            <button type="button" id="faqb-modal-create" class="faqb-btn faqb-btn--primary">
                <?php esc_html_e('Create Category', 'wpfaqblock'); ?>
            </button>
        </div>

    </div><!-- /#faqb-group-modal -->

    <!-- ══════════════════════════════════════
         EXPORT FAQS MODAL
    ═══════════════════════════════════════ -->
    <div id="faqb-export-overlay" class="faqb-modal-overlay"></div>

    <div id="faqb-export-modal" class="faqb-modal">
        <div class="faqb-modal__header">
            <div class="faqb-modal__header-left">
                <span class="dashicons dashicons-download"
                    style="color:var(--faq-primary); font-size:20px; width:20px; height:20px;"></span>
                <h3 class="faqb-modal__title">
                    <?php esc_html_e('Export FAQs', 'wpfaqblock'); ?>
                </h3>
            </div>
            <button type="button" id="faqb-export-close" class="faqb-modal__close"
                aria-label="<?php esc_attr_e('Close modal', 'wpfaqblock'); ?>">✕</button>
        </div>

        <div class="faqb-modal__body">
            <div id="faqb-export-notices" class="faqb-modal__notices"></div>

            <div class="faqb-modal__field">
                <label class="faqb-modal__label"><?php esc_html_e('Export Type', 'wpfaqblock'); ?></label>
                <div class="faqb-choice-list">
                    <label class="faqb-choice">
                        <input type="radio" name="faqb_export_mode" value="all" checked>
                        <span><?php esc_html_e('Export all FAQs', 'wpfaqblock'); ?></span>
                    </label>
                    <label class="faqb-choice">
                        <input type="radio" name="faqb_export_mode" value="category">
                        <span><?php esc_html_e('Export a category', 'wpfaqblock'); ?></span>
                    </label>
                    <label class="faqb-choice">
                        <input type="radio" name="faqb_export_mode" value="selected">
                        <span><?php esc_html_e('Export selected FAQs', 'wpfaqblock'); ?></span>
                    </label>
                </div>
            </div>

            <div class="faqb-modal__field" id="faqb-export-category-field" style="display:none;">
                <label class="faqb-modal__label">
                    <?php esc_html_e('FAQ Categories', 'wpfaqblock'); ?>
                </label>
                <div id="faqb-export-category-list" class="faqb-import-export-list" role="group"
                    aria-label="<?php esc_attr_e('FAQ Categories', 'wpfaqblock'); ?>">
                    <label class="faqb-import-export-item">
                        <input type="checkbox" value="0">
                        <span>
                            <strong><?php esc_html_e('— No Category —', 'wpfaqblock'); ?></strong>
                            <small><?php esc_html_e('FAQs without a category', 'wpfaqblock'); ?></small>
                        </span>
                    </label>
                    <?php foreach ($groups_select as $g): ?>
                        <label class="faqb-import-export-item">
                            <input type="checkbox" value="<?php echo esc_attr((string) $g['id']); ?>">
                            <span>
                                <strong><?php echo esc_html($g['name']); ?></strong>
                            </span>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="faqb-modal__field" id="faqb-export-selection-field" style="display:none;">
                <label class="faqb-modal__label">
                    <?php esc_html_e('Choose FAQs', 'wpfaqblock'); ?>
                </label>
                <div id="faqb-export-selection-list" class="faqb-import-export-list"></div>
            </div>
        </div>

        <div class="faqb-modal__footer">
            <button type="button" id="faqb-export-cancel" class="faqb-btn faqb-btn--outline">
                <?php esc_html_e('Cancel', 'wpfaqblock'); ?>
            </button>
            <button type="button" id="faqb-export-download" class="faqb-btn faqb-btn--primary">
                <?php esc_html_e('Download JSON', 'wpfaqblock'); ?>
            </button>
        </div>
    </div><!-- /#faqb-export-modal -->

    <!-- ══════════════════════════════════════
         IMPORT FAQS MODAL
    ═══════════════════════════════════════ -->
    <div id="faqb-import-overlay" class="faqb-modal-overlay"></div>

    <div id="faqb-import-modal" class="faqb-modal">
        <div class="faqb-modal__header">
            <div class="faqb-modal__header-left">
                <span class="dashicons dashicons-upload"
                    style="color:var(--faq-primary); font-size:20px; width:20px; height:20px;"></span>
                <h3 class="faqb-modal__title">
                    <?php esc_html_e('Import FAQs', 'wpfaqblock'); ?>
                </h3>
            </div>
            <button type="button" id="faqb-import-close" class="faqb-modal__close"
                aria-label="<?php esc_attr_e('Close modal', 'wpfaqblock'); ?>">✕</button>
        </div>

        <div class="faqb-modal__body">
            <div id="faqb-import-notices" class="faqb-modal__notices"></div>

            <div class="faqb-modal__field">
                <label class="faqb-modal__label" for="faqb-import-file">
                    <?php esc_html_e('Import File', 'wpfaqblock'); ?>
                </label>
                <input type="file" id="faqb-import-file" class="faqb-file-input" accept="application/json,.json">
            </div>

            <div class="faqb-modal__field">
                <label class="faqb-modal__label" for="faqb-import-target-group">
                    <?php esc_html_e('Target Category', 'wpfaqblock'); ?>
                </label>
                <div class="faqb-modal__select-wrap">
                    <select id="faqb-import-target-group" class="faqb-modal__select">
                        <option value="preserve"><?php esc_html_e('Use categories from import file', 'wpfaqblock'); ?></option>
                        <option value="0"><?php esc_html_e('— No Category —', 'wpfaqblock'); ?></option>
                        <?php foreach ($groups_select as $g): ?>
                            <option value="<?php echo esc_attr((string) $g['id']); ?>">
                                <?php echo esc_html($g['name']); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <p class="faqb-modal__helper">
                <?php esc_html_e('Import creates new FAQ items. Existing FAQs are not overwritten.', 'wpfaqblock'); ?>
            </p>
        </div>

        <div class="faqb-modal__footer">
            <button type="button" id="faqb-import-cancel" class="faqb-btn faqb-btn--outline">
                <?php esc_html_e('Cancel', 'wpfaqblock'); ?>
            </button>
            <button type="button" id="faqb-import-submit" class="faqb-btn faqb-btn--primary">
                <?php esc_html_e('Import FAQs', 'wpfaqblock'); ?>
            </button>
        </div>
    </div><!-- /#faqb-import-modal -->

    <!-- ══════════════════════════════════════
         AI FAQ GENERATOR MODAL (Step 12)
    ═══════════════════════════════════════ -->
    <div id="faqb-ai-overlay" class="faqb-modal-overlay"></div>

    <div id="faqb-ai-modal" class="faqb-modal">

        <!-- Header -->
        <div class="faqb-modal__header">
            <div class="faqb-modal__header-left">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FE8512" stroke-width="2.5"
                    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path
                        d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
                    </path>
                </svg>
                <h3 class="faqb-modal__title">
                    <?php esc_html_e('AI FAQ Generator', 'wpfaqblock'); ?>
                </h3>
            </div>
            <button type="button" id="faqb-ai-close" class="faqb-modal__close"
                aria-label="<?php esc_attr_e('Close', 'wpfaqblock'); ?>">✕</button>
        </div>

        <!-- Body -->
        <div class="faqb-modal__body">

            <!-- AI error/success notice area -->
            <div id="faqb-ai-notices" class="faqb-modal__notices"></div>

            <!-- API key missing notice -->
            <div id="faqb-ai-key-notice" class="faqb-ai-key-notice">
                <span class="dashicons dashicons-warning"></span>
                <div class="faqb-ai-key-notice__content">
                    <?php esc_html_e('API key is not set. Please add your OpenAI or Google Gemini API key.', 'wpfaqblock'); ?>
                    <a id="faqb-ai-settings-link"
                        href="<?php echo esc_url(admin_url('admin.php?page=wpfaqblock-settings')); ?>">
                        <?php esc_html_e('→ Go to Settings', 'wpfaqblock'); ?>
                    </a>
                </div>
            </div>

            <div class="faqb-ai-form">
                <!-- Topic input -->
                <div class="faqb-modal__field">
                    <label class="faqb-modal__label" for="faqb-ai-topic">
                        <span class="faqb-label-icon"><span class="dashicons dashicons-edit"></span></span>
                        <?php esc_html_e('What is your FAQ about?', 'wpfaqblock'); ?>
                    </label>
                    <input type="text" id="faqb-ai-topic" class="faqb-modal__input"
                        placeholder="<?php esc_attr_e('e.g. Return Policy, Pricing, Features...', 'wpfaqblock'); ?>"
                        autocomplete="off">
                </div>

                <!-- Count & Category Row -->
                <div class="faqb-modal__row">
                    <div class="faqb-modal__field">
                        <label class="faqb-modal__label" for="faqb-ai-count">
                            <span class="dashicons dashicons-editor-ol"></span>
                            <?php esc_html_e('Number of FAQs', 'wpfaqblock'); ?>
                        </label>
                        <input type="number" id="faqb-ai-count" class="faqb-modal__input" value="5" min="1" max="20">
                    </div>

                    <div class="faqb-modal__field">
                        <label class="faqb-modal__label" for="faqb-ai-group">
                            <span class="dashicons dashicons-category"></span>
                            <?php esc_html_e('Target Category', 'wpfaqblock'); ?>
                        </label>
                        <div class="faqb-modal__select-wrap">
                            <select id="faqb-ai-group" class="faqb-modal__select">
                                <option value="0"><?php esc_html_e('— Select Category —', 'wpfaqblock'); ?></option>
                                <?php foreach ($groups_select as $g): ?>
                                    <option value="<?php echo esc_attr((string) $g['id']); ?>">
                                        <?php echo esc_html($g['name']); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Generate button -->
                <div class="faqb-modal__field faqb-modal__field--action">
                    <button type="button" id="faqb-ai-generate" class="faqb-modal__generate-btn">
                        <svg class="faqb-ai-gen-icon" width="22" height="22" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
                            </path>
                        </svg>
                        <span class="faqb-ai-gen-text"><?php esc_html_e('Generate FAQ Content', 'wpfaqblock'); ?></span>
                    </button>
                </div>
            </div><!-- /.faqb-ai-form -->

            <!-- Results area -->
            <div id="faqb-ai-results" class="faqb-ai-results">
                <div class="faqb-ai-results__label">
                    <?php esc_html_e('Generated FAQs — select items to insert', 'wpfaqblock'); ?>
                </div>
                <div id="faqb-ai-results-list"></div>
                <button type="button" id="faqb-ai-insert" class="faqb-ai-insert-btn">
                    <?php esc_html_e('Insert Selected FAQs', 'wpfaqblock'); ?>
                </button>
            </div>

        </div><!-- /body -->
    </div><!-- /#faqb-ai-modal -->

</div><!-- /#wpfaqblock-builder -->

<!-- Emoji Picker (Simplified to match BetterDocs style) -->
<div id="faqb-emoji-picker" class="faqb-editor-emoji-picker">
    <div class="faqb-emoji-content" id="faqb-emoji-list">
        <span class="faqb-emoji-item">😀</span><span class="faqb-emoji-item">😃</span><span
            class="faqb-emoji-item">😄</span><span class="faqb-emoji-item">😁</span><span
            class="faqb-emoji-item">😆</span><span class="faqb-emoji-item">😅</span>
        <span class="faqb-emoji-item">🤣</span><span class="faqb-emoji-item">😂</span><span
            class="faqb-emoji-item">🙂</span><span class="faqb-emoji-item">🙃</span><span
            class="faqb-emoji-item">😉</span><span class="faqb-emoji-item">😊</span>
        <span class="faqb-emoji-item">😇</span><span class="faqb-emoji-item">🥰</span><span
            class="faqb-emoji-item">😍</span><span class="faqb-emoji-item">🤩</span><span
            class="faqb-emoji-item">😘</span><span class="faqb-emoji-item">😗</span>
        <span class="faqb-emoji-item">😚</span><span class="faqb-emoji-item">😋</span><span
            class="faqb-emoji-item">😛</span><span class="faqb-emoji-item">😜</span><span
            class="faqb-emoji-item">🤪</span><span class="faqb-emoji-item">😝</span>
        <span class="faqb-emoji-item">🤑</span><span class="faqb-emoji-item">🤗</span><span
            class="faqb-emoji-item">🤭</span><span class="faqb-emoji-item">🤫</span><span
            class="faqb-emoji-item">🤔</span><span class="faqb-emoji-item">🤐</span>
        <span class="faqb-emoji-item">🤨</span><span class="faqb-emoji-item">😐</span><span
            class="faqb-emoji-item">😑</span><span class="faqb-emoji-item">😶</span><span
            class="faqb-emoji-item">😏</span><span class="faqb-emoji-item">😒</span>
        <span class="faqb-emoji-item">🙄</span><span class="faqb-emoji-item">😬</span><span
            class="faqb-emoji-item">🤥</span><span class="faqb-emoji-item">😌</span><span
            class="faqb-emoji-item">😔</span><span class="faqb-emoji-item">😪</span>
        <span class="faqb-emoji-item">😴</span><span class="faqb-emoji-item">😷</span><span
            class="faqb-emoji-item">🤒</span><span class="faqb-emoji-item">🤢</span><span
            class="faqb-emoji-item">🤮</span><span class="faqb-emoji-item">🤧</span>
        <span class="faqb-emoji-item">🥵</span><span class="faqb-emoji-item">🥶</span><span
            class="faqb-emoji-item">🥴</span><span class="faqb-emoji-item">😵</span><span
            class="faqb-emoji-item">🤯</span><span class="faqb-emoji-item">🤠</span>
        <span class="faqb-emoji-item">🥳</span><span class="faqb-emoji-item">😎</span><span
            class="faqb-emoji-item">🤓</span><span class="faqb-emoji-item">🧐</span><span
            class="faqb-emoji-item">😕</span><span class="faqb-emoji-item">😟</span>
        <span class="faqb-emoji-item">👍</span><span class="faqb-emoji-item">👎</span><span
            class="faqb-emoji-item">👊</span><span class="faqb-emoji-item">✌️</span><span
            class="faqb-emoji-item">🤞</span><span class="faqb-emoji-item">🤟</span>
        <span class="faqb-emoji-item">🔥</span><span class="faqb-emoji-item">✨</span><span
            class="faqb-emoji-item">🎉</span><span class="faqb-emoji-item">❤️</span><span
            class="faqb-emoji-item">💡</span><span class="faqb-emoji-item">✅</span>
    </div>
</div>
