@extends('layouts.admin')

@section('title', 'Packages')
@section('heading', 'License Packages')
@section('subheading', 'Create and manage software license packages.')

@php
    /*
    | The controller hands over the whole catalogue in one collection, so every
    | figure below is derived from it — no extra queries, and no filter here can
    | disagree with what the server sent.
    */
    $totalLicenses = (int) $packages->sum('licenses_count');

    // Labels a package earns from its own numbers rather than from a column
    // that does not exist. "Popular" is the one people actually buy; "Best
    // value" is the cheapest per day. Both carry a tooltip saying so.
    $popularId = $packages->where('licenses_count', '>', 0)->sortByDesc('licenses_count')->first()?->id;
    $valueId   = $packages->filter(fn ($p) => $p->duration_days && $p->price > 0)
                          ->sortBy(fn ($p) => $p->price / $p->duration_days)->first()?->id;

    $badgesFor = function ($package) use ($popularId, $valueId) {
        $badges = [];

        if ($package->id === $popularId) {
            $badges[] = [
                'label'   => 'Popular',
                'icon'    => 'star',
                'why'     => 'Most licenses issued from this package',
                'classes' => 'bg-amber-50 text-amber-700 ring-amber-500/25 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30',
            ];
        }

        if ($package->id === $valueId) {
            $badges[] = [
                'label'   => 'Best value',
                'icon'    => 'sparkle',
                'why'     => 'Lowest price per day of any fixed-term package',
                'classes' => 'bg-emerald-50 text-emerald-700 ring-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/30',
            ];
        }

        if ($package->duration_days === null) {
            $badges[] = [
                'label'   => 'Flexible',
                'icon'    => 'sliders',
                'why'     => 'Duration is set on each license rather than by the package',
                'classes' => 'bg-blue-50 text-blue-700 ring-blue-500/25 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/30',
            ];
        }

        return $badges;
    };

    // Handed to Alpine as the single source for the drawers, the editor and the
    // CSV export, so none of them has to scrape the table back out of the DOM.
    $rows = $packages->map(fn ($p) => [
        'id'       => $p->id,
        'name'     => $p->name,
        'slug'     => $p->slug,
        'duration' => $p->duration_days,
        'price'    => (float) $p->price,
        'billing'  => $p->billing_period,
        'active'   => (bool) $p->is_active,
        'licenses' => (int) $p->licenses_count,
        'sort'     => (int) $p->sort_order,
        'created'  => $p->created_at?->toIso8601String(),
        'createdLabel' => $p->created_at?->format('d M Y') ?? '—',
    ])->values();

    // A failed save bounces back here with the input flashed. `_modal` rides
    // along unvalidated purely so the editor can be reopened where it was.
    $reopen = old('_modal') ? [
        'mode'   => old('_modal'),
        'values' => [
            'id'             => old('_pid'),
            'name'           => old('name'),
            'duration_days'  => old('duration_days'),
            'price'          => old('price'),
            'billing_period' => old('billing_period', 'custom'),
            'sort_order'     => old('sort_order', 0),
            'is_active'      => (bool) old('is_active'),
        ],
    ] : null;

    $blank = new \App\Models\LicensePackage(['is_active' => true]);
@endphp

@section('header-actions')
    {{-- The layout renders this inside the top bar, outside the page component,
         so the click cannot call openCreate() directly. It dispatches instead —
         the event bubbles to window, where the grid is listening.

         Still a real link: with JavaScript off it lands on the create page. --}}
    <a href="{{ route('packages.create') }}" x-data
       @click.prevent="$dispatch('package-editor')"
       class="btn-primary">
        <x-icon name="plus" class="size-4" />
        <span class="hidden sm:inline">New Package</span>
        <span class="sm:hidden">New</span>
    </a>
@endsection

