<?php
/**
 * Nexora Content Hub
 * Admin-managed visual guides and community content.
 */
if (!defined('access') || !access) {
    die();
}

$nexContentCfg = loadConfig('content_hub');
if (!is_array($nexContentCfg)) $nexContentCfg = array();
$nexContentSettings = isset($nexContentCfg['settings']) && is_array($nexContentCfg['settings']) ? $nexContentCfg['settings'] : array();
$nexContentItemsRaw = isset($nexContentCfg['items']) && is_array($nexContentCfg['items']) ? $nexContentCfg['items'] : array();
$nexContentItems = array();

foreach ($nexContentItemsRaw as $nexContentItem) {
    if (!is_array($nexContentItem)) continue;
    if (isset($nexContentItem['enabled']) && (int)$nexContentItem['enabled'] !== 1) continue;
    if (empty($nexContentItem['media']) || !is_array($nexContentItem['media'])) continue;

    $validMedia = array();
    foreach ($nexContentItem['media'] as $media) {
        if (!is_array($media) || empty($media['file'])) continue;
        $file = trim((string)$media['file']);
        if ($file === '') continue;

        if (preg_match('#^https?://#i', $file)) {
            $url = $file;
        } else {
            $safeFile = basename(str_replace('\\', '/', $file));
            if ($safeFile === '') continue;
            $url = __PATH_TEMPLATE_IMG__ . 'content-hub/' . rawurlencode($safeFile);
        }

        $validMedia[] = array(
            'url' => $url,
            'caption' => isset($media['caption']) ? trim((string)$media['caption']) : ''
        );
    }

    if (empty($validMedia)) continue;
    $nexContentItem['media_resolved'] = $validMedia;
    $nexContentItems[] = $nexContentItem;
}

$nexContentTitle = isset($nexContentSettings['title']) && trim((string)$nexContentSettings['title']) !== ''
    ? trim((string)$nexContentSettings['title'])
    : 'Contenido y guías clave';
$nexContentSubtitle = isset($nexContentSettings['subtitle']) && trim((string)$nexContentSettings['subtitle']) !== ''
    ? trim((string)$nexContentSettings['subtitle'])
    : 'Información visual y contenido útil para decidir mejor dentro del juego.';

if (empty($nexContentItems)) {
    return;
}

