@use('App\Support\LocalizedDate')

<div class="grid gap-8 lg:grid-cols-[360px_1fr]">
    <section class="rounded-xl border border-limoc-border bg-white p-5 lg:sticky lg:top-6 lg:self-start">
        <h2 class="text-lg font-black">افزودن کاربر</h2>
        <p class="mt-1 text-sm leading-7 text-limoc-muted">
            حساب ساخته‌شده بدون نیاز به تایید ایمیل فعال است. رمز عبور را خودتان به کاربر برسانید — سامانه ایمیلی نمی‌فرستد.
        </p>

        @if ($created)
            <p class="mt-4 rounded-lg bg-limoc-lime-soft/40 p-3 text-sm font-medium text-limoc-green">{{ $created }}</p>
        @endif

        <form wire:submit="create" class="mt-4 space-y-3">
            <div>
                <label for="name" class="block text-sm font-medium">نام و نام خانوادگی</label>
                <input id="name" type="text" wire:model="name" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                @error('name') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="email" class="block text-sm font-medium">ایمیل</label>
                <input id="email" type="email" wire:model="email" dir="ltr" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                @error('email') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="mobile" class="block text-sm font-medium">موبایل <span class="text-limoc-muted">(اختیاری)</span></label>
                <input id="mobile" type="text" wire:model="mobile" dir="ltr" placeholder="09123456789" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                @error('mobile') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium">رمز عبور</label>
                <input id="password" type="text" wire:model="password" dir="ltr" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                @error('password') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
            </div>

            <hr class="border-limoc-border">

            <div>
                <label for="workspaceName" class="block text-sm font-medium">نام فضای کاری <span class="text-limoc-muted">(اختیاری)</span></label>
                <input id="workspaceName" type="text" wire:model="workspaceName" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                <p class="mt-1 text-xs text-limoc-muted">اگر خالی بگذارید، کاربر در اولین ورود خودش فضای کاری‌اش را می‌سازد.</p>
                @error('workspaceName') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="workspaceType" class="block text-sm font-medium">نوع فضای کاری</label>
                <select id="workspaceType" wire:model="workspaceType" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                    @foreach ($workspaceTypes as $case)
                        <option value="{{ $case->value }}">{{ $case->label() }}</option>
                    @endforeach
                </select>
            </div>

            <button type="submit" class="min-h-[44px] w-full rounded-lg bg-limoc-yellow px-4 font-bold transition hover:bg-limoc-green hover:text-white">
                <span wire:loading.remove wire:target="create">ساخت حساب</span>
                <span wire:loading wire:target="create">در حال ساخت…</span>
            </button>
        </form>
    </section>

    <section class="min-w-0">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <h1 class="text-2xl font-black">کاربران سامانه</h1>

            <input type="search" wire:model.live.debounce.400ms="search" placeholder="نام، ایمیل یا موبایل"
                   class="min-w-0 rounded-lg border-limoc-border bg-white text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft sm:w-72">
        </div>

        <div class="mt-4 overflow-x-auto rounded-xl border border-limoc-border bg-white">
            <table class="w-full min-w-[40rem] text-right text-sm">
                <thead class="border-b border-limoc-border bg-limoc-sand text-xs text-limoc-muted">
                    <tr>
                        <th class="px-4 py-3 font-medium">کاربر</th>
                        <th class="px-4 py-3 font-medium">نوع</th>
                        <th class="px-4 py-3 font-medium">وضعیت</th>
                        <th class="px-4 py-3 font-medium">فضای کاری</th>
                        <th class="px-4 py-3 font-medium">عضویت</th>
                        <th class="px-4 py-3 font-medium"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-limoc-border">
                    @forelse ($users as $user)
                        <tr wire:key="admin-user-{{ $user->id }}">
                            <td class="px-4 py-3">
                                <span class="font-medium">{{ $user->name }}</span>
                                @if ($user->is_platform_admin)
                                    <span class="mr-1 rounded-full bg-limoc-honey px-2 py-0.5 text-xs font-bold">ادمین سامانه</span>
                                @endif
                                <span class="mt-0.5 block text-xs text-limoc-muted" dir="ltr">{{ $user->email }}</span>
                            </td>
                            <td class="px-4 py-3 text-limoc-muted">{{ $user->account_type?->label() ?? '—' }}</td>
                            <td class="px-4 py-3">
                                <span @class([
                                    'rounded-full px-2 py-0.5 text-xs font-medium',
                                    'bg-emerald-100 text-emerald-700' => $user->status->value === 'active',
                                    'bg-rose-100 text-rose-700' => $user->status->value !== 'active',
                                ])>{{ $user->status->label() }}</span>
                            </td>
                            <td class="px-4 py-3 text-limoc-muted ltr-numerals">{{ $user->owned_workspaces_count }}</td>
                            <td class="px-4 py-3 text-limoc-muted">{{ LocalizedDate::format($user->created_at) }}</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-end gap-3 whitespace-nowrap">
                                    <button type="button" wire:click="edit({{ $user->id }})" class="text-xs font-medium text-limoc-green hover:underline">ویرایش</button>
                                    @unless (auth()->id() === $user->id)
                                        <button type="button" wire:click="toggleStatus({{ $user->id }})"
                                                wire:confirm="{{ $user->status->value === 'active' ? 'این کاربر غیرفعال شود؟' : 'این کاربر دوباره فعال شود؟' }}"
                                                class="text-xs font-medium {{ $user->status->value === 'active' ? 'text-rose-600' : 'text-limoc-green' }} hover:underline">
                                            {{ $user->status->value === 'active' ? 'غیرفعال‌سازی' : 'فعال‌سازی' }}
                                        </button>
                                    @endunless
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-limoc-muted">کاربری با این جستجو پیدا نشد.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-6">{{ $users->links() }}</div>
    </section>

    <x-modal name="edit-account" :show="$errors->has('editForm.name')" focusable max-width="md">
        @if ($editingId)
            <form wire:submit="saveEdit" class="p-6 space-y-4">
                <h2 class="text-base font-black">ویرایش کاربر</h2>

                <div>
                    <label for="edit-name" class="block text-sm font-medium">نام و نام خانوادگی</label>
                    <input id="edit-name" type="text" wire:model="editForm.name" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                    @error('editForm.name') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="edit-email" class="block text-sm font-medium">ایمیل</label>
                    <input id="edit-email" type="email" wire:model="editForm.email" dir="ltr" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                    @error('editForm.email') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="edit-mobile" class="block text-sm font-medium">موبایل <span class="text-limoc-muted">(اختیاری)</span></label>
                    <input id="edit-mobile" type="text" wire:model="editForm.mobile" dir="ltr" placeholder="09123456789" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                    @error('editForm.mobile') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="edit-status" class="block text-sm font-medium">وضعیت</label>
                    <select id="edit-status" wire:model="editForm.status" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                        @foreach ($userStatuses as $case)
                            <option value="{{ $case->value }}">{{ $case->label() }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="edit-password" class="block text-sm font-medium">رمز عبور جدید <span class="text-limoc-muted">(اختیاری — خالی بگذارید تا تغییر نکند)</span></label>
                    <input id="edit-password" type="text" wire:model="editForm.password" dir="ltr" class="mt-1 w-full rounded-lg border-limoc-border bg-limoc-cream text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                    @error('editForm.password') <p class="mt-1 text-xs text-red-700">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" wire:click="cancelEdit" class="rounded-lg px-4 py-2 text-sm text-limoc-muted hover:bg-limoc-sand">انصراف</button>
                    <button type="submit" class="rounded-lg bg-limoc-yellow px-4 py-2 text-sm font-bold transition hover:bg-limoc-green hover:text-white">ذخیره</button>
                </div>
            </form>
        @endif
    </x-modal>
</div>