@section('content')
    <div class="flex flex-col gap-3 lg:h-full"
         @package-editor.window="openCreate()"
         x-data="packagesPage({
            packages: @js($rows),
            reopen: @js($reopen),
            endpoints: {
                store:  @js(route('packages.store')),
                update: @js(route('packages.update', ['package' => '__ID__'])),
            },
         })">

        {{-- ── Statistics ──────────────────────────────────────────────── --}}
        <x-package-stats :packages="$packages" 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 packages</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 packages…"
                           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="billing-filter">Billing cycle</label>
                <select id="billing-filter" x-model="billing" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">All billing</option>
                    @foreach (['monthly' => 'Monthly', 'quarterly' => 'Quarterly', 'semiannual' => 'Semiannual', 'annual' => 'Annual', 'custom' => 'Custom'] as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </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="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>

                <label class="sr-only" for="duration-filter">Duration</label>
                <select id="duration-filter" x-model="duration" @change="page = 1; render()" class="filter-select !py-2">
                    <option value="">Any duration</option>
                    @foreach ($packages->pluck('duration_days')->filter()->unique()->sort()->values() as $days)
                        <option value="{{ $days }}">{{ $days }} days</option>
                    @endforeach
                    <option value="custom">Custom</option>
                </select>

                <button type="button" @click="advanced = ! advanced" class="tool-btn"
                        aria-label="Price range filter"
                        :aria-expanded="advanced ? 'true' : 'false'">
                    <x-icon name="filter" class="size-4" />
                    <span class="hidden sm:inline">Price</span>
                    <x-icon name="chevron-down" class="size-3.5 transition-transform" ::class="advanced && 'rotate-180'" />
                </button>

                <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="order">Catalogue order</option>
                        <option value="name_asc">Name A–Z</option>
                        <option value="name_desc">Name Z–A</option>
                        <option value="price_asc">Price low to high</option>
                        <option value="price_desc">Price high to low</option>
                        <option value="duration_asc">Duration shortest</option>
                        <option value="duration_desc">Duration longest</option>
                        <option value="licenses_desc">Most licenses</option>
                        <option value="created_desc">Newest first</option>
                    </select>

                    <button type="button" @click="compareOpen = true" class="tool-btn"
                            :disabled="selected.length < 2"
                            :class="selected.length < 2 && 'cursor-not-allowed opacity-40'"
                            :title="selected.length < 2 ? 'Select at least two packages to compare' : 'Compare selected packages'">
                        <x-icon name="scale" class="size-4" />
                        <span class="hidden sm:inline">Compare</span>
                    </button>

                    <x-dropdown width="w-56">
                        <x-slot:trigger>
                            <button type="button" class="tool-btn" aria-label="Export packages">
                                <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>

            {{-- Price range. Folded away because it is the one filter that needs
                 two inputs and is rarely the one you reach for first. --}}
            <div x-show="advanced" x-cloak x-transition
                 class="mt-3 grid grid-cols-2 gap-3 border-t border-slate-200/70 pt-3 sm:max-w-md dark:border-white/[0.06]">
                <label class="block">
                    <span class="filter-label">Min price (Rs)</span>
                    <input type="number" min="0" x-model="priceMin" @input="page = 1; render()"
                           placeholder="0" class="filter-input !py-1.5">
                </label>
                <label class="block">
                    <span class="filter-label">Max price (Rs)</span>
                    <input type="number" min="0" x-model="priceMax" @input="page = 1; render()"
                           placeholder="No limit" class="filter-input !py-1.5">
                </label>
            </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="chip('all')" :class="chipOn('all') && 'chip-active'" class="chip shrink-0">
                    <x-icon name="layers" class="size-3.5" /> All
                </button>

                @foreach (['monthly' => 'Monthly', 'quarterly' => 'Quarterly', 'semiannual' => 'Semiannual', 'annual' => 'Annual', 'custom' => 'Custom'] as $value => $label)
                    <button type="button" @click="chip('billing', @js($value))"
                            :class="chipOn('billing', @js($value)) && 'chip-active'" class="chip shrink-0">
                        {{ $label }}
                    </button>
                @endforeach

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

                <button type="button" @click="chip('status', 'active')"
                        :class="chipOn('status', 'active') && 'chip-active'" class="chip shrink-0">
                    <x-icon name="check-circle" class="size-3.5" /> Active
                </button>
                <button type="button" @click="chip('status', 'inactive')"
                        :class="chipOn('status', 'inactive') && 'chip-active'" class="chip shrink-0">
                    <x-icon name="pause" class="size-3.5" /> Inactive
                </button>
                <button type="button" @click="chip('popular')"
                        :class="chipOn('popular') && 'chip-active'" class="chip shrink-0"
                        title="Packages that have issued at least one license">
                    <x-icon name="star" class="size-3.5" /> Popular
                </button>
            </div>
        </div>

        {{-- ── Bulk actions ────────────────────────────────────────────── --}}
        <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(true)" class="bulk-btn">
                        <x-icon name="play" class="size-4" /> Activate
                    </button>
                    <button type="button" @click="runBulk(false)" class="bulk-btn">
                        <x-icon name="pause" class="size-4" /> Deactivate
                    </button>
                    <button type="button" @click="compareOpen = true" class="bulk-btn" :disabled="selected.length < 2"
                            :class="selected.length < 2 && 'cursor-not-allowed opacity-40'">
                        <x-icon name="scale" class="size-4" /> Compare
                    </button>
                    <button type="button" @click="exportCsv('selected')" class="bulk-btn">
                        <x-icon name="download" class="size-4" /> Export
                    </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>

            {{-- Each package is its own PUT, so the count moving is the only
                 honest way to show that something is happening. --}}
            <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">
                    Saving… <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>

        {{-- ── 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 < 6; $i++)
                        <div class="flex items-center gap-4">
                            <div class="skeleton size-9 shrink-0 rounded-xl"></div>
                            <div class="skeleton h-4 flex-1"></div>
                            <div class="skeleton hidden h-4 w-32 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 ($packages->isEmpty())
                <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
                    <x-empty-state icon="package"
                                   title="No packages found"
                                   message="Create your first license package. A package sets the term, the billing cycle and the price every license generated from it inherits." />

                    <div class="mt-5">
                        <button type="button" @click="openCreate()" class="btn-primary !px-5 !py-2.5">
                            <x-icon name="plus" class="size-4" /> Create Package
                        </button>
                    </div>
                </div>
            @else
                <div class="scroll-slim min-h-0 flex-1 overflow-auto">
                    <table class="w-full min-w-[1100px] 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
                                         rather than bound as an attribute. --}}
                                    <input type="checkbox" class="checkbox"
                                           @change="toggleAll($event)"
                                           :checked="allSelected()"
                                           x-effect="$el.indeterminate = someSelected()"
                                           aria-label="Select all visible packages">
                                </th>
                                <th scope="col" class="px-4 py-3">Package</th>
                                <th scope="col" class="px-4 py-3">Duration</th>
                                <th scope="col" class="px-4 py-3">Billing</th>
                                <th scope="col" class="px-4 py-3">Price</th>
                                <th scope="col" class="px-4 py-3">Licenses</th>
                                <th scope="col" class="px-4 py-3">Status</th>
                                <th scope="col" class="px-4 py-3">Created</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 ($packages as $package)
                                @include('packages.partials.row', [
                                    'package'       => $package,
                                    'badges'        => $badgesFor($package),
                                    'totalLicenses' => $totalLicenses,
                                ])
                            @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 packages 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
                            {{ $packages->count() }}.
                        </p>
                        <button type="button" @click="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 {{ $packages->count() }}</span>
                            <span x-show="! isFiltered">{{ Str::plural('package', $packages->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('packages.partials.editor', ['package' => $blank])
        @include('packages.partials.details')
        @include('packages.partials.compare')

        {{-- ── 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