@extends('layouts.app')

@section('content')
    <section class="page-head">
        <div>
            <p>{{ number_format($lists->total()) }} audiencias listas para importar, limpiar y enviar.</p>
        </div>
        <div class="actions">
            <a class="button button-ghost" href="{{ route('contacts.index') }}"><x-legacy-icon name="search" icon-class="button-icon" /> Buscar suscriptor</a>
            <a class="button" href="{{ route('imports.create') }}"><x-legacy-icon name="import" icon-class="button-icon" /> Importar contactos</a>
        </div>
    </section>

    <section class="split lists-layout">
        <div class="table-card lists-console">
            <div class="toolbar lists-bulk-toolbar">
                <div>
                    <h2 class="table-title"><x-legacy-icon name="list" /> Listas disponibles</h2>
                    <p class="muted"><span id="selectedListsCount">0</span> audiencia(s) seleccionadas para ocultar.</p>
                </div>
                <div class="actions">
                    <button type="button" class="button danger-button" disabled><x-legacy-icon name="trash" icon-class="button-icon" /> Ocultar seleccionadas</button>
                </div>
            </div>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th class="select-col"><input type="checkbox" disabled aria-label="Seleccionar todas las listas"></th>
                            <th>Lista</th>
                            <th>Activos</th>
                            <th>Estado</th>
                            <th>Creada</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($lists as $list)
                            @php
                                $listId = (int) $list->id;
                                $children = $abChildrenByParentId[$listId] ?? collect();
                                $childCount = max((int) ($list->ab_child_list_count ?? 0), count($children));
                                $isMasterList = strcasecmp((string) $list->name, 'All-Contacts') === 0;
                            @endphp
                            <tr data-list-row data-list-id="{{ $listId }}">
                                <td class="select-col">
                                    @unless ($isMasterList)
                                        <input type="checkbox" disabled aria-label="Seleccionar {{ $list->name }}">
                                    @endunless
                                </td>
                                <td>
                                    <div class="list-name-cell">
                                        <a class="row-title table-title list-row-title" href="{{ route('lists.show', $listId) }}">
                                            <x-legacy-icon name="list" /> {{ $list->name }}
                                        </a>
                                        @if ($childCount > 0)
                                            <button type="button" class="list-ab-children-toggle" data-ab-children-toggle="{{ $listId }}" aria-expanded="false" title="Ver listas hijas A/B">
                                                <x-legacy-icon name="branch" icon-class="source-icon" />
                                                <span>{{ number_format($childCount) }} A/B</span>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                                <td><strong>{{ number_format((int) $list->active_contacts_count) }}</strong></td>
                                <td><span class="status">{{ $list->status }}</span></td>
                                <td>{{ optional($list->created_at)->format('Y-m-d H:i:s') }}</td>
                                <td class="actions">
                                    @if ($isMasterList)
                                        <span class="muted">Master</span>
                                    @else
                                        <button type="button" class="icon-button danger-icon" disabled title="Ocultar audiencia en legacy"><x-legacy-icon name="trash" /></button>
                                    @endif
                                </td>
                            </tr>

                            @if (count($children) > 0)
                                <tr class="list-ab-child-row" data-ab-children-for="{{ $listId }}" hidden>
                                    <td class="select-col"></td>
                                    <td colspan="5">
                                        <div class="list-ab-child-stack">
                                            @foreach ($children as $child)
                                                <div class="list-ab-child-item">
                                                    <div>
                                                        <a class="row-title list-ab-child-title" href="{{ route('lists.show', $child->id) }}">
                                                            <x-legacy-icon name="branch" icon-class="source-icon" /> {{ $child->name }}
                                                        </a>
                                                        <span class="campaign-row-subject">
                                                            {{ $child->ab_test_name ?? 'A/B Test' }} :: {{ $child->variant_name ?? 'Variante' }}
                                                        </span>
                                                    </div>
                                                    <strong>{{ number_format((int) $child->active_contacts_count) }} activos</strong>
                                                    <span class="status">{{ $child->status }}</span>
                                                    <small class="muted">{{ $child->created_at }}</small>
                                                </div>
                                            @endforeach
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        @empty
                            <tr><td colspan="6" class="empty-state">Aun no hay listas.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="pagination">
                {{ $lists->links() }}
            </div>
        </div>

        <aside class="card list-create-card">
            <h2>Nueva lista</h2>
            <p class="laravel-readonly-note">Crea una audiencia vacia aqui o usa Importar contactos para crearla desde un CSV/XLSX.</p>
            <form method="post" action="{{ route('lists.store') }}" class="stack" data-lock-on-submit>
                @csrf
                <div>
                    <label for="name">Nombre</label>
                    <input id="name" name="name" type="text" value="{{ old('name') }}" maxlength="160" required placeholder="Ej. Clientes junio">
                </div>
                <div>
                    <label for="description">Descripcion</label>
                    <textarea id="description" name="description" rows="4" maxlength="255" placeholder="Uso interno de esta audiencia">{{ old('description') }}</textarea>
                </div>
                <button type="submit" class="button" data-loading-text="Creando lista..."><x-legacy-icon name="plus" icon-class="button-icon" /> Crear lista</button>
            </form>
        </aside>
    </section>
@endsection

@push('scripts')
    <script>
    document.querySelectorAll('[data-ab-children-toggle]').forEach(function (button) {
        button.addEventListener('click', function () {
            var parentId = button.getAttribute('data-ab-children-toggle');
            var expanded = button.getAttribute('aria-expanded') === 'true';

            button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
            document.querySelectorAll('[data-ab-children-for="' + parentId + '"]').forEach(function (row) {
                row.hidden = expanded;
            });
        });
    });
    </script>
@endpush