{{--
| Installation details drawer.
|
| There is no `domains.show` route (the domains resource is a single index
| action), so the detail view is a drawer built from data already on the page
| rather than a link that would 404.
--}}

<div x-show="detailsId !== null" x-cloak @click="detailsId = null"
     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
     x-transition:leave="transition ease-in duration-150" x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm"></div>

<aside x-show="detailsId !== null" x-cloak
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
       class="fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col bg-white shadow-2xl dark:bg-shell-card"
       role="dialog" aria-modal="true" aria-label="Installation details">

    <template x-if="detailsDomain">
        <div class="flex min-h-0 flex-1 flex-col">
            <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5
                           dark:border-white/[0.06]">
                <div class="flex min-w-0 items-center gap-3">
                    <span class="grid size-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600
                                 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/10 dark:text-brand-400">
                        <x-icon name="globe" class="size-4" />
                    </span>
                    <span class="min-w-0">
                        <span class="block truncate text-sm font-semibold text-slate-900 dark:text-white"
                              x-text="detailsDomain.domain"></span>
                        <span class="block truncate text-[11px] text-slate-500 dark:text-slate-400"
                              x-text="detailsDomain.customer || 'No customer'"></span>
                    </span>
                </div>

                <button type="button" @click="detailsId = null" aria-label="Close"
                        class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                               dark:hover:bg-white/10 dark:hover:text-white">
                    <x-icon name="x" class="size-5" />
                </button>
            </header>

            <div class="scroll-slim min-h-0 flex-1 overflow-y-auto p-5">

                {{-- Check-in state, said in full: what the server expected and
                     when it last actually heard from this install. --}}
                <div class="rounded-xl border border-slate-200/80 p-4 dark:border-white/[0.06]">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                Check-in status
                            </p>
                            <p class="mt-1.5 text-lg font-bold text-slate-900 dark:text-white" x-text="detailsDomain.stateLabel"></p>
                            <p class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400" x-text="detailsDomain.stateWhy"></p>
                        </div>

                        <span class="grid size-11 shrink-0 place-items-center rounded-xl"
                              :class="{
                                  'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400': detailsDomain.state === 'verified',
                                  'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400': detailsDomain.state === 'overdue' || detailsDomain.state === 'pending',
                                  'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400': detailsDomain.state === 'blocked',
                                  'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400': ['offline', 'inactive'].includes(detailsDomain.state),
                              }" aria-hidden="true">
                            <x-icon name="signal" class="size-5" />
                        </span>
                    </div>

                    <dl class="mt-4 grid grid-cols-2 gap-3">
                        <div>
                            <dt class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Last seen</dt>
                            <dd class="mt-0.5 text-xs font-semibold text-slate-800 dark:text-slate-100"
                                x-text="detailsDomain.verifiedLabel || 'Never'"></dd>
                        </div>
                        <div>
                            <dt class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Next due</dt>
                            <dd class="mt-0.5 text-xs font-semibold text-slate-800 dark:text-slate-100"
                                x-text="detailsDomain.nextLabel || 'Not scheduled'"></dd>
                        </div>
                    </dl>
                </div>

                {{-- The record itself --}}
                <h3 class="profile-heading mt-5">Installation</h3>
                <dl class="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200/80
                           dark:divide-white/[0.06] dark:border-white/[0.06]">
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Domain</dt>
                        <dd class="flex min-w-0 items-center gap-1.5">
                            <a :href="`https://${detailsDomain.domain}`" target="_blank" rel="noopener noreferrer"
                               class="truncate text-xs font-semibold text-slate-800 transition hover:text-brand-600
                                      dark:text-slate-100 dark:hover:text-brand-400"
                               x-text="detailsDomain.domain"></a>
                            <button type="button" @click="copy(detailsDomain.domain, 'Domain copied')"
                                    class="rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                                           dark:hover:bg-white/10 dark:hover:text-white" aria-label="Copy domain">
                                <x-icon name="copy" class="size-3.5" />
                            </button>
                        </dd>
                    </div>

                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Current IP</dt>
                        <dd class="flex items-center gap-1.5">
                            <code class="font-mono text-xs text-slate-800 dark:text-slate-100"
                                  x-text="detailsDomain.ip || '—'"></code>
                            <button type="button" x-show="detailsDomain.ip"
                                    @click="copy(detailsDomain.ip, 'IP copied')"
                                    class="rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                                           dark:hover:bg-white/10 dark:hover:text-white" aria-label="Copy IP address">
                                <x-icon name="copy" class="size-3.5" />
                            </button>
                        </dd>
                    </div>

                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">CMS version</dt>
                        <dd class="flex items-center gap-2">
                            <span class="text-xs font-semibold text-slate-800 dark:text-slate-100"
                                  x-text="detailsDomain.cms ? `v${detailsDomain.cms}` : 'Not reported'"></span>
                            <span x-show="detailsDomain.cmsLabel"
                                  class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide ring-1 ring-inset"
                                  :class="{
                                      'bg-emerald-50 text-emerald-700 ring-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/30': detailsDomain.cmsTone === 'ok',
                                      'bg-amber-50 text-amber-700 ring-amber-500/25 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30': detailsDomain.cmsTone === 'warn',
                                      'bg-slate-100 text-slate-600 ring-slate-500/20 dark:bg-white/5 dark:text-slate-400 dark:ring-white/10': detailsDomain.cmsTone === 'muted',
                                  }"
                                  x-text="detailsDomain.cmsLabel"></span>
                        </dd>
                    </div>

                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Installed</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100"
                            x-text="detailsDomain.installedLabel || 'Not recorded'"></dd>
                    </div>

                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Record status</dt>
                        <dd class="text-xs font-semibold capitalize text-slate-800 dark:text-slate-100"
                            x-text="detailsDomain.status"></dd>
                    </div>
                </dl>

                {{-- Licence --}}
                <h3 class="profile-heading mt-5">License</h3>
                <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                    <template x-if="detailsDomain.licenseKey">
                        <div>
                            <div class="flex items-center justify-between gap-2">
                                <a :href="detailsDomain.licenseUrl"
                                   class="truncate font-mono text-xs font-semibold text-slate-800 transition
                                          hover:text-brand-600 dark:text-slate-100 dark:hover:text-brand-400"
                                   x-text="detailsDomain.licenseKey"></a>
                                <button type="button" @click="copy(detailsDomain.licenseKey, 'License key copied')"
                                        class="shrink-0 rounded-md p-1 text-slate-400 transition hover:bg-slate-100
                                               hover:text-slate-700 dark:hover:bg-white/10 dark:hover:text-white"
                                        aria-label="Copy license key">
                                    <x-icon name="copy" class="size-3.5" />
                                </button>
                            </div>
                            <dl class="mt-2.5 grid grid-cols-2 gap-2.5">
                                <div>
                                    <dt class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Status</dt>
                                    <dd class="mt-0.5 text-xs font-semibold capitalize text-slate-800 dark:text-slate-100"
                                        x-text="detailsDomain.licenseState"></dd>
                                </div>
                                <div>
                                    <dt class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Expires</dt>
                                    <dd class="mt-0.5 text-xs font-semibold text-slate-800 dark:text-slate-100"
                                        x-text="detailsDomain.expiresLabel || 'Never'"></dd>
                                </div>
                                <div class="col-span-2">
                                    <dt class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Package</dt>
                                    <dd class="mt-0.5 text-xs font-semibold text-slate-800 dark:text-slate-100"
                                        x-text="detailsDomain.package || '—'"></dd>
                                </div>
                            </dl>
                        </div>
                    </template>
                    <template x-if="! detailsDomain.licenseKey">
                        <p class="text-xs text-slate-500 dark:text-slate-400">
                            No license is bound to this installation.
                        </p>
                    </template>
                </div>

                {{-- Activity. Real audit rows for this installation, newest
                     first — not a decorative timeline. --}}
                <h3 class="profile-heading mt-5">Recent activity</h3>
                <template x-if="detailsLogs.length === 0">
                    <p class="profile-empty">No audit entries recorded for this installation yet.</p>
                </template>

                <ol x-show="detailsLogs.length > 0" class="relative space-y-3 border-l border-slate-200 pl-4 dark:border-white/10">
                    <template x-for="entry in detailsLogs" :key="entry.id">
                        <li class="relative">
                            <span class="absolute -left-[21px] top-1.5 size-2 rounded-full ring-4 ring-white dark:ring-shell-card"
                                  :class="{
                                      'bg-emerald-500': ['verification', 'activation', 'sync_success', 'renewal'].includes(entry.event),
                                      'bg-red-500': ['failed_verification', 'failed_activation', 'revocation', 'sync_failed'].includes(entry.event),
                                      'bg-amber-500': ['suspension', 'sync_retry', 'domain_change'].includes(entry.event),
                                      'bg-slate-400': ['heartbeat', 'deactivation', 'sync_sent'].includes(entry.event),
                                  }" aria-hidden="true"></span>

                            <p class="flex flex-wrap items-baseline gap-x-2">
                                <span class="text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="entry.label"></span>
                                <span class="text-[11px] text-slate-400 dark:text-slate-500" x-text="entry.ago"></span>
                            </p>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400">
                                <span x-text="entry.at"></span>
                                <template x-if="entry.ip"><span x-text="` · ${entry.ip}`"></span></template>
                            </p>
                            <p x-show="entry.message" class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400" x-text="entry.message"></p>
                        </li>
                    </template>
                </ol>

                <a :href="detailsDomain.logsUrl"
                   class="mt-3 inline-flex items-center gap-1.5 text-xs font-semibold text-brand-600 transition
                          hover:underline dark:text-brand-400">
                    Open the full audit log
                    <x-icon name="arrow-right" class="size-3.5" />
                </a>
            </div>

            <footer class="flex shrink-0 items-center gap-2 border-t border-slate-200 p-4 dark:border-white/[0.06]">
                <a :href="`https://${detailsDomain.domain}`" target="_blank" rel="noopener noreferrer"
                   class="btn-primary flex-1">
                    <x-icon name="external-link" class="size-4" /> Open website
                </a>
                <a :href="detailsDomain.licenseUrl" x-show="detailsDomain.licenseKey"
                   class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-600
                          transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
                   aria-label="View license">
                    <x-icon name="key" class="size-4" />
                </a>
                <button type="button" @click="copy(detailsDomain.domain, 'Domain copied')"
                        class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-600
                               transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
                        aria-label="Copy domain">
                    <x-icon name="copy" class="size-4" />
                </button>
            </footer>
        </div>
    </template>
</aside>