@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;">Perfil en lectura segura</span>
            <h2>{{ $contact->email }}</h2>
            <p>{{ $contact->fullName() !== '' ? $contact->fullName() : 'Sin nombre' }}. Todo este perfil se resuelve desde el tenant activo sin depender del legacy para navegar.</p>
        </div>

        <div class="metric-grid">
            <article class="metric">
                <span>Estado</span>
                <strong>{{ $contact->status }}</strong>
            </article>
            <article class="metric">
                <span>Listas</span>
                <strong>{{ number_format($lists->count()) }}</strong>
            </article>
            <article class="metric">
                <span>Supresiones</span>
                <strong>{{ number_format($suppressions->count()) }}</strong>
            </article>
            <article class="metric">
                <span>Actividad</span>
                <strong>{{ number_format($logs->count()) }}</strong>
            </article>
        </div>
    </section>

    <section class="detail-grid">
        <aside class="card profile-card">
            <div class="avatar">{{ strtoupper(substr($contact->email, 0, 1)) }}</div>

            <div class="value-list">
                <div>
                    <small>Email</small>
                    <span>{{ $contact->email }}</span>
                </div>
                <div>
                    <small>Nombre</small>
                    <span>{{ $contact->fullName() !== '' ? $contact->fullName() : 'Sin nombre' }}</span>
                </div>
                <div>
                    <small>Fuente</small>
                    <span>{{ $contact->source ?: 'Sin fuente' }}</span>
                </div>
                <div>
                    <small>Consentimiento</small>
                    <span>{{ optional($contact->consented_at)->format('Y-m-d H:i:s') ?: 'No registrado' }}</span>
                </div>
                <div>
                    <small>Creado</small>
                    <span>{{ optional($contact->created_at)->format('Y-m-d H:i:s') }}</span>
                </div>
            </div>

            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <a href="{{ route('contacts.index') }}" class="button button-ghost">Volver a contactos</a>
                @if ($lists->isNotEmpty())
                    <a href="{{ route('lists.show', $lists->first()->contact_list_id) }}" class="button button-ghost">Abrir su primera lista</a>
                @endif
            </div>
        </aside>

        <div class="subgrid">
            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Listas</h2>
                        <p>Relaciones activas e históricas del contacto con audiencias del tenant.</p>
                    </div>
                    <span class="chip">{{ number_format($lists->count()) }} filas</span>
                </div>

                <div class="table-shell" style="margin-top: 16px;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Lista</th>
                                <th>Estado</th>
                                <th>Agregado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($lists as $list)
                                <tr>
                                    <td><a href="{{ route('lists.show', $list->contact_list_id) }}" class="link-text">{{ $list->list_name }}</a></td>
                                    <td><span class="status {{ $list->status === 'active' ? 'status-ready' : 'status-next' }}">{{ $list->status }}</span></td>
                                    <td>{{ optional($list->created_at)->format('Y-m-d H:i:s') }}</td>
                                </tr>
                            @empty
                                <tr>
                                            <td colspan="3" class="empty-state">Este contacto no está ligado a listas.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Supresiones y bajas</h2>
                        <p>Se consolidan las supresiones manuales y las bajas por link en la misma vista del perfil.</p>
                    </div>
                </div>

                <div class="subgrid" style="margin-top: 16px;">
                    <div>
                        <h3>Supresiones</h3>
                        <div class="table-shell" style="margin-top: 12px;">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Alcance</th>
                                        <th>Motivo</th>
                                        <th>Fuente</th>
                                        <th>Actualizado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($suppressions as $suppression)
                                        <tr>
                                            <td>{{ $suppression->scope_type === 'list' ? ($suppression->list_name ?: $suppression->scope_key) : 'global' }}</td>
                                            <td>{{ $suppression->reason }}</td>
                                            <td>{{ $suppression->source ?: '-' }}</td>
                                            <td>{{ optional($suppression->updated_at)->format('Y-m-d H:i:s') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" style="text-align:center;color:#68706b;">Sin supresiones registradas.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div>
                        <h3>Bajas por link</h3>
                        <div class="table-shell" style="margin-top: 12px;">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Alcance</th>
                                        <th>Método</th>
                                        <th>Origen</th>
                                        <th>Fecha</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($unsubscribeEvents as $event)
                                        <tr>
                                            <td>{{ $event->scope_type === 'list' ? ($event->list_name ?: $event->scope_key) : 'global' }}</td>
                                            <td>{{ $event->request_method }}</td>
                                            <td>{{ $event->ip_address ?: '-' }}</td>
                                            <td>{{ optional($event->created_at)->format('Y-m-d H:i:s') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" style="text-align:center;color:#68706b;">Sin bajas por link.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Campos personalizados</h2>
                        <p>Valores ya normalizados por lista para preparar futuros ports de segmentación y personalización.</p>
                    </div>
                    <span class="chip">{{ number_format($customValues->count()) }} valores</span>
                </div>

                <div class="table-shell" style="margin-top: 16px;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Lista</th>
                                <th>Placeholder</th>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($customValues as $customValue)
                                <tr>
                                    <td>{{ $customValue->list_name }}</td>
                                    <td><code>{{ '{' . '{' . $customValue->field_key . '}' . '}' }}</code></td>
                                    <td>{{ $customValue->field_label }}</td>
                                    <td>{{ $customValue->field_type }}</td>
                                    <td>{{ $customValue->value_text ?: '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="text-align:center;color:#68706b;">Este contacto no tiene valores personalizados guardados.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Actividad</h2>
                        <p>Últimos eventos del registro de actividad ligados directamente a este contacto.</p>
                    </div>
                    <span class="chip">{{ number_format($logs->count()) }} eventos</span>
                </div>

                <div class="table-shell" style="margin-top: 16px;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Evento</th>
                                <th>Origen</th>
                                <th>Fecha</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($logs as $log)
                                <tr>
                                    <td>{{ $log->action }}</td>
                                    <td>{{ $log->ip_address ?: '-' }}</td>
                                    <td>{{ optional($log->created_at)->format('Y-m-d H:i:s') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" style="text-align:center;color:#68706b;">Sin actividad registrada.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </section>
@endsection