{{-- resources/views/panel/licenses/index.blade.php --}}
<x-app-layout>
    <div
        x-data="licensesPage()"
        x-init="
            $watch('open', v => document.body.classList.toggle('overflow-hidden', v));
            $watch('confirmOpen', v => document.body.classList.toggle('overflow-hidden', v));
        "
        x-on:licenses-open.window="openModal()"
    >
        <x-slot name="header">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
                        Licenses — {{ $app->name }}
                    </h2>
                    <div class="text-sm text-gray-500 dark:text-gray-300">
                        App Key: <span class="font-mono">{{ $app->key }}</span>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <a href="{{ route('applications.manage', $app) }}"
                       class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm dark:text-gray-200">
                        Back
                    </a>

                    {{-- ✅ FIX DEFINITIVO: usa onclick (JS puro) para que NO dependa de Alpine en el header --}}
                    <button type="button"
                            class="px-3 py-2 rounded-md bg-indigo-600 text-white text-sm hover:bg-indigo-500"
                            onclick="window.dispatchEvent(new CustomEvent('licenses-open'))">
                        Create
                    </button>
                </div>
            </div>
        </x-slot>

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

                {{-- Flash status (map to friendly message) --}}
                @if (session('status'))
                    @php
                        $status = (string) session('status');
                        $statusMsg = match (true) {
                            $status === 'license-created' => 'License created.',
                            str_starts_with($status, 'bulk-created:') => 'Bulk licenses created.',
                            $status === 'license-toggled' => 'License updated.',
                            $status === 'license-deleted' => 'License deleted.',
                            $status === 'hwid-reset' => 'HWID reset successfully.',
                            default => $status,
                        };
                    @endphp

                    <div class="rounded-xl border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-4 text-green-900 dark:text-green-100">
                        {{ $statusMsg }}
                    </div>
                @endif

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

                <div class="bg-white dark:bg-gray-900 shadow-sm rounded-2xl border border-gray-100 dark:border-gray-800 p-5">

                    {{-- Toolbar --}}
                    <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
                        {{-- Search --}}
                        <form method="GET" class="flex items-end gap-2">
                            <div>
                                <label class="block text-xs text-gray-500 dark:text-gray-400">Search license key</label>
                                <input
                                    name="q"
                                    value="{{ $q ?? '' }}"
                                    placeholder="Search by key..."
                                    class="mt-1 w-72 rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100"
                                />
                            </div>

                            <button class="px-3 py-2 rounded-md bg-gray-900 text-white text-sm">
                                Search
                            </button>

                            @if(!empty($q))
                                <a href="{{ route('applications.licenses', $app) }}"
                                   class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm dark:text-gray-200">
                                    Clear
                                </a>
                            @endif
                        </form>

                        {{-- Tabs --}}
                        @php
                            $activeTotal = method_exists($licensesActive, 'total') ? (int) $licensesActive->total() : 0;
                            $bannedTotal = method_exists($licensesBanned, 'total') ? (int) $licensesBanned->total() : 0;
                        @endphp

                        <div class="flex items-center gap-2">
                            <button type="button"
                                    class="px-3 py-2 rounded-md text-sm font-semibold border transition"
                                    :class="view==='active'
                                        ? 'bg-gray-900 text-white border-gray-900 dark:bg-gray-100 dark:text-gray-900 dark:border-gray-100'
                                        : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'"
                                    @click="view='active'">
                                Active
                                <span class="ml-2 inline-flex items-center justify-center min-w-[20px] h-[20px] px-1 rounded-full text-xs
                                             bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                                      :class="view==='active' ? 'bg-white/20 text-white dark:bg-gray-900/10 dark:text-gray-900' : ''">
                                    {{ $activeTotal }}
                                </span>
                            </button>

                            <button type="button"
                                    class="px-3 py-2 rounded-md text-sm font-semibold border transition"
                                    :class="view==='banned'
                                        ? 'bg-red-600 text-white border-red-600'
                                        : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'"
                                    @click="view='banned'">
                                Banned
                                <span class="ml-2 inline-flex items-center justify-center min-w-[20px] h-[20px] px-1 rounded-full text-xs
                                             bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                                      :class="view==='banned' ? 'bg-white/20 text-white' : ''">
                                    {{ $bannedTotal }}
                                </span>
                            </button>
                        </div>
                    </div>

                    {{-- ACTIVE TABLE --}}
                    <div class="mt-5 overflow-x-auto" x-show="view==='active'" x-cloak>
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-800">
                                    <th class="py-2">Key</th>
                                    <th class="py-2">Expires</th>
                                    <th class="py-2">First used</th>
                                    <th class="py-2">Last seen</th>
                                    <th class="py-2 text-right">Actions</th>
                                </tr>
                            </thead>

                            <tbody class="text-gray-900 dark:text-gray-100">
                                @forelse($licensesActive as $lic)
                                    <tr class="border-b border-gray-100 dark:border-gray-800">
                                        <td class="py-3 font-mono">
                                            <a class="text-indigo-500 hover:underline"
                                               href="{{ route('applications.licenses.show', [$app, $lic]) }}">
                                                {{ $lic->license_key }}
                                            </a>
                                        </td>
                                        <td class="py-3">{{ $lic->expires_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                        <td class="py-3">{{ $lic->first_used_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                        <td class="py-3">{{ $lic->last_seen_at?->format('Y-m-d H:i') ?? '—' }}</td>

                                        <td class="py-3">
                                            <div class="flex justify-end gap-2">
                                                <a href="{{ route('applications.licenses.show', [$app, $lic]) }}"
                                                   class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-xs dark:text-gray-200">
                                                    Details
                                                </a>

                                                <button type="button"
                                                        class="px-3 py-2 rounded-md bg-gray-800 text-white text-xs hover:bg-gray-700"
                                                        @click="openConfirm({
                                                            title: 'Ban this license?',
                                                            message: 'This will block activations for this license. You can unban it later.',
                                                            action: @js(route('applications.licenses.toggle', [$app, $lic])),
                                                            method: 'POST',
                                                            confirmText: 'Ban',
                                                            tone: 'danger'
                                                        })">
                                                    Ban
                                                </button>

                                                <button type="button"
                                                        class="px-3 py-2 rounded-md bg-red-600 text-white text-xs hover:bg-red-500"
                                                        @click="openConfirm({
                                                            title: 'Delete this license?',
                                                            message: 'This action is permanent. The license will be removed and cannot be restored.',
                                                            action: @js(route('applications.licenses.destroy', [$app, $lic])),
                                                            method: 'DELETE',
                                                            confirmText: 'Delete',
                                                            tone: 'danger'
                                                        })">
                                                    Delete
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="py-10 text-center text-gray-500">
                                            No active licenses found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <div class="mt-4">
                            {{ $licensesActive->links() }}
                        </div>
                    </div>

                    {{-- BANNED TABLE --}}
                    <div class="mt-5 overflow-x-auto" x-show="view==='banned'" x-cloak>
                        <div class="mb-3 rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4">
                            <div class="text-sm font-semibold text-red-900 dark:text-red-100">Banned licenses</div>
                            <div class="mt-1 text-sm text-red-900/80 dark:text-red-100/80">
                                You can unban a license to allow activations again.
                            </div>
                        </div>

                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-800">
                                    <th class="py-2">Key</th>
                                    <th class="py-2">Expires</th>
                                    <th class="py-2">First used</th>
                                    <th class="py-2">Last seen</th>
                                    <th class="py-2 text-right">Actions</th>
                                </tr>
                            </thead>

                            <tbody class="text-gray-900 dark:text-gray-100">
                                @forelse($licensesBanned as $lic)
                                    <tr class="border-b border-gray-100 dark:border-gray-800">
                                        <td class="py-3 font-mono">
                                            <a class="text-indigo-500 hover:underline"
                                               href="{{ route('applications.licenses.show', [$app, $lic]) }}">
                                                {{ $lic->license_key }}
                                            </a>
                                            <div class="mt-1">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                                                             bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-200 ring-1 ring-inset ring-red-200 dark:ring-red-700/50">
                                                    banned
                                                </span>
                                            </div>
                                        </td>

                                        <td class="py-3">{{ $lic->expires_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                        <td class="py-3">{{ $lic->first_used_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                        <td class="py-3">{{ $lic->last_seen_at?->format('Y-m-d H:i') ?? '—' }}</td>

                                        <td class="py-3">
                                            <div class="flex justify-end gap-2">
                                                <a href="{{ route('applications.licenses.show', [$app, $lic]) }}"
                                                   class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-xs dark:text-gray-200">
                                                    Details
                                                </a>

                                                <button type="button"
                                                        class="px-3 py-2 rounded-md bg-green-600 text-white text-xs hover:bg-green-500"
                                                        @click="openConfirm({
                                                            title: 'Unban this license?',
                                                            message: 'This will allow activations again for this license.',
                                                            action: @js(route('applications.licenses.toggle', [$app, $lic])),
                                                            method: 'POST',
                                                            confirmText: 'Unban',
                                                            tone: 'success'
                                                        })">
                                                    Unban
                                                </button>

                                                <button type="button"
                                                        class="px-3 py-2 rounded-md bg-red-600 text-white text-xs hover:bg-red-500"
                                                        @click="openConfirm({
                                                            title: 'Delete this license?',
                                                            message: 'This action is permanent. The license will be removed and cannot be restored.',
                                                            action: @js(route('applications.licenses.destroy', [$app, $lic])),
                                                            method: 'DELETE',
                                                            confirmText: 'Delete',
                                                            tone: 'danger'
                                                        })">
                                                    Delete
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="py-10 text-center text-gray-500">
                                            No banned licenses found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <div class="mt-4">
                            {{ $licensesBanned->links() }}
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- ✅ Create Modal --}}
        <div
            x-show="open"
            x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center"
            aria-modal="true"
            role="dialog"
            @keydown.escape.window="closeModal()"
        >
            <div class="absolute inset-0 bg-black/60" @click="closeModal()" x-transition.opacity></div>

            <div class="relative w-full max-w-xl mx-4 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl"
                 x-transition
                 @click.stop>
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Create licenses</h3>
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                Generate a single license or a batch.
                            </p>
                        </div>
                        <button type="button" class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" @click="closeModal()">
                            ✕
                        </button>
                    </div>

                    <div class="mt-4 flex gap-2 border-b border-gray-200 dark:border-gray-800">
                        <button type="button"
                                class="px-3 py-2 text-sm rounded-t-md"
                                :class="tab==='single' ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
                                @click="tab='single'">
                            Single
                        </button>
                        <button type="button"
                                class="px-3 py-2 text-sm rounded-t-md"
                                :class="tab==='bulk' ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
                                @click="tab='bulk'">
                            Bulk
                        </button>
                    </div>

                    <form x-show="tab==='single'" method="POST" action="{{ route('applications.licenses.store', $app) }}" class="mt-5 space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300">Duration type</label>
                                <select name="duration_type"
                                        class="mt-1 w-full rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100">
                                    <option value="days">days</option>
                                    <option value="years">years</option>
                                    <option value="lifetime">lifetime</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300">Value</label>
                                <input name="duration_value" type="number" min="1" value="30"
                                       class="mt-1 w-full rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100" />
                                <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    For lifetime you can ignore value.
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end gap-2 pt-2">
                            <button type="button"
                                    class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm dark:text-gray-200"
                                    @click="closeModal()">
                                Cancel
                            </button>
                            <button class="px-3 py-2 rounded-md bg-indigo-600 text-white text-sm hover:bg-indigo-500">
                                Create license
                            </button>
                        </div>
                    </form>

                    <form x-show="tab==='bulk'" method="POST" action="{{ route('applications.licenses.bulk', $app) }}" class="mt-5 space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300">Qty</label>
                                <input name="qty" type="number" min="1" max="500" value="10"
                                       class="mt-1 w-full rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100" />
                            </div>

                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300">Duration type</label>
                                <select name="duration_type"
                                        class="mt-1 w-full rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100">
                                    <option value="days">days</option>
                                    <option value="years">years</option>
                                    <option value="lifetime">lifetime</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm text-gray-600 dark:text-gray-300">Value</label>
                                <input name="duration_value" type="number" min="1" value="30"
                                       class="mt-1 w-full rounded-md border-gray-300 text-sm dark:bg-gray-950 dark:border-gray-700 dark:text-gray-100" />
                            </div>
                        </div>

                        <div class="rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 p-3 text-sm text-yellow-900 dark:text-yellow-100">
                            Generates unique keys automatically.
                        </div>

                        <div class="flex justify-end gap-2 pt-2">
                            <button type="button"
                                    class="px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 text-sm dark:text-gray-200"
                                    @click="closeModal()">
                                Cancel
                            </button>
                            <button class="px-3 py-2 rounded-md bg-gray-900 text-white text-sm hover:bg-gray-800">
                                Generate
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        {{-- ✅ Confirm Modal --}}
        <div
            x-show="confirmOpen"
            x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center"
            aria-modal="true"
            role="dialog"
            @keydown.escape.window="closeConfirm()"
        >
            <div class="absolute inset-0 bg-black/60" @click="closeConfirm()" x-transition.opacity></div>

            <div
                class="relative w-full max-w-md mx-4 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl"
                x-transition
                @click.stop
            >
                <div class="p-5">
                    <div class="flex items-start gap-3">
                        <div class="mt-0.5 shrink-0 rounded-full p-2"
                             :class="confirmTone==='danger'
                                ? 'bg-red-50 dark:bg-red-900/30'
                                : (confirmTone==='success'
                                    ? 'bg-green-50 dark:bg-green-900/30'
                                    : 'bg-gray-50 dark:bg-gray-800')">
                            <svg class="h-5 w-5"
                                 :class="confirmTone==='danger'
                                    ? 'text-red-600 dark:text-red-300'
                                    : (confirmTone==='success'
                                        ? 'text-green-600 dark:text-green-300'
                                        : 'text-gray-700 dark:text-gray-200')"
                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86l-7.4 12.82A2 2 0 0 0 4.62 20h14.76a2 2 0 0 0 1.73-3.32l-7.4-12.82a2 2 0 0 0-3.42 0z" />
                            </svg>
                        </div>

                        <div class="flex-1">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" x-text="confirmTitle"></h3>
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300" x-text="confirmMessage"></p>
                        </div>
                    </div>

                    <div class="mt-5 flex items-center justify-end gap-2">
                        <button type="button"
                                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"
                                @click="closeConfirm()">
                            Cancel
                        </button>

                        <form :action="confirmAction" method="POST" class="inline">
                            @csrf
                            <template x-if="confirmMethod === 'DELETE'">
                                @method('DELETE')
                            </template>

                            <button
                                type="submit"
                                id="confirmActionBtn"
                                class="px-3 py-2 rounded-md text-sm font-semibold text-white transition"
                                :class="confirmTone==='danger'
                                    ? 'bg-red-600 hover:bg-red-500'
                                    : (confirmTone==='success'
                                        ? 'bg-green-600 hover:bg-green-500'
                                        : 'bg-gray-900 hover:bg-gray-800')"
                                x-text="confirmText"
                            ></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function licensesPage() {
                return {
                    // create modal
                    open: false,
                    tab: 'single',
                    view: 'active',

                    openModal() { this.open = true; this.tab = 'single'; },
                    closeModal() { this.open = false; },

                    // confirm modal
                    confirmOpen: false,
                    confirmTitle: '',
                    confirmMessage: '',
                    confirmAction: '#',
                    confirmMethod: 'POST', // POST | DELETE
                    confirmText: 'Confirm',
                    confirmTone: 'danger', // danger | success | neutral

                    openConfirm(payload) {
                        this.confirmTitle = payload.title || 'Confirm action';
                        this.confirmMessage = payload.message || '';
                        this.confirmAction = payload.action || '#';
                        this.confirmMethod = payload.method || 'POST';
                        this.confirmText = payload.confirmText || 'Confirm';
                        this.confirmTone = payload.tone || 'danger';
                        this.confirmOpen = true;

                        this.$nextTick(() => {
                            const btn = document.getElementById('confirmActionBtn');
                            if (btn) btn.focus();
                        });
                    },

                    closeConfirm() {
                        this.confirmOpen = false;
                        this.confirmTitle = '';
                        this.confirmMessage = '';
                        this.confirmAction = '#';
                        this.confirmMethod = 'POST';
                        this.confirmText = 'Confirm';
                        this.confirmTone = 'danger';
                    },
                }
            }
        </script>
    </div>
</x-app-layout>