@php
    // Real routes detected in your project:
    // applications (GET) -> index
    // applications.trash (GET)
    // applications.manage (GET) {app}
    // applications.settings (GET) {app}
    // applications.licenses (GET) {app}

    $appsIndexUrl = route('applications');
    $appsTrashUrl = route('applications.trash');

    $appsUsed = (int) ($appsCount ?? 0);
    $limitRaw = $settings?->apps_limit; // NULL = unlimited
    $appsLimit = is_null($limitRaw) ? null : (int) $limitRaw;
    $limitLabel = is_null($limitRaw) ? '∞' : (string) $appsLimit;

    $canCreate = (bool) ($settings?->can_create_apps);

    // ✅ Real license values from the controller
    $licensesActive = (int) ($licensesActive ?? 0);
    $licensesTotal  = (int) ($licensesTotal ?? 0);
    $licensesPct    = (int) ($licensesPct ?? 0);

    // ✅ Real activity values from the controller
    $activations7d = (int) ($activations7d ?? 0);
    $validations7d = (int) ($validations7d ?? 0);

    // ✅ 14-day series
    $seriesActivations = (array) ($chart14d['activations'] ?? []);
    $seriesValidations = (array) ($chart14d['validations'] ?? []);

    $apps = $apps ?? collect();

    $appsPct = ($appsLimit && $appsLimit > 0)
        ? min(100, round(($appsUsed / $appsLimit) * 100))
        : null;

    $sparkPoints = function(array $vals, int $w = 260, int $h = 64) {
        $n = count($vals);
        if ($n <= 1) return "";

        $min = min($vals);
        $max = max($vals);
        $range = max(1, $max - $min);

        $padX = 6;
        $padY = 8;
        $usableW = $w - $padX * 2;
        $usableH = $h - $padY * 2;

        $pts = [];
        foreach ($vals as $i => $v) {
            $x = $padX + ($usableW * ($i / ($n - 1)));
            $norm = ($v - $min) / $range;
            $y = $padY + ($usableH * (1 - $norm));
            $pts[] = round($x, 2) . "," . round($y, 2);
        }
        return implode(" ", $pts);
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
                    Overview
                </h2>
                <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    A quick summary of your account, projects, and licenses.
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ $appsTrashUrl }}"
                   class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-sm font-semibold
                          border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                          dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                    Trash
                </a>

                <a href="{{ $appsIndexUrl }}"
                   class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-sm font-semibold
                          bg-indigo-600 text-white hover:bg-indigo-700 transition">
                    Manage apps
                </a>
            </div>
        </div>
    </x-slot>

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

            {{-- ✅ Top cards --}}
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">

                {{-- Account --}}
                <div class="relative overflow-hidden bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm rounded-2xl p-5
                            hover:shadow-md transition">
                    <div class="absolute -top-24 -right-24 h-56 w-56 rounded-full blur-3xl opacity-40
                                bg-indigo-200 dark:bg-indigo-900/40"></div>

                    <div class="relative flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Account status</div>
                            <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                                {{ $canCreate ? 'Approved' : 'Pending' }}
                            </div>
                        </div>

                        @if($canCreate)
                            <span class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/30 px-3 py-1 text-xs font-semibold
                                         text-green-700 dark:text-green-200 ring-1 ring-inset ring-green-200 dark:ring-green-700">
                                Approved
                            </span>
                        @else
                            <span class="inline-flex items-center rounded-full bg-yellow-50 dark:bg-yellow-900/30 px-3 py-1 text-xs font-semibold
                                         text-yellow-800 dark:text-yellow-200 ring-1 ring-inset ring-yellow-200 dark:ring-yellow-700">
                                Pending
                            </span>
                        @endif
                    </div>

                    <div class="relative mt-4 text-sm text-gray-600 dark:text-gray-300">
                        Company
                        <div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">
                            {{ $tenant?->company_name ?? '-' }}
                        </div>
                    </div>

                    @if(! $canCreate)
                        <div class="relative mt-4 rounded-xl border border-yellow-200 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20 p-3 text-yellow-900 dark:text-yellow-100 text-xs">
                            Your account is pending approval. Contact support to enable app creation.
                        </div>
                    @endif
                </div>

                {{-- Apps usage --}}
                <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm rounded-2xl p-5 hover:shadow-md transition">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Projects (apps)</div>
                            <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                {{ $appsUsed }}
                                <span class="text-sm font-semibold text-gray-500 dark:text-gray-400">
                                    / {{ $limitLabel }}
                                </span>
                            </div>
                        </div>
                        <span class="inline-flex items-center rounded-full bg-indigo-50 dark:bg-indigo-950/30 px-3 py-1 text-xs font-semibold
                                     text-indigo-700 dark:text-indigo-200 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-900/50">
                            Limit
                        </span>
                    </div>

                    @if(!is_null($appsPct))
                        <div class="mt-4">
                            <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                <span>Usage</span>
                                <span>{{ $appsPct }}%</span>
                            </div>
                            <div class="mt-2 h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
                                <div class="h-full rounded-full bg-indigo-600" style="width: {{ $appsPct }}%;"></div>
                            </div>
                        </div>
                    @else
                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Unlimited apps for your plan.
                        </div>
                    @endif
                </div>

                {{-- Licenses --}}
                <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm rounded-2xl p-5 hover:shadow-md transition">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Licenses</div>
                            <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                {{ $licensesActive }}
                                <span class="text-sm font-semibold text-gray-500 dark:text-gray-400">active</span>
                            </div>
                            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Total: {{ $licensesTotal }}
                            </div>
                        </div>

                        <span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-800 px-3 py-1 text-xs font-semibold
                                     text-gray-700 dark:text-gray-200">
                            {{ $licensesPct }}%
                        </span>
                    </div>

                    <div class="mt-4">
                        <div class="h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
                            <div class="h-full rounded-full bg-indigo-600" style="width: {{ $licensesPct }}%;"></div>
                        </div>
                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                            Active vs total licenses.
                        </div>
                    </div>
                </div>

                {{-- Activity + chart --}}
                <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm rounded-2xl p-5 hover:shadow-md transition">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Last 7 days</div>
                            <div class="mt-1 text-sm text-gray-700 dark:text-gray-300">
                                Activations <span class="ml-2 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $activations7d }}</span>
                            </div>
                            <div class="mt-1 text-sm text-gray-700 dark:text-gray-300">
                                Validations <span class="ml-2 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $validations7d }}</span>
                            </div>
                        </div>

                        <span class="inline-flex items-center rounded-full bg-indigo-50 dark:bg-indigo-950/30 px-3 py-1 text-xs font-semibold
                                     text-indigo-700 dark:text-indigo-200 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-900/50">
                            Activity
                        </span>
                    </div>

                    @if(count($seriesActivations) >= 2 || count($seriesValidations) >= 2)
                        <div class="mt-4">
                            <svg viewBox="0 0 260 64" class="w-full h-16">
                                <path d="M0 32 H260" class="stroke-gray-200 dark:stroke-gray-800" stroke-width="1" fill="none" opacity="0.8"></path>
                                <path d="M0 16 H260" class="stroke-gray-200 dark:stroke-gray-800" stroke-width="1" fill="none" opacity="0.45"></path>
                                <path d="M0 48 H260" class="stroke-gray-200 dark:stroke-gray-800" stroke-width="1" fill="none" opacity="0.45"></path>

                                @if(count($seriesActivations) >= 2)
                                    <polyline
                                        points="{{ $sparkPoints($seriesActivations, 260, 64) }}"
                                        fill="none"
                                        stroke="currentColor"
                                        class="text-indigo-600"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        opacity="0.95"
                                    />
                                @endif

                                @if(count($seriesValidations) >= 2)
                                    <polyline
                                        points="{{ $sparkPoints($seriesValidations, 260, 64) }}"
                                        fill="none"
                                        stroke="currentColor"
                                        class="text-indigo-400"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        opacity="0.65"
                                    />
                                @endif
                            </svg>

                            <div class="mt-2 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                                <div class="inline-flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-indigo-600"></span>
                                    Activations
                                </div>
                                <div class="inline-flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-indigo-400"></span>
                                    Validations
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            No chart data yet.
                        </div>
                    @endif
                </div>

            </div>

            {{-- ✅ Projects list --}}
            <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Projects</div>
                            <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                                Your applications
                            </div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                Check versions, active licenses, and jump straight into Manage.
                            </div>
                        </div>

                        <a href="{{ $appsIndexUrl }}"
                           class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-sm font-semibold
                                  border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                                  dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                            View all
                        </a>
                    </div>
                </div>

                <div class="p-6">
                    @if($apps->count() === 0)
                        <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 p-6 text-center">
                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">No apps yet</div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                Create your first app to start issuing licenses.
                            </div>
                            <div class="mt-4">
                                <a href="{{ $appsIndexUrl }}"
                                   class="inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-semibold
                                          bg-indigo-600 text-white hover:bg-indigo-700 transition">
                                    Go to apps
                                </a>
                            </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="border-b border-gray-100 dark:border-gray-800">
                                        <th class="py-3 text-left font-semibold">App</th>
                                        <th class="py-3 text-left font-semibold">Version</th>
                                        <th class="py-3 text-left font-semibold">Licenses (active)</th>
                                        <th class="py-3 text-left font-semibold">Created</th>
                                        <th class="py-3 text-right font-semibold">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @foreach($apps as $app)
                                        @php
                                            $activeLic = (int) ($app->licenses_active_count ?? 0);
                                            $ver = $app->current_version ?? $app->version ?? '—';
                                            $manageUrl = route('applications.manage', $app);
                                            $licensesUrl = route('applications.licenses', $app);
                                            $settingsUrl = route('applications.settings', $app);
                                        @endphp

                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
                                            <td class="py-4 pr-4">
                                                <div class="font-semibold text-gray-900 dark:text-gray-100">
                                                    {{ $app->name ?? '—' }}
                                                </div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400 break-all">
                                                    {{ $app->key }}
                                                </div>
                                            </td>

                                            <td class="py-4 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">
                                                    {{ $ver }}
                                                </span>
                                            </td>

                                            <td class="py-4 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">
                                                    {{ $activeLic }}
                                                </span>
                                            </td>

                                            <td class="py-4 pr-4 text-gray-600 dark:text-gray-300">
                                                {{ optional($app->created_at)->format('Y-m-d') ?? '—' }}
                                            </td>

                                            <td class="py-4 text-right">
                                                <div class="inline-flex items-center gap-2">
                                                    <a href="{{ $licensesUrl }}"
                                                       class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-xs font-semibold
                                                              border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                                                              dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                                                        Licenses
                                                    </a>

                                                    <a href="{{ $settingsUrl }}"
                                                       class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-xs font-semibold
                                                              border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                                                              dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                                                        Settings
                                                    </a>

                                                    <a href="{{ $manageUrl }}"
                                                       class="inline-flex items-center justify-center px-3 py-2 rounded-lg text-xs font-semibold
                                                              bg-indigo-600 text-white hover:bg-indigo-700 transition">
                                                        Manage
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Tip: To show active licenses per app, use <code class="font-mono">withCount()</code> in the controller.
                        </div>
                    @endif
                </div>
            </div>

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