add_action('admin_menu', function () {
    add_submenu_page(
        'edit.php?post_type=page',
        'Ver Tabla',
        'Ver Tabla',
        'manage_options',
        'ver-tabla-pages',
        'render_ver_tabla_pages'
    );
});

function render_ver_tabla_pages() {

    $orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'title';
    $order   = isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'ASC';

    function toggle_order($current_order) {
        return $current_order === 'ASC' ? 'DESC' : 'ASC';
    }

    function sort_link($label, $column, $current_orderby, $current_order) {
        $new_order = ($current_orderby === $column) ? toggle_order($current_order) : 'ASC';
        $arrow = '';

        if ($current_orderby === $column) {
            $arrow = $current_order === 'ASC' ? ' ↑' : ' ↓';
        }

        $url = add_query_arg([
            'orderby' => $column,
            'order'   => $new_order
        ]);

        return "<a href='{$url}'>{$label}{$arrow}</a>";
    }

    // Get all pages
    $pages = get_posts([
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'orderby'        => $orderby,
        'order'          => $order
    ]);

    // Build tree (only useful if sorting by title)
    $tree = [];
    $lookup = [];

    foreach ($pages as $page) {
        $page->children = [];
        $lookup[$page->ID] = $page;
    }

    foreach ($pages as $page) {
        if ($page->post_parent && isset($lookup[$page->post_parent]) && $orderby === 'title') {
            $lookup[$page->post_parent]->children[] = $page;
        } else {
            $tree[] = $page;
        }
    }

    // Recursive renderer
    function render_row($page, $level = 0) {

        $has_children = !empty($page->children);
        $indent = str_repeat('&mdash; ', $level);

        $title = esc_html($page->post_title);
        $url = get_permalink($page->ID);
        $date_published = get_the_date('Y/m/d', $page->ID);
        $date_modified = get_the_modified_date('Y/m/d', $page->ID);
        $edit_link = get_edit_post_link($page->ID);

        $row_id = 'page-' . $page->ID;
        $parent_class = $page->post_parent ? 'child-of-' . $page->post_parent : '';

        echo "<tr class='{$parent_class}' data-parent='{$page->post_parent}' style='" . ($level > 0 ? "display:none;" : "") . "'>";

        echo "<td>";

        if ($has_children) {
            echo "<span class='toggle' data-id='{$page->ID}' style='cursor:pointer;'>▶</span> ";
        } else {
            echo "<span style='display:inline-block;width:14px;'></span>";
        }

        echo "{$indent}{$title}</td>";

        echo "<td><a href='{$url}' target='_blank'>{$url}</a></td>";
        echo "<td>{$date_published}</td>";
        echo "<td>{$date_modified}</td>";
        echo "<td>
                <a href='{$url}' target='_blank'>Ver</a> |
                <a href='{$edit_link}'>Editar</a>
              </td>";

        echo "</tr>";

        // Render children
        foreach ($page->children as $child) {
            render_row($child, $level + 1);
        }
    }

    ?>
    <div class="wrap">
        <h1>Tabla de Páginas</h1>

        <table class="widefat fixed striped">
            <thead>
                <tr>
                    <th><?php echo sort_link('Título', 'title', $orderby, $order); ?></th>
                    <th>URL</th>
                    <th><?php echo sort_link('Fecha Publicación', 'date', $orderby, $order); ?></th>
                    <th><?php echo sort_link('Fecha Modificación', 'modified', $orderby, $order); ?></th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php
                if ($pages) {

                    // If sorting by title → hierarchical
                    if ($orderby === 'title') {
                        foreach ($tree as $page) {
                            render_row($page);
                        }
                    } else {
                        // Flat list if sorting by date/modified
                        foreach ($pages as $page) {
                            $page->children = [];
                            render_row($page);
                        }
                    }

                } else {
                    echo "<tr><td colspan='5'>No hay páginas.</td></tr>";
                }
                ?>
            </tbody>
        </table>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.querySelectorAll('.toggle').forEach(function (toggle) {
                toggle.addEventListener('click', function () {

                    const id = this.dataset.id;
                    const isOpen = this.textContent === '▼';

                    this.textContent = isOpen ? '▶' : '▼';

                    toggleChildren(id, !isOpen);
                });
            });

            function toggleChildren(parentId, show) {
                const children = document.querySelectorAll(`tr[data-parent='${parentId}']`);

                children.forEach(function (row) {
                    row.style.display = show ? '' : 'none';

                    const toggle = row.querySelector('.toggle');
                    if (toggle) {
                        toggle.textContent = '▶';
                    }

                    // Recursively hide children
                    if (!show) {
                        toggleChildren(row.querySelector('.toggle')?.dataset.id, false);
                    }
                });
            }
        });
    </script>
    <?php
}