@extends('layouts.admin')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')
@section('subheading', 'Welcome back, ' . (auth()->user()?->name ?? ''))

@section('header-actions')
    <span class="hidden items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-xs
                 font-medium text-slate-600 md:inline-flex dark:border-slate-700 dark:text-slate-300">
        <x-icon name="calendar" class="size-4" />
        {{ now()->startOfMonth()->format('j M') }} – {{ now()->format('j M Y') }}
    </span>
@endsection

@section('content')

    {{-- ── Stat cards ──────────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
        <x-stat-card label="Total Customers" icon="users" tone="brand"
                     :value="number_format($cards['customers']['value'])"
                     :trend="$cards['customers']['trend']" />

        <x-stat-card label="Active Licenses" icon="check-circle" tone="ok"
                     :value="number_format($cards['active']['value'])"
                     :trend="$cards['active']['trend']" />

        <x-stat-card label="Expired" icon="x-circle" tone="bad" good-when-down
                     :value="number_format($cards['expired']['value'])"
                     :trend="$cards['expired']['trend']"
                     hint="None expired" />

        <x-stat-card label="Suspended" icon="pause" tone="warn" good-when-down
                     :value="number_format($cards['suspended']['value'])"
                     :trend="$cards['suspended']['trend']"
                     hint="None suspended" />

        <x-stat-card label="Expiring Soon" icon="clock" tone="warn" good-when-down
                     :value="number_format($cards['expiring']['value'])"
                     :trend="$cards['expiring']['trend']"
                     :hint="'Next ' . config('licensing.expiring_soon_days', 30) . ' days'" />

        <x-stat-card label="Today's Revenue" icon="currency" tone="info"
                     :value="'Rs ' . number_format($cards['revenue']['value'])"
                     :trend="$cards['revenue']['trend']"
                     :hint="'Rs ' . number_format($cards['revenue']['month']) . ' this month'" />
    </div>

    {{-- ── Charts row ──────────────────────────────────────────────── --}}
    <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">

        <x-panel title="Revenue Overview" class="xl:col-span-2"
                 :subtitle="'Recognised at activation · ' . $revenue['year']">
            <x-slot:actions>
                @if (count($revenue['years']) > 1)
                    <form method="GET" action="{{ route('dashboard') }}">
                        <label for="year" class="sr-only">Revenue year</label>
                        <select id="year" name="year" onchange="this.form.submit()"
                                class="rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium
                                       text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
                            @foreach ($revenue['years'] as $y)
                                <option value="{{ $y }}" @selected($y == $revenue['year'])>{{ $y }}</option>
                            @endforeach
                        </select>
                    </form>
                @endif
            </x-slot:actions>

            @if ($revenue['has_data'])
                <div class="mb-4">
                    <p class="text-xs font-medium text-slate-500 dark:text-slate-400">Total Revenue</p>
                    <div class="flex flex-wrap items-baseline gap-3">
                        <p class="text-3xl font-bold text-slate-900 dark:text-white">
                            Rs {{ number_format($revenue['total']) }}
                        </p>
                        @if ($revenue['growth'] && $revenue['growth']['percent'] !== null)
                            <span class="inline-flex items-center gap-1 text-xs font-semibold
                                         {{ $revenue['growth']['direction'] === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400' }}">
                                <x-icon :name="$revenue['growth']['direction'] === 'up' ? 'arrow-up' : 'arrow-down'" class="size-3.5" />
                                {{ $revenue['growth']['percent'] }}% vs {{ $revenue['year'] - 1 }}
                            </span>
                        @endif
                    </div>
                </div>

                {{-- Height is reserved here rather than left for the chart to
                     establish, so the panel does not jump when the series draws.
                     It also gives the lazy observer in initCharts() a real box to
                     intersect with instead of a zero-height one. --}}
                <div data-chart="revenue"
                     class="min-h-[280px]"
                     data-series='@json($revenue['series'])'
                     data-labels='@json($revenue['labels'])'
                     role="img"
                     aria-label="Monthly revenue for {{ $revenue['year'] }}"></div>
            @else
                <x-empty-state icon="currency" title="No revenue recorded yet"
                               message="Revenue is recognised when a license is activated against a priced package." />
            @endif
        </x-panel>

        <x-panel title="License Status" :subtitle="number_format($statusMix['total']) . ' total'">
            @if ($statusMix['has_data'])
                <div data-chart="status"
                     class="min-h-[300px]"
                     data-series='@json(array_column($statusMix['slices'], 'value'))'
                     data-labels='@json(array_column($statusMix['slices'], 'label'))'
                     data-colors='@json(array_column($statusMix['slices'], 'color'))'
                     role="img"
                     aria-label="Breakdown of licenses by status"></div>

                <ul class="mt-4 space-y-2">
                    @foreach ($statusMix['legend'] as $s)
                        @php $pct = $statusMix['total'] > 0 ? round($s['value'] / $statusMix['total'] * 100, 1) : 0; @endphp
                        <li class="flex items-center justify-between gap-3 text-xs {{ $s['value'] === 0 ? 'opacity-40' : '' }}">
                            <span class="flex min-w-0 items-center gap-2">
                                <span class="size-2.5 shrink-0 rounded-full" style="background: {{ $s['color'] }}"></span>
                                <span class="truncate text-slate-600 dark:text-slate-300">{{ $s['label'] }}</span>
                            </span>
                            <span class="shrink-0 tabular-nums text-slate-500 dark:text-slate-400">
                                <span class="font-semibold text-slate-900 dark:text-white">{{ number_format($s['value']) }}</span>
                                ({{ $pct }}%)
                            </span>
                        </li>
                    @endforeach
                </ul>
            @else
                <x-empty-state icon="key" title="No licenses yet"
                               message="Generate a license and its status will appear here." />
            @endif
        </x-panel>
    </div>

    {{-- ── Activity row ────────────────────────────────────────────── --}}
    <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">

        <x-panel title="Activations" subtitle="Last 6 months">
            @if ($activations['has_data'])
                <div data-chart="activations"
                     class="min-h-[280px]"
                     data-series='@json($activations['series'])'
                     data-labels='@json($activations['labels'])'
                     role="img"
                     aria-label="License activations over the last six months"></div>
            @else
                <x-empty-state icon="chart" title="No activations yet"
                               message="Activations appear here once a customer brings a license online." />
            @endif
        </x-panel>

        <x-panel title="Recently Activated" :href="route('licenses.index')" :padded="false">
            @forelse ($recentlyActivated as $license)
                <div class="flex items-center gap-3 border-b border-slate-100 px-5 py-3 last:border-0 dark:border-slate-700/50">
                    <span class="grid size-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-xs font-bold
                                 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                        {{ \Illuminate\Support\Str::of($license->customer?->company_name ?? '?')->explode(' ')->take(2)->map(fn ($p) => mb_substr($p, 0, 1))->implode('') }}
                    </span>
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-medium text-slate-900 dark:text-white">
                            {{ $license->customer?->company_name ?? 'Unknown' }}
                        </p>
                        <p class="truncate text-xs text-slate-500 dark:text-slate-400">
                            {{ $license->domain?->domain ?? 'no domain bound' }}
                        </p>
                    </div>
                    <div class="shrink-0 text-right">
                        @if ($license->package)
                            <span class="inline-block rounded-lg bg-slate-100 px-2 py-0.5 text-[11px] font-semibold
                                         text-slate-600 dark:bg-slate-700 dark:text-slate-300">
                                {{ $license->package->name }}
                            </span>
                        @endif
                        <p class="mt-0.5 text-[11px] text-slate-400">{{ $license->activated_at?->diffForHumans(short: true) }}</p>
                    </div>
                </div>
            @empty
                <x-empty-state icon="key" compact title="No activations yet"
                               message="Licenses appear here as customers activate them." />
            @endforelse
        </x-panel>

        <x-panel title="Latest Verification Activity" :href="route('logs.index')" :padded="false">
            @forelse ($latestVerifications as $log)
                @php $failed = $log->event === \App\Models\LicenseLog::FAILED_VERIFICATION; @endphp
                <div class="flex items-center gap-3 border-b border-slate-100 px-5 py-3 last:border-0 dark:border-slate-700/50">
                    <x-icon :name="$failed ? 'x-circle' : 'check-circle'"
                            class="size-5 shrink-0 {{ $failed ? 'text-red-500' : 'text-emerald-500' }}" />
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-medium text-slate-900 dark:text-white">
                            {{ $log->domain ?? $log->license?->customer?->company_name ?? 'Unknown' }}
                        </p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">{{ $log->created_at?->diffForHumans() }}</p>
                    </div>
                    <span class="shrink-0 text-[11px] font-semibold {{ $failed ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400' }}">
                        {{ $failed ? 'Invalid' : 'Valid' }}
                    </span>
                </div>
            @empty
                <x-empty-state icon="shield" compact title="No verifications yet"
                               message="Installations check in periodically; results appear here." />
            @endforelse
        </x-panel>
    </div>

    {{-- ── Updates + expiring row ──────────────────────────────────── --}}
    <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">

        <x-panel title="Expiring Soon" :href="route('licenses.index')" :padded="false">
            @forelse ($expiringSoon as $license)
                @php $days = (int) now()->diffInDays($license->expires_at, false); @endphp
                <div class="flex items-center gap-3 border-b border-slate-100 px-5 py-3 last:border-0 dark:border-slate-700/50">
                    <x-icon name="alert" class="size-5 shrink-0 {{ $days <= 7 ? 'text-red-500' : 'text-amber-500' }}" />
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-medium text-slate-900 dark:text-white">
                            {{ $license->customer?->company_name ?? 'Unknown' }}
                        </p>
                        <p class="truncate text-xs text-slate-500 dark:text-slate-400">{{ $license->package?->name }}</p>
                    </div>
                    <span class="shrink-0 text-[11px] font-semibold {{ $days <= 7 ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400' }}">
                        {{ $days }} day{{ $days === 1 ? '' : 's' }} left
                    </span>
                </div>
            @empty
                <x-empty-state icon="check-circle" compact title="Nothing expiring soon"
                               message="No licenses fall due in the next {{ config('licensing.expiring_soon_days', 30) }} days." />
            @endforelse
        </x-panel>

        <x-panel title="Latest Release" :href="route('versions.index')">
            @if ($updates['has_data'])
                <div class="flex items-baseline gap-2">
                    <p class="text-3xl font-bold text-slate-900 dark:text-white">v{{ $updates['latest']['version'] }}</p>
                    <span class="rounded-lg bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-700
                                 dark:bg-emerald-500/10 dark:text-emerald-400">
                        {{ ucfirst($updates['latest']['channel']) }}
                    </span>
                </div>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                    Released {{ $updates['latest']['published_at'] ?? '—' }}
                </p>

                <dl class="mt-4 grid grid-cols-3 gap-2 text-center">
                    <div class="rounded-xl bg-slate-50 p-3 dark:bg-slate-700/30">
                        <dt class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Installs</dt>
                        <dd class="mt-0.5 text-lg font-bold text-slate-900 dark:text-white">{{ number_format($updates['installations']) }}</dd>
                    </div>
                    <div class="rounded-xl bg-amber-50 p-3 dark:bg-amber-500/10">
                        <dt class="text-[10px] font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-400">Pending</dt>
                        <dd class="mt-0.5 text-lg font-bold text-amber-700 dark:text-amber-400">{{ number_format($updates['pending']) }}</dd>
                    </div>
                    <div class="rounded-xl bg-red-50 p-3 dark:bg-red-500/10">
                        <dt class="text-[10px] font-semibold uppercase tracking-wide text-red-700 dark:text-red-400">Failed</dt>
                        <dd class="mt-0.5 text-lg font-bold text-red-700 dark:text-red-400">{{ number_format($updates['failed']) }}</dd>
                    </div>
                </dl>
            @else
                <x-empty-state icon="layers" title="No published releases"
                               message="Publish a version to start tracking rollout across installations." />
            @endif
        </x-panel>

        <x-panel title="Rollout Progress" :subtitle="$updates['has_data'] ? 'Installations on the latest release' : null">
            @if ($updates['has_data'] && $updates['installations'] > 0)
                <p class="text-4xl font-bold text-slate-900 dark:text-white">{{ number_format($updates['pending']) }}</p>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                    installation{{ $updates['pending'] === 1 ? '' : 's' }} pending update
                </p>

                <div class="mt-5">
                    <div class="h-2.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-700"
                         role="progressbar" aria-valuenow="{{ $updates['percent'] }}" aria-valuemin="0" aria-valuemax="100"
                         aria-label="Percentage of installations on the latest release">
                        <div class="h-full rounded-full bg-gradient-to-r from-brand-500 to-brand-400 transition-all duration-700"
                             style="width: {{ max(2, $updates['percent']) }}%"></div>
                    </div>
                    <div class="mt-2 flex justify-between text-[11px] text-slate-500 dark:text-slate-400">
                        <span>{{ number_format($updates['on_latest']) }} up to date</span>
                        <span class="font-semibold">{{ $updates['percent'] }}%</span>
                    </div>
                </div>
            @else
                <x-empty-state icon="upload" title="Nothing to roll out"
                               message="Rollout progress appears once a release is published and installations report in." />
            @endif
        </x-panel>
    </div>

    {{-- ── Quick actions ───────────────────────────────────────────── --}}
    <h2 class="mb-3 mt-8 text-sm font-semibold text-slate-900 dark:text-white">Quick Actions</h2>
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-8">
        @php $isOwner = auth()->user()?->isOwner() ?? false; @endphp

        {{-- State-changing actions are owner-only (audit M-06), so a viewer
             sees them disabled rather than getting a 403 after clicking. --}}
        <x-quick-action label="Add Customer"     icon="plus-user" :href="route('customers.create')"
                        :disabled="! $isOwner" reason="Requires an owner account" />
        <x-quick-action label="Generate License" icon="key" tone="ok" :href="route('licenses.create')"
                        :disabled="! $isOwner" reason="Requires an owner account" />
        <x-quick-action label="Add Package"      icon="package" tone="info" :href="route('packages.create')"
                        :disabled="! $isOwner" reason="Requires an owner account" />
        <x-quick-action label="New Version"      icon="layers" :href="route('versions.create')"
                        :disabled="! $isOwner" reason="Requires an owner account" />
        <x-quick-action label="Domains"          icon="globe" tone="info" :href="route('domains.index')" />
        <x-quick-action label="Audit Logs"       icon="file-text" tone="muted" :href="route('logs.index')" />
        <x-quick-action label="Notifications"    icon="bell" tone="warn" :href="route('notifications.index')" />
        <x-quick-action label="Security"         icon="shield" tone="ok" :href="route('2fa.setup')" />
    </div>

@endsection