// Função para o shortcode customizado
function custom_tabs_shortcode($atts) {
    // Define os atributos padrão para o shortcode
    $atts = shortcode_atts(
        array(
            'count' => 5, // Número de itens por aba, padrão é 5
        ), 
        $atts,
        'custom_tabs'
    );

    // Número de itens que você quer mostrar
    $count = intval($atts['count']);

    // Começo do buffer de saída para capturar o HTML
    ob_start(); ?>
    <div id="custom-tabs" class="story tabs-wrapper" data-current="most-viewed">
        <!-- Abas principais -->
        <div class="tabs primary-tabs">
            <button class="tabs__item _current" data-target="most-viewed">Mais Vistos</button>
            <button class="tabs__item" data-target="most-commented">Mais Comentados</button>
        </div>

        <!-- Conteúdo de "Mais Vistos" -->
        <div class="tab-content story__tab-target _current" data-finder="most-viewed">
            <!-- Abas secundárias -->
            <div class="tabs secondary-tabs">
                <button class="tabs__item _current" data-target="most-viewed-translation">Tradução</button>
                <button class="tabs__item" data-target="most-viewed-original">Original</button>
            </div>
            <div class="tab-pane story__tab-target _current" data-finder="most-viewed-translation">
                [fictioneer_latest_stories count="" orderby="views" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Tradução" footer_date="false" footer_rating="false"]            </div>
            <div class="tab-pane story__tab-target" data-finder="most-viewed-original">
                [fictioneer_latest_stories count="" orderby="views" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Original" footer_date="false" footer_rating="false"]            </div>
        </div>

        <!-- Conteúdo de "Mais Comentados" -->
        <div class="tab-content story__tab-target" data-finder="most-commented">
            <div class="tabs secondary-tabs">
                <button class="tabs__item _current" data-target="most-commented-translation">Tradução</button>
                <button class="tabs__item" data-target="most-commented-original">Original</button>
            </div>
            <div class="tab-pane story__tab-target _current" data-finder="most-commented-translation">
                [fictioneer_latest_stories count="" orderby="comment_count" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Tradução" footer_date="false" footer_rating="false"]            </div>
            <div class="tab-pane story__tab-target" data-finder="most-commented-original">
                [fictioneer_latest_stories count="" orderby="comment_count" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Original" footer_date="false" footer_rating="false"]            </div>
        </div>
    </div>
    <script>
        // Script para alternar abas
        function toggleTab(target) {
            const container = target.closest('.tabs-wrapper');
            const parentTabGroup = target.closest('.tab-content') || container;

            parentTabGroup.querySelectorAll('.tabs__item._current, .story__tab-target._current').forEach(element => {
                element.classList.remove('_current');
            });

            const targetContent = parentTabGroup.querySelector(`[data-finder="${target.dataset.target}"]`);
            if (targetContent) targetContent.classList.add('_current');
            target.classList.add('_current');

            if (parentTabGroup.classList.contains('tabs-wrapper')) {
                const firstSecondaryTab = targetContent.querySelector('.tabs.secondary-tabs .tabs__item');
                if (firstSecondaryTab) firstSecondaryTab.click();
            }
        }

        document.querySelectorAll('.tabs__item').forEach(tab => {
            tab.addEventListener('click', event => toggleTab(event.currentTarget));
        });
    </script>
    <style>
        .tabs-wrapper {
            display: flex;
            flex-direction: column;
            width: 80%;
            margin: 0 auto;
            padding: 0 20px;
            align-items: normal;
        }

        .tabs {
            justify-content: center;
        }

        .primary-tabs {
            margin-bottom: 10px;
            text-align: center;
            align-self: center;
        }

        .secondary-tabs {
            margin-top: 10px;
            margin-bottom: 1.5rem !important;
            text-align: center;
            align-self: center;
        }

        .story__tab-target:not(._current) {
            display: none;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane._current {
            display: block;
        }
    </style>