@extends('layouts.admin.app')

@php
use App\Services\Admin\UserBulkImportService;
@endphp

@section('title', __('pages/admin/users.title'))

@section('content')
<div
    class="animate-fade-in"
    x-data="userManagementPage({
        indexUrl: @js(route('admin.users.index')),
        statsUrl: @js(route('admin.users.stats')),
        storeUrl: @js(route('admin.users.store')),
        hasData: @js($totalUsers > 0),
        loading: true,
        bulkUploadUrl: @js(route('admin.users.bulk-upload')),
        bulkUploadMaxRecords: @js(UserBulkImportService::MAX_RECORDS),
        bulkUploadMessages: @js([
            'client_no_file' => __('pages/admin/users.bulk_upload.validation.client_no_file'),
            'client_csv_only' => __('pages/admin/users.bulk_upload.validation.client_csv_only'),
            'client_max_records' => __('pages/admin/users.bulk_upload.validation.client_max_records', [
                'max' => UserBulkImportService::MAX_RECORDS,
            ]),
            'failed_download_link' => __('pages/admin/users.bulk_upload.messages.failed_download_link'),
            'dialog_title' => __('pages/admin/users.bulk_upload.messages.dialog_title'),
            'dialog_summary' => __('pages/admin/users.bulk_upload.messages.dialog_summary'),
            'progress_total' => __('pages/admin/users.bulk_upload.progress.total'),
            'progress_success' => __('pages/admin/users.bulk_upload.progress.success'),
            'progress_failed' => __('pages/admin/users.bulk_upload.progress.failed'),
            'progress_title' => __('pages/admin/users.bulk_upload.progress.title'),
            'progress_of' => __('pages/admin/users.bulk_upload.progress.of'),
            'full_success' => __('pages/admin/users.bulk_upload.messages.full_success'),
            'partial_success' => __('pages/admin/users.bulk_upload.messages.partial_success'),
            'all_failed' => __('pages/admin/users.bulk_upload.messages.all_failed'),
            'import_failed' => __('pages/admin/users.bulk_upload.messages.import_failed'),
            'request_failed' => __('pages/admin/users.bulk_upload.messages.request_failed'),
            'something_wrong' => __('messages.errors.something_wrong'),
        ]),
    })">

    {{-- ── Page Header Bar ──────────────────────────────────────────── --}}
    <div class="flex items-center justify-between px-6 space-y-4 flex-shrink-0">
        <div class="px-2 py-4">
            <x-layouts.admin.breadcrumb :items="[
                ['label' => __('pages/admin/users.title')],
            ]" />
        </div>

        <div class="flex items-center gap-3" :class="{ 'hidden': !hasData}">
            <button
                @click="toggleStats()"
                type="button"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-surface-600 dark:text-white/80 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-white/10 transition-colors"
                :class="{ 'bg-surface-100 dark:bg-white/10 text-surface-900 dark:text-white': showStats }">
                <x-heroicon-o-chart-bar class="w-4 h-4" />
                {{ __('pages/common.statistics.label') }}
            </button>
            <div class="flex items-center gap-2">
                <x-buttons.primary
                    type="button"
                    @click="openCreateModal()">
                    <x-heroicon-o-plus class="w-4 h-4" />
                    {{ __('buttons.attribute.add', ['attribute' => __('pages/admin/users.heading.singular')]) }}
                </x-buttons.primary>
                <x-buttons.secondary
                    type="button"
                    @click="openBulkUploadModal()">
                    <x-heroicon-o-arrow-up-tray class="w-4 h-4" />
                    {{ __('pages/admin/users.bulk_upload.button') }}
                </x-buttons.secondary>
            </div>
        </div>
    </div>

    <div class="px-6 pb-6 space-y-4 mt-3">

        {{-- ── Stats Cards ──────────────────────────────────────────── --}}
        <div
            x-cloak
            x-show="showStats"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-2"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-2"
            class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
                <p class="text-xs font-medium text-surface-500 uppercase tracking-wide">{{ __('pages/common.statistics.total', ['resource' => __('pages/admin/users.heading.plural')]) }}</p>
                <p x-show="statsLoading" class="mt-5 mb-3" x-cloak>
                    <span class="inline-flex items-center mt-1">
                        <x-heroicon-o-arrow-path class="w-5 h-5 animate-spin" />
                        <span class="ml-2 text-surface-400 text-sm">{{ __('pages/common.loading', ['resource' => __('pages/common.statistics.total', ['resource' => __('pages/admin/users.heading.plural')])]) }}</span>
                    </span>
                </p>
                <p x-show="!statsLoading && stats" class="mt-1 text-2xl font-bold text-surface-900 dark:text-white" x-html="stats ? stats.total : '—'"></p>
            </div>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
                <p class="text-xs font-medium text-green-600 uppercase tracking-wide">{{ __('pages/common.statistics.active', ['resource' => __('pages/admin/users.heading.plural')]) }}</p>
                <p x-show="statsLoading" class="mt-5 mb-3" x-cloak>
                    <span class="inline-flex items-center mt-1">
                        <x-heroicon-o-arrow-path class="w-5 h-5 animate-spin" />
                        <span class="ml-2 text-surface-400 text-sm">{{ __('pages/common.loading', ['resource' => __('pages/common.statistics.active', ['resource' => __('pages/admin/users.heading.plural')])]) }}</span>
                    </span>
                </p>
                <p x-show="!statsLoading && stats" class="mt-1 text-2xl font-bold text-green-600" x-html="stats ? stats.active : '—'"></p>

            </div>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
                <p class="text-xs font-medium text-amber-600 uppercase tracking-wide">{{ __('pages/common.statistics.inactive', ['resource' => __('pages/admin/users.heading.plural')]) }}</p>
                <p x-show="statsLoading" class="mt-5 mb-3" x-cloak>
                    <span class="inline-flex items-center mt-1">
                        <x-heroicon-o-arrow-path class="w-5 h-5 animate-spin" />
                        <span class="ml-2 text-surface-400 text-sm">{{ __('pages/common.loading', ['resource' => __('pages/common.statistics.inactive', ['resource' => __('pages/admin/users.heading.plural')])]) }}</span>
                    </span>
                </p>
                <p x-show="!statsLoading && stats" class="mt-1 text-2xl font-bold text-amber-600" x-html="stats ? stats.inactive : '—'"></p>

            </div>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
                <p class="text-xs font-medium text-primary-600 uppercase tracking-wide">{{ __('pages/common.statistics.new_this_month') }}</p>
                <p x-show="statsLoading" class="mt-5 mb-3" x-cloak>
                    <span class="inline-flex items-center mt-1">
                        <x-heroicon-o-arrow-path class="w-5 h-5 animate-spin" />
                        <span class="ml-2 text-surface-400 text-sm">{{ __('pages/common.loading', ['resource' => __('pages/common.statistics.new_this_month')]) }}</span>
                    </span>
                </p>
                <p x-show="!statsLoading && stats" class="mt-1 text-2xl font-bold text-primary-600" x-html="stats ? stats.new_this_month : '—'"></p>
            </div>
        </div>

        {{-- ── Search & Filters (shown only when records exist) ──────── --}}
        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2" x-show="hasData" x-cloak>
            <div class="flex items-center gap-2 min-w-0">

                {{-- Search --}}
                <div class="w-52 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        x-model="filters.search"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        placeholder="{{ __('pages/common.search', ['resource' => __('pages/admin/users.heading.plural')]) }}" />
                </div>

                {{-- Filter Dropdown --}}
                <x-common.table-filter>
                    {{-- Status --}}
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/common.status.label') }}</x-forms.label>
                        <x-forms.select x-model="filters.status" data-cb-filter="status">
                            <option value="">{{ __('pages/common.status.all') }}</option>
                            <option value="active" {{ request()->get('status') == 'active' ? 'selected' : '' }}>{{ __('pages/common.status.active') }}</option>
                            <option value="inactive" {{ request()->get('status') == 'inactive' ? 'selected' : '' }}>{{ __('pages/common.status.inactive') }}</option>
                        </x-forms.select>
                    </div>

                    {{-- Joined Date Range --}}
                    <div x-ref="joinedDateFilter"
                        @range-change="
                            filters.date_from = $event.detail.from;
                            filters.date_to   = $event.detail.to;
                        ">
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('Joined') }}</x-forms.label>
                        <x-forms.flatpickr
                            name="joined"
                            placeholder="Start Date to End Date"
                            x-bind:value="filters.date_from && filters.date_to ? filters.date_from + ' to ' + filters.date_to : ''"
                            :config="['mode' => 'range', 'dateFormat' => 'Y-m-d', 'altFormat' => 'F j, Y', 'altInput' => true, 'maxDate' => date('Y-m-d')]" />
                    </div>

                    {{-- Last Login --}}
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/common.last_login.label') }}</x-forms.label>
                        <x-forms.select x-model="filters.last_login" data-cb-filter="last_login">
                            <option value="">{{ __('pages/common.last_login.anytime') }}</option>
                            @foreach($lastLoginFilter as $key => $value)
                            <option value="{{ $key }}" {{ $key == request()->get('last_login') ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                </x-common.table-filter>

                {{-- Reset Filters (shown by initAjaxPartialTable when filters are active) --}}
                <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    Reset
                </x-buttons.secondary>
            </div>

            {{-- Bulk actions (aligned right, shown when rows are selected) --}}
            <div
                class="flex items-center gap-2 shrink-0"
                x-show="selectedIds.length > 0"
                x-cloak
                x-transition>
                <span class="text-sm font-medium text-surface-600 dark:text-surface-400" x-text="selectedIds.length + ' selected'"></span>
                <x-buttons.danger
                    type="button"
                    @click="$store.confirmDialog.show({
                    title: '{{ __('pages/common.bulk_delete_confirm.title', ['resource' => __('pages/admin/users.heading.plural')]) }}',
                    description: `{{ __('pages/common.bulk_delete_confirm.description', ['resource' => __('pages/admin/users.heading.plural'), 'selected' => ':selected']) }}`.replace(':selected', selectedIds.length),
                    confirmText: '{{ __('pages/common.bulk_delete_confirm.button') }}',
                    confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-red-600 hover:bg-red-700 text-white',
                    heroicon: 'o-trash',
                    iconWrapperClass: 'bg-red-100 dark:bg-amber-950 flex h-14 items-center justify-center rounded-full shrink-0 w-14',
                    onConfirm: () => bulkDelete('{{ route('admin.users.bulk-delete') }}')
                })">
                    <x-heroicon-o-trash class="w-3.5 h-3.5" />
                    {{ __('buttons.delete') }}
                </x-buttons.danger>
            </div>
        </div>

        {{-- Skeleton template for initAjaxPartialTable --}}
        <div class="hidden" data-cb-skeleton-template>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
                <div class="overflow-x-auto overflow-y-clip">
                    <table class="w-full table-fixed text-left text-sm text-muted-foreground" cellpadding="16">
                        <tbody>
                            @for($i = 0; $i < (int) config('pagination.skeleton_rows', 7); $i++)
                                <tr class="border-t border-border bg-card">
                                <td class="align-middle">
                                    <div class="h-4 w-4 animate-pulse rounded bg-surface-100 dark:bg-surface-700"></div>
                                </td>
                                <td class="align-middle">
                                    <div class="flex items-center gap-3">
                                        <x-skeleton.avatar size="md" />
                                        <x-skeleton.horizontal class="h-4 w-32 max-w-full rounded" />
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-4 w-40 max-w-full rounded" />
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-5 w-16 rounded-full" />
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-4 w-36 max-w-full rounded" />
                                </td>
                                <td class="align-middle">
                                    <x-skeleton.horizontal class="h-4 w-24 max-w-full rounded" />
                                </td>
                                <td class="text-right align-middle">
                                    <div class="flex items-center justify-end gap-1">
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                    </div>
                                </td>
                                </tr>
                                @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Empty-state template for initAjaxPartialTable (no data at all) --}}
        <div class="hidden" data-cb-empty-template>
            @include('pages.admin.users.partials.no-data-available')
        </div>

        {{-- Table container — always rendered so initAjaxPartialTable initialises tableApi
             even on zero-data pages; the empty template handles the no-data display. --}}
        <div id="table-container"></div>

    </div>

    {{-- ═══════════════════════════════════════════════════════════════ --}}
    {{-- MODALS                                                         --}}
    {{-- ═══════════════════════════════════════════════════════════════ --}}

    @include('pages.admin.users.partials.create-modal')
    @include('pages.admin.users.partials.view-modal')
    @include('pages.admin.users.partials.edit-modal')
    @include('pages.admin.users.partials.change-password-modal')
    @include('pages.admin.users.partials.bulk-upload-modal')
</div>

<x-alert-dialog />
@endsection

@push('before-app-js')
{!! JsValidator::formRequest('App\Http\Requests\Admin\User\UserManagementRequest', '#create-user-form') !!}
{!! JsValidator::formRequest('App\Http\Requests\Admin\User\AdminChangePasswordRequest', '#change-password-form') !!}
@vite(['resources/js/admin/user-management.js'])
@endpush