{{--
    brafa Systems — managed TV apps.
    Livewire backing: App\Http\Livewire\SuperAdmin\TvAppManagement.
--}}
<div class="brafa-screen">
    @if ($successMessage)
        <div class="status-banner status-banner--success">{{ $successMessage }}</div>
    @endif
    @if ($errorMessage)
        <div class="status-banner status-banner--danger">{{ $errorMessage }}</div>
    @endif

    <div class="spread" style="margin-bottom: 18px;">
        <div>
            <h3 class="card-heading" style="margin: 0;">TV apps</h3>
            <p class="subtle" style="font-size: 13px; margin: 4px 0 0;">
                Apps shown on the launcher's Apps screen. “Required” apps are silently installed on Device-Owner devices.
            </p>
        </div>
        <span class="eyebrow">Superadmin</span>
    </div>

    <section class="card card--pad-lg" style="margin-bottom: 20px;">
        <h3 class="card-heading" style="margin:0 0 4px;">Find apps</h3>
        <p class="subtle" style="font-size:12px; margin:0 0 12px;">
            Search the catalog and click to add — the package name is filled in for you, and the app's real
            icon appears on the TV once it installs. Specialized apps can be added manually below.
        </p>
        <input wire:model.debounce.250ms="appSearch" type="text" class="input"
               placeholder="Search apps (Netflix, Disney+, Spotify…)" style="max-width:420px;">
        <div class="hstack" style="gap:10px; flex-wrap:wrap; margin-top:14px;">
            @forelse ($catalogResults as $app)
                <button type="button" class="btn btn--outline btn--sm" wire:click="addFromCatalog('{{ $app['package'] }}')"
                        title="{{ $app['package'] }}">
                    <x-lucide name="plus" size="13" /> {{ $app['label'] }}
                </button>
            @empty
                <span class="subtle" style="font-size:12px;">No catalog apps match{{ $appSearch ? ' “' . $appSearch . '”' : '' }}.</span>
            @endforelse
        </div>
    </section>

    <section class="card card--pad-lg" style="margin-bottom: 20px;">
        <h3 class="card-heading" style="margin:0 0 10px;">Add app manually</h3>
        <form wire:submit.prevent="addApp">
            <div class="input-row" style="grid-template-columns: 1fr 1.4fr;">
                <div>
                    <label class="field-label">Label</label>
                    <input wire:model.defer="appLabel" type="text" class="input @error('appLabel') is-invalid @enderror" placeholder="Netflix">
                    @error('appLabel') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label">Package name</label>
                    <input wire:model.defer="appPackage" type="text" class="input mono @error('appPackage') is-invalid @enderror" placeholder="com.netflix.ninja">
                    @error('appPackage') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="input-row" style="grid-template-columns: 1.4fr 1.4fr auto; align-items:end; margin-top:10px;">
                <div>
                    <label class="field-label">Icon URL <span class="subtle">(optional)</span></label>
                    <input wire:model.defer="appIconUrl" type="text" class="input @error('appIconUrl') is-invalid @enderror" placeholder="https://…/icon.png">
                    @error('appIconUrl') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label">Install APK URL <span class="subtle">(optional)</span></label>
                    <input wire:model.defer="appInstallUrl" type="text" class="input @error('appInstallUrl') is-invalid @enderror" placeholder="https://…/app.apk">
                    @error('appInstallUrl') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <label class="hstack" style="gap:8px; padding-bottom:8px; cursor:pointer;">
                    <input wire:model.defer="appRequired" type="checkbox">
                    <span class="subtle" style="font-size:13px;">Required</span>
                </label>
            </div>
            <div class="hstack" style="margin-top:8px;">
                <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add app</button>
            </div>
        </form>
    </section>

    <section class="card prop-list">
        <div class="prop-toolbar"><h3 class="card-heading" style="margin:0;">Apps</h3></div>
        <div style="overflow-x:auto;">
            <p class="subtle" style="font-size:11px; padding:0 16px 8px;">Drag ⠿ to reorder.</p>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:30px;"></th>
                        <th style="width:60px;">Icon</th>
                        <th>Label / package</th>
                        <th style="width:90px;">Required</th>
                        <th style="width:80px;">Status</th>
                        <th style="width:180px;">Actions</th>
                    </tr>
                </thead>
                <tbody id="tv-app-sortable">
                    @forelse ($apps as $app)
                        <tr wire:key="app-{{ $app->id }}" data-id="{{ $app->id }}">
                            <td class="tv-app-drag-handle" style="cursor:grab; text-align:center; color:var(--fg-subtle); user-select:none;">⠿</td>
                            <td>
                                @if ($app->icon_url)
                                    <img src="{{ $app->icon_url }}" alt="" style="height:28px; width:28px; object-fit:contain; border-radius:6px;">
                                @else
                                    <span class="subtle" style="font-size:11px;">—</span>
                                @endif
                            </td>
                            <td>
                                <div class="prop-name__main">{{ $app->label }}</div>
                                <div class="mono muted" style="font-size:11px;">{{ $app->package_name }}</div>
                            </td>
                            <td>
                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleRequired({{ $app->id }})">
                                    {{ $app->is_required ? 'Yes' : 'No' }}
                                </button>
                            </td>
                            <td>
                                @if ($app->is_active)
                                    <span class="pill pill--active"><span class="dot"></span>Active</span>
                                @else
                                    <span class="pill">Hidden</span>
                                @endif
                            </td>
                            <td>
                                <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggleApp({{ $app->id }})">{{ $app->is_active ? 'Hide' : 'Show' }}</button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="deleteApp({{ $app->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No apps yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js" defer></script>
    <script>
        (function () {
            var s = null;
            function initAppSort() {
                var el = document.getElementById('tv-app-sortable');
                if (!el || !window.Sortable) return;
                if (s) { try { s.destroy(); } catch (e) {} s = null; }
                s = window.Sortable.create(el, {
                    handle: '.tv-app-drag-handle',
                    animation: 150,
                    onEnd: function () {
                        var ids = Array.prototype.slice.call(el.querySelectorAll('tr[data-id]'))
                            .map(function (r) { return r.getAttribute('data-id'); });
                        if (window.Livewire) window.Livewire.emit('tvAppsReordered', ids);
                    }
                });
            }
            document.addEventListener('DOMContentLoaded', initAppSort);
            document.addEventListener('livewire:load', initAppSort);
            if (window.Livewire) window.Livewire.hook('message.processed', initAppSort);
            setTimeout(initAppSort, 1200);
        })();
    </script>
@endpush