@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;">Protección operativa en Laravel</span>
            <h2>Supresiones ya entra al paralelo.</h2>
            <p>Este bloque ya permite auditar bajas, filtrar por alcance y crear supresiones manuales desde Laravel sin depender del panel legacy para la operación básica.</p>
        </div>

        <div class="metric-grid">
            <article class="metric">
                <span>Globales activas</span>
                <strong>{{ number_format($globalSuppressions) }}</strong>
            </article>
            <article class="metric">
                <span>Por lista</span>
                <strong>{{ number_format($listSuppressions) }}</strong>
            </article>
            <article class="metric">
                <span>Eventos de baja</span>
                <strong>{{ number_format($unsubscribeEvents) }}</strong>
            </article>
            <article class="metric">
                <span>En vista</span>
                <strong>{{ number_format($suppressions->total()) }}</strong>
            </article>
        </div>
    </section>

    <section class="page-grid">
        <div class="subgrid">
            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Filtro de supresiones</h2>
                        <p>Busca por email, afina por alcance o motivo y navega solo dentro de la organización activa.</p>
                    </div>
                    <span class="chip">{{ $workspace->organizationName() }}</span>
                </div>

                <form method="get" action="{{ route('suppressions.index') }}" class="stack" style="margin-top: 16px;">
                    <div class="field-grid">
                        <div>
                            <label for="q">Buscar email</label>
                            <input id="q" name="q" type="search" value="{{ $search }}" placeholder="persona@dominio.com">
                        </div>
                        <div>
                            <label for="scope">Alcance</label>
                            <select id="scope" name="scope">
                                <option value="">Todos</option>
                                <option value="organization" @selected($scope === 'organization')>Global</option>
                                <option value="list" @selected($scope === 'list')>Por lista</option>
                            </select>
                        </div>
                        <div>
                            <label for="reason">Motivo</label>
                            <select id="reason" name="reason">
                                <option value="">Todos</option>
                                @foreach ($reasonOptions as $value => $label)
                                    <option value="{{ $value }}" @selected($reason === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

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

            <section class="card">
                <div class="section-head">
                    <div class="stack" style="gap:6px;">
                        <h2>Supresiones registradas</h2>
                        <p>{{ number_format($suppressions->total()) }} resultados visibles bajo los filtros actuales.</p>
                    </div>
                    <span class="chip">Página {{ $suppressions->currentPage() }} de {{ max($suppressions->lastPage(), 1) }}</span>
                </div>

                <div class="table-shell" style="margin-top: 16px;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Alcance</th>
                                <th>Motivo</th>
                                <th>Fuente</th>
                                <th>Actualizado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($suppressions as $item)
                                <tr>
                                    <td>
                                        @if ($item->contact_id)
                                            <a href="{{ route('contacts.show', $item->contact_id) }}" class="link-text">{{ $item->email }}</a>
                                        @else
                                            <span class="link-text">{{ $item->email }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="status {{ $item->scope_type === 'organization' ? 'status-ready' : 'status-next' }}">
                                            {{ $item->scope_type === 'organization' ? 'global' : ($item->list?->name ?: 'lista') }}
                                        </span>
                                    </td>
                                    <td>{{ \App\Support\SuppressionCatalog::label($item->reason) }}</td>
                                    <td>{{ $item->source ?: '-' }}</td>
                                    <td>{{ optional($item->updated_at)->format('Y-m-d H:i:s') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="empty-state">No hay supresiones con esos filtros.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

        <aside class="stack">
        <section class="card profile-card">
            <div class="stack" style="gap:6px;">
                <span class="chip" style="width:max-content;">Alta manual</span>
                <h2>Agregar supresión</h2>
                <p>Crea una baja global o por lista. Laravel valida el payload y guarda la regla con transacción.</p>
            </div>

            <form method="post" action="{{ route('suppressions.store') }}" class="stack" data-lock-on-submit>
                @csrf

                <div>
                    <label for="email">Email</label>
                    <input id="email" name="email" type="email" value="{{ old('email') }}" required>
                </div>

                <div>
                    <label for="scope_manual">Alcance</label>
                    <select id="scope_manual" name="scope">
                        <option value="organization" @selected(old('scope', 'organization') === 'organization')>Global</option>
                        <option value="list" @selected(old('scope') === 'list')>Solo una lista</option>
                    </select>
                </div>

                <div>
                    <label for="contact_list_id">Lista si aplica</label>
                    <select id="contact_list_id" name="contact_list_id">
                        <option value="0">Sin lista</option>
                        @foreach ($lists as $list)
                            <option value="{{ $list->id }}" @selected((int) old('contact_list_id') === (int) $list->id)>{{ $list->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="reason_manual">Motivo</label>
                    <select id="reason_manual" name="reason">
                        @foreach ($reasonOptions as $value => $label)
                            <option value="{{ $value }}" @selected(old('reason', 'manual_unsubscribe') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="notes">Notas</label>
                    <textarea id="notes" name="notes" rows="4">{{ old('notes') }}</textarea>
                </div>

                <button type="submit" class="button" data-loading-text="Guardando supresión...">Guardar supresión</button>
            </form>
        </section>

        <section class="card profile-card">
            <div class="stack" style="gap:6px;">
                <span class="chip" style="width:max-content;">Import CSV</span>
                <h2>Importar supresiones</h2>
                <p>Sube un CSV de bajas o pega correos. El procesamiento queda en Imports con barra de avance y control por tandas.</p>
            </div>

            <form method="post" action="{{ route('imports.queueSuppressions') }}" enctype="multipart/form-data" class="stack" data-lock-on-submit>
                @csrf

                <div>
                    <label for="scope_import">Alcance</label>
                    <select id="scope_import" name="scope">
                        <option value="organization" @selected(old('scope', 'organization') === 'organization')>Global: no enviar marketing</option>
                        <option value="list" @selected(old('scope') === 'list')>Solo una lista</option>
                    </select>
                </div>

                <div>
                    <label for="suppression_import_list_id">Lista si aplica</label>
                    <select id="suppression_import_list_id" name="contact_list_id">
                        <option value="0">Sin lista</option>
                        @foreach ($lists as $list)
                            <option value="{{ $list->id }}" @selected((int) old('contact_list_id') === (int) $list->id)>{{ $list->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="reason_import">Motivo</label>
                    <select id="reason_import" name="reason">
                        @foreach ($reasonOptions as $value => $label)
                            <option value="{{ $value }}" @selected(old('reason', 'imported_unsubscribe') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="csv_file">Archivo CSV</label>
                    <input id="csv_file" name="csv_file" type="file" accept=".csv,text/csv">
                </div>

                <div>
                    <label for="suppression_csv_text">O pega correos</label>
                    <textarea id="suppression_csv_text" name="csv_text" rows="7" placeholder="email&#10;cliente1@example.com&#10;cliente2@example.com">{{ old('csv_text') }}</textarea>
                </div>

                <button type="submit" class="button" data-loading-text="Preparando supresiones...">Preparar import de supresiones</button>
            </form>
        </section>
        </aside>
    </section>
@endsection