@extends('admin.layouts.app')

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

@php
    use App\Models\NotificationLog;

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

    // The aggregated header is built off the first row — every row in the
    // event shares the same recipient / action / admin / triggering event.
    $head = $rows->first();

    $newOptName = optional($head->newOption)->{$nameField} ?: optional($head->newOption)->name_en;
    $oldOptName = optional($head->oldOption)->{$nameField} ?: optional($head->oldOption)->name_en;

    $recipientUrl = null;
    if ($head->recipient_type === \App\Models\Investor::class && $head->recipient_id) {
        $recipientUrl = route('admin.investors.show', $head->recipient_id);
    } elseif ($head->recipient_type === \App\Models\Startup::class && $head->recipient_id) {
        $recipientUrl = route('admin.startups.show', $head->recipient_id);
    }

    $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')],
    ];
    $statusMeta = [
        NotificationLog::STATUS_PENDING => ['fg' => '#92400e', 'bg' => '#fef3c7', 'label' => __('admin.notification_logs_admin.statuses.pending'), 'glyph' => '⏳'],
        NotificationLog::STATUS_SENT    => ['fg' => '#065f46', 'bg' => '#d1fae5', 'label' => __('admin.notification_logs_admin.statuses.sent'),    'glyph' => '✓'],
        NotificationLog::STATUS_FAILED  => ['fg' => '#991b1b', 'bg' => '#fee2e2', 'label' => __('admin.notification_logs_admin.statuses.failed'),  'glyph' => '✗'],
    ];
@endphp

