@extends('admin.layouts.app')

@section('title', __('admin.notification_logs_admin.list_title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.notification_logs_admin.list_title'))

@php
    use App\Models\NotificationLog;

    $filterKeys = ['type', 'channel', 'status', 'module', 'admin_id', 'recipient_type', 'from', 'to'];
    $activeFilters = collect($filterKeys)->filter(fn ($k) => filled(request($k)))->count();

    $locale     = app()->getLocale();
    $nameField  = $locale === 'ar' ? 'name_ar' : 'name_en';

    /** Channel display: icon + colour. */
    $channelMeta = [
        NotificationLog::CHANNEL_EMAIL    => ['icon' => '✉️',  'fg' => '#1d4ed8', 'bg' => '#dbeafe', 'label' => __('admin.notification_logs_admin.channels.email')],
        NotificationLog::CHANNEL_SMS      => ['icon' => '💬',  'fg' => '#7c2d12', 'bg' => '#fed7aa', 'label' => __('admin.notification_logs_admin.channels.sms')],
        NotificationLog::CHANNEL_WHATSAPP => ['icon' => '🟢',  'fg' => '#166534', 'bg' => '#bbf7d0', 'label' => __('admin.notification_logs_admin.channels.whatsapp')],
        NotificationLog::CHANNEL_PUSH     => ['icon' => '↑',   'fg' => '#0369a1', 'bg' => '#e0f2fe', 'label' => __('admin.notification_logs_admin.channels.push')],
        NotificationLog::CHANNEL_NOTIFICATION => ['icon' => '🔔', 'fg' => '#4338ca', 'bg' => '#e0e7ff', 'label' => __('admin.notification_logs_admin.channels.notification')],
    ];
@endphp

