{* Änderungen tab — MCP change journal + undo. All dynamic values escaped.
   Prose branches on $lang (see src/Mcp/Admin/AdminLanguage.php); labels produced in PHP arrive
   already picked, and `verdictBadge`/`stateBadge` are TONES that map onto `$ui.chip`.

   Tailwind only, via `$ui` (adminmenu/Controller/Ui.php). Constrained to max-w-5xl: at full admin
   width a handful of rows left ~500 px of dead space and scattered the badges (ledger U20). *}
<div class="tnt-mcp-changes mx-auto max-w-5xl py-4">
    {if $flash}
        <div class="{$ui.alert[$flash.type]}">{$flash.text|escape}</div>
    {/if}
    {if $notFound}
        <div class="{$ui.alert.warning}">
            {if $lang == 'en'}
                Change <code class="{$ui.code}">{$notFound|escape}</code> is not (or no longer) in the journal.
            {else}
                Änderung <code class="{$ui.code}">{$notFound|escape}</code> ist nicht (mehr) im Journal.
            {/if}
        </div>
    {/if}

    {if $detail}
        <div class="{$ui.card}">
            <div class="{$ui.cardHead}">
                <span>
                    {if $lang == 'en'}Change{else}Änderung{/if}
                    <code class="{$ui.code}">{$detail.changeId|escape}</code> — {$detail.title|escape}
                </span>
                <a class="{$ui.btn}" href="{$listUrl|escape}">
                    {if $lang == 'en'}Back to the list{else}Zurück zur Liste{/if}
                </a>
            </div>
            <div class="{$ui.cardBody}">
                <dl class="mb-4 grid grid-cols-1 gap-x-4 gap-y-1 text-sm sm:grid-cols-[10rem_1fr]">
                    <dt class="font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Action{else}Aktion{/if}</dt>
                    <dd class="text-gray-700 dark:text-gray-300"><code class="{$ui.code}">{$detail.actionId|escape}</code></dd>
                    <dt class="font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Executed by{else}Ausgeführt von{/if}</dt>
                    <dd class="text-gray-700 dark:text-gray-300">{$detail.actingLogin|escape} · {$detail.createdAt|escape}</dd>
                    <dt class="font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Result{else}Ergebnis{/if}</dt>
                    <dd class="text-gray-700 dark:text-gray-300">
                        <span class="{$ui.chip[$detail.verdictBadge]}">{$detail.verdict|escape}</span>
                        <span class="{$ui.chip[$detail.stateBadge]}">{$detail.stateLabel|escape}</span>
                        {if $detail.undoReason}<span class="{$ui.small}">{$detail.undoReason|escape}</span>{/if}
                    </dd>
                    {if $detail.undoOf}
                        <dt class="font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Undoes{else}Macht rückgängig{/if}</dt>
                        <dd class="text-gray-700 dark:text-gray-300"><code class="{$ui.code}">{$detail.undoOf|escape}</code></dd>
                    {/if}
                    {if $detail.undoneAt}
                        <dt class="font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Undone at{else}Rückgängig gemacht am{/if}</dt>
                        <dd class="text-gray-700 dark:text-gray-300">{$detail.undoneAt|escape}</dd>
                    {/if}
                </dl>

                {if $detail.cacheFlushed || $detail.cannotUndo}
                    <div class="{$ui.alert.warning}">
                        <strong>{if $lang == 'en'}Not reversible:{else}Nicht umkehrbar:{/if}</strong>
                        <ul class="mt-1 list-disc space-y-1 pl-5">
                            {foreach $detail.cannotUndo as $c}<li>{$c|escape}</li>{/foreach}
                            {if $detail.cacheFlushed}
                                <li>
                                    {if $lang == 'en'}
                                        This action flushed the shop cache. Undoing it flushes the whole
                                        cache again — the exact tags are not recorded.
                                    {else}
                                        Diese Aktion hat den Shop-Cache geleert. Ein Rückgängigmachen leert
                                        den gesamten Cache erneut — die genauen Tags sind nicht protokolliert.
                                    {/if}
                                </li>
                            {/if}
                        </ul>
                    </div>
                {/if}

                {if $detail.rows}
                    <div class="{$ui.tableWrap} {$ui.tableScroll}">
                        <table class="{$ui.table}">
                            <thead>
                            <tr>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Table{else}Tabelle{/if}</th>
                                <th class="{$ui.thSticky}">Operation</th>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Key{else}Schlüssel{/if}</th>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Changed fields{else}Geänderte Felder{/if}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach $detail.rows as $r}
                                <tr>
                                    <td class="{$ui.td} whitespace-nowrap"><code class="{$ui.code}">{$r.table|escape}</code></td>
                                    <td class="{$ui.td}">
                                        {if $r.op === 'insert'}
                                            <span class="{$ui.chip.success}">{$r.op|escape}</span>
                                        {elseif $r.op === 'delete'}
                                            <span class="{$ui.chip.danger}">{$r.op|escape}</span>
                                        {else}
                                            <span class="{$ui.chip.neutral}">{$r.op|escape}</span>
                                        {/if}
                                    </td>
                                    <td class="{$ui.td}"><code class="{$ui.code}">{$r.key|escape}</code></td>
                                    <td class="{$ui.td}">
                                        {if $r.changes}
                                            {foreach $r.changes as $c}
                                                <div class="text-xs">
                                                    <code class="{$ui.code}">{$c.column|escape}</code>:
                                                    <span class="text-gray-500 dark:text-gray-400">{if $c.before === null}—{else}{$c.before|escape}{/if}</span>
                                                    →
                                                    <strong>{if $c.after === null}—{else}{$c.after|escape}{/if}</strong>
                                                </div>
                                            {/foreach}
                                        {else}
                                            <span class="{$ui.small}">
                                                {if $lang == 'en'}no field changed{else}keine Feldänderung{/if}
                                            </span>
                                        {/if}
                                    </td>
                                </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                {else}
                    <span class="{$ui.muted}">
                        {if $lang == 'en'}
                            No records are journalled for this change.
                        {else}
                            Für diese Änderung sind keine Datensätze protokolliert.
                        {/if}
                    </span>
                {/if}
            </div>
            {if $detail.undoable}
                <div class="{$ui.cardFoot}">
                    {if $lang == 'en'}
                        {assign var=tntUndoConfirm value='Really undo this change?'}
                    {else}
                        {assign var=tntUndoConfirm value='Diese Änderung wirklich rückgängig machen?'}
                    {/if}
                    <form method="post" action=""
                          onsubmit="return confirm('{$tntUndoConfirm|escape:'javascript'}');">
                        <input type="hidden" name="jtl_token" value="{$jtlToken|escape}">
                        <input type="hidden" name="tntMcpAction" value="undo">
                        <input type="hidden" name="changeId" value="{$detail.changeId|escape}">
                        <button type="submit" class="{$ui.btnDanger}">
                            {if $lang == 'en'}Undo{else}Rückgängig machen{/if}
                        </button>
                        <span class="{$ui.small} ml-2">
                            {if $lang == 'en'}
                                If the records have been edited again since this change, the undo is
                                refused rather than overwriting the newer edit.
                            {else}
                                Wurden die Datensätze seit dieser Änderung erneut bearbeitet, wird das
                                Rückgängigmachen abgelehnt statt die neuere Bearbeitung zu überschreiben.
                            {/if}
                        </span>
                    </form>
                </div>
            {/if}
        </div>
    {/if}

    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">
            {if $lang == 'en'}
                Changes made by MCP actions (newest first, max. {$limit|intval})
            {else}
                Änderungen durch MCP-Aktionen (neueste zuerst, max. {$limit|intval})
            {/if}
        </div>
        <div class="{$ui.cardBody}">
            {if $changes}
                <div class="{$ui.tableWrap} {$ui.tableScroll}">
                    <table class="{$ui.table}">
                        <thead>
                        <tr>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Time{else}Zeit{/if}</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Action{else}Aktion{/if}</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}By{else}Von{/if}</th>
                            <th class="{$ui.thSticky} text-right">{if $lang == 'en'}Records{else}Datensätze{/if}</th>
                            {* Verdict and state answer one question — "how did it end?" — and were
                               split over two columns, scattering the badge trio (ledger U20). *}
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Result{else}Ergebnis{/if}</th>
                            <th class="{$ui.thSticky}"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $changes as $c}
                            <tr>
                                <td class="{$ui.td} whitespace-nowrap">{$c.createdAt|escape}</td>
                                <td class="{$ui.td}">
                                    {* The title is the row's natural entry point — a second, larger
                                       target than the Details button at the end (ledger U32). *}
                                    <a class="font-medium text-gray-900 hover:underline dark:text-gray-100"
                                       href="{$c.detailUrl|escape}">{$c.title|escape}</a><br>
                                    <code class="{$ui.code}">{$c.actionId|escape}</code>
                                </td>
                                <td class="{$ui.td}">{$c.actingLogin|escape}</td>
                                <td class="{$ui.td} text-right">{$c.rowCount|intval}</td>
                                <td class="{$ui.td}">
                                    <div class="flex flex-wrap gap-1">
                                        <span class="{$ui.chip[$c.verdictBadge]}">{$c.verdict|escape}</span>
                                        <span class="{$ui.chip[$c.stateBadge]}">{$c.stateLabel|escape}</span>
                                    </div>
                                    {if $c.undoReason}<div class="{$ui.small} mt-1">{$c.undoReason|escape}</div>{/if}
                                </td>
                                <td class="{$ui.td} whitespace-nowrap text-right">
                                    <a class="{$ui.btn}" href="{$c.detailUrl|escape}">Details</a>
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            {else}
                <span class="{$ui.muted}">
                    {if $lang == 'en'}
                        No changes journalled yet. As soon as a connected AI client runs a backend
                        action it shows up here — with before/after values and a button to undo it.
                    {else}
                        Noch keine Änderungen protokolliert. Sobald ein verbundener KI-Client eine
                        Backend-Aktion ausführt, erscheint sie hier — mit Vorher/Nachher-Werten und
                        einer Schaltfläche zum Rückgängigmachen.
                    {/if}
                </span>
            {/if}
        </div>
    </div>
</div>
