{{--
    brafa Systems — shared TV channel lists.
    Livewire backing: App\Http\Livewire\SuperAdmin\TvChannelListManagement.
--}}
<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 channel lists</h3>
            <p class="subtle" style="font-size: 13px; margin: 4px 0 0;">
                Shared, reusable lineups with EPG. Assign a list to properties (or mark one default for all).
            </p>
        </div>
        <span class="eyebrow">Superadmin</span>
    </div>

    <div style="display:grid; grid-template-columns: 300px 1fr; gap: 20px; align-items:start;">

        {{-- Lists --}}
        <div class="card prop-list" style="display:flex; flex-direction:column; max-height: 80vh;">
            <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:10px; align-items:stretch;">
                <h3 class="card-heading" style="margin:0;">Lists</h3>
                <form wire:submit.prevent="createList" class="hstack" style="gap:6px;">
                    <input wire:model.defer="newListName" type="text" class="input" placeholder="New list name" style="font-size:12px;">
                    <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /></button>
                </form>
                @error('newListName') <p class="field-error">{{ $message }}</p> @enderror
            </div>
            <div style="overflow-y:auto;">
                @forelse ($lists as $list)
                    <button type="button" wire:click="selectList({{ $list->id }})"
                            class="brafa-nav-item {{ $selectedListId === $list->id ? 'is-active' : '' }}"
                            style="width:100%; text-align:left; border:none; background:{{ $selectedListId === $list->id ? 'var(--bg-surface)' : 'transparent' }};">
                        <x-lucide name="tv" size="15" />
                        <span class="brafa-nav-item__label" style="display:flex; flex-direction:column;">
                            <span>{{ $list->name }} @if ($list->is_default)<span class="pill pill--active" style="margin-left:6px;"><span class="dot"></span>Default</span>@endif</span>
                            <span class="subtle" style="font-size:11px;">{{ $list->channels_count }} channels</span>
                        </span>
                    </button>
                @empty
                    <p class="subtle" style="padding:16px; font-size:13px;">No lists yet — create one above.</p>
                @endforelse
            </div>
        </div>

        {{-- Editor --}}
        <div>
            @if (! $selectedListId)
                <section class="card card--pad-lg">
                    <p class="subtle" style="margin:0; font-size:13px;">Select or create a channel list to manage it.</p>
                </section>
            @else
                {{-- List settings --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <form wire:submit.prevent="saveList">
                        <div class="input-row" style="grid-template-columns: 1.2fr 2fr auto; align-items:end;">
                            <div>
                                <label class="field-label">List name</label>
                                <input wire:model.defer="listName" type="text" class="input @error('listName') is-invalid @enderror">
                                @error('listName') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="field-label">EPG guide URL <span class="subtle">(XMLTV, optional)</span></label>
                                <input wire:model.defer="listEpgUrl" type="text" class="input @error('listEpgUrl') is-invalid @enderror" placeholder="https://…/guide.xml">
                                @error('listEpgUrl') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <label class="hstack" style="gap:8px; padding-bottom:8px; cursor:pointer;">
                                <input wire:model.defer="listIsDefault" type="checkbox">
                                <span class="subtle" style="font-size:13px;">Default for all</span>
                            </label>
                        </div>
                        <div class="hstack" style="margin-top:8px; gap:8px;">
                            <button type="submit" class="btn"><x-lucide name="check" size="14" /> Save list</button>
                            <button type="button" class="btn btn--outline btn--sm" wire:click="deleteList"
                                    onclick="confirm('Delete this list and all its channels?') || event.stopImmediatePropagation()"
                                    style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete list</button>
                        </div>
                    </form>
                </section>

                {{-- Import + add --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <h3 class="card-heading" style="margin:0 0 10px;">Add channels</h3>
                    <form wire:submit.prevent="importM3u">
                        <div class="input-row" style="grid-template-columns: 1fr auto; align-items:end;">
                            <div>
                                <label class="field-label">Import from M3U playlist URL</label>
                                <input wire:model.defer="importUrl" type="text" class="input @error('importUrl') is-invalid @enderror" placeholder="https://…/playlist.m3u">
                                @error('importUrl') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <button type="submit" class="btn btn--sm">
                                <x-lucide name="upload" size="13" /> Import URL
                                <span wire:loading wire:target="importM3u">…</span>
                            </button>
                        </div>
                    </form>

                    <form wire:submit.prevent="importM3uFile" style="margin-top:10px;">
                        <div class="input-row" style="grid-template-columns: 1fr auto; align-items:end;">
                            <div>
                                <label class="field-label">…or upload an .m3u / .m3u8 file</label>
                                <input wire:model="importFile" type="file" accept=".m3u,.m3u8,text/plain" class="input @error('importFile') is-invalid @enderror">
                                @error('importFile') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <button type="submit" class="btn btn--sm">
                                <x-lucide name="upload" size="13" /> Import file
                                <span wire:loading wire:target="importM3uFile,importFile">…</span>
                            </button>
                        </div>
                    </form>

                    <hr style="border:none; border-top:1px solid var(--border); margin:16px 0;">

                    <form wire:submit.prevent="addChannel">
                        <div class="input-row" style="grid-template-columns: 80px 1.2fr 2fr 1fr;">
                            <div><label class="field-label">No.</label><input wire:model.defer="chNumber" type="number" min="1" class="input @error('chNumber') is-invalid @enderror"></div>
                            <div><label class="field-label">Name</label><input wire:model.defer="chName" type="text" class="input @error('chName') is-invalid @enderror" placeholder="Channel name"></div>
                            <div><label class="field-label">Stream URL</label><input wire:model.defer="chStreamUrl" type="text" class="input @error('chStreamUrl') is-invalid @enderror" placeholder="https://…m3u8"></div>
                            <div><label class="field-label">Group</label><input wire:model.defer="chGroup" type="text" class="input" placeholder="News"></div>
                        </div>
                        <div class="input-row" style="grid-template-columns: 2fr 1.4fr auto; align-items:end; margin-top:10px;">
                            <div><label class="field-label">Logo URL <span class="subtle">(optional)</span></label><input wire:model.defer="chLogoUrl" type="text" class="input @error('chLogoUrl') is-invalid @enderror" placeholder="https://…/logo.png"></div>
                            <div><label class="field-label">EPG channel id</label><input wire:model.defer="chEpgId" type="text" class="input @error('chEpgId') is-invalid @enderror" placeholder="e.g. IS: RUV FHD"></div>
                            <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add channel</button>
                        </div>
                        @error('chName') <p class="field-error">{{ $message }}</p> @enderror
                        @error('chStreamUrl') <p class="field-error">{{ $message }}</p> @enderror
                    </form>
                </section>

                {{-- Channel table --}}
                <section class="card prop-list">
                    <div class="prop-toolbar"><h3 class="card-heading" style="margin:0;">Channels in “{{ $listName }}”</h3></div>
                    <div style="overflow-x:auto;">
                        <p class="subtle" style="font-size:11px; padding:0 16px 8px;">Drag ⠿ to reorder. Order is the channel order on the TV.</p>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="width:30px;"></th>
                                    <th style="width:70px;">Logo</th>
                                    <th style="width:52px;">No.</th>
                                    <th>Name / stream</th>
                                    <th style="width:150px;">EPG id</th>
                                    <th style="width:80px;">Status</th>
                                    <th style="width:150px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tv-list-ch-sortable">
                                @forelse ($channels as $ch)
                                    <tr wire:key="lch-{{ $ch->id }}" data-id="{{ $ch->id }}">
                                        <td class="tv-list-drag-handle" style="cursor:grab; text-align:center; color:var(--fg-subtle); user-select:none;">⠿</td>
                                        <td>
                                            @if ($ch->logo_url)
                                                <img src="{{ $ch->logo_url }}" alt="" style="height:24px; max-width:58px; object-fit:contain; background:#0A2540; border-radius:4px; padding:2px;">
                                            @else
                                                <span class="subtle" style="font-size:11px;">—</span>
                                            @endif
                                        </td>
                                        <td class="mono">{{ str_pad($ch->number, 3, '0', STR_PAD_LEFT) }}</td>
                                        <td>
                                            <div class="prop-name__main">{{ $ch->name }}</div>
                                            <div class="mono muted" style="font-size:11px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $ch->stream_url }}</div>
                                        </td>
                                        <td>
                                            <input type="text" value="{{ $ch->epg_channel_id }}" class="input mono"
                                                style="font-size:11px; min-width:130px; padding:4px 8px;"
                                                placeholder="EPG id"
                                                title="Must match the guide's channel id (e.g. IS: RUV)"
                                                wire:change="updateChannelEpgId({{ $ch->id }}, $event.target.value)">
                                        </td>
                                        <td>
                                            @if ($ch->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="toggleChannel({{ $ch->id }})">{{ $ch->is_active ? 'Hide' : 'Show' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="deleteChannel({{ $ch->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="7" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No channels yet — import an M3U or add one above.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
            @endif
        </div>
    </div>
</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 initListSort() {
                var el = document.getElementById('tv-list-ch-sortable');
                if (!el || !window.Sortable) return;
                if (s) { try { s.destroy(); } catch (e) {} s = null; }
                s = window.Sortable.create(el, {
                    handle: '.tv-list-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('tvListChannelsReordered', ids);
                    }
                });
            }
            document.addEventListener('DOMContentLoaded', initListSort);
            document.addEventListener('livewire:load', initListSort);
            if (window.Livewire) window.Livewire.hook('message.processed', initListSort);
            setTimeout(initListSort, 1200);
        })();
    </script>
@endpush