@extends('layouts.admin')

@use('App\Models\UpdateLog')
@use('App\Models\UpdateVersion')
@use('App\Repositories\VersionRepository')

@section('title', 'Versions')
@section('heading', 'CMS Versions & Updates')
@section('subheading', 'Manage releases, update packages and deployment channels.')

@php
    $canManage = auth()->user()?->isOwner() ?? false;

    // allForAdmin() counts logs but does not load the author, which the drawer
    // shows. One query here beats one per release.
    $versions->loadMissing('creator');

    /*
    | Update activity, in ONE grouped query, keyed by version then status.
    |
    | withCount('logs') on the collection already counts EVERY log row, which is
    | mostly routine update checks — using that as "downloads" would overstate
    | uptake by an order of magnitude. This breakdown is what lets the page say
    | downloaded, installed and failed separately, and mean them.
    */
    $activity = UpdateLog::query()
        ->selectRaw('update_version_id, status, COUNT(*) as total')
        ->whereNotNull('update_version_id')
        ->groupBy('update_version_id', 'status')
        ->get()
        ->groupBy('update_version_id')
        ->map(fn ($rows) => $rows->pluck('total', 'status'));

    $countsFor = fn ($version) => $activity->get($version->id, collect());

    // The release the update API would actually serve a stable CMS install —
    // the same call the API makes, so the "Latest" badge cannot disagree with it.
    $latest   = app(VersionRepository::class)->latestForChannel(UpdateVersion::CHANNEL_STABLE, UpdateVersion::PRODUCT_CMS);
    $latestId = $latest?->id;

    $maxDownloads = (int) $versions->max(fn ($v) => (int) ($countsFor($v)['downloaded'] ?? 0));

    // The single model the drawer, the filters, the sort and the CSV export all
    // read from, so none of them has to scrape the table out of the DOM.
    $rows = $versions->map(function ($version) use ($countsFor, $canManage) {
        $counts = $countsFor($version);

        return [
            'id'           => $version->id,
            'version'      => $version->version,
            'name'         => $version->release_name,
            'product'      => $version->product ?: UpdateVersion::PRODUCT_CMS,
            'channel'      => $version->channel,
            'status'       => $version->status,
            'type'         => $version->package_type,
            'notes'        => $version->release_notes,
            'minSupported' => $version->min_supported_version,
            'security'     => (bool) $version->security_update,
            'force'        => (bool) $version->force_update,
            'hasPackage'   => $version->hasPackage(),
            'signed'       => filled($version->signature),
            'fileName'     => $version->hasPackage() ? $version->downloadName() : null,
            'size'         => (int) $version->file_size,
            'checksum'     => $version->checksum_sha256,
            'author'       => $version->creator?->name,
            'publishedAt'  => $version->published_at?->toIso8601String(),
            'checks'       => (int) ($counts['checked'] ?? 0),
            'downloads'    => (int) ($counts['downloaded'] ?? 0),
            'installed'    => (int) ($counts['installed'] ?? 0),
            'failed'       => (int) ($counts['failed'] ?? 0),
            'showUrl'      => route('versions.show', $version),
            'editUrl'      => $canManage ? route('versions.edit', $version) : null,

            // Only the moments this record actually stores. No invented steps.
            'timeline'     => [
                ['label' => 'Created',      'at' => $version->created_at?->format('d M Y H:i'),   'done' => (bool) $version->created_at],
                ['label' => 'Release date', 'at' => $version->release_date?->format('d M Y'),      'done' => (bool) $version->release_date],
                ['label' => 'Package attached', 'at' => $version->hasPackage() ? $version->updated_at?->format('d M Y H:i') : null, 'done' => $version->hasPackage()],
                ['label' => 'Signed',       'at' => filled($version->signature) ? 'Signature attached' : null, 'done' => filled($version->signature)],
                ['label' => 'Published',    'at' => $version->published_at?->format('d M Y H:i'),  'done' => (bool) $version->published_at],
            ],
        ];
    })->values();

    $blank = new UpdateVersion([
        'product'      => UpdateVersion::PRODUCT_CMS,
        'channel'      => UpdateVersion::CHANNEL_STABLE,
        'package_type' => 'full',
    ]);
