<?php
/**
 * ITSWEBER CMS – Page Builder: Add Section Modal
 *
 * Modal overlay that presents all available section types grouped by category.
 * Clicking a type card triggers AJAX to add the section to the page.
 *
 * @author    Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 *
 * @var array            $sectionTypes  Array grouped by category, each value is array of AbstractSection instances
 * @var int              $sectionLimit  Maximum number of sections allowed per page
 * @var \App\Core\Csrf   $csrf          CSRF instance
 */

// Category labels and display order
$categoryLabels = [
    'header'  => __('admin.pagebuilder.modal_tab_header'),
    'content' => __('admin.pagebuilder.modal_tab_content'),
    'media'   => __('admin.pagebuilder.modal_tab_media'),
    'preview' => __('admin.pagebuilder.modal_tab_preview'),
    'action'  => __('admin.pagebuilder.modal_tab_action'),
    'global'  => __('admin.pagebuilder.modal_tab_global'),
];

// Determine which categories actually have sections
$availableCategories = [];
foreach ($categoryLabels as $catKey => $catLabel) {
    if (!empty($sectionTypes[$catKey])) {
        $availableCategories[$catKey] = $catLabel;
    }
}

// Also include any categories not in the predefined list
foreach ($sectionTypes as $catKey => $types) {
    if (!isset($availableCategories[$catKey]) && !empty($types)) {
        $availableCategories[$catKey] = ucfirst($catKey);
    }
}

// Default active tab: first available category
$defaultTab = array_key_first($availableCategories) ?? 'content';
?>

<div class="pb-modal-overlay" id="pb-add-section-modal" style="display:none">
    <div class="pb-modal">

        <!-- ── Modal header ──────────────────────────────────── -->
        <div class="pb-modal-header">
            <h3>
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-right:6px;">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="8" x2="12" y2="16"/>
                    <line x1="8" y1="12" x2="16" y2="12"/>
                </svg>
                <?= __('admin.pagebuilder.add_section') ?>
            </h3>
            <button type="button" class="pb-modal-close" data-action="close-modal" title="<?= __('admin.pagebuilder.close') ?>">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>

        <!-- ── Modal body ────────────────────────────────────── -->
        <div class="pb-modal-body">

            <?php if ($sectionLimit > 0): ?>
            <p class="pb-modal-limit-hint">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="16" x2="12" y2="12"/>
                    <line x1="12" y1="8" x2="12.01" y2="8"/>
                </svg>
                <?= __('admin.pagebuilder.section_limit', ['limit' => $sectionLimit]) ?>
            </p>
            <?php endif; ?>

            <!-- Category tabs -->
            <?php if (count($availableCategories) > 1): ?>
            <div class="pb-modal-tabs">
                <?php foreach ($availableCategories as $catKey => $catLabel): ?>
                <button type="button"
                        class="pb-modal-tab<?= $catKey === $defaultTab ? ' active' : '' ?>"
                        data-tab="<?= e($catKey) ?>">
                    <?= e($catLabel) ?>
                    <span class="pb-modal-tab-count"><?= count($sectionTypes[$catKey]) ?></span>
                </button>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>

            <!-- Import section from JSON -->
            <div class="pb-import-area">
                <button type="button" class="pb-import-btn" id="pb-import-btn" title="<?= __('admin.pagebuilder.import_section') ?>">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:6px;">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                        <polyline points="17 8 12 3 7 8"/>
                        <line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                    <?= __('admin.pagebuilder.import_section') ?>
                </button>
                <input type="file" id="pb-import-file" accept=".json" style="display:none">
            </div>

            <!-- Section type cards grid (one panel per category) -->
            <?php foreach ($availableCategories as $catKey => $catLabel): ?>
            <div class="pb-modal-grid-panel" data-panel="<?= e($catKey) ?>"
                 style="<?= $catKey !== $defaultTab ? 'display:none' : '' ?>">
                <div class="pb-modal-grid">
                    <?php foreach ($sectionTypes[$catKey] as $type): ?>
                    <?php
                        $typeKey      = e($type::typeKey());
                        $typeLabel    = e($type::label());
                        $typeDesc     = e($type::description());
                        $typeIcon     = $type::iconSvg();
                        $multiAllowed = $type::allowMultiple();
                    ?>
                    <button type="button"
                            class="pb-type-card"
                            data-action="add-section"
                            data-type="<?= $typeKey ?>"
                            data-allow-multiple="<?= $multiAllowed ? '1' : '0' ?>"
                            title="<?= $typeDesc ?: $typeLabel ?>">
                        <?= $csrf->field() ?>
                        <div class="pb-type-card-icon">
                            <?php if ($typeIcon): ?>
                                <?= $typeIcon ?>
                            <?php else: ?>
                                <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                                    <line x1="7" y1="8" x2="17" y2="8"/>
                                    <line x1="7" y1="12" x2="13" y2="12"/>
                                </svg>
                            <?php endif; ?>
                        </div>
                        <div class="pb-type-card-info">
                            <span class="pb-type-card-label"><?= $typeLabel ?></span>
                            <?php if ($typeDesc): ?>
                            <span class="pb-type-card-desc"><?= $typeDesc ?></span>
                            <?php endif; ?>
                        </div>
                        <?php if (!$multiAllowed): ?>
                        <span class="pb-type-card-badge" title="<?= __('admin.pagebuilder.single_instance_only') ?>">1x</span>
                        <?php endif; ?>
                        <?php if ($type::themeSlug()): ?>
                        <span class="pb-type-card-badge pb-badge-theme"><?= e(ucfirst($type::themeSlug())) ?></span>
                        <?php endif; ?>
                    </button>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endforeach; ?>

        </div>

    </div>
</div>
