{* Tokens & Audit tab — issued tokens/clients + audit log. No secret is ever rendered.
   Prose branches on $lang (see src/Mcp/Admin/AdminLanguage.php).
   Tailwind only, via `$ui` (adminmenu/Controller/Ui.php). *}
{if $lang == 'en'}
    {assign var=tntConfirmLegacy value='Really delete this static token?'}
    {assign var=tntConfirmClient value='Delete the client including every token it was issued?'}
    {assign var=tntConfirmToken  value='Revoke (delete) this access token?'}
    {assign var=tntCopyLabel     value='Copy'}
    {assign var=tntCopiedLabel   value='Copied'}
    {assign var=tntDelete        value='Delete'}
{else}
    {assign var=tntConfirmLegacy value='Diesen statischen Token wirklich löschen?'}
    {assign var=tntConfirmClient value='Client inkl. aller ausgestellten Tokens löschen?'}
    {assign var=tntConfirmToken  value='Dieses Access-Token widerrufen (löschen)?'}
    {assign var=tntCopyLabel     value='Kopieren'}
    {assign var=tntCopiedLabel   value='Kopiert'}
    {assign var=tntDelete        value='Löschen'}
{/if}
{* One long ID: truncated, full value on hover, one click to the clipboard (ledger U18). *}
{function name=tntIdCell value='' ui=null copy='' copied=''}
    <div class="flex items-center gap-1">
        <code class="{$ui.code} block max-w-[8rem] truncate" title="{$value|escape}">{$value|escape}</code>
        <button type="button" class="tnt-copy shrink-0 rounded p-1 text-gray-400 hover:text-gray-700
                                     dark:text-gray-500 dark:hover:text-gray-200"
                data-copy="{$value|escape}" data-copied="{$copied|escape}"
                title="{$copy|escape}" aria-label="{$copy|escape}">
            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="9" y="9" width="13" height="13" rx="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
        </button>
    </div>
{/function}
<div class="tnt-mcp-tokens-audit py-4">
    {if isset($flash) && $flash}
        <div class="{$ui.alert[$flash.type]}">{$flash.text|escape}</div>
    {/if}

    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}Static tokens{else}Statische Token{/if}</div>
        <div class="{$ui.cardBody}">
            {if $legacyTokens}
                <div class="{$ui.tableWrap} {$ui.tableScroll}">
                    <table class="{$ui.table}">
                        <thead>
                        <tr>
                            <th class="{$ui.thSticky}">ID</th>
                            <th class="{$ui.thSticky}">Label</th>
                            <th class="{$ui.thSticky}">Scopes</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Active{else}Aktiv{/if}</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Created{else}Erstellt{/if}</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Last used{else}Zuletzt benutzt{/if}</th>
                            <th class="{$ui.thSticky} text-right">{if $lang == 'en'}Action{else}Aktion{/if}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $legacyTokens as $t}
                            <tr>
                                <td class="{$ui.td}">
                                    {tntIdCell value=$t.id ui=$ui copy=$tntCopyLabel copied=$tntCopiedLabel}
                                </td>
                                <td class="{$ui.td}">{$t.label|escape}</td>
                                <td class="{$ui.td}">
                                    <div class="flex flex-wrap gap-1">
                                        {foreach $t.scopes as $s}<span class="{$ui.chip.info}">{$s|escape}</span>{/foreach}
                                    </div>
                                </td>
                                <td class="{$ui.td}">
                                    {if $t.active}<span class="{$ui.chip.success}">{if $lang == 'en'}active{else}aktiv{/if}</span>
                                    {else}<span class="{$ui.chip.neutral}">{if $lang == 'en'}revoked{else}widerrufen{/if}</span>{/if}
                                </td>
                                <td class="{$ui.td} whitespace-nowrap">{$t.created|escape}</td>
                                <td class="{$ui.td} whitespace-nowrap">{$t.lastUsed|escape}</td>
                                <td class="{$ui.td} text-right">
                                    <form method="post" action="" class="inline"
                                          onsubmit="return confirm('{$tntConfirmLegacy|escape:'javascript'}');">
                                        <input type="hidden" name="jtl_token" value="{$jtlToken|escape}">
                                        <input type="hidden" name="tntMcpAction" value="delete_legacy">
                                        <input type="hidden" name="kToken" value="{$t.kToken|intval}">
                                        <button type="submit" class="{$ui.btnDanger}">{$tntDelete|escape}</button>
                                    </form>
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            {else}
                <span class="{$ui.muted}">{if $lang == 'en'}No static tokens.{else}Keine statischen Token.{/if}</span>
            {/if}
        </div>
    </div>

    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}OAuth clients{else}OAuth-Clients{/if}</div>
        <div class="{$ui.cardBody}">
            {if $oauthClients}
                <div class="{$ui.tableWrap} {$ui.tableScroll}">
                    <table class="{$ui.table}">
                        <thead>
                        <tr>
                            <th class="{$ui.thSticky}">Client-ID</th>
                            <th class="{$ui.thSticky}">Name</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Type{else}Typ{/if}</th>
                            <th class="{$ui.thSticky}">Scopes</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Created{else}Erstellt{/if}</th>
                            {* Five clients all called "ChatGPT" and the only action is "delete" —
                               the newest token is the discriminator that decision needs (U26). *}
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Newest token{else}Neuestes Token{/if}</th>
                            <th class="{$ui.thSticky} text-right">{if $lang == 'en'}Action{else}Aktion{/if}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $oauthClients as $c}
                            <tr>
                                <td class="{$ui.td}">
                                    {tntIdCell value=$c.clientId ui=$ui copy=$tntCopyLabel copied=$tntCopiedLabel}
                                </td>
                                <td class="{$ui.td}">
                                    {if $c.live}{$c.name|escape}
                                    {else}
                                        <span class="{$ui.muted}">{$c.name|escape}</span>
                                        <span class="{$ui.chip.neutral} ml-1">{if $lang == 'en'}inactive{else}inaktiv{/if}</span>
                                    {/if}
                                </td>
                                <td class="{$ui.td}">
                                    {if $c.confidential}<span class="{$ui.chip.warning}">confidential</span>
                                    {else}<span class="{$ui.chip.info}">public (PKCE)</span>{/if}
                                </td>
                                <td class="{$ui.td}">
                                    <div class="flex flex-wrap gap-1">
                                        {foreach $c.scopes as $s}<span class="{$ui.chip.info}">{$s|escape}</span>{/foreach}
                                    </div>
                                </td>
                                <td class="{$ui.td} whitespace-nowrap">{$c.created|escape}</td>
                                <td class="{$ui.td} whitespace-nowrap">
                                    {if $c.lastToken}{$c.lastToken|escape}
                                    {else}<span class="{$ui.muted}">{if $lang == 'en'}never{else}nie{/if}</span>{/if}
                                </td>
                                <td class="{$ui.td} text-right">
                                    <form method="post" action="" class="inline"
                                          onsubmit="return confirm('{$tntConfirmClient|escape:'javascript'}');">
                                        <input type="hidden" name="jtl_token" value="{$jtlToken|escape}">
                                        <input type="hidden" name="tntMcpAction" value="delete_client">
                                        <input type="hidden" name="clientId" value="{$c.clientId|escape}">
                                        <button type="submit" class="{$ui.btnDanger}">{$tntDelete|escape}</button>
                                    </form>
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            {else}
                <span class="{$ui.muted}">{if $lang == 'en'}No OAuth clients registered.{else}Keine OAuth-Clients registriert.{/if}</span>
            {/if}
        </div>
    </div>

    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}OAuth access tokens (masked){else}OAuth-Access-Token (maskiert){/if}</div>
        <div class="{$ui.cardBody}">
            {if $oauthTokens}
                <div class="{$ui.tableWrap} {$ui.tableScroll}">
                    <table class="{$ui.table}">
                        <thead>
                        <tr>
                            <th class="{$ui.thSticky}">Token</th>
                            <th class="{$ui.thSticky}">Client-ID</th>
                            <th class="{$ui.thSticky}">Scopes</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Expires{else}Läuft ab{/if}</th>
                            <th class="{$ui.thSticky}">Status</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Created{else}Erstellt{/if}</th>
                            <th class="{$ui.thSticky} text-right">{if $lang == 'en'}Action{else}Aktion{/if}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $oauthTokens as $o}
                            <tr>
                                <td class="{$ui.td}"><code class="{$ui.code}">{$o.tokenPrefix|escape}</code></td>
                                <td class="{$ui.td}">
                                    {tntIdCell value=$o.clientId ui=$ui copy=$tntCopyLabel copied=$tntCopiedLabel}
                                </td>
                                <td class="{$ui.td}">
                                    <div class="flex flex-wrap gap-1">
                                        {foreach $o.scopes as $s}<span class="{$ui.chip.info}">{$s|escape}</span>{/foreach}
                                    </div>
                                </td>
                                <td class="{$ui.td} whitespace-nowrap">{$o.expires|escape}</td>
                                <td class="{$ui.td}">
                                    {if $o.revoked}<span class="{$ui.chip.neutral}">{if $lang == 'en'}revoked{else}widerrufen{/if}</span>
                                    {elseif $o.expired}<span class="{$ui.chip.neutral}">{if $lang == 'en'}expired{else}abgelaufen{/if}</span>
                                    {else}<span class="{$ui.chip.success}">{if $lang == 'en'}active{else}aktiv{/if}</span>{/if}
                                </td>
                                <td class="{$ui.td} whitespace-nowrap">{$o.created|escape}</td>
                                <td class="{$ui.td} text-right">
                                    <form method="post" action="" class="inline"
                                          onsubmit="return confirm('{$tntConfirmToken|escape:'javascript'}');">
                                        <input type="hidden" name="jtl_token" value="{$jtlToken|escape}">
                                        <input type="hidden" name="tntMcpAction" value="delete_token">
                                        <input type="hidden" name="ref" value="{$o.ref|escape}">
                                        <button type="submit" class="{$ui.btnDanger}">{$tntDelete|escape}</button>
                                    </form>
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            {else}
                <span class="{$ui.muted}">{if $lang == 'en'}No OAuth access tokens.{else}Keine OAuth-Access-Token.{/if}</span>
            {/if}
        </div>
    </div>

    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}Audit log{else}Audit-Log{/if}</div>
        <div class="{$ui.cardBody}">
            {if $auditEntries}
                <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}">Token</th>
                            <th class="{$ui.thSticky}">Tool</th>
                            {* Ergebnis used to sit AFTER the args, so wide JSON pushed the one
                               column the merchant reads off the viewport entirely (U29). *}
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Result{else}Ergebnis{/if}</th>
                            <th class="{$ui.thSticky}">{if $lang == 'en'}Arguments{else}Argumente{/if}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $auditEntries as $a}
                            <tr>
                                <td class="{$ui.td} whitespace-nowrap">{$a.created|escape}</td>
                                <td class="{$ui.td}">
                                    {tntIdCell value=$a.tokenId ui=$ui copy=$tntCopyLabel copied=$tntCopiedLabel}
                                </td>
                                <td class="{$ui.td}"><code class="{$ui.code}">{$a.tool|escape}</code></td>
                                <td class="{$ui.td}">
                                    <span class="{$ui.chip[$a.tone]}">{$a.outcome|escape}</span>
                                </td>
                                <td class="{$ui.td} {$ui.small}">
                                    {if $a.args !== ''}{$a.args|escape}{else}<span class="{$ui.muted}">&ndash;</span>{/if}
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            {else}
                <span class="{$ui.muted}">{if $lang == 'en'}No audit entries yet.{else}Noch keine Audit-Einträge.{/if}</span>
            {/if}
        </div>
    </div>

    {* UUID-length IDs used to set the column width of every table on this tab and could not be
       copied out of it (ledger U18). Truncated + full value on hover + one click to the clipboard.
       The listener is delegated, so it also covers rows that arrive after a POST re-render. *}
    <script>{literal}
        (function () {
            var root = document.currentScript.parentNode;
            root.addEventListener('click', function (ev) {
                var btn = ev.target.closest('.tnt-copy');
                if (!btn) { return; }
                var value = btn.getAttribute('data-copy') || '';
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(value);
                } else {
                    // The backend is regularly served over plain http, where the async API is absent.
                    var ta = document.createElement('textarea');
                    ta.value = value;
                    ta.style.position = 'fixed';
                    ta.style.opacity = '0';
                    root.appendChild(ta);
                    ta.select();
                    try { document.execCommand('copy'); } catch (e) { /* nothing to do */ }
                    root.removeChild(ta);
                }
                var done = btn.getAttribute('data-copied');
                var was = btn.getAttribute('title');
                btn.setAttribute('title', done);
                window.setTimeout(function () { btn.setAttribute('title', was); }, 1500);
            });
        })();
    {/literal}</script>
</div>
