<?php

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

?>
<div class="aieo-faq-admin">

    <h2><?php esc_html_e('FAQ', 'ai-eshop-optimizer'); ?></h2>
    <p class="description" style="max-width:760px;">
        <?php esc_html_e('Create groups, add questions, drag to reorder, and drag a question into another group to reassign it. Everything saves instantly and the [faq] shortcode reflects it on the storefront. Use “Edit answer” for rich formatting.', 'ai-eshop-optimizer'); ?>
    </p>

    <!-- ── Groups ─────────────────────────────────────────────── -->
    <div class="card aieo-faq-card">
        <h3 style="margin-top:0;"><?php esc_html_e('Groups', 'ai-eshop-optimizer'); ?></h3>
        <div class="aieo-faq-group-chips">
            <?php if (empty($groups)) : ?>
                <span class="aieo-faq-no-groups description"><?php esc_html_e('No groups yet — add one below.', 'ai-eshop-optimizer'); ?></span>
            <?php else : ?>
                <?php foreach ($groups as $g) : ?>
                    <span class="aieo-faq-group-chip" data-group-id="<?php echo esc_attr((int) $g->term_id); ?>">
                        <span class="aieo-faq-group-name"><?php echo esc_html($g->name); ?></span>
                        <span class="aieo-faq-group-count">(<?php echo esc_html((int) $g->count); ?>)</span>
                        <button type="button" class="aieo-faq-group-rename" title="<?php esc_attr_e('Rename', 'ai-eshop-optimizer'); ?>" aria-label="<?php esc_attr_e('Rename group', 'ai-eshop-optimizer'); ?>">&#9998;</button>
                        <button type="button" class="aieo-faq-group-delete" title="<?php esc_attr_e('Delete', 'ai-eshop-optimizer'); ?>" aria-label="<?php esc_attr_e('Delete group', 'ai-eshop-optimizer'); ?>">&times;</button>
                    </span>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <div class="aieo-faq-group-add">
            <input type="text" id="aieo-faq-new-group" class="regular-text" placeholder="<?php esc_attr_e('New group name', 'ai-eshop-optimizer'); ?>">
            <button type="button" class="button" id="aieo-faq-add-group"><?php esc_html_e('Add group', 'ai-eshop-optimizer'); ?></button>
        </div>
    </div>

    <!-- ── Entries (sortable, grouped) ────────────────────────── -->
    <h3 style="margin-top:28px;"><?php esc_html_e('Entries', 'ai-eshop-optimizer'); ?>
        <span id="aieo-faq-status" class="aieo-faq-status"></span>
    </h3>

    <div class="aieo-faq-sections">
        <?php foreach ($sections as $sec) : ?>
            <div class="aieo-faq-section" data-group-id="<?php echo esc_attr((int) $sec['id']); ?>">
                <div class="aieo-faq-section-title">
                    <span><?php echo esc_html($sec['name']); ?></span>
                    <span class="aieo-faq-section-count">(<?php echo esc_html(count($sec['faqs'])); ?>)</span>
                </div>
                <ul class="aieo-faq-list" data-group-id="<?php echo esc_attr((int) $sec['id']); ?>">
                    <?php foreach ($sec['faqs'] as $f) :
                        $preview = wp_trim_words(wp_strip_all_tags(do_blocks($f->post_content)), 18, '…');
                        $edit    = get_edit_post_link($f->ID, 'raw');
                        $is_draft = ('publish' !== $f->post_status);
                        ?>
                        <li class="aieo-faq-item<?php echo $is_draft ? ' is-draft' : ''; ?>" data-post-id="<?php echo esc_attr((int) $f->ID); ?>">
                            <span class="aieo-faq-handle" title="<?php esc_attr_e('Drag to reorder / move', 'ai-eshop-optimizer'); ?>" aria-hidden="true">&#8942;&#8942;</span>
                            <span class="aieo-faq-main">
                                <span class="aieo-faq-q" title="<?php esc_attr_e('Click to rename', 'ai-eshop-optimizer'); ?>"><?php echo esc_html(get_the_title($f) ?: __('(untitled)', 'ai-eshop-optimizer')); ?></span>
                                <?php if ($is_draft) : ?><span class="aieo-faq-badge"><?php echo esc_html($f->post_status); ?></span><?php endif; ?>
                                <span class="aieo-faq-a"><?php echo esc_html($preview); ?></span>
                            </span>
                            <span class="aieo-faq-actions">
                                <a class="button-link" href="<?php echo esc_url($edit); ?>" target="_blank" rel="noopener"><?php esc_html_e('Edit answer', 'ai-eshop-optimizer'); ?></a>
                                <button type="button" class="button-link aieo-faq-delete"><?php esc_html_e('Delete', 'ai-eshop-optimizer'); ?></button>
                            </span>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endforeach; ?>
    </div>

    <!-- ── Add a question ─────────────────────────────────────── -->
    <div class="card aieo-faq-card" style="margin-top:24px;">
        <h3 style="margin-top:0;"><?php esc_html_e('Add a question', 'ai-eshop-optimizer'); ?></h3>
        <table class="form-table"><tbody>
            <tr>
                <th><label for="aieo-faq-new-q"><?php esc_html_e('Question', 'ai-eshop-optimizer'); ?></label></th>
                <td><input type="text" id="aieo-faq-new-q" class="large-text" placeholder="<?php esc_attr_e('e.g. How long does delivery take?', 'ai-eshop-optimizer'); ?>"></td>
            </tr>
            <tr>
                <th><label for="aieo-faq-new-a"><?php esc_html_e('Answer', 'ai-eshop-optimizer'); ?></label></th>
                <td><textarea id="aieo-faq-new-a" rows="3" class="large-text"></textarea>
                    <p class="description"><?php esc_html_e('Plain text is fine. After saving, use “Edit answer” for rich formatting (links, lists, bold).', 'ai-eshop-optimizer'); ?></p></td>
            </tr>
            <tr>
                <th><label for="aieo-faq-new-group"><?php esc_html_e('Group', 'ai-eshop-optimizer'); ?></label></th>
                <td><select id="aieo-faq-new-group">
                    <option value="0"><?php esc_html_e('— No group —', 'ai-eshop-optimizer'); ?></option>
                    <?php foreach ($groups as $g) : ?>
                        <option value="<?php echo esc_attr((int) $g->term_id); ?>"><?php echo esc_html($g->name); ?></option>
                    <?php endforeach; ?>
                </select></td>
            </tr>
        </tbody></table>
        <p><button type="button" class="button button-primary" id="aieo-faq-add"><?php esc_html_e('Add FAQ', 'ai-eshop-optimizer'); ?></button></p>
    </div>

</div>