@section('content')
    <x-admin.page-header
        :title="__('admin.notification_logs_admin.list_title')"
        :subtitle="__('admin.notification_logs_admin.list_subtitle', ['count' => $events->total()])" />

    @include('admin.partials.flash')

    {{-- Bulk-retry form lives OUTSIDE the table so per-row action forms are
         never nested. Row checkboxes attach to it via the HTML5 `form=`
         attribute; their failed-row ids are injected on submit by JS. --}}
    <form id="nl-bulk-form" method="POST" action="{{ route('admin.notification-logs.bulk-retry') }}">
        @csrf
        <div id="nl-bulk-ids"></div>
    </form>

    {{-- ───────────── Summary counters ───────────── --}}
    <div class="nl-counters">
        <div class="nl-counter">
            <div class="nl-counter__num">{{ number_format($counters['events']) }}</div>
            <div class="nl-counter__label">{{ __('admin.notification_logs_admin.counters.events') }}</div>
        </div>
        <div class="nl-counter nl-counter--ok">
            <div class="nl-counter__num">{{ number_format($counters['sent']) }}</div>
            <div class="nl-counter__label">{{ __('admin.notification_logs_admin.counters.sent') }}</div>
        </div>
        <div class="nl-counter nl-counter--err">
            <div class="nl-counter__num">{{ number_format($counters['failed']) }}</div>
            <div class="nl-counter__label">{{ __('admin.notification_logs_admin.counters.failed') }}</div>
        </div>
        <div class="nl-counter nl-counter--wait">
            <div class="nl-counter__num">{{ number_format($counters['pending']) }}</div>
            <div class="nl-counter__label">{{ __('admin.notification_logs_admin.counters.pending') }}</div>
        </div>
    </div>

    <x-admin.list-toolbar
        :searchPlaceholder="__('admin.notification_logs_admin.search_placeholder')"
        :activeFilters="$activeFilters"
        filterTargetId="notif-logs-filter-bar" />

    <x-admin.filter-bar id="notif-logs-filter-bar">
        @foreach (request()->only(['q', 'sort', 'dir']) as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach

        <x-admin.form-select name="type" :label="__('admin.notification_logs_admin.fields.type')"
            :options="$eventTypes"
            :selected="request('type')" :placeholder="__('admin.filters.all')" />
        <x-admin.form-select name="channel" :label="__('admin.notification_logs_admin.fields.channel')"
            :options="collect($channels)->mapWithKeys(fn($c) => [$c => $channelMeta[$c]['label'] ?? $c])->toArray()"
            :selected="request('channel')" :placeholder="__('admin.filters.all')" />
        <x-admin.form-select name="status" :label="__('admin.notification_logs_admin.fields.status')"
            :options="collect($statuses)->mapWithKeys(fn($s) => [$s => __('admin.notification_logs_admin.statuses.' . $s)])->toArray()"
            :selected="request('status')" :placeholder="__('admin.filters.all')" />
        <x-admin.form-select name="module" :label="__('admin.notification_logs_admin.fields_extra.module')"
            :options="collect($modules)->mapWithKeys(fn($m) => [$m => __('admin.notification_logs_admin.modules.' . $m)])->toArray()"
            :selected="request('module')" :placeholder="__('admin.filters.all')" />
        <x-admin.form-select name="recipient_type" :label="__('admin.notification_logs_admin.fields.recipient_type')"
            :options="$recipientTypes"
            :selected="request('recipient_type')" :placeholder="__('admin.filters.all')" />
        <x-admin.form-input name="from" :label="__('admin.filters.created_from')" type="date" :value="request('from')" />
        <x-admin.form-input name="to"   :label="__('admin.filters.created_to')"   type="date" :value="request('to')" />
    </x-admin.filter-bar>

    <div class="card card-table">
        @if ($events->isEmpty())
            <x-admin.empty-state
                :title="__('admin.notification_logs_admin.empty_title')"
                :message="__('admin.notification_logs_admin.empty_message')" />
        @else
            {{-- Bulk action bar — appears when failed rows exist on the page. --}}
            <div class="nl-bulk-bar">
                <label class="nl-bulk-select-all">
                    <input type="checkbox" id="nl-check-all">
                    {{ __('admin.notification_logs_admin.retry.select_all') }}
                </label>
                <button type="submit" form="nl-bulk-form" class="btn btn-sm btn-primary" id="nl-bulk-retry-btn" disabled>
                    ↻ {{ __('admin.notification_logs_admin.retry.bulk_retry') }} (<span id="nl-bulk-count">0</span>)
                </button>
                <span class="nl-bulk-hint muted">{{ __('admin.notification_logs_admin.retry.test_send_hint') }}</span>
            </div>
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th style="width:32px;"></th>
                            <th>{{ __('admin.notification_logs_admin.fields.occurred_at') }}</th>
                            <th>{{ __('admin.notification_logs_admin.fields.action') }}</th>
                            <th>{{ __('admin.notification_logs_admin.fields.recipient') }}</th>
                            <th>{{ __('admin.notification_logs_admin.fields.channels') }}</th>
                            <th>{{ __('admin.notification_logs_admin.fields.summary') }}</th>
                            <th>{{ __('admin.notification_logs_admin.fields.admin') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($events as $event)
                            @php
                                $detailUrl = $event->event_id
                                    ? route('admin.notification-logs.event', $event->event_id)
                                    : route('admin.notification-logs.show', $event->first_id);

                                // occurred_at comes back as a string from MAX(created_at) — cast for display.
                                $when = $event->occurred_at ? \Illuminate\Support\Carbon::parse($event->occurred_at) : null;

                                $newOptName = $event->new_option?->{$nameField} ?: $event->new_option?->name_en;
                                $oldOptName = $event->old_option?->{$nameField} ?: $event->old_option?->name_en;

                                // Automation dispatches stamp triggered_event as
                                // 'automation:<trigger>'; label-option changes don't.
                                $isAutomation = \Illuminate\Support\Str::startsWith((string) $event->triggered_event, 'automation:');
                                $autoTrigger  = $isAutomation
                                    ? \Illuminate\Support\Str::after((string) $event->triggered_event, 'automation:')
                                    : null;

                                // Failed/undelivered channel-row ids in this event — the
                                // exact rows a retry should re-fire (one per failed channel).
                                $failedIds = collect(explode(',', (string) $event->failed_ids_csv))
                                    ->filter(fn ($v) => $v !== '' && $v !== null)
                                    ->map(fn ($v) => (int) $v)
                                    ->values();
                                $hasFailures = $failedIds->isNotEmpty();
                                $firstFailedId = $failedIds->first();

                                $recipient     = $event->recipient_model;
                                $recipientName = $recipient->name ?? '#'.$event->recipient_id;
                                $recipientUrl  = null;
                                if ($event->recipient_type === \App\Models\Investor::class && $event->recipient_id) {
                                    $recipientUrl = route('admin.investors.show', $event->recipient_id);
                                } elseif ($event->recipient_type === \App\Models\Startup::class && $event->recipient_id) {
                                    $recipientUrl = route('admin.startups.show', $event->recipient_id);
                                }
                            @endphp
                            <tr class="row-clickable" data-href="{{ $detailUrl }}" style="cursor:pointer;">
                                <td>
                                    @if ($hasFailures)
                                        <input type="checkbox" class="nl-row-check"
                                               data-ids="{{ $failedIds->implode(',') }}"
                                               onclick="event.stopPropagation();">
                                    @endif
                                </td>
                                <td class="muted">
                                    @if ($when)
                                        {{ $when->format('Y-m-d H:i:s') }}
                                        <small style="display:block; color:#94a3b8;">{{ $when->diffForHumans() }}</small>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>
                                    @if ($isAutomation)
                                        {{-- Automation dispatch — name lives in new_value. --}}
                                        <span class="nl-type-badge nl-type-badge--auto">{{ __('admin.notification_logs_admin.types.automation') }}</span>
                                        <strong style="display:block; margin-top:3px;">
                                            {{ $event->new_value ?: __('admin.notification_logs_admin.types.automation') }}
                                        </strong>
                                        @if ($autoTrigger)
                                            <small style="display:block; color:#64748b;">
                                                <code style="font-size:11px;">{{ $autoTrigger }}</code>
                                            </small>
                                        @endif
                                    @else
                                        {{-- Label-option change (Action). --}}
                                        <span class="nl-type-badge nl-type-badge--action">{{ __('admin.notification_logs_admin.types.action') }}</span>
                                        @if ($newOptName)
                                            <strong style="display:block; margin-top:3px;">{{ $newOptName }}</strong>
                                        @else
                                            <span class="muted">—</span>
                                        @endif
                                        @if ($event->label_key)
                                            <small style="display:block; color:#64748b;">
                                                <code style="font-size:11px;">{{ $event->label_key }}</code>
                                            </small>
                                        @endif
                                        @if ($oldOptName)
                                            <small style="display:block; color:#94a3b8;">
                                                {{ $oldOptName }} <span style="color:#cbd5e1;">→</span> <strong style="color:#0f172a;">{{ $newOptName }}</strong>
                                            </small>
                                        @endif
                                    @endif
                                </td>
                                <td>
                                    @if ($recipientUrl)
                                        <a href="{{ $recipientUrl }}" class="btn-link" onclick="event.stopPropagation();"><strong>{{ $recipientName }}</strong></a>
                                    @else
                                        <strong>{{ $recipientName }}</strong>
                                    @endif
                                    <small style="display:block; color:#64748b;">{{ class_basename($event->recipient_type) }}#{{ $event->recipient_id }}</small>
                                </td>
                                <td>
                                    <div class="nl-chan-cluster">
                                        @foreach ($event->channels_list as $ch)
                                            @php $cm = $channelMeta[$ch] ?? ['icon' => '•', 'fg' => '#475569', 'bg' => '#f1f5f9', 'label' => $ch]; @endphp
                                            <span class="nl-pill nl-pill--sm" title="{{ $cm['label'] }}" style="--fg:{{ $cm['fg'] }}; --bg:{{ $cm['bg'] }};">
                                                {{ $cm['icon'] }} {{ $cm['label'] }}
                                            </span>
                                        @endforeach
                                    </div>
                                </td>
                                <td>
                                    <div class="nl-result-cluster">
                                        @if ((int) $event->sent_count > 0)
                                            <span class="nl-pill nl-pill--sm" style="--fg:#065f46; --bg:#d1fae5;">
                                                ✓ {{ $event->sent_count }} {{ __('admin.notification_logs_admin.counters.sent') }}
                                            </span>
                                        @endif
                                        @if ((int) $event->failed_count > 0)
                                            <span class="nl-pill nl-pill--sm" style="--fg:#991b1b; --bg:#fee2e2;">
                                                ✗ {{ $event->failed_count }} {{ __('admin.notification_logs_admin.counters.failed') }}
                                            </span>
                                        @endif
                                        @if ((int) $event->pending_count > 0)
                                            <span class="nl-pill nl-pill--sm" style="--fg:#92400e; --bg:#fef3c7;">
                                                ⏳ {{ $event->pending_count }} {{ __('admin.notification_logs_admin.counters.pending') }}
                                            </span>
                                        @endif
                                        @if ((int) $event->sent_count === 0 && (int) $event->failed_count === 0 && (int) $event->pending_count === 0)
                                            <span class="muted">—</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if ($event->admin_actor)
                                        <small>{{ $event->admin_actor->name }}</small>
                                    @else
                                        <small class="muted">—</small>
                                    @endif
                                </td>
                                <td>
                                    <div class="nl-actions" onclick="event.stopPropagation();">
                                        <a href="{{ $detailUrl }}" class="btn-link">{{ __('admin.actions.view') ?? 'View' }}</a>
                                        @if ($hasFailures)
                                            {{-- Retry every failed channel of this event (each row
                                                 on its OWN channel — already-sent channels untouched). --}}
                                            <form method="POST" action="{{ route('admin.notification-logs.bulk-retry') }}" class="nl-inline-form">
                                                @csrf
                                                @foreach ($failedIds as $fid)
                                                    <input type="hidden" name="ids[]" value="{{ $fid }}">
                                                @endforeach
                                                <button type="submit" class="btn btn-xs btn-soft-primary"
                                                        title="{{ __('admin.notification_logs_admin.retry.retry') }}">
                                                    ↻ {{ __('admin.notification_logs_admin.retry.retry') }}
                                                </button>
                                            </form>
                                            {{-- Validation send to the test recipients (reference: first failed row). --}}
                                            <form method="POST" action="{{ route('admin.notification-logs.test', $firstFailedId) }}" class="nl-inline-form">
                                                @csrf
                                                <button type="submit" class="btn btn-xs btn-soft"
                                                        title="{{ __('admin.notification_logs_admin.retry.test_send_hint') }}">
                                                    🧪 {{ __('admin.notification_logs_admin.retry.test_send') }}
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $events->links() }}</div>
        @endif
    </div>

    @push('styles')
    <style>
        .nl-counters {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        @media (max-width: 720px) { .nl-counters { grid-template-columns: repeat(2, 1fr); } }
        .nl-counter {
            background: #fff;
            border: 1px solid var(--na-border, #e5e7eb);
            border-radius: 12px;
            padding: 14px 16px;
        }
        .nl-counter__num  { font-size: 24px; font-weight: 700; color: var(--na-text, #0f172a); line-height: 1.1; }
        .nl-counter__label{ font-size: 12px; color: var(--na-muted, #64748b); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
        .nl-counter--ok   { background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%); }
        .nl-counter--err  { background: linear-gradient(180deg, #fef2f2 0%, #fff 60%); }
        .nl-counter--wait { background: linear-gradient(180deg, #fefce8 0%, #fff 60%); }

        .nl-pill {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 3px 10px; border-radius: 999px;
            font-size: 12px; font-weight: 600;
            background: var(--bg); color: var(--fg);
            white-space: nowrap;
        }
        .nl-pill--sm { font-size: 11px; padding: 2px 8px; }

        .nl-chan-cluster,
        .nl-result-cluster {
            display: flex; flex-wrap: wrap; gap: 4px;
            align-items: center;
        }

        /* Event-type badge — distinguishes Action vs Automation rows. */
        .nl-type-badge {
            display: inline-block;
            padding: 1px 8px;
            border-radius: 999px;
            font-size: 10px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .04em;
        }
        .nl-type-badge--action { background: #e0e7ff; color: #4338ca; }
        .nl-type-badge--auto   { background: #ede9fe; color: #6d28d9; }

        /* Bulk action bar above the table. */
        .nl-bulk-bar {
            display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            padding: 10px 14px; border-bottom: 1px solid var(--na-border, #e5e7eb);
            background: #fafafa;
        }
        .nl-bulk-select-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
        .nl-bulk-hint { font-size: 12px; }

        /* Per-row action cluster — keeps View / Retry / Test on one line. */
        .nl-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .nl-inline-form { display: inline; margin: 0; }

        .btn-xs {
            font-size: 11px; padding: 3px 8px; border-radius: 7px;
            border: 1px solid transparent; cursor: pointer; font-weight: 600;
            line-height: 1.2; white-space: nowrap;
        }
        .btn-soft-primary { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
        .btn-soft-primary:hover { background: #dbeafe; }
        .btn-soft { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
        .btn-soft:hover { background: #e2e8f0; }
        .btn-sm { font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
        .btn-sm:disabled { opacity: .5; cursor: not-allowed; }
    </style>
    @endpush

    <script>
        document.addEventListener('click', function (e) {
            const row = e.target.closest('tr.row-clickable');
            if (!row) return;
            if (e.target.closest('a, button, input, select, form, .nl-actions')) return;
            const href = row.dataset.href;
            if (href) window.location.href = href;
        });

        // ── Bulk retry wiring ────────────────────────────────────────────
        (function () {
            const checks    = Array.from(document.querySelectorAll('.nl-row-check'));
            const checkAll  = document.getElementById('nl-check-all');
            const bulkBtn   = document.getElementById('nl-bulk-retry-btn');
            const bulkCount = document.getElementById('nl-bulk-count');
            const bulkForm  = document.getElementById('nl-bulk-form');
            const idsBox    = document.getElementById('nl-bulk-ids');
            if (!bulkForm) return;

            function refresh() {
                const selected = checks.filter(c => c.checked);
                if (bulkCount) bulkCount.textContent = String(selected.length);
                if (bulkBtn)   bulkBtn.disabled = selected.length === 0;
                if (checkAll)  checkAll.checked = checks.length > 0 && selected.length === checks.length;
            }

            checks.forEach(c => c.addEventListener('change', refresh));
            if (checkAll) {
                checkAll.addEventListener('change', function () {
                    checks.forEach(c => { c.checked = checkAll.checked; });
                    refresh();
                });
            }

            // On submit, expand each checked event's failed-row ids into
            // hidden ids[] inputs so the controller retries every failed
            // channel — not just one per event.
            bulkForm.addEventListener('submit', function () {
                idsBox.innerHTML = '';
                const seen = new Set();
                checks.filter(c => c.checked).forEach(c => {
                    (c.dataset.ids || '').split(',').forEach(id => {
                        id = id.trim();
                        if (!id || seen.has(id)) return;
                        seen.add(id);
                        const input = document.createElement('input');
                        input.type  = 'hidden';
                        input.name  = 'ids[]';
                        input.value = id;
                        idsBox.appendChild(input);
                    });
                });
            });

            refresh();
        })();
    </script>
@endsection