@section('content')
    <x-admin.page-header
        :title="__('admin.notification_logs_admin.event_title')"
        :subtitle="__('admin.notification_logs_admin.event_subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.notification-logs.index') }}" class="btn-secondary">{{ __('admin.notification_logs_admin.back_to_list') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    <div class="nl-detail">

        {{-- ────── Summary card: action + recipient + counters ────── --}}
        <div class="nl-card">
            <div class="nl-event-head">
                <div class="nl-event-head__main">
                    <div class="nl-event-head__line muted" style="margin-bottom:6px;">
                        🔁 {{ $head->triggered_event ?: $dash }}
                        @if ($head->label_key)
                            · <code style="font-size:12px;">{{ $head->label_key }}</code>
                        @endif
                    </div>
                    <h2 class="nl-event-head__title">
                        @if ($newOptName)
                            {{ $newOptName }}
                        @else
                            {{ $head->new_value ?: $dash }}
                        @endif
                    </h2>
                    @if ($oldOptName || $head->old_value)
                        <p class="nl-event-head__sub muted">
                            {{ $oldOptName ?: $head->old_value ?: $dash }}
                            <span style="color:#cbd5e1;">→</span>
                            <strong style="color:#0f172a;">{{ $newOptName ?: $head->new_value ?: $dash }}</strong>
                        </p>
                    @endif
                    <p class="nl-event-head__sub muted" style="margin-top:8px;">
                        👤
                        @if ($head->recipient && $recipientUrl)
                            <a href="{{ $recipientUrl }}" class="btn-link"><strong>{{ $head->recipient->name ?? '#'.$head->recipient_id }}</strong></a>
                        @else
                            <strong>{{ optional($head->recipient)->name ?? '#'.$head->recipient_id }}</strong>
                        @endif
                        <span style="color:#94a3b8;">({{ class_basename($head->recipient_type) }}#{{ $head->recipient_id }})</span>
                        · 🕒 {{ optional($summary['occurred_at'])->format('Y-m-d H:i:s') }}
                        @if ($head->admin)
                            · 🛡️ {{ $head->admin->name }}
                        @endif
                    </p>
                </div>
                <div class="nl-event-head__counters">
                    <div class="nl-counter-mini">
                        <div class="nl-counter-mini__num">{{ $summary['channel_count'] }}</div>
                        <div class="nl-counter-mini__lbl">{{ __('admin.notification_logs_admin.fields.channels') }}</div>
                    </div>
                    <div class="nl-counter-mini nl-counter-mini--ok">
                        <div class="nl-counter-mini__num">{{ $summary['sent_count'] }}</div>
                        <div class="nl-counter-mini__lbl">{{ __('admin.notification_logs_admin.counters.sent') }}</div>
                    </div>
                    <div class="nl-counter-mini nl-counter-mini--err">
                        <div class="nl-counter-mini__num">{{ $summary['failed_count'] }}</div>
                        <div class="nl-counter-mini__lbl">{{ __('admin.notification_logs_admin.counters.failed') }}</div>
                    </div>
                    @if ($summary['pending_count'] > 0)
                        <div class="nl-counter-mini nl-counter-mini--wait">
                            <div class="nl-counter-mini__num">{{ $summary['pending_count'] }}</div>
                            <div class="nl-counter-mini__lbl">{{ __('admin.notification_logs_admin.counters.pending') }}</div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="nl-event-head__meta">
                <small class="muted">{{ __('admin.notification_logs_admin.fields.event_id') }}: <code style="font-size:11px;">{{ $eventId }}</code></small>
            </div>
        </div>

        {{-- ────── Per-channel breakdown ────── --}}
        <div class="nl-card">
            <h4 class="nl-card-head">
                📡 {{ __('admin.notification_logs_admin.fields.channel_results') }}
                <small class="muted" style="font-weight:500; text-transform:none; letter-spacing:0; margin-inline-start:8px;">
                    {{ __('admin.notification_logs_admin.channel_results_subtitle', ['count' => $summary['channel_count']]) }}
                </small>
            </h4>

            <div class="nl-channels">
                @foreach ($rows as $row)
                    @php
                        $cm = $channelMeta[$row->channel] ?? ['icon' => '•', 'fg' => '#475569', 'bg' => '#f1f5f9', 'label' => $row->channel];
                        $sm = $statusMeta[$row->status]   ?? ['fg' => '#475569', 'bg' => '#f1f5f9', 'label' => $row->status, 'glyph' => '•'];
                    @endphp
                    <div class="nl-channel" data-status="{{ $row->status }}">
                        <div class="nl-channel__head">
                            <span class="nl-pill" style="--fg:{{ $cm['fg'] }}; --bg:{{ $cm['bg'] }};">
                                {{ $cm['icon'] }} {{ $cm['label'] }}
                            </span>
                            <span class="nl-pill" style="--fg:{{ $sm['fg'] }}; --bg:{{ $sm['bg'] }};">
                                {{ $sm['glyph'] }} {{ $sm['label'] }}
                            </span>
                            @if ($row->sent_at)
                                <small class="muted" style="margin-inline-start:auto;">
                                    {{ $row->sent_at->format('Y-m-d H:i:s') }} · {{ $row->sent_at->diffForHumans() }}
                                </small>
                            @endif
                        </div>

                        <dl class="kv-list kv-list--inline">
                            <dt>{{ __('admin.notification_logs_admin.fields.address') }}</dt>
                            <dd><code>{{ $row->address ?: $dash }}</code></dd>
                        </dl>

                        @if ($row->status === NotificationLog::STATUS_FAILED && ($row->error || $row->error_code))
                            <div class="nl-channel__err">
                                @if ($row->error_code)
                                    <span class="nl-error-code">{{ $row->error_code }}</span>
                                @endif
                                @if ($row->error)
                                    <pre class="nl-raw nl-raw--sm">{{ $row->error }}</pre>
                                @endif
                            </div>
                        @endif

                        @if (! empty($row->payload))
                            <details class="nl-channel__details">
                                <summary>📦 {{ __('admin.notification_logs_admin.fields.payload') }}</summary>
                                <pre class="nl-raw nl-raw--sm">{{ json_encode($row->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                            </details>
                        @endif

                        @if (! empty($row->response))
                            <details class="nl-channel__details">
                                <summary>📡 {{ __('admin.notification_logs_admin.fields.response') }}</summary>
                                <pre class="nl-raw nl-raw--sm">{{ json_encode($row->response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                            </details>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @push('styles')
    <style>
        .nl-detail { display: grid; gap: 16px; }
        .nl-card {
            background: #fff;
            border: 1px solid var(--na-border, #e5e7eb);
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 1px 2px rgba(15,23,42,.04);
        }
        .nl-card-head {
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 700;
            color: var(--na-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: .04em;
            display: flex; align-items: center;
        }

        .nl-event-head {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 16px;
            align-items: flex-start;
        }
        @media (max-width: 900px) { .nl-event-head { grid-template-columns: 1fr; } }
        .nl-event-head__title  { margin: 0; font-size: 22px; color: var(--na-text, #0f172a); }
        .nl-event-head__sub    { margin: 4px 0 0; font-size: 13px; }
        .nl-event-head__meta   { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--na-border, #e5e7eb); }
        .nl-event-head__counters {
            display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
        }

        .nl-counter-mini {
            min-width: 84px;
            background: #f8fafc;
            border: 1px solid var(--na-border, #e5e7eb);
            border-radius: 10px;
            padding: 10px 12px;
            text-align: center;
        }
        .nl-counter-mini__num { font-size: 22px; font-weight: 800; color: var(--na-text, #0f172a); line-height: 1; }
        .nl-counter-mini__lbl { font-size: 11px; color: var(--na-muted, #64748b); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
        .nl-counter-mini--ok   { background: #ecfdf5; border-color: #a7f3d0; }
        .nl-counter-mini--err  { background: #fef2f2; border-color: #fecaca; }
        .nl-counter-mini--wait { background: #fefce8; border-color: #fde68a; }

        .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-channels {
            display: grid; gap: 12px;
        }
        .nl-channel {
            border: 1px solid var(--na-border, #e5e7eb);
            border-radius: 10px;
            padding: 14px 16px;
            background: #fff;
        }
        .nl-channel[data-status="failed"]  { background: #fffafa; border-color: #fecaca; }
        .nl-channel[data-status="sent"]    { background: #fdfffd; border-color: #bbf7d0; }
        .nl-channel[data-status="pending"] { background: #fffbeb; border-color: #fde68a; }

        .nl-channel__head {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .nl-channel__err  { margin-top: 8px; }
        .nl-channel__details {
            margin-top: 10px;
        }
        .nl-channel__details summary {
            cursor: pointer;
            font-size: 12px;
            color: var(--na-muted, #64748b);
            font-weight: 600;
            padding: 4px 0;
        }

        .kv-list dt { font-size: 12px; color: var(--na-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
        .kv-list dd { margin: 2px 0 12px; color: var(--na-text, #0f172a); font-size: 14px; word-break: break-word; }
        .kv-list dd:last-child { margin-bottom: 0; }
        .kv-list--inline { display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline; }
        .kv-list--inline dt, .kv-list--inline dd { margin: 0; }

        .nl-error-code {
            display: inline-block;
            padding: 4px 10px;
            background: #fee2e2;
            color: #991b1b;
            font-family: monospace;
            font-size: 13px;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .nl-raw {
            background: #f8fafc;
            border: 1px solid var(--na-border, #e5e7eb);
            border-radius: 8px;
            padding: 12px 14px;
            font-family: 'SFMono-Regular', Consolas, monospace;
            font-size: 12px;
            line-height: 1.55;
            white-space: pre-wrap;
            word-break: break-all;
            margin: 0;
            max-height: 360px;
            overflow: auto;
            color: var(--na-text, #0f172a);
        }
        .nl-raw--sm { font-size: 11px; max-height: 240px; padding: 10px 12px; }
    </style>
    @endpush
@endsection