@endphp

@section('header-actions')
    @if ($canManage)
        {{-- The layout renders this outside the page component, so the click
             dispatches an event that bubbles to window instead of calling the
             method directly. Still a real link with JavaScript off. --}}
        <a href="{{ route('versions.create') }}" x-data
           @click.prevent="$dispatch('version-upload')"
           class="btn-primary">
            <x-icon name="cloud-upload" class="size-4" />
            <span class="hidden sm:inline">New Version</span>
            <span class="sm:hidden">New</span>
        </a>
    @endif
@endsection

@section('content')
    <div class="flex flex-col gap-3 lg:h-full"
         @version-upload.window="openUpload()"
         x-data="versionsPage({
            versions: @js($rows),
            endpoints: {
                index:    @js(route('versions.index')),
                publish:  @js(route('versions.publish',  ['version' => '__ID__'])),
                hide:     @js(route('versions.hide',     ['version' => '__ID__'])),
                rollback: @js(route('versions.rollback', ['version' => '__ID__'])),
                destroy:  @js(route('versions.destroy',  ['version' => '__ID__'])),
            },
         })">

        {{-- ── Statistics ──────────────────────────────────────────────── --}}
        <x-version-stats :versions="$versions" :activity="$activity" :latest="$latest" class="shrink-0" />

        {{-- ── Toolbar ─────────────────────────────────────────────────── --}}
        <div class="surface shrink-0 p-3">
            <div class="flex flex-wrap items-center gap-2">
                <label class="relative min-w-0 flex-1 sm:max-w-sm">
                    <span class="sr-only">Search releases</span>
                    <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
                    <input type="search" x-model="q" @input="page = 1; render()" x-ref="search"
                           placeholder="Search version, name or changelog…"
                           class="w-full rounded-xl border border-slate-200 bg-white py-2 pl-9 pr-12 text-sm
                                  transition placeholder:text-slate-400 focus:border-brand-400 focus:outline-none
                                  dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white dark:placeholder:text-slate-500">
                    <kbd class="pointer-events-none absolute right-2.5 top-1/2 hidden -translate-y-1/2 rounded border
                                border-slate-200 px-1.5 py-0.5 text-[10px] font-semibold text-slate-400 sm:block
                                dark:border-white/10 dark:text-slate-500">/</kbd>
                </label>

                <label class="sr-only" for="channel-filter">Channel</label>
                <select id="channel-filter" x-model="channel" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">All channels</option>
                    <option value="stable">Stable</option>
                    <option value="beta">Beta</option>
                </select>

                <label class="sr-only" for="product-filter">Product</label>
                <select id="product-filter" x-model="product" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">All products</option>
                    <option value="cms">TaxPilot CMS</option>
                    <option value="ai">TaxPilot AI</option>
                </select>

                <label class="sr-only" for="status-filter">Status</label>
                <select id="status-filter" x-model="status" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">All statuses</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                    <option value="hidden">Hidden</option>
                    <option value="archived">Archived</option>
                </select>

                <label class="sr-only" for="flag-filter">Flags</label>
                <select id="flag-filter" x-model="flag" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">All flags</option>
                    <option value="security">Security update</option>
                    <option value="force">Force update</option>
                    <option value="patch">Patch package</option>
                    <option value="unsigned">Unsigned package</option>
                    <option value="nopackage">No package</option>
                </select>

                <div class="ml-auto flex flex-wrap items-center gap-2">
                    <label class="sr-only" for="sort-order">Sort</label>
                    <select id="sort-order" x-model="sort" @change="render()" class="filter-select !py-2">
                        <option value="version_desc">Version — newest</option>
                        <option value="version_asc">Version — oldest</option>
                        <option value="published_desc">Recently published</option>
                        <option value="downloads_desc">Most downloaded</option>
                        <option value="size_desc">Largest package</option>
                        <option value="status_asc">Status</option>
                    </select>

                    <x-dropdown width="w-56">
                        <x-slot:trigger>
                            <button type="button" class="tool-btn" aria-label="Export releases">
                                <x-icon name="download" class="size-4" />
                                <span class="hidden sm:inline">Export</span>
                            </button>
                        </x-slot:trigger>

                        <x-dropdown-item icon="file-text" type="button" @click.prevent="exportCsv('filtered')">
                            Export this view
                        </x-dropdown-item>
                        <x-dropdown-item icon="check" type="button" @click.prevent="exportCsv('selected')">
                            Export selected
                        </x-dropdown-item>
                    </x-dropdown>

                    <button type="button" @click="busy = true; window.location.reload()"
                            class="tool-btn group !px-2.5" aria-label="Refresh the list">
                        <x-icon name="refresh" class="size-4 transition-transform duration-500 group-hover:rotate-180" />
                    </button>
                </div>
            </div>

            {{-- ── Quick filters ───────────────────────────────────────── --}}
            <div class="scroll-slim mt-3 flex items-center gap-2 overflow-x-auto border-t border-slate-200/70 pt-3
                        dark:border-white/[0.06]">
                <span class="hidden shrink-0 text-[11px] font-semibold uppercase tracking-wider text-slate-400 sm:block">
                    Quick filters
                </span>

                <button type="button" @click.prevent="chip('all')" :class="chipOn('all') && 'chip-active'" class="chip shrink-0">
                    <x-icon name="layers" class="size-3.5" /> All
                </button>

                @foreach ([['stable', 'Stable'], ['beta', 'Beta']] as [$value, $label])
                    <button type="button" @click.prevent="chip('channel', @js($value))"
                            :class="chipOn('channel', @js($value)) && 'chip-active'" class="chip shrink-0">
                        <x-icon name="git-branch" class="size-3.5" /> {{ $label }}
                    </button>
                @endforeach

                <span class="h-4 w-px shrink-0 bg-slate-200 dark:bg-white/10" aria-hidden="true"></span>

                @foreach ([
                    ['security', 'Security', 'shield'],
                    ['force',    'Force',    'alert'],
                    ['unsigned', 'Unsigned', 'lock'],
                ] as [$value, $label, $icon])
                    <button type="button" @click.prevent="chip('flag', @js($value))"
                            :class="chipOn('flag', @js($value)) && 'chip-active'" class="chip shrink-0">
                        <x-icon :name="$icon" class="size-3.5" /> {{ $label }}
                    </button>
                @endforeach

                <span class="h-4 w-px shrink-0 bg-slate-200 dark:bg-white/10" aria-hidden="true"></span>

                @foreach ([
                    ['published', 'Published', 'rocket'],
                    ['hidden',    'Hidden',    'eye'],
                    ['draft',     'Draft',     'edit'],
                    ['archived',  'Archived',  'archive'],
                ] as [$value, $label, $icon])
                    <button type="button" @click.prevent="chip('status', @js($value))"
                            :class="chipOn('status', @js($value)) && 'chip-active'" class="chip shrink-0">
                        <x-icon :name="$icon" class="size-3.5" /> {{ $label }}
                    </button>
                @endforeach
            </div>
        </div>

        {{-- ── Bulk actions ────────────────────────────────────────────── --}}
        @if ($canManage)
            <div x-show="selected.length" x-cloak x-transition.opacity
                 class="shrink-0 rounded-2xl border border-brand-200 bg-brand-50 px-3 py-2.5
                        dark:border-brand-500/30 dark:bg-brand-500/10">

                <div class="flex flex-wrap items-center gap-3" x-show="! bulkRunning">
                    <span class="text-sm font-semibold text-brand-800 dark:text-brand-300">
                        <span x-text="selected.length"></span> selected
                    </span>

                    <div class="ml-auto flex flex-wrap items-center gap-2">
                        <button type="button" @click="runBulk('publish')" class="bulk-btn">
                            <x-icon name="rocket" class="size-4" /> Publish
                        </button>
                        <button type="button" @click="runBulk('hide')" class="bulk-btn">
                            <x-icon name="eye" class="size-4" /> Hide
                        </button>
                        <button type="button" @click="runBulk('rollback')" class="bulk-btn">
                            <x-icon name="refresh" class="size-4" /> Roll back
                        </button>
                        <button type="button" @click="exportCsv('selected')" class="bulk-btn">
                            <x-icon name="download" class="size-4" /> Export
                        </button>
                        <button type="button" @click="runBulk('destroy')"
                                class="bulk-btn !border-red-200 !text-red-600 hover:!bg-red-50
                                       dark:!border-red-500/30 dark:!text-red-400 dark:hover:!bg-red-500/10">
                            <x-icon name="trash" class="size-4" /> Delete
                        </button>
                        <button type="button" @click="selected = []"
                                class="px-2 text-sm font-medium text-slate-500 hover:underline dark:text-slate-400">
                            Clear
                        </button>
                    </div>
                </div>

                {{-- One request per release, and publish can legitimately refuse.
                     The count moving is the difference between "working" and
                     "frozen"; the reload afterwards carries the reason. --}}
                <div x-show="bulkRunning" x-cloak class="flex items-center gap-3">
                    <span class="text-sm font-semibold text-brand-800 dark:text-brand-300">
                        Applying… <span x-text="bulkDone"></span> of <span x-text="bulkTotal"></span>
                    </span>
                    <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-brand-200/60 dark:bg-brand-500/20">
                        <div class="h-full rounded-full bg-gradient-to-r from-brand-600 to-brand-400 transition-all duration-300"
                             :style="`width: ${bulkTotal ? (bulkDone / bulkTotal) * 100 : 0}%`"></div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ── Table ───────────────────────────────────────────────────── --}}
        <div class="surface relative flex min-h-0 flex-col overflow-hidden lg:flex-1">

            <div x-show="busy" x-cloak x-transition.opacity
                 class="absolute inset-0 z-20 bg-white/80 p-4 backdrop-blur-sm dark:bg-shell-card/85">
                <div class="space-y-3">
                    <div class="skeleton h-9 w-full"></div>
                    @for ($i = 0; $i < 7; $i++)
                        <div class="flex items-center gap-4">
                            <div class="skeleton size-8 shrink-0 rounded-lg"></div>
                            <div class="skeleton h-4 flex-1"></div>
                            <div class="skeleton hidden h-4 w-36 sm:block"></div>
                            <div class="skeleton hidden h-4 w-24 lg:block"></div>
                            <div class="skeleton h-6 w-20 rounded-full"></div>
                        </div>
                    @endfor
                </div>
            </div>

            @if ($versions->isEmpty())
                <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
                    <x-empty-state icon="package"
                                   title="No versions found"
                                   message="Upload your first CMS release. It is saved as a draft — sign the package offline, then publish it and licensed installations pick it up automatically." />

                    @if ($canManage)
                        <div class="mt-5">
                            <button type="button" @click="openUpload()" class="btn-primary !px-5 !py-2.5">
                                <x-icon name="cloud-upload" class="size-4" /> New Version
                            </button>
                        </div>
                    @endif
                </div>
            @else
                <div class="scroll-slim min-h-0 flex-1 overflow-auto">
                    <table class="w-full min-w-[1320px] text-sm">
                        <thead class="sticky top-0 z-10 bg-slate-50/95 backdrop-blur dark:bg-shell-nav/95">
                            <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                <th scope="col" class="w-10 px-4 py-3">
                                    {{-- indeterminate exists only as a DOM property,
                                         so it has to be assigned, not bound. --}}
                                    <input type="checkbox" class="checkbox"
                                           @change="toggleAll($event)"
                                           :checked="allSelected()"
                                           x-effect="$el.indeterminate = someSelected()"
                                           aria-label="Select all visible releases">
                                </th>
                                <th scope="col" class="px-4 py-3">Version</th>
                                <th scope="col" class="px-4 py-3">Release Notes</th>
                                <th scope="col" class="px-4 py-3">Channel</th>
                                <th scope="col" class="px-4 py-3">Package</th>
                                <th scope="col" class="px-4 py-3">Flags</th>
                                <th scope="col" class="px-4 py-3">Status</th>
                                <th scope="col" class="px-4 py-3">Published</th>
                                <th scope="col" class="px-4 py-3">Downloads</th>
                                <th scope="col" class="w-12 px-4 py-3"><span class="sr-only">Actions</span></th>
                            </tr>
                        </thead>

                        <tbody x-ref="body" class="divide-y divide-slate-100 dark:divide-white/[0.06]">
                            @foreach ($versions as $version)
                                @include('versions.partials.row', [
                                    'version'      => $version,
                                    'counts'       => $countsFor($version),
                                    'isLatest'     => $version->id === $latestId,
                                    'maxDownloads' => $maxDownloads,
                                    'canManage'    => $canManage,
                                ])
                            @endforeach
                        </tbody>
                    </table>

                    <div x-show="filtered.length === 0" x-cloak class="px-6 py-12 text-center">
                        <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">No releases match these filters</p>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            Nothing in the catalogue fits. Widen the search, or clear the filters to see all
                            {{ $versions->count() }}.
                        </p>
                        <button type="button" @click.prevent="reset()"
                                class="mt-4 rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600
                                       transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5">
                            Clear filters
                        </button>
                    </div>
                </div>

                {{-- ── Footer ──────────────────────────────────────────── --}}
                <div class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-4 py-2.5
                            dark:border-white/[0.06]">

                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <label for="per-page" class="sr-only">Rows per page</label>
                        <span>Rows</span>
                        <select id="per-page" x-model.number="perPage" @change="page = 1; render()"
                                class="filter-select !px-2 !py-1 !text-xs">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                        <span>
                            Showing
                            <span class="font-semibold text-slate-700 dark:text-slate-200" x-text="`${firstItem}–${lastItem}`"></span>
                            of
                            <span class="font-semibold text-slate-700 dark:text-slate-200" x-text="filtered.length"></span>
                            <span x-show="isFiltered" x-cloak>filtered from {{ $versions->count() }}</span>
                            <span x-show="! isFiltered">{{ Str::plural('release', $versions->count()) }}</span>
                        </span>
                    </div>

                    <div class="flex items-center gap-1">
                        <button type="button" @click="goto(page - 1)" :disabled="page === 1"
                                :class="page === 1 && 'pointer-events-none opacity-40'"
                                class="page-btn" aria-label="Previous page">
                            <x-icon name="chevron-left" class="size-4" />
                        </button>

                        <template x-for="p in pageCount" :key="p">
                            <button type="button" @click="goto(p)" x-text="p"
                                    :aria-current="p === page ? 'page' : null"
                                    class="page-btn text-xs font-semibold"
                                    :class="p === page && '!border-transparent !bg-gradient-to-r !from-brand-600 !to-brand-500 !text-white shadow-md'"></button>
                        </template>

                        <button type="button" @click="goto(page + 1)" :disabled="page === pageCount"
                                :class="page === pageCount && 'pointer-events-none opacity-40'"
                                class="page-btn" aria-label="Next page">
                            <x-icon name="chevron-right" class="size-4" />
                        </button>
                    </div>
                </div>
            @endif
        </div>

        @include('versions.partials.details')

        @if ($canManage)
            @include('versions.partials.upload-modal', ['version' => $blank])
        @endif

        {{-- ── Toast ───────────────────────────────────────────────────── --}}
        <div x-show="toastOpen" x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="translate-y-2 opacity-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-end="translate-y-2 opacity-0"
             role="status" aria-live="polite"
             class="pointer-events-none fixed bottom-6 left-1/2 z-[60] -translate-x-1/2 rounded-xl bg-slate-900 px-4 py-2.5
                    text-sm font-medium text-white shadow-xl ring-1 ring-white/10 dark:bg-shell-raised">
            <span class="flex items-center gap-2">
                <x-icon name="check-circle" class="size-4 text-emerald-400" />
                <span x-text="toastMessage"></span>
            </span>
        </div>
    </div>
@endsection