@extends('layouts.app')

@section('content')
    <section class="hero" style="margin-bottom: 16px;">
        <div class="stack">
            <span class="chip" style="width:max-content;background:#fff;border-color:#c7d2c7;">Lectura segura en Laravel</span>
            <h2>Contactos entra al paralelo.</h2>
            <p>Este módulo replica la capa de soporte y auditoría del legacy sin tocar imports, listas ni flujos de envío. Todo se mantiene aislado por organización activa.</p>
        </div>

        <div class="hero-stack">
            <article class="metric">
                <span>Total en la organización</span>
                <strong>{{ number_format($totalContacts) }}</strong>
            </article>
            <article class="metric">
                <span>Resultados actuales</span>
                <strong>{{ number_format($contacts->total()) }}</strong>
            </article>
            <article class="metric">
                <span>Operación</span>
                <strong>Solo lectura</strong>
            </article>
        </div>
    </section>

    <section class="card" style="margin-bottom: 16px;">
        <div class="section-head">
            <div class="stack" style="gap:6px;">
                <h2>Buscar suscriptores</h2>
                <p>Busca por email o nombre, filtra por lista y revisa estado sin salir del tenant actual.</p>
            </div>

            <div class="chips">
                <span class="chip">{{ $workspace->organizationName() }}</span>
                @if ($selectedList)
                    <span class="chip">Lista: {{ $selectedList->name }}</span>
                @endif
                @if ($status !== '')
                    <span class="chip">Estado: {{ $status }}</span>
                @endif
            </div>
        </div>

        <form method="get" action="{{ route('contacts.index') }}" class="stack" style="margin-top: 16px;">
            <div class="field-grid">
                <div>
                    <label for="q">Buscar</label>
                    <input id="q" name="q" type="search" placeholder="Email, nombre o apellido" value="{{ $search }}">
                </div>

                <div>
                    <label for="list_id">Lista</label>
                    <select id="list_id" name="list_id">
                        <option value="0">Todas</option>
                        @foreach ($lists as $list)
                            <option value="{{ $list->id }}" @selected((int) $list->id === (int) $selectedListId)>{{ $list->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="status">Estado</label>
                    <select id="status" name="status">
                        <option value="">Todos</option>
                        @foreach ($allowedStatuses as $allowedStatus)
                            <option value="{{ $allowedStatus }}" @selected($allowedStatus === $status)>{{ $allowedStatus }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <button type="submit" class="button">Filtrar</button>
                <a href="{{ route('contacts.index') }}" class="button button-ghost">Limpiar filtros</a>
            </div>
        </form>
    </section>

    <section class="card">
        <div class="section-head">
            <div class="stack" style="gap:6px;">
                <h2>Resultados</h2>
                <p>{{ number_format($contacts->total()) }} contactos visibles en esta consulta.</p>
            </div>

            <div class="chips">
                <span class="chip">Página {{ $contacts->currentPage() }} de {{ max($contacts->lastPage(), 1) }}</span>
            </div>
        </div>

        <div class="table-shell" style="margin-top: 16px;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Contacto</th>
                        <th>Estado</th>
                        <th>Listas</th>
                        <th>Fuente</th>
                        <th>Alta</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($contacts as $contact)
                        <tr>
                            <td>
                                <a href="{{ route('contacts.show', $contact->id) }}" class="link-text">{{ $contact->email }}</a>
                                <div class="muted" style="margin-top: 4px;">{{ $contact->fullName() !== '' ? $contact->fullName() : 'Sin nombre' }}</div>
                            </td>
                            <td>
                                <span class="status {{ $contact->status === 'subscribed' ? 'status-ready' : 'status-next' }}">{{ $contact->status }}</span>
                            </td>
                            <td>{{ $contact->lists->pluck('name')->join(', ') ?: 'Sin lista' }}</td>
                            <td>{{ $contact->source ?: '-' }}</td>
                            <td>{{ optional($contact->created_at)->format('Y-m-d H:i:s') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="empty-state">No hay contactos con esos filtros.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top: 16px;">
            {{ $contacts->links() }}
        </div>
    </section>
@endsection