<?php
namespace NeoLibraryBeta\NeoGlobal; if (!defined("ABSPATH")) { die("neoWP direct access not allowed"); }


\NeoLibraryBeta\NeoGlobal\register_backend_page("neo-global--db-entries-usage-neo-library-beta", function() {?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php \NeoLibraryBeta\NeoGlobal\echo_neo__("Image in WordPress Database", "Bilder in WordPress Datenbank") ?></title>
        <style>

            body {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 20px;
                --page-header-height: 100px;
            }

            #pageHeader {
                position: fixed; top: 0; left: 0;
                width: 100%; height: var(--page-header-height);
                padding: 20px; box-sizing: border-box;
            }
            #pageHeader>img {
                position: absolute; top: 20px; right: 20px;
                max-width: calc(2 * var(--page-header-height)); height: var(--page-header-height); object-fit: contain;
            }
            #tablesContainer { margin-top: var(--page-header-height); }

            .tableContainer {
                margin-bottom: 30px; padding: 10px;
            }
            .tableContainer>h2 {
                margin-bottom: 8px; color: <?php echo esc_html(\NeoLibraryBeta\NeoGlobal\transform_colors("#ff00ff")) ?>; font-size: 22px;
            }
            table {
                border-collapse: collapse;
            }
            th, td {
                padding: 8px;
                border-bottom: 1px solid #ddd;
                text-align: left; vertical-align: baseline;
                white-space: pre;
            }
            .highlight {
                background-color: <?php echo esc_html(\NeoLibraryBeta\NeoGlobal\transform_colors("#00ff00")) ?>;
            }
        </style>
    </head>
    <body>
        <div id="pageHeader">
            <h1><?php \NeoLibraryBeta\NeoGlobal\echo_neo__("Image in WordPress Database", "Bilder in WordPress Datenbank") ?></h1>
            <p><?php \NeoLibraryBeta\NeoGlobal\echo_neo__("This page displays the database entries in WordPress that the image is using.", "Diese Seite zeigt die Datenbankeinträge in WordPress, die das Bild verwenden.") ?></p>
        </div>
        <div id="tablesContainer"></div>

        <script type="module">
            import { neo__ } from "<?php echo esc_url(\NeoLibraryBeta\NeoGlobal\plugin_url()) ?>/_global--translation.js";


            const dbEntries = JSON.parse(new URLSearchParams(location.search).get("db-entries"));

            const dataGroupedByTable = {};
            for (const entry of dbEntries) {
                dataGroupedByTable[entry.tableName] ??= [];
                dataGroupedByTable[entry.tableName].push(entry.contentPreview);
            }

            const tablesContainer = document.getElementById("tablesContainer");
            for (const tableName of Object.keys(dataGroupedByTable)) {

                const tableSection = document.createElement("section");
                tableSection.classList.add("tableContainer");
                tableSection.innerHTML = `<h2>${tableName}</h2>`;

                const tableNode = document.createElement("table");

                const headerRow = document.createElement("tr");
                const columnNames = Object.keys(dataGroupedByTable[tableName][0]);
                for (const columnName of columnNames) {
                    const th = document.createElement("th");
                    th.textContent = columnName;
                    headerRow.appendChild(th);
                }
                tableNode.appendChild(headerRow);

                for (const rowPreview of dataGroupedByTable[tableName]) {
                    const row = document.createElement("tr");
                    for (const previewColName of columnNames) {
                        const td = document.createElement("td");
                        td.textContent = rowPreview[previewColName];

                        const imgUrl = new URLSearchParams(location.search).get("img-url");
                        const imgUrlWithoutExtension = imgUrl.replace(/\.[^/.]+$/, "");
                        const imgUrlExtension = imgUrl.match(/\.[^/.]+$/);
                        const imgUrlOrSizeRegex = new RegExp(`(?:${imgUrlWithoutExtension}|${imgUrlWithoutExtension.replaceAll("/", "\\\\/")})(?:-[0-9]+x[0-9]+)?${imgUrlExtension}`, "gi");
                        td.innerHTML = td.innerHTML.replace(imgUrlOrSizeRegex, '<span class="highlight">$&</span>');

                        row.appendChild(td);
                    }
                    tableNode.appendChild(row);
                }
                tableSection.appendChild(tableNode);
                tablesContainer.appendChild(tableSection);
            }


            if (Object.keys(dataGroupedByTable).length === 0) {
                const notFound = document.createElement("p");
                notFound.textContent = neo__("The image was not found in the database.", "Das Bild wurde nicht in der Datenbank gefunden.");
                tablesContainer.appendChild(notFound);
            }


            const countInCurrentPost = new URLSearchParams(location.search).get("count-in-current-post") || "0";
            if (parseInt(countInCurrentPost) > 0) {
                const countInOwnPostSection = document.createElement("section");
                countInOwnPostSection.classList.add("tableContainer");
                countInOwnPostSection.innerHTML = "<h2>" + neo__("Count in own post", "Anzahl im eigenen Beitrag") + "</h2>";
                const countInOwnPostParagraph = document.createElement("p");
                countInOwnPostParagraph.textContent = neo__(`The image is used ${countInCurrentPost} times in the currently open post.`, `Das Bild wird ${countInCurrentPost} mal im aktuell offenen Beitrag verwendet.`);
                countInOwnPostSection.appendChild(countInOwnPostParagraph);
                tablesContainer.appendChild(countInOwnPostSection);
            }


            const imgPreview = document.createElement("img");
            imgPreview.src = new URLSearchParams(location.search).get("img-url");
            document.getElementById("pageHeader").appendChild(imgPreview);
        </script>
    </body>
    </html>
<?php });



function get_db_entries_page_url() { return \NeoLibraryBeta\NeoGlobal\get_backend_page_url("neo-global--db-entries-usage-neo-library-beta"); }
