{{-- resources/views/panel/licenses/show.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        @php
            $u = auth()->user();

            $status = $license->status ?? 'expired';
            $statusLabel = $status;

            $statusClasses = match ($status) {
                'active' => 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-200 ring-green-200 dark:ring-green-700',
                'banned' => 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-200 ring-red-200 dark:ring-red-700',
                default  => 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring-gray-200 dark:ring-gray-700',
            };

            $expiresText = $license->expires_at?->format('Y-m-d H:i') ?? 'lifetime';
        @endphp

        <div class="flex items-start justify-between gap-4">
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-3">
                    <h2 class="font-semibold text-xl text-gray-900 dark:text-gray-100 leading-tight truncate">
                        License details
                    </h2>

                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset {{ $statusClasses }}">
                        {{ $statusLabel }}
                    </span>
                </div>

                <div class="mt-1 text-sm text-gray-500 dark:text-gray-300 flex flex-wrap items-center gap-x-2 gap-y-1">
                    <span class="font-mono bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 px-2 py-0.5 rounded">
                        {{ $license->license_key }}
                    </span>

                    <span class="text-gray-300 dark:text-gray-600">•</span>

                    <span>
                        App: <span class="font-medium text-gray-700 dark:text-gray-200">{{ $app->name }}</span>
                    </span>

                    <span class="text-gray-300 dark:text-gray-600">•</span>

                    <span>
                        Expires: <span class="font-medium text-gray-700 dark:text-gray-200">{{ $expiresText }}</span>
                    </span>
                </div>
            </div>

            <div class="flex items-center gap-2 shrink-0">
                <a href="{{ route('applications.licenses', $app) }}"
                   class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition">
                    Back
                </a>
                {{-- Reset HWID (con modal) --}}
                @if (!isset($u->is_admin) || $u->is_admin)
                    <div x-data="{ openReset: false }" class="inline-block">
                        <button
                            type="button"
                            @click="openReset = true"
                            class="inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium
                                bg-red-600 text-white hover:bg-red-700
                                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                                dark:focus:ring-offset-gray-900 transition"
                        >
                            Reset HWID
                        </button>

                        {{-- Backdrop --}}
                        <div
                            x-show="openReset"
                            x-transition.opacity
                            class="fixed inset-0 z-50 bg-black/50"
                            @click="openReset = false"
                            @keydown.escape.window="openReset = false"
                            style="display:none;"
                        ></div>

                        {{-- Modal --}}
                        <div
                            x-show="openReset"
                            x-transition
                            class="fixed inset-0 z-50 flex items-center justify-center p-4"
                            role="dialog"
                            aria-modal="true"
                            style="display:none;"
                        >
                            <div
                                class="w-full max-w-lg rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl"
                                @click.away="openReset = false"
                            >
                                <div class="p-6">
                                    <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                        Confirm reset HWID
                                    </div>

                                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-300 space-y-2">
                                        <p>
                                            This will remove the device binding (HWID) for this license.
                                        </p>
                                        <p class="text-red-600 dark:text-red-300">
                                            It will also end active sessions, forcing a new activation on next login.
                                        </p>
                                    </div>

                                    <div class="mt-4 rounded-lg border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/40 p-3">
                                        <div class="text-xs text-gray-500 dark:text-gray-400">License</div>
                                        <div class="font-mono text-sm text-gray-900 dark:text-gray-100 break-all">
                                            {{ $license->license_key }}
                                        </div>
                                    </div>

                                    <div class="mt-6 flex items-center justify-end gap-2">
                                        <button
                                            type="button"
                                            @click="openReset = false"
                                            class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm
                                                text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
                                        >
                                            Cancel
                                        </button>

                                        <form method="POST" action="{{ route('applications.licenses.resetHwid', [$app, $license]) }}">
                                            @csrf
                                            <button
                                                type="submit"
                                                class="px-3 py-2 rounded-md text-sm font-medium
                                                    bg-red-600 text-white hover:bg-red-700
                                                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                                                    dark:focus:ring-offset-gray-900 transition"
                                            >
                                                Yes, reset HWID
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            {{-- Alerts --}}
            @if (session('status'))
                <div class="rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-4 text-green-800 dark:text-green-200">
                    {{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 text-red-800 dark:text-red-200">
                    {{ $errors->first() }}
                </div>
            @endif

            {{-- Summary --}}
            <div class="bg-white dark:bg-gray-900 shadow-sm sm:rounded-lg border border-gray-100 dark:border-gray-800">
                <div class="p-6">
                    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-300">Overview</div>
                            <div class="mt-1 text-base font-semibold text-gray-900 dark:text-gray-100">
                                License activity & device binding
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="text-right">
                                <div class="text-sm text-gray-500 dark:text-gray-300">Expires</div>
                                <div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $expiresText }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <dl class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">First used</dt>
                            <dd class="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                                {{ $license->first_used_at?->format('Y-m-d H:i') ?? '-' }}
                            </dd>
                        </div>

                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">Duration</dt>
                            <dd class="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                                {{ $license->duration_type === 'lifetime'
                                    ? 'lifetime'
                                    : (($license->duration_value ?? '-') . ' ' . ($license->duration_type ?? 'days')) }}
                            </dd>
                        </div>

                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">Last seen</dt>
                            <dd class="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                                {{ $license->last_seen_at?->format('Y-m-d H:i') ?? '-' }}
                            </dd>
                        </div>

                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">HWID (masked)</dt>
                            <dd class="mt-1 font-mono text-gray-900 dark:text-gray-100 break-all">
                                {{ $hwidMasked ?? '-' }}
                            </dd>
                        </div>

                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">Last IP</dt>
                            <dd class="mt-1 text-gray-900 dark:text-gray-100">
                                {{ $license->last_ip ?? '-' }}
                            </dd>
                        </div>

                        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-300">License ID</dt>
                            <dd class="mt-1 font-mono text-gray-900 dark:text-gray-100">
                                {{ $license->id }}
                            </dd>
                        </div>
                    </dl>
                </div>

                <div class="border-t border-gray-100 dark:border-gray-800 px-6 py-4 text-xs text-gray-500 dark:text-gray-400">
                    Tip: Reset HWID will also end active sessions, forcing a new device registration on next activate.
                </div>
            </div>

            {{-- Sessions --}}
            <div class="bg-white dark:bg-gray-900 shadow-sm sm:rounded-lg border border-gray-100 dark:border-gray-800">
                <div class="p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">Sessions</div>
                            <div class="text-sm text-gray-500 dark:text-gray-300">Last 20 sessions</div>
                        </div>
                    </div>

                    <div class="mt-4 overflow-x-auto rounded-lg border border-gray-100 dark:border-gray-800">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-50 dark:bg-gray-800/60">
                                <tr class="text-left text-gray-600 dark:text-gray-300">
                                    <th class="py-3 px-4 font-medium">Token</th>
                                    <th class="py-3 px-4 font-medium">Started</th>
                                    <th class="py-3 px-4 font-medium">Last ping</th>
                                    <th class="py-3 px-4 font-medium">Ended</th>
                                    <th class="py-3 px-4 font-medium">IP</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-900 dark:text-gray-100">
                                @forelse($sessions as $s)
                                    <tr class="border-t border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
                                        <td class="py-3 px-4 font-mono">
                                            {{ substr($s->token, 0, 10) }}…
                                        </td>
                                        <td class="py-3 px-4">{{ $s->started_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                        <td class="py-3 px-4">{{ $s->last_ping_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                        <td class="py-3 px-4">{{ $s->ended_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                        <td class="py-3 px-4">{{ $s->ip ?? '-' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="py-10 text-center text-gray-500 dark:text-gray-400">
                                            No sessions yet.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</x-app-layout>