{* Start tab — "what do I do next?" (design §2/§6, ledger U1 + U2). See Controller/Start.php for the
   order of this page and why each of the five sections sits where it does.

   Tailwind only, via `$ui` (adminmenu/Controller/Ui.php); never `bg-white`, see that file. All
   dynamic values escaped. *}
<div class="tnt-mcp-start py-4">

    {* 1 — the call to action. The checklist below repeats every step; this repeats only the ONE the
       merchant has to do now, because a list of five items with three ticks is still a list. *}
    {if $nextStep}
        <div class="{$ui.alert.info}">
            <div class="{$ui.small} uppercase tracking-wide">
                {if $lang == 'en'}Next step{else}Nächster Schritt{/if}
            </div>
            <strong class="text-base">{$nextStep.title|escape}</strong>
            {if $nextStep.detail}<p class="mt-1">{$nextStep.detail|escape}</p>{/if}
            {if $nextStep.tab && $tabUrls[$nextStep.tab]}
                <a class="{$ui.btn} mt-2" href="{$tabUrls[$nextStep.tab]|escape}">
                    {if $lang == 'en'}Open{else}Öffnen{/if} &bdquo;{$nextStep.tab|escape}&ldquo;
                </a>
            {/if}
        </div>
    {else}
        <div class="{$ui.alert.success}">
            <strong>{if $lang == 'en'}Everything is set up.{else}Alles eingerichtet.{/if}</strong>
        </div>
    {/if}

    {* 2 — the checklist itself, in the order the steps have to happen. *}
    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}Setup{else}Einrichtung{/if}</div>
        <div class="{$ui.cardBody}">
            <ul class="space-y-3">
                {foreach $steps as $step}
                    <li class="flex items-start gap-2">
                        {if $step.state == 'done'}
                            <span class="{$ui.chip.success}">&#10003;</span>
                        {elseif $step.state == 'optional'}
                            <span class="{$ui.chip.neutral}">{if $lang == 'en'}optional{else}optional{/if}</span>
                        {else}
                            <span class="{$ui.chip.warning}">&#9679;</span>
                        {/if}
                        <div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {$step.title|escape}
                            </div>
                            {if $step.detail}
                                <div class="{$ui.muted}">{$step.detail|escape}</div>
                            {/if}
                            {if $step.tab && $tabUrls[$step.tab]}
                                <a class="text-xs text-sky-700 dark:text-sky-300"
                                   href="{$tabUrls[$step.tab]|escape}">
                                    {if $lang == 'en'}Go to{else}Zum Reiter{/if}
                                    &bdquo;{$step.tab|escape}&ldquo;
                                </a>
                            {/if}
                        </div>
                    </li>
                {/foreach}
            </ul>
        </div>
    </div>

    {* 3 — the endpoint URL. THE one place in the plugin that renders it (design §6.9). *}
    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">{if $lang == 'en'}MCP server URL{else}MCP-Server-URL{/if}</div>
        <div class="{$ui.cardBody}">
            <p class="{$ui.muted} mb-2">
                {if $lang == 'en'}
                    Paste this address into your AI assistant to connect it to this shop.
                {else}
                    Diese Adresse im KI-Assistenten eintragen, um ihn mit diesem Shop zu verbinden.
                {/if}
            </p>
            <div class="flex flex-wrap items-center gap-2">
                {* `flex-1 min-w-0`: the endpoint is the longest string on the page and the one the
                   merchant has to recognise — a fixed width truncated it mid-host. *}
                <input id="tntMcpEndpoint" type="text" class="{$ui.input} min-w-0 flex-1 break-all font-mono"
                       readonly value="{$endpoint|escape}" onclick="this.select()">
                <button type="button" class="{$ui.btn}" data-tnt-copy="tntMcpEndpoint">
                    {if $lang == 'en'}Copy{else}Kopieren{/if}
                </button>
                <span class="{$ui.small} hidden" data-tnt-copied>
                    {if $lang == 'en'}Copied{else}Kopiert{/if}
                </span>
            </div>
        </div>
    </div>

    {* 3a — Antigravity quick-connect one-liner. Same copy pattern as the endpoint URL above. *}
    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">
            {if $lang == 'en'}Quick Connect — Antigravity{else}Schnellverbindung — Antigravity{/if}
        </div>
        <div class="{$ui.cardBody}">
            <p class="{$ui.muted} mb-2">
                {if $lang == 'en'}
                    Run this command in your terminal to configure Antigravity for this shop.
                {else}
                    Diesen Befehl im Terminal ausführen, um Antigravity für diesen Shop einzurichten.
                {/if}
            </p>
            <div class="flex flex-wrap items-center gap-2">
                <input id="tntMcpAgyCmd" type="text" class="{$ui.input} min-w-0 flex-1 break-all font-mono text-xs"
                       readonly value="curl -sL {$endpoint|escape}/agy-config > ~/.gemini/config/mcp_config.json"
                       onclick="this.select()">
                <button type="button" class="{$ui.btn}" data-tnt-copy="tntMcpAgyCmd">
                    {if $lang == 'en'}Copy{else}Kopieren{/if}
                </button>
                <span class="{$ui.small} hidden" data-tnt-copied>
                    {if $lang == 'en'}Copied{else}Kopiert{/if}
                </span>
            </div>
        </div>
    </div>

    {* 3b — "do I need an AI subscription for this?". The checklist's `ai` row already says the
       shop's own LLM is optional, but a one-line row inside a five-item list is not where a
       merchant looks before deciding whether they can use the plugin at all. State it once, in
       full, next to the URL they are about to paste — the two directions are genuinely different
       products and conflating them is the single most expensive misunderstanding this page can
       cause (a merchant who thinks an API key is required simply stops here). *}
    <div class="{$ui.card}">
        <div class="{$ui.cardHead}">
            {if $lang == 'en'}Do I need an AI service for this?{else}Brauche ich dafür einen KI-Dienst?{/if}
        </div>
        <div class="{$ui.cardBody}">
            <p class="mb-3">
                {if $lang == 'en'}
                    <strong>No.</strong> The plugin works without any AI provider and without an API key.
                {else}
                    <strong>Nein.</strong> Das Plugin funktioniert ohne KI-Anbieter und ohne API-Key.
                {/if}
            </p>
            <dl class="space-y-3">
                <div>
                    <dt class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {if $lang == 'en'}
                            AI from outside (ChatGPT, Claude, …) — no key needed
                        {else}
                            KI von außen (ChatGPT, Claude, …) — kein Key nötig
                        {/if}
                    </dt>
                    <dd class="{$ui.muted}">
                        {if $lang == 'en'}
                            Paste the MCP server URL above into your assistant and confirm the login.
                            The assistant brings its own AI — this shop pays for nothing and stores
                            no provider key.
                        {else}
                            Die MCP-Server-URL oben im Assistenten eintragen und die Anmeldung
                            bestätigen. Der Assistent bringt seine eigene KI mit — dieser Shop zahlt
                            nichts und speichert keinen Anbieter-Key.
                        {/if}
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {if $lang == 'en'}
                            AI inside the shop (&bdquo;KI&ldquo; tab) — key needed, optional
                        {else}
                            KI im Shop selbst (Reiter &bdquo;KI&ldquo;) — Key nötig, optional
                        {/if}
                    </dt>
                    <dd class="{$ui.muted}">
                        {if $lang == 'en'}
                            Only required when the shop itself should ask an AI — e.g. a WorkFlow or
                            a snippet that writes a text on its own. That is the only thing the API
                            key on the &bdquo;KI&ldquo; tab is for, and it is billed by your provider.
                        {else}
                            Nur nötig, wenn der Shop selbst eine KI befragen soll — z.&nbsp;B. ein
                            WorkFlow oder ein Snippet, das eigenständig einen Text schreibt. Dafür und
                            nur dafür ist der API-Key im Reiter &bdquo;KI&ldquo; da; abgerechnet wird
                            er von Ihrem Anbieter.
                        {/if}
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    {* 4 — the connect guides. A native <details name=…> group: one panel open at a time without
       Bootstrap's collapse JS, and the marker is the expand affordance (ledger U13). *}
    {foreach $providers as $p}
        {if $p.supported}
            <details name="tntStartProviders" class="{$ui.card} group">
                <summary class="cursor-pointer list-none px-4 py-3">
                    <div class="flex items-center gap-2">
                        <span class="{$ui.dot} {$ui.dotTone[$p.status]}" title="{$p.statusLabel|escape}"></span>
                        <span class="font-semibold text-gray-900 dark:text-gray-100">{$p.name|escape}</span>
                        <span class="{$ui.small} ml-auto">{$p.statusLabel|escape}</span>
                        <svg class="h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-90"
                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </div>
                    <div class="mt-1 text-xs text-sky-700 group-open:hidden dark:text-sky-300">
                        {if $lang == 'en'}Show instructions{else}Anleitung anzeigen{/if}
                    </div>
                </summary>
                <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
                    {if $p.note}
                        <p class="{$ui.muted} mb-3">{$p.note|escape}</p>
                    {/if}
                    {if $p.steps}
                        <ol class="list-decimal space-y-1 pl-5 text-sm text-gray-700 dark:text-gray-300">
                            {foreach $p.steps as $stepText}
                                <li>{$stepText|escape}</li>
                            {/foreach}
                        </ol>
                    {/if}
                    {* No second copy of the URL here: it is above, once. *}
                </div>
            </details>
        {/if}
    {/foreach}

    {* An assistant nobody can connect is not a broken connection — one line, not a red card each
       (ledger U14). *}
    {assign var=tntUnsupported value=[]}
    {foreach $providers as $p}
        {if !$p.supported}{append var=tntUnsupported value=$p.name}{/if}
    {/foreach}
    {if $tntUnsupported}
        <p class="{$ui.small} mb-4">
            {if $lang == 'en'}Not supported by these assistants (yet):{else}Von diesen Assistenten (noch) nicht unterstützt:{/if}
            {foreach $tntUnsupported as $name}{if !$name@first}, {/if}{$name|escape}{/foreach}
        </p>
    {/if}

    {* 5 — the rights notice, reduced (design §6.6). The full-width orange wall used to sit ABOVE the
       primary action; the sentence that matters is one row, and everything behind it — the standing
       explanation and the live connections it applies to — is one disclosure away. *}
    <details class="{$ui.card} group">
        <summary class="flex cursor-pointer list-none items-start gap-2 px-4 py-3">
            <span class="{$ui.chip.warning}">!</span>
            <span class="text-sm text-gray-700 dark:text-gray-300">
                {if $lang == 'en'}
                    A connected client acts with your full administrator permissions.
                {else}
                    Ein verbundener Client handelt mit Ihren vollen Admin-Rechten.
                {/if}
                <span class="ml-1 text-sky-700 dark:text-sky-300">
                    {if $lang == 'en'}Learn more{else}Mehr erfahren{/if}
                </span>
            </span>
            <svg class="ml-auto h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-90"
                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
            </svg>
        </summary>
        <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
            <strong class="text-sm text-gray-900 dark:text-gray-100">{$warningTitle|escape}</strong>
            <p class="{$ui.muted} mt-1">{$warningText|escape}</p>

            {if $consents}
                <p class="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
                    {if $lang == 'en'}Currently live connections{else}Aktuell aktive Verbindungen{/if}
                </p>
                <div class="{$ui.tableWrap} {$ui.tableScroll} mt-1">
                    <table class="{$ui.table}">
                        <thead>
                            <tr>
                                <th class="{$ui.thSticky}">Client</th>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Acts as administrator{else}Handelt als Administrator{/if}</th>
                                <th class="{$ui.thSticky}">Scopes</th>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Valid until{else}Gültig bis{/if}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $consents as $c}
                                <tr>
                                    <td class="{$ui.td}">{$c.client|escape}</td>
                                    <td class="{$ui.td}">
                                        {if $c.legacy}
                                            <span class="text-red-700 dark:text-red-300">
                                                {if $lang == 'en'}unknown — token predates admin binding, please re-authorise{else}unbekannt – Token stammt aus der Zeit vor der Admin-Bindung, bitte neu freigeben{/if}
                                            </span>
                                        {else}
                                            <strong>{$c.admin|escape}</strong>
                                            {if $c.superAdmin}
                                                <span class="{$ui.chip.danger} ml-1">
                                                    {if $lang == 'en'}all permissions{else}alle Rechte{/if}
                                                </span>
                                            {/if}
                                            {if !$c.adminKnown}
                                                <span class="ml-1 text-red-700 dark:text-red-300">
                                                    {if $lang == 'en'}(no such backend account any more){else}(kein solches Backend-Konto mehr vorhanden){/if}
                                                </span>
                                            {/if}
                                        {/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.expires|escape}</td>
                                </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>
            {/if}
        </div>
    </details>

    {* Q2's rights check for the admin looking at this page. Stays a full alert and stays OUTSIDE the
       disclosure above: unlike the standing warning, this one names something that is actually wrong
       right now, for this account. *}
    {if $rights && !$rights.ok}
        <div class="{$ui.alert.danger}" role="alert">
            <strong>{if $lang == 'en'}Missing backend permissions{else}Fehlende Backend-Rechte{/if}</strong>
            <p class="mt-1">{$rights.text|escape}</p>
        </div>
    {/if}

    {* 6 — the technical facts. Everything Server-Status used to open on, collapsed: it is what the
       merchant needs on the day something is broken, and noise on every other day (design §6.3). *}
    <details class="{$ui.card} group">
        <summary class="flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-semibold
                        text-gray-900 dark:text-gray-100">
            {if $lang == 'en'}Technical details{else}Technische Details{/if}
            {* Chevron right-aligned, matching the provider cards and the rights row above — U33's
               one-disclosure-language rule is about placement as much as about the marker (U37). *}
            <svg class="ml-auto h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-90"
                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
            </svg>
        </summary>
        <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
            <div class="{$ui.tableWrap}">
                <table class="{$ui.table}">
                    <tbody>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Mode{else}Modus{/if}</th>
                        <td class="{$ui.td}">
                            {if $status.modeIsFull}
                                <span class="{$ui.chip.warning}">{if $lang == 'en'}Full (all actions){else}Voll (alle Aktionen){/if}</span>
                            {else}
                                <span class="{$ui.chip.success}">{if $lang == 'en'}Limited (safe){else}Eingeschränkt (sicher){/if}</span>
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Plugin version{else}Plugin-Version{/if}</th>
                        <td class="{$ui.td}">{$status.pluginVersion|escape}</td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}PHP version{else}PHP-Version{/if}</th>
                        <td class="{$ui.td}">{$status.phpVersion|escape}</td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}OAuth keys{else}OAuth-Schlüssel{/if}</th>
                        <td class="{$ui.td}">
                            {if $status.oauthKeysPresent}
                                <span class="{$ui.chip.success}">{if $lang == 'en'}present{else}vorhanden{/if}</span>
                            {else}
                                <span class="{$ui.chip.neutral}">{if $lang == 'en'}not generated yet{else}noch nicht erzeugt{/if}</span>
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}OAuth clients{else}OAuth-Clients{/if}</th>
                        <td class="{$ui.td}">{$status.oauthClients|intval}</td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}OAuth tokens (active / total){else}OAuth-Token (aktiv / gesamt){/if}</th>
                        <td class="{$ui.td}">{$status.oauthTokens.active|intval} / {$status.oauthTokens.total|intval}</td>
                    </tr>
                    {* Empty sections are not rendered (design §6.8): "static tokens 0/0" is a fact
                       about a feature this shop never used. *}
                    {if $status.legacyTokens.total > 0}
                        <tr>
                            <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Static tokens (active / total){else}Statische Token (aktiv / gesamt){/if}</th>
                            <td class="{$ui.td}">{$status.legacyTokens.active|intval} / {$status.legacyTokens.total|intval}</td>
                        </tr>
                    {/if}
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">Scopes</th>
                        <td class="{$ui.td}">
                            <div class="flex flex-wrap gap-1">
                                {foreach $status.scopes as $scope}
                                    <span class="{$ui.chip.info}">{$scope|escape}</span>
                                {foreachelse}
                                    <span class="{$ui.muted}">{if $lang == 'en'}none{else}keine{/if}</span>
                                {/foreach}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Authorization server metadata{else}Authorization-Server-Metadaten{/if}</th>
                        <td class="{$ui.td}"><code class="{$ui.code}">{$status.discovery.authorizationServer|escape}</code></td>
                    </tr>
                    <tr>
                        <th class="{$ui.td} w-64 font-medium text-gray-900 dark:text-gray-100">{if $lang == 'en'}Protected resource metadata{else}Protected-Resource-Metadaten{/if}</th>
                        <td class="{$ui.td}"><code class="{$ui.code}">{$status.discovery.protectedResource|escape}</code></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            {* Plugin extensions (design §1.4) — only when another plugin actually tried to
               contribute tools. A REJECTED provider is the whole reason this exists. *}
            {if $pluginProviders}
                <h5 class="mb-1 mt-4 text-base font-semibold text-gray-900 dark:text-gray-100">
                    {if $lang == 'en'}Plugin extensions{else}Plugin-Erweiterungen{/if}
                </h5>
                <div class="{$ui.tableWrap} {$ui.tableScroll}">
                    <table class="{$ui.table}">
                        <thead>
                            <tr>
                                <th class="{$ui.thSticky}">Plugin</th>
                                <th class="{$ui.thSticky}">Status</th>
                                <th class="{$ui.thSticky}">{if $lang == 'en'}Tools{else}Werkzeuge{/if}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $pluginProviders as $pp}
                                <tr>
                                    <td class="{$ui.td}"><code class="{$ui.code}">{$pp.id|escape}</code></td>
                                    <td class="{$ui.td}">
                                        <div class="flex items-center gap-2">
                                            {if $pp.ok}
                                                <span class="{$ui.dot} {$ui.dotTone.green}"></span>
                                                {if $lang == 'en'}active{else}aktiv{/if}
                                            {else}
                                                <span class="{$ui.dot} {$ui.dotTone.red}"></span>
                                                {if $lang == 'en'}not loaded{else}nicht geladen{/if}
                                            {/if}
                                        </div>
                                        {if !$pp.ok}
                                            <div class="mt-1 text-xs text-red-700 dark:text-red-300">{$pp.reason|escape}</div>
                                        {/if}
                                        {if $pp.noticeCount}
                                            <details class="mt-1">
                                                <summary class="cursor-pointer text-xs text-amber-700 dark:text-amber-300">
                                                    {$pp.noticeCount|intval}
                                                    {if $lang == 'en'}notice(s){else}Hinweis(e){/if}
                                                </summary>
                                                <div class="mt-1 space-y-1">
                                                    {foreach $pp.notices as $notice}
                                                        <div class="text-xs text-amber-700 dark:text-amber-300">{$notice|escape}</div>
                                                    {/foreach}
                                                </div>
                                            </details>
                                        {/if}
                                    </td>
                                    <td class="{$ui.td}">
                                        {if $pp.tools}
                                            <div class="flex flex-wrap gap-1">
                                                {foreach $pp.tools as $toolName}
                                                    <span class="{$ui.chip.mono}">{$toolName|escape}</span>
                                                {/foreach}
                                            </div>
                                        {else}
                                            <span class="{$ui.muted}">&ndash;</span>
                                        {/if}
                                    </td>
                                </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>
            {/if}
        </div>
    </details>

    {* The copy button. Progressive enhancement only: without it — and on a browser without the
       clipboard API, which is every non-HTTPS backend — the field is still readonly, still
       select-on-click, and the URL is still there to copy by hand. *}
    {literal}
    <script>
    (function () {
        var buttons = document.querySelectorAll('[data-tnt-copy]');
        if (!navigator.clipboard) {
            buttons.forEach(function (b) { b.hidden = true; });
            return;
        }
        buttons.forEach(function (button) {
            button.addEventListener('click', function () {
                var field = document.getElementById(button.getAttribute('data-tnt-copy'));
                if (!field) { return; }
                navigator.clipboard.writeText(field.value).then(function () {
                    var flag = button.parentElement.querySelector('[data-tnt-copied]');
                    if (!flag) { return; }
                    flag.classList.remove('hidden');
                    setTimeout(function () { flag.classList.add('hidden'); }, 2000);
                });
            });
        });
    })();
    </script>
    {/literal}
</div>
