@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-xl-row justify-content-between align-items-xl-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">Notification Center</h3>
                <p class="text-muted mb-0">Pusat distribusi event, inbox internal, dan webhook log untuk operasional Smart City, mobile gateway, dan integrasi lintas aplikasi.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach ($quickLinks as $link)
                    @if ($link['route'])
                        <a href="{{ $link['route'] }}" class="btn btn-outline-primary btn-sm">{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($summaryCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 notif-card notif-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="notif-icon bg-{{ $card['accent'] }}-subtle text-{{ $card['accent'] }}">
                                <i class="{{ $card['icon'] }}"></i>
                            </div>
                            <div class="display-6 fw-semibold mt-3">{{ number_format($card['value']) }}</div>
                            <h5 class="mt-2 mb-1">{{ $card['title'] }}</h5>
                            <p class="text-muted mb-0">{{ $card['description'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-3">
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Broadcast Manual</h5>
                        <p class="text-muted mb-0">Pakai untuk pemberitahuan operasional, inbox internal, atau webhook integrasi.</p>
                    </div>
                    <div class="card-body pt-2">
                        <form method="POST" action="{{ route('admin.smart_city.notifications.broadcast') }}" class="row g-3">
                            @csrf
                            <div class="col-12">
                                <label class="form-label">Judul</label>
                                <input type="text" class="form-control" name="title" value="{{ old('title') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Event Type</label>
                                <input type="text" class="form-control" name="event_type" value="{{ old('event_type', 'manual.broadcast') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Domain Type</label>
                                <input type="text" class="form-control" name="domain_type" value="{{ old('domain_type', 'smart_city') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Priority</label>
                                <select class="form-select" name="priority">
                                    @foreach (\App\Models\SmartCity\NotificationEvent::PRIORITIES as $priorityKey => $priorityLabel)
                                        <option value="{{ $priorityKey }}" @selected(old('priority', 'normal') === $priorityKey)>{{ $priorityLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Channel</label>
                                <select class="form-select" name="channel">
                                    @foreach (\App\Models\SmartCity\NotificationEvent::CHANNELS as $channelKey => $channelLabel)
                                        <option value="{{ $channelKey }}" @selected(old('channel', 'in_app') === $channelKey)>{{ $channelLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Pesan</label>
                                <textarea class="form-control" name="message" rows="4" required>{{ old('message') }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Target User</label>
                                <select class="form-select" name="user_ids[]" multiple size="5">
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}{{ $user->email ? ' · ' . $user->email : '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Target OPD</label>
                                <select class="form-select" name="organization_ids[]" multiple size="5">
                                    @foreach ($organizations as $organization)
                                        <option value="{{ $organization->id }}">{{ $organization->short_name ?: $organization->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Alamat Tambahan</label>
                                <textarea class="form-control" name="recipient_addresses_text" rows="2" placeholder="Pisahkan dengan enter atau koma">{{ old('recipient_addresses_text') }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Target URL Webhook</label>
                                <input type="url" class="form-control" name="target_url" value="{{ old('target_url', config('services.smart_city_gateway.default_webhook_url')) }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Payload JSON Opsional</label>
                                <textarea class="form-control" name="payload_json" rows="3" placeholder="{&quot;source&quot;:&quot;dashboard&quot;}">{{ old('payload_json') }}</textarea>
                            </div>
                            <div class="col-12 d-grid">
                                <button class="btn btn-primary" type="submit">Kirim Broadcast</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Event Terkini</h5>
                        <p class="text-muted mb-0">Semua event yang sudah masuk ke hub beserta hasil distribusinya.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Event</th>
                                        <th>Channel</th>
                                        <th>Status</th>
                                        <th>Recipients</th>
                                        <th>Diproses</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($events as $event)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $event->title }}</div>
                                                <div class="small text-muted">{{ $event->event_type }} · {{ $event->domain_type ?: 'general' }}</div>
                                            </td>
                                            <td>{{ $event->channel_label }}</td>
                                            <td><span class="badge bg-primary-subtle text-primary">{{ $event->status_label }}</span></td>
                                            <td>
                                                <div class="small text-muted">{{ $event->recipients->count() }} target</div>
                                                <div class="small">
                                                    {{ $event->recipients->take(2)->map(fn($recipient) => $recipient->user?->name ?: ($recipient->organization?->short_name ?: $recipient->recipient_address ?: 'Target'))->implode(', ') }}
                                                    @if ($event->recipients->count() > 2)
                                                        ...
                                                    @endif
                                                </div>
                                                <div class="small text-muted">
                                                    {{ $event->recipients->where('delivery_status', 'delivered')->count() }} terkirim ·
                                                    {{ $event->recipients->where('delivery_status', 'failed')->count() }} gagal ·
                                                    {{ $event->recipients->sum(fn($recipient) => (int) ($recipient->attempt_count ?? 0)) }} attempt
                                                </div>
                                            </td>
                                            <td>{{ optional($event->processed_at)->format('d M Y H:i') ?: '-' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">Belum ada event notifikasi.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3">
                            {{ $events->links() }}
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Webhook Log</h5>
                        <p class="text-muted mb-0">Catatan webhook outbound maupun inbound untuk integrasi mobile/PWA dan sistem luar.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Event Key</th>
                                        <th>Target</th>
                                        <th>Status</th>
                                        <th>Response</th>
                                        <th>Waktu</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($webhookLogs as $log)
                                        <tr>
                                            <td>{{ $log->event_key }}</td>
                                            <td class="small">{{ $log->target_url }}</td>
                                            <td><span class="badge bg-secondary-subtle text-secondary">{{ $log->status_label }}</span></td>
                                            <td>{{ $log->response_code ?: '-' }}</td>
                                            <td>{{ optional($log->attempted_at)->format('d M Y H:i') ?: '-' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">Belum ada log webhook.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .notif-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .notif-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08) !important;
        }

        .notif-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .notif-card-primary {
            border-top: 4px solid #0d6efd !important;
        }

        .notif-card-success {
            border-top: 4px solid #198754 !important;
        }

        .notif-card-warning {
            border-top: 4px solid #ffc107 !important;
        }

        .notif-card-danger {
            border-top: 4px solid #dc3545 !important;
        }
    </style>
@endsection