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

use Components\Router;

$pageKey = 'topics';
mh_load_modules_language_files(MH_DIR_MODULE, 'mb_newsletter');

$pageTab = (string) mh_get('topics_tab', 'public', 'string');
$search = (string)mh_get('search', '', 'string');
$listUrl = Router::url('topics', ['partial' => 1]);
$tabItems = [
    [ 'value' => 'public', 'label' => \mh_lng('UI_TAB_PUBLIC_TOPICS', 'Topics') ],
    [ 'value' => 'private', 'label' => \mh_lng('UI_TAB_PRIVATE_TOPICS', 'Internal Segments') ],
];
$trigs = ['refresh'];

ob_start();
?>

<?php if (!mh_get('partial')): ?>
<div x-data="{ 
        topics_tab: '<?= $pageTab ?>',
        search: '<?= \Components\Base::h($search) ?>'
     }"
     @hashchange.window="if(location.hash) topics_tab = location.hash.substring(1)">
    <?php
    $baseNewUrl = Router::url('topic_modal', ['partial' => 1, 'mode' => 'new']);
    echo \Components\Ui\PageHeader::render((string) \mh_lng('MAILBEEZ_APP_LABEL_TOPICS', 'Topics'), [
        'subtitle' => \mh_lng('MAILBEEZ_APP_LABEL_TOPICS_SUBTITLE', 'Organize your audience into interest groups and internal segments.'),
        'right' => \Components\Button::render(\mh_lng('MAILBEEZ_NEW_TOPIC', 'New Topic'), [
            'variant' => 'secondary',
            'size' => 'md',
            'icon' => \Components\Base::SVG_PLUS,
            'iconPosition' => 'front',
            'attrs' => [
                'command' => 'show-modal',
                'commandfor' => 'config-modal',
                'data-title' => \mh_lng('MAILBEEZ_NEW_TOPIC', 'New Topic'),
                'data-size' => '3xl',
                'hx-get' => $baseNewUrl,
                'hx-target' => '#config-modal-body',
                'hx-swap' => 'innerHTML',
                ':hx-vals' => 'JSON.stringify({ topics_tab: topics_tab, search: search })',
            ],
        ]),
    ]);
    ?>
<?php endif; ?>

<div id="topics-page-container"
     x-cloak
     class="space-y-4"
     hx-get="<?= \Components\Base::h($listUrl) ?>"
     hx-trigger="<?= \Components\Base::h(implode(', ', $trigs)) ?>"
     hx-swap="outerHTML"
     :hx-vals='JSON.stringify({ topics_tab: topics_tab, search: search })'>

    <?= \Components\Ui\Tabs::mobile('topics_tab', $tabItems, ['ariaLabel' => 'Select topics tab']) ?>

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-divider">
        <div class="hidden sm:block">
            <?= \Components\Ui\Tabs::desktopNavOnly('topics_tab', $tabItems) ?>
        </div>
    </div>

    <div class="mt-4">
        <!-- Tab: Public Topics -->
        <div x-show="topics_tab === 'public'" x-cloak class="space-y-4">
            <?php
            echo \Components\Notification::render(\mh_lng('MAILBEEZ_APP_TOPICS_PUBLIC_EXPLAINER', 'Visible to subscribers. They can choose which topics they want to receive. Template Variable: <pre>[[$config_url]]</pre>'), [
                    'id' => 'topics_public_info',
                    'dismissible' => true,
            ]);
            ?>
            <div id="topics-list-public"
                 hx-get="<?= Router::url('topics_list', ['partial' => 1, 'visibility' => 'public']) ?>"
                 hx-trigger="load, refresh consume"
                 hx-swap="outerHTML">
                <div class="text-sm text-muted">Loading public topics</div>
            </div>
        </div>

        <!-- Tab: Private Topics -->
        <div x-show="topics_tab === 'private'" x-cloak class="space-y-4">
            <?php
            echo \Components\Notification::render(\mh_lng('MAILBEEZ_APP_TOPICS_PRIVATE_EXPLAINER', 'Hidden from subscribers. Used internally for segmentation and targeting.'), [
                    'id' => 'topics_private_info',
                    'dismissible' => true,
            ]);
            ?>
            <div id="topics-list-private"
                 hx-get="<?= Router::url('topics_list', ['partial' => 1, 'visibility' => 'private']) ?>"
                 hx-trigger="load, refresh consume"
                 hx-swap="outerHTML">
                <div class="text-sm text-muted">Loading private topics</div>
            </div>
        </div>
    </div>
</div>

<?php if (!mh_get('partial')): ?>
</div>
<?php endif; ?>

<?php
$content = ob_get_clean();

if (mh_get('partial')) {
    echo $content;
} else {
    echo layout($pageKey, $content);
}
