<?php
// pages/components/main_template_gallery_selection_modal.php
require_once BEEZUI_ROOT . '/components/index.php';

use Components\Button;
use Components\Support\Htmx;
use Components\MainTemplate\WizardSteps;

$lngId = (int)\mh_get('lng_id', \mh_session('languages_id', 1), 'int');
$module = (string)\mh_get('module');
$contentModuleId = (string)\mh_get('content_module_id');

ob_start();
?>
<div>
    <script>
        (function() {
            var m = document.getElementById('<?= Htmx::resolvePanelId(); ?>');
            if (m) {
                m.setAttribute('data-title', <?= json_encode(\mh_lng('UI_TITLE_CREATE_MAIN_TEMPLATE', 'Create New Main Template')); ?>);
                m.setAttribute('data-size', '6xl');
            }

            var state = {
                selectUrl: '',
                templateId: ''
            };
            var continueButtonId = 'main-template-gallery-continue-btn';

            function getContinueButton() {
                return document.getElementById(continueButtonId);
            }

            function setContinueState(selectUrl, templateId) {
                state.selectUrl = selectUrl || '';
                state.templateId = templateId || '';

                var button = getContinueButton();
                if (!button) {
                    return;
                }

                var enabled = !!state.selectUrl;
                button.disabled = !enabled;
                button.setAttribute('aria-disabled', enabled ? 'false' : 'true');
                button.classList.toggle('opacity-50', !enabled);
                button.classList.toggle('pointer-events-none', !enabled);
            }

            window.__mhMainTemplateGallerySelectionContinue = function() {
                if (!state.selectUrl || typeof htmx === 'undefined') {
                    return;
                }
                htmx.ajax('GET', state.selectUrl, {
                    target: '#config-modal-body',
                    swap: 'innerHTML'
                });
            };

            window.addEventListener('main-gallery-template-selected', function(ev) {
                var detail = (ev && ev.detail) ? ev.detail : {};
                setContinueState(detail.select_url || '', detail.template_id || '');
            });

            setTimeout(function() {
                var selectedCard = document.querySelector('#editor-templates-container [data-main-gallery-template-card="1"].is-selected');
                if (selectedCard) {
                    setContinueState(
                        selectedCard.getAttribute('data-select-url') || '',
                        selectedCard.getAttribute('data-template-id') || ''
                    );
                } else {
                    setContinueState('', '');
                }
            }, 0);
        })();
    </script>

    <?= WizardSteps::renderStepper(WizardSteps::STEP_GALLERY); ?>
<!--
    <p class="mb-4 text-sm text-secondary">
        <?= \mh_lng('UI_TEXT_SELECT_MAIN_TEMPLATE_FROM_GALLERY', 'Select a gallery template. Single click highlights it, double click continues to naming.') ?>
    </p>
-->

    <?php
    $_GET['context'] = 'main';
    $_GET['partial'] = 1;
    $_GET['is_modal'] = 1;
    $_GET['templates_tab'] = 'gallery';
    $_GET['selection_mode'] = 'create_main_from_gallery';
    $_GET['lng_id'] = $lngId;
    $_GET['module'] = $module;
    $_GET['content_module_id'] = $contentModuleId;

    require BEEZUI_ROOT . '/pages/editor_templates.php';
    ?>

    <template x-teleport="#config-modal-footer">
        <div class="flex">
            <div class="flex-1"></div>

            <?= Button::render(\mh_lng('UI_NEXT', 'Continue'), [
                'variant' => 'primary',
                'class' => 'opacity-50 pointer-events-none',
                'attrs' => [
                    'id' => 'main-template-gallery-continue-btn',
                    'disabled' => 'disabled',
                    'aria-disabled' => 'true',
                    'onclick' => 'if (typeof window.__mhMainTemplateGallerySelectionContinue === "function") { window.__mhMainTemplateGallerySelectionContinue(); } return false;'
                ]
            ]); ?>
        </div>
    </template>
</div>
<?php
echo ob_get_clean();
