{{-- resources/views/panel/applications.blade.php --}}
<x-app-layout>
    {{-- ✅ Global Alpine state for the delete modal --}}
    <div x-data="deleteAppModal()" x-init="$watch('show', v => document.body.classList.toggle('overflow-hidden', v))">

        <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">
                        Applications
                    </h2>
                    <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Create and manage your apps. Each app has its own key and license rules.
                    </div>
                </div>

                @php
                    $canCreate = ($settings?->can_create_apps) === true;

                    // NULL = unlimited
                    $limitText = ($appsLimit === null) ? '∞' : (string) $appsLimit;
                    $limitReached = ($appsLimit !== null) && ((int)$activeCount >= (int)$appsLimit);

                    $disabledCreate = (!$canCreate) || $limitReached;

                    $disabledReason = '';
                    if (!$canCreate) $disabledReason = 'Your account is pending approval.';
                    elseif ($limitReached) $disabledReason = 'You have reached your app limit.';
                @endphp

                <div class="flex items-center gap-3">
                    {{-- Trash --}}
                    <a href="{{ route('applications.trash') }}"
                       class="relative inline-flex items-center justify-center w-10 h-10 rounded-md border border-gray-200 text-gray-600
                              hover:text-red-600 hover:border-red-300 hover:bg-red-50
                              dark:border-gray-700 dark:text-gray-200 dark:hover:text-red-400 dark:hover:border-red-500/50 dark:hover:bg-red-900/20
                              transition"
                       title="Trash">

                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
                             class="w-5 h-5">
                            <path d="M3 6h18" />
                            <path d="M8 6V4h8v2" />
                            <path d="M6 6l1 16h10l1-16" />
                            <path d="M10 11v6" />
                            <path d="M14 11v6" />
                        </svg>

                        @if(!empty($trashCount) && $trashCount > 0)
                            <span class="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1
                                        inline-flex items-center justify-center rounded-full text-[11px] font-semibold
                                        bg-red-600 text-white dark:bg-red-500">
                                {{ $trashCount }}
                            </span>
                        @endif
                    </a>

                    {{-- Create form --}}
                    <form method="POST" action="{{ route('applications.store') }}" class="flex items-center gap-2">
                        @csrf

                        <div class="flex flex-col">
                            <input
                                name="name"
                                value="{{ old('name') }}"
                                placeholder="App name..."
                                class="rounded-md border-gray-300 text-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100
                                       focus:ring-indigo-500 focus:border-indigo-500"
                                {{ $disabledCreate ? 'disabled' : '' }}
                            />
                            @if($disabledCreate && $disabledReason)
                                <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                                    {{ $disabledReason }}
                                </div>
                            @else
                                <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                                    Tip: Use a short name (e.g., “My Desktop App”).
                                </div>
                            @endif
                        </div>

                        <button
                            class="px-4 py-2 rounded-md text-sm font-semibold transition
                                {{ $disabledCreate
                                    ? 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 cursor-not-allowed'
                                    : 'bg-indigo-600 text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400'
                                }}"
                            {{ $disabledCreate ? 'disabled' : '' }}
                            title="{{ $canCreate ? ($limitReached ? 'Limit reached' : 'Create a new app') : 'Pending approval' }}"
                        >
                            Create
                        </button>
                    </form>
                </div>
            </div>
        </x-slot>

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

                {{-- Usage / limit --}}
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div class="text-sm text-gray-600 dark:text-gray-300">
                        Apps: <span class="font-semibold">{{ (int)$activeCount }}</span> / <span class="font-semibold">{{ $limitText }}</span>
                    </div>

                    @if($limitReached)
                        <div class="text-xs text-red-700 dark:text-red-200 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md px-3 py-2">
                            You have reached your app limit. Delete an app or contact support to increase your limit.
                        </div>
                    @endif
                </div>

                {{-- Errors --}}
                @if ($errors->any())
                    <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-sm sm:rounded-lg p-6 border border-gray-100 dark:border-gray-800">
                        <div class="text-red-800 dark:text-red-200 bg-red-50 dark:bg-red-900/20 p-3 rounded border border-red-200 dark:border-red-800">
                            {{ $errors->first() }}
                        </div>
                    </div>
                @endif

                {{-- Pending approval notice --}}
                @if(($settings?->can_create_apps) !== true)
                    <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-sm sm:rounded-lg p-6 border border-gray-100 dark:border-gray-800">
                        <div class="text-yellow-800 dark:text-yellow-100 bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded border border-yellow-200 dark:border-yellow-700">
                            You can view this section, but your account is not approved to create apps yet.
                        </div>
                    </div>
                @endif

                {{-- List --}}
                <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-sm sm:rounded-lg p-6 border border-gray-100 dark:border-gray-800">
                    @if($apps->isEmpty())
                        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 p-6">
                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                No applications yet
                            </div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                Create your first app to start issuing licenses and validating clients.
                            </div>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead class="text-xs uppercase text-gray-500 dark:text-gray-400">
                                    <tr class="text-left border-b border-gray-200 dark:border-gray-800">
                                        <th class="py-3 pr-4 font-semibold">Name</th>
                                        <th class="py-3 pr-4 font-semibold">Licenses</th>
                                        <th class="py-3 pr-4 font-semibold">App Key</th>
                                        <th class="py-3 pr-4 font-semibold">Status</th>
                                        <th class="py-3 pr-4 font-semibold">Version</th>
                                        <th class="py-3 text-right font-semibold">Actions</th>
                                    </tr>
                                </thead>

                                <tbody class="text-gray-900 dark:text-gray-100 divide-y divide-gray-100 dark:divide-gray-800">
                                    @foreach($apps as $app)
                                        @php
                                            $status = (string) ($app->status ?? 'active');

                                            $statusClasses = match ($status) {
                                                'active' => 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-200 ring-1 ring-inset ring-green-200 dark:ring-green-700/50',
                                                'maintenance' => 'bg-yellow-50 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-100 ring-1 ring-inset ring-yellow-200 dark:ring-yellow-700/50',
                                                'suspended' => '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',
                                                default => 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200 ring-1 ring-inset ring-gray-200 dark:ring-gray-700/50',
                                            };

                                            // ✅ Correct field (your model uses "key")
                                            $appKey = (string) ($app->key ?? '');
                                        @endphp

                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
                                            <td class="py-3 pr-4">
                                                <div class="font-semibold">{{ $app->name }}</div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                                    Created: {{ optional($app->created_at)->format('Y-m-d') ?? '-' }}
                                                </div>
                                            </td>

                                            <td class="py-3 pr-4">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                                                             bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-200 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-900/50">
                                                    {{ (int) $app->active_licenses_count }}
                                                </span>
                                            </td>

                                            {{-- App Key + copy --}}
                                            <td class="py-3 pr-4">
                                                @if($appKey !== '')
                                                    <div class="flex items-center gap-2">
                                                        <code class="font-mono text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 break-all">
                                                            {{ $appKey }}
                                                        </code>

                                                        <button type="button"
                                                                class="text-xs px-2 py-1 rounded border border-gray-200 dark:border-gray-700
                                                                       text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
                                                                @click="
                                                                    navigator.clipboard.writeText(@js($appKey));
                                                                    $el.textContent='Copied';
                                                                    setTimeout(() => $el.textContent='Copy', 1200);
                                                                ">
                                                            Copy
                                                        </button>
                                                    </div>
                                                @else
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">—</span>
                                                @endif
                                            </td>

                                            <td class="py-3 pr-4">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold {{ $statusClasses }}">
                                                    {{ ucfirst($status) }}
                                                </span>
                                            </td>

                                            <td class="py-3 pr-4">
                                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                                                             bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                                                    {{ $app->current_version ?? '-' }}
                                                </span>
                                            </td>

                                            <td class="py-3">
                                                <div class="flex justify-end gap-2">
                                                    <a href="{{ route('applications.manage', $app) }}"
                                                       class="px-3 py-2 rounded-md text-xs font-semibold
                                                              bg-gray-900 text-white hover:bg-gray-800 transition">
                                                        Manage
                                                    </a>

                                                    <button
                                                        type="button"
                                                        class="px-3 py-2 rounded-md text-xs font-semibold
                                                               bg-red-600 text-white hover:bg-red-500 transition"
                                                        @click="open(@js(route('applications.destroy', $app)), @js($app->name))"
                                                    >
                                                        Delete
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Tip: Use the <span class="font-mono">Trash</span> to restore apps within 24 hours.
                        </div>
                    @endif
                </div>

            </div>
        </div>

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

            {{-- panel --}}
            <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">
                        {{-- icon --}}
                        <div class="mt-0.5 shrink-0 rounded-full bg-red-50 dark:bg-red-900/30 p-2">
                            <svg class="h-5 w-5 text-red-600 dark:text-red-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8 6V4h8v2" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l1 16h10l1-16" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10 11v6" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M14 11v6" />
                            </svg>
                        </div>

                        <div class="flex-1">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                                Move this app to Trash?
                            </h3>

                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                You are about to delete
                                <span class="font-semibold text-gray-900 dark:text-gray-100" x-text="appName"></span>.
                                The app will be kept in Trash for 24 hours and can be restored.
                            </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 transition"
                            @click="close()"
                        >
                            Cancel
                        </button>

                        <form :action="deleteUrl" method="POST" class="inline">
                            @csrf
                            @method('DELETE')

                            <button
                                type="submit"
                                id="confirmDeleteBtn"
                                class="px-3 py-2 rounded-md bg-red-600 text-white text-sm hover:bg-red-500 transition"
                            >
                                Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- ✅ Alpine helper --}}
        <script>
            function deleteAppModal() {
                return {
                    show: false,
                    deleteUrl: '#',
                    appName: '',

                    open(url, name) {
                        this.deleteUrl = url || '#';
                        this.appName = name || '';
                        this.show = true;

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

                    close() {
                        this.show = false;
                        this.deleteUrl = '#';
                        this.appName = '';
                    }
                }
            }
        </script>

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