@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;">Detalle de lista</span>
            <h2>{{ $list->name }}</h2>
            <p>{{ $list->description ?: 'Sin descripción' }} - {{ number_format($totalContacts) }} suscriptores en la vista actual.</p>
        </div>

        <div class="hero-stack">
            <article class="metric">
                <span>Total</span>
                <strong>{{ number_format((int) $statusCounts->sum()) }}</strong>
            </article>
            <article class="metric">
                <span>Activos</span>
                <strong>{{ number_format((int) ($statusCounts['subscribed'] ?? 0)) }}</strong>
            </article>
            <article class="metric">
                <span>Rebotes</span>
                <strong>{{ number_format((int) ($statusCounts['bounced'] ?? 0)) }}</strong>
            </article>
        </div>
    </section>

    <section class="card" style="margin-bottom: 16px;">
        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <a class="button button-ghost" href="{{ route('lists.index') }}">Volver a listas</a>
            <a class="button" href="{{ route('imports.create', ['contact_list_id' => $list->id]) }}">Importar contactos</a>
        </div>
    </section>

    <section class="card" style="margin-bottom: 16px;">
        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <a class="button {{ $status === '' ? '' : 'button-ghost' }}" href="{{ route('lists.show', $list->id) }}">Todos {{ number_format((int) $statusCounts->sum()) }}</a>
            @foreach ($allowedStatuses as $allowedStatus)
                <a class="button {{ $status === $allowedStatus ? '' : 'button-ghost' }}" href="{{ route('lists.show', ['list' => $list->id, 'status' => $allowedStatus]) }}">
                    {{ $allowedStatus }} {{ number_format((int) ($statusCounts[$allowedStatus] ?? 0)) }}
                </a>
            @endforeach
        </div>
    </section>

    @if ($customFields->isNotEmpty())
        <section class="card" style="margin-bottom: 16px;">
            <div class="stack">
                <h2>Custom fields de esta lista</h2>
                <div class="chips">
                    @foreach ($customFields as $field)
                        <span class="chip">{{ $field->field_label }} - {{ '{' . '{' . $field->field_key . '}' . '}' }}</span>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="card">
        <div class="stack">
            <h2>Contactos</h2>
            <div class="table-shell">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Contacto</th>
                            <th>Estado</th>
                            <th>Fuente</th>
                            <th>Agregado</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->source ?: '-' }}</td>
                                <td>{{ optional($contact->added_at)->format('Y-m-d H:i:s') ?: $contact->added_at }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="empty-state">Esta lista no tiene contactos visibles con ese filtro.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div>
                {{ $contacts->links() }}
            </div>
        </div>
    </section>
@endsection