$nexTransparentPixel = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
?>
<section class="nex-content-hub nex-reveal" aria-labelledby="nex-content-hub-title" data-nex-content-hub>
    <div class="nex-content-hub__heading">
        <span class="nex-ember" aria-hidden="true"></span>
        <p class="nex-content-hub__eyebrow">Archivo vivo de Nexora</p>
        <h2 id="nex-content-hub-title" class="nex-section-title"><?php echo htmlspecialchars($nexContentTitle, ENT_QUOTES, 'UTF-8'); ?></h2>
        <p class="nex-content-hub__subtitle"><?php echo htmlspecialchars($nexContentSubtitle, ENT_QUOTES, 'UTF-8'); ?></p>
    </div>

    <div class="nex-content-hub__shell">
        <div class="swiper nex-content-swiper">
            <div class="swiper-wrapper">
                <?php foreach ($nexContentItems as $itemIndex => $item) {
                    $mediaResolved = $item['media_resolved'];
                    $pageUrls = array();
                    $pageCaptions = array();
                    foreach ($mediaResolved as $m) {
                        $pageUrls[] = $m['url'];
                        $pageCaptions[] = $m['caption'];
                    }
                    $pagesJson = json_encode($pageUrls, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
                    $captionsJson = json_encode($pageCaptions, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
                    $firstUrl = $pageUrls[0];
                    $category = isset($item['category']) ? trim((string)$item['category']) : 'Contenido';
                    $title = isset($item['title']) ? trim((string)$item['title']) : 'Contenido Nexora';
                    $description = isset($item['description']) ? trim((string)$item['description']) : '';
                    $credit = isset($item['credit']) ? trim((string)$item['credit']) : '';
                    $link = isset($item['link']) ? trim((string)$item['link']) : '';
                    $linkLabel = isset($item['link_label']) && trim((string)$item['link_label']) !== '' ? trim((string)$item['link_label']) : 'Ver recurso';
                    $validLink = ($link !== '' && filter_var($link, FILTER_VALIDATE_URL) && preg_match('#^https?://#i', $link)) ? $link : '';
                ?>
                <div class="swiper-slide">
                    <article class="nex-content-card" data-nex-content-card data-pages="<?php echo htmlspecialchars($pagesJson, ENT_QUOTES, 'UTF-8'); ?>" data-captions="<?php echo htmlspecialchars($captionsJson, ENT_QUOTES, 'UTF-8'); ?>" data-page-index="0">
                        <div class="nex-content-card__visual">
                            <div class="nex-content-card__image-frame">
                                <img class="nex-content-card__image"
                                    src="<?php echo htmlspecialchars($itemIndex === 0 ? $firstUrl : $nexTransparentPixel, ENT_QUOTES, 'UTF-8'); ?>"
                                    data-initial-src="<?php echo htmlspecialchars($firstUrl, ENT_QUOTES, 'UTF-8'); ?>"
                                    alt="<?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?>"
                                    loading="lazy"
                                    fetchpriority="low"
                                    decoding="async">
                                <div class="nex-content-card__image-glow" aria-hidden="true"></div>
                                <button type="button" class="nex-content-card__open" data-nex-content-open aria-label="Abrir imagen en visor">
                                    <span aria-hidden="true">⛶</span>
                                    <span>Abrir guía</span>
                                </button>
                                <div class="nex-content-card__page-counter" aria-live="polite">
                                    <span data-nex-page-current>1</span>/<span data-nex-page-total><?php echo count($pageUrls); ?></span>
                                </div>
                                <?php if (count($pageUrls) > 1) { ?>
                                <button type="button" class="nex-content-card__page-arrow nex-content-card__page-arrow--prev" data-nex-page-prev aria-label="Página anterior"></button>
                                <button type="button" class="nex-content-card__page-arrow nex-content-card__page-arrow--next" data-nex-page-next aria-label="Página siguiente"></button>
                                <?php } ?>
                            </div>
                        </div>

                        <div class="nex-content-card__info">
                            <span class="nex-content-card__category"><?php echo htmlspecialchars($category, ENT_QUOTES, 'UTF-8'); ?></span>
                            <h3><?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></h3>
                            <?php if ($description !== '') { ?>
                                <p class="nex-content-card__description"><?php echo htmlspecialchars($description, ENT_QUOTES, 'UTF-8'); ?></p>
                            <?php } ?>
                            <?php if ($credit !== '') { ?>
                                <p class="nex-content-card__credit"><span>Crédito</span><?php echo htmlspecialchars($credit, ENT_QUOTES, 'UTF-8'); ?></p>
                            <?php } ?>

                            <div class="nex-content-card__page-meta">
                                <span>Página <strong data-nex-page-current-label>1</strong> de <?php echo count($pageUrls); ?></span>
                                <span data-nex-page-caption><?php echo htmlspecialchars(isset($pageCaptions[0]) ? $pageCaptions[0] : '', ENT_QUOTES, 'UTF-8'); ?></span>
                            </div>

                            <?php if (count($pageUrls) > 1) { ?>
                            <div class="nex-content-card__dots" aria-label="Páginas de la guía">
                                <?php foreach ($pageUrls as $pageIndex => $unused) { ?>
                                    <button type="button" class="nex-content-card__dot<?php echo $pageIndex === 0 ? ' is-active' : ''; ?>" data-nex-page-dot="<?php echo (int)$pageIndex; ?>" aria-label="Ir a página <?php echo (int)$pageIndex + 1; ?>"></button>
                                <?php } ?>
                            </div>
                            <?php } ?>

                            <div class="nex-content-card__actions">
                                <button type="button" class="nex-content-action nex-content-action--primary" data-nex-content-open>
                                    <span aria-hidden="true">⛶</span>
                                    Leer en grande
                                </button>
                                <?php if ($validLink !== '') { ?>
                                    <a class="nex-content-action" href="<?php echo htmlspecialchars($validLink, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener noreferrer">
                                        <span aria-hidden="true">↗</span>
                                        <?php echo htmlspecialchars($linkLabel, ENT_QUOTES, 'UTF-8'); ?>
                                    </a>
                                <?php } ?>
                            </div>
                        </div>
                    </article>
                </div>
                <?php } ?>
            </div>
        </div>

        <div class="nex-content-hub__guide-nav">
            <button type="button" class="nex-content-guide-prev swiper-nav-btn" aria-label="Contenido anterior"></button>
            <div class="nex-content-hub__tabs" role="tablist" aria-label="Contenido disponible">
                <?php foreach ($nexContentItems as $itemIndex => $item) {
                    $category = isset($item['category']) ? trim((string)$item['category']) : 'Contenido';
                    $title = isset($item['title']) ? trim((string)$item['title']) : 'Contenido Nexora';
                ?>
                    <button type="button" class="nex-content-tab<?php echo $itemIndex === 0 ? ' is-active' : ''; ?>" data-nex-content-tab="<?php echo (int)$itemIndex; ?>" role="tab" aria-selected="<?php echo $itemIndex === 0 ? 'true' : 'false'; ?>">
                        <small><?php echo htmlspecialchars($category, ENT_QUOTES, 'UTF-8'); ?></small>
                        <span><?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></span>
                    </button>
                <?php } ?>
            </div>
            <button type="button" class="nex-content-guide-next swiper-nav-btn" aria-label="Contenido siguiente"></button>
        </div>
    </div>

    <div class="nex-content-lightbox" data-nex-content-lightbox aria-hidden="true" role="dialog" aria-modal="true" aria-label="Visor de contenido Nexora">
        <button type="button" class="nex-content-lightbox__backdrop" data-nex-lightbox-close tabindex="-1" aria-label="Cerrar visor"></button>
        <div class="nex-content-lightbox__panel">
            <div class="nex-content-lightbox__topbar">
                <div>
                    <small data-nex-lightbox-category>Contenido Nexora</small>
                    <strong data-nex-lightbox-title>Guía</strong>
                </div>
                <button type="button" class="nex-content-lightbox__close" data-nex-lightbox-close aria-label="Cerrar visor">&times;</button>
            </div>
            <div class="nex-content-lightbox__stage">
                <button type="button" class="nex-content-lightbox__arrow nex-content-lightbox__arrow--prev" data-nex-lightbox-prev aria-label="Página anterior"></button>
                <img src="<?php echo htmlspecialchars($nexTransparentPixel, ENT_QUOTES, 'UTF-8'); ?>" alt="" data-nex-lightbox-image>
                <button type="button" class="nex-content-lightbox__arrow nex-content-lightbox__arrow--next" data-nex-lightbox-next aria-label="Página siguiente"></button>
            </div>
            <div class="nex-content-lightbox__footer">
                <span data-nex-lightbox-caption></span>
                <strong><span data-nex-lightbox-current>1</span>/<span data-nex-lightbox-total>1</span></strong>
            </div>
        </div>
    </div>
</section>
