@php $busy = 'search,gotoPage,previousPage,nextPage,addWord,removeWord'; @endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    {{-- KPI strip --}}
    <div class="stat-grid mb-1">
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-filter"></i></span>
            <span class="v">{{ number_format($counts['total']) }}</span><span class="k">Words</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-lock"></i></span>
            <span class="v">{{ number_format($counts['seed']) }}</span><span class="k">Seed (locked)</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-user-pen"></i></span>
            <span class="v">{{ number_format($counts['added']) }}</span><span class="k">Admin-added</span></div>
    </div>

    <div class="grid-2">
        {{-- ===== Left: add + list ===== --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-plus">Add a word</x-admin.eyebrow>
                <form wire:submit="addWord" class="mt-1" style="display:flex;gap:.5rem;align-items:flex-start;">
                    <div class="fld" style="flex:1;margin:0;">
                        <input class="inp @error('newWord') inp-invalid @enderror" type="text" wire:model="newWord" placeholder="word to block&hellip;" autocomplete="off" autocapitalize="off" spellcheck="false">
                        @error('newWord')<p class="field-err"><i class="fa-solid fa-circle-xmark"></i> {{ $message }}</p>@enderror
                    </div>
                    <x-admin.btn type="submit" variant="navy" sm icon="fa-light fa-plus" wire:loading.attr="disabled" wire:target="addWord">Add</x-admin.btn>
                </form>
                <p class="sub" style="margin-top:.5rem;">Applied whole-word in messages/stories and as a substring (leet-aware) in usernames. Takes effect immediately.</p>
            </x-admin.panel>

            <x-admin.panel>
                <div style="padding:1.1rem 1.25rem 0;">
                    <x-admin.eyebrow icon="fa-light fa-filter">Blocked words</x-admin.eyebrow>
                    <x-admin.toolbar style="margin-top:.8rem;">
                        <div class="tb-search">
                            <i class="fa-light fa-magnifying-glass" wire:loading.remove wire:target="search"></i>
                            <i class="fa-light fa-spinner-third fa-spin" wire:loading wire:target="search" style="color:var(--sky);"></i>
                            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search words&hellip;" autocomplete="off">
                            @if ($search !== '')
                                <button type="button" class="ibtn" wire:click="$set('search','')" aria-label="Clear" style="border:none;background:transparent;"><i class="fa-light fa-xmark"></i></button>
                            @endif
                        </div>
                        <span class="sub" style="margin-left:auto;white-space:nowrap;">{{ number_format($terms->total()) }} {{ \Illuminate\Support\Str::plural('word', $terms->total()) }}</span>
                    </x-admin.toolbar>
                </div>

                <div class="tbl-wrap">
                    <table class="tbl tbl-cards">
                        <thead>
                            <tr><th>Word</th><th>Origin</th><th>Added</th><th class="r"></th></tr>
                        </thead>
                        <tbody>
                            @forelse ($terms as $t)
                                <tr wire:key="p-{{ $t->id }}">
                                    <td data-label="Word"><span>{{ $t->word }}</span></td>
                                    <td data-label="Origin">
                                        @if ($t->created_by === null)
                                            <x-admin.pill variant="navy"><i class="fa-light fa-lock"></i> Seed</x-admin.pill>
                                        @else
                                            <x-admin.pill variant="neutral">{{ $authors[$t->created_by] ?? 'Admin' }}</x-admin.pill>
                                        @endif
                                    </td>
                                    <td class="sub" data-label="Added" style="white-space:nowrap;">{{ $t->created_at?->format('d M Y') ?: '—' }}</td>
                                    <td class="r" data-label="">
                                        @if ($canRemove && $t->created_by !== null)
                                            <button type="button" class="ibtn" title="Remove word"
                                                wire:click="removeWord({{ $t->id }})"
                                                wire:confirm="Remove “{{ $t->word }}” from the filter?"
                                                style="color:var(--coral);border:none;background:transparent;"><i class="fa-light fa-trash-can"></i></button>
                                        @elseif ($t->created_by === null)
                                            <i class="fa-light fa-lock sub" title="Locked seed word"></i>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4">
                                    <div class="empty-state">
                                        <i class="fa-light fa-filter"></i>
                                        <div><div class="es-title">No words match</div><div class="sub">Nothing matches your search.</div></div>
                                    </div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($terms->hasPages())
                    <div class="tbl-foot">
                        <span class="sub">Showing {{ $terms->firstItem() }}–{{ $terms->lastItem() }} of {{ number_format($terms->total()) }}</span>
                        <div style="display:flex;gap:.4rem;">
                            <button class="fchip" wire:click="previousPage" @disabled($terms->onFirstPage())><i class="fa-light fa-chevron-left"></i> Prev</button>
                            <button class="fchip" wire:click="nextPage" @disabled(! $terms->hasMorePages())>Next <i class="fa-light fa-chevron-right"></i></button>
                        </div>
                    </div>
                @endif
            </x-admin.panel>
        </div>

        {{-- ===== Right: test the filter ===== --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-flask">Test the filter</x-admin.eyebrow>
                <p class="sub" style="margin:.3rem 0 .8rem;">See exactly what the current list does. Nothing is saved.</p>

                <div class="fld">
                    <label for="t-text">Message / story text</label>
                    <textarea class="inp" id="t-text" rows="3" wire:model.live.debounce.350ms="testText" placeholder="Type a sample message&hellip;"></textarea>
                </div>
                @if ($test['text'])
                    <div class="note-tile" style="margin-bottom:.4rem;">
                        @if ($test['text']['modified'])
                            <div><span class="sub">Cleaned:</span> {{ $test['text']['cleaned'] !== '' ? $test['text']['cleaned'] : '—' }}</div>
                            <div style="margin-top:.3rem;"><span class="sub">Removed:</span> <span style="color:var(--coral);">{{ implode(', ', $test['text']['terms']) }}</span></div>
                        @else
                            <span class="field-ok"><i class="fa-solid fa-circle-check"></i> Clean — nothing removed.</span>
                        @endif
                    </div>
                @endif

                <div class="fld" style="margin-top:.6rem;">
                    <label for="t-user">Username</label>
                    <input class="inp" id="t-user" type="text" wire:model.live.debounce.350ms="testUsername" placeholder="try a handle&hellip;" autocomplete="off" autocapitalize="off">
                </div>
                @if ($test['username'])
                    <div class="note-tile">
                        @if ($test['username']['allowed'])
                            <span class="field-ok"><i class="fa-solid fa-circle-check"></i> Allowed.</span>
                        @else
                            <span class="field-err"><i class="fa-solid fa-circle-xmark"></i> Rejected — matched <span>{{ implode(', ', $test['username']['matches']) }}</span></span>
                        @endif
                    </div>
                @endif
            </x-admin.panel>
        </div>
    </div>
</div>