{{-- Collapsible inclusion OTP trace (wire beneficiary workflow). Enable: INCLUSION_OTP_WIRE_TRACE=true --}}
<template x-if="inclusionOtpWireTraceEnabled">
    <div
        class="fixed bottom-0 left-0 right-0 z-[95] pointer-events-none"
        x-show="beneficiaryOtpPending || inclusionOtpTraceOpen"
    >
        <div class="max-w-3xl mx-auto px-4 pb-3 pointer-events-auto">
            <div class="rounded-t-xl border border-[#ECECEC] border-b-0 bg-white shadow-[0_-4px_24px_rgba(0,0,0,0.08)] overflow-hidden">
                <button
                    type="button"
                    class="w-full flex items-center justify-between gap-3 px-4 py-2.5 text-left bg-[#F8FAFC] hover:bg-[#F1F5F9] border-b border-[#ECECEC]"
                    @click="toggleInclusionOtpTracePanel()"
                    :aria-expanded="inclusionOtpTraceOpen"
                >
                    <span class="text-xs font-semibold text-[#012169]">Inclusion OTP trace</span>
                    <span class="text-[10px] text-[#6F6F6F] font-mono" x-text="inclusionOtpTraceSummary || 'Open to load server checks'"></span>
                    <span class="text-[#012169] text-sm shrink-0" x-text="inclusionOtpTraceOpen ? '▼' : '▲'"></span>
                </button>
                <div
                    x-show="inclusionOtpTraceOpen"
                    x-cloak
                    class="max-h-[min(50vh,320px)] overflow-y-auto px-4 py-3 text-[11px] leading-relaxed"
                >
                    <p x-show="inclusionOtpTraceLoading" class="text-[#6F6F6F]">Loading trace…</p>
                    <p x-show="!inclusionOtpTraceLoading && inclusionOtpTraceError" class="text-rose-700 font-medium" x-text="inclusionOtpTraceError"></p>

                    <template x-if="!inclusionOtpTraceLoading && inclusionOtpTraceReport">
                        <div class="space-y-3">
                            <p class="text-[#111] font-medium" x-text="inclusionOtpTraceReport.summary"></p>
                            <p class="text-[#6F6F6F]">
                                Account <span class="font-mono" x-text="'#' + inclusionOtpTraceReport.account_id"></span>
                                · <span x-text="inclusionOtpTraceReport.account_name"></span>
                                · <span x-text="inclusionOtpTraceReport.generated_at"></span>
                            </p>
                            <p class="text-[#6F6F6F]" x-show="inclusionOtpTraceReport.would_verify !== undefined">
                                Server would accept verify:
                                <strong :class="inclusionOtpTraceReport.would_verify ? 'text-emerald-700' : 'text-rose-700'" x-text="inclusionOtpTraceReport.would_verify ? 'yes' : 'no'"></strong>
                            </p>

                            <div x-show="inclusionOtpTraceReport.endpoints" class="rounded-lg border border-[#ECECEC] p-2 text-[10px] space-y-1">
                                <p class="font-semibold text-[#012169]">Wire endpoints (use these on live)</p>
                                <p class="font-mono break-all text-[#4A4A4A]"><span class="text-[#6F6F6F]">POST verify:</span> <span x-text="inclusionOtpTraceReport.endpoints?.authorize"></span></p>
                                <p class="font-mono break-all text-[#4A4A4A]"><span class="text-[#6F6F6F]">POST refresh:</span> <span x-text="inclusionOtpTraceReport.endpoints?.refresh"></span></p>
                                <p class="font-mono break-all text-[#4A4A4A]"><span class="text-[#6F6F6F]">GET trace:</span> <span x-text="inclusionOtpTraceReport.endpoints?.trace"></span></p>
                            </div>

                            <div x-show="inclusionOtpTraceReport.deploy" class="rounded-lg bg-[#0f172a] text-[#e2e8f0] p-2 font-mono text-[10px]">
                                <span x-text="'OTP service: ' + (inclusionOtpTraceReport.deploy?.otp_service || '—')"></span>
                                ·
                                <span x-text="'Registration: ' + (inclusionOtpTraceReport.deploy?.registration_service || '—')"></span>
                                ·
                                <span x-text="'Mismatch: ' + (inclusionOtpTraceReport.deploy?.mismatch || '—')"></span>
                            </div>

                            <table class="w-full border-collapse text-[10px]">
                                <thead>
                                    <tr class="text-left text-[#6F6F6F] border-b border-[#ECECEC]">
                                        <th class="py-1 pr-2 font-semibold">Step</th>
                                        <th class="py-1 pr-2 font-semibold">Status</th>
                                        <th class="py-1 font-semibold">Detail</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="(row, idx) in (inclusionOtpTraceReport.steps || [])" :key="idx">
                                        <tr class="border-b border-[#F1F5F9] align-top">
                                            <td class="py-1 pr-2 font-mono text-[#4A4A4A]" x-text="row.step"></td>
                                            <td class="py-1 pr-2">
                                                <span
                                                    class="inline-block px-1.5 py-0.5 rounded font-semibold uppercase tracking-wide"
                                                    :class="{
                                                        'bg-emerald-100 text-emerald-800': row.status === 'pass',
                                                        'bg-rose-100 text-rose-800': row.status === 'fail',
                                                        'bg-amber-100 text-amber-900': row.status === 'warn',
                                                        'bg-slate-100 text-slate-600': row.status === 'info' || row.status === 'skip',
                                                    }"
                                                    x-text="row.status"
                                                ></span>
                                            </td>
                                            <td class="py-1 text-[#111]">
                                                <span x-text="row.detail"></span>
                                                <span x-show="row.hint" class="block text-[#b45309] mt-0.5" x-text="row.hint"></span>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>

                            <ul x-show="(inclusionOtpTraceReport.hints || []).length" class="list-disc pl-4 text-[#b45309] space-y-0.5">
                                <template x-for="(hint, hi) in inclusionOtpTraceReport.hints" :key="hi">
                                    <li x-text="hint"></li>
                                </template>
                            </ul>

                            <div x-show="(inclusionOtpTraceClientLog || []).length" class="border-t border-[#ECECEC] pt-2">
                                <p class="font-semibold text-[#012169] mb-1">Wire workflow (client)</p>
                                <template x-for="(log, li) in inclusionOtpTraceClientLog" :key="li">
                                    <p class="font-mono text-[10px] text-[#4A4A4A] break-all">
                                        <span x-text="log.at"></span>
                                        <span class="text-[#9A9A9A]" x-text="' · ' + log.action"></span>
                                        <span x-text="' · HTTP ' + log.status"></span>
                                        <span x-show="log.note" x-text="' · ' + log.note"></span>
                                    </p>
                                </template>
                            </div>

                            <button
                                type="button"
                                class="text-[10px] font-semibold text-[#012169] hover:underline"
                                @click="fetchInclusionOtpTrace(true)"
                            >Refresh trace</button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>