@extends('admin.layouts.app')

@section('title', __('admin.notification_logs_admin.show_title') . ' #' . $log->id . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.notification_logs_admin.show_title'))

@php
    use App\Models\NotificationLog;
    $dash = '—';

    $channelLabel = trans()->has('admin.notification_logs_admin.channels.' . $log->channel)
        ? __('admin.notification_logs_admin.channels.' . $log->channel)
        : $log->channel;
    $statusLabel = trans()->has('admin.notification_logs_admin.statuses.' . $log->status)
        ? __('admin.notification_logs_admin.statuses.' . $log->status)
        : $log->status;

    $statusColor = match ($log->status) {
        NotificationLog::STATUS_SENT    => ['fg' => '#065f46', 'bg' => '#d1fae5'],
        NotificationLog::STATUS_FAILED  => ['fg' => '#991b1b', 'bg' => '#fee2e2'],
        NotificationLog::STATUS_PENDING => ['fg' => '#92400e', 'bg' => '#fef3c7'],
        default => ['fg' => '#475569', 'bg' => '#f1f5f9'],
    };

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

@section('content')
    <x-admin.page-header
        :title="__('admin.notification_logs_admin.show_title') . ' #' . $log->id"
        :subtitle="$channelLabel . ' — ' . $statusLabel">
        <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 ────── --}}
        <div class="nl-card">
            <div class="nl-summary">
                <div class="nl-summary__status" style="background:{{ $statusColor['bg'] }}; color:{{ $statusColor['fg'] }};">
                    @if ($log->status === NotificationLog::STATUS_SENT)   ✓
                    @elseif ($log->status === NotificationLog::STATUS_FAILED) ✗
                    @else ⏳ @endif
                </div>
                <div class="nl-summary__body">
                    <h3 class="nl-summary__title">{{ $channelLabel }} · {{ $statusLabel }}</h3>
                    <p class="nl-summary__sub muted">
                        {{ optional($log->created_at)->format('Y-m-d H:i:s') }}
                        @if ($log->sent_at)
                            · sent {{ $log->sent_at->format('H:i:s') }} ({{ $log->sent_at->diffForHumans() }})
                        @endif
                    </p>
                </div>
                <div class="nl-summary__addr">
                    <code>{{ $log->address ?: '—' }}</code>
                </div>
            </div>
        </div>

        {{-- ────── Error block (only when failed) ────── --}}
        @if ($log->status === NotificationLog::STATUS_FAILED && ($log->error || $log->error_code))
            <div class="nl-card nl-card--err">
                <h4 class="nl-card-head">{{ __('admin.notification_logs_admin.fields.error') }}</h4>
                @if ($log->error_code)
                    <div class="nl-error-code">{{ $log->error_code }}</div>
                @endif
                @if ($log->error)
                    <pre class="nl-raw">{{ $log->error }}</pre>
                @endif
            </div>
        @endif

        {{-- ────── Two-column grid: recipient / change / admin ────── --}}
        <div class="nl-grid">
            <div class="nl-card">
                <h4 class="nl-card-head">👤 {{ __('admin.notification_logs_admin.fields.recipient') }}</h4>
                <dl class="kv-list">
                    <dt>{{ __('admin.notification_logs_admin.fields.recipient_type') }}</dt>
                    <dd>
                        <code>{{ class_basename($log->recipient_type) }}#{{ $log->recipient_id }}</code>
                        @if ($log->recipient && $recipientUrl)
                            <div style="margin-top:6px;">
                                <a href="{{ $recipientUrl }}" class="btn-link">{{ $log->recipient->name ?? '#'.$log->recipient_id }}</a>
                            </div>
                        @endif
                    </dd>
                    <dt>{{ __('admin.notification_logs_admin.fields.address') }}</dt>
                    <dd><code>{{ $log->address ?: $dash }}</code></dd>
                </dl>
            </div>

            <div class="nl-card">
                <h4 class="nl-card-head">🔁 {{ __('admin.notification_logs_admin.fields.change') }}</h4>
                <dl class="kv-list">
                    <dt>{{ __('admin.notification_logs_admin.fields.triggered_event') }}</dt>
                    <dd>{{ $log->triggered_event ?: $dash }}</dd>
                    <dt>{{ __('admin.notification_logs_admin.fields.label_key') }}</dt>
                    <dd><code>{{ $log->label_key ?: $dash }}</code></dd>
                    <dt>{{ __('admin.notification_logs_admin.fields.old_value') }}</dt>
                    <dd>{{ $log->old_value ?: $dash }}</dd>
                    <dt>{{ __('admin.notification_logs_admin.fields.new_value') }}</dt>
                    <dd><strong>{{ $log->new_value ?: $dash }}</strong></dd>
                </dl>
            </div>

            <div class="nl-card">
                <h4 class="nl-card-head">🛡️ {{ __('admin.notification_logs_admin.fields.admin') }}</h4>
                <dl class="kv-list">
                    <dt>{{ __('admin.notification_logs_admin.fields.admin') }}</dt>
                    <dd>
                        @if ($log->admin)
                            <strong>{{ $log->admin->name }}</strong>
                            <small class="muted" style="display:block;">{{ $log->admin->email }}</small>
                        @else
                            <span class="muted">{{ $dash }}</span>
                        @endif
                    </dd>
                </dl>
            </div>

            <div class="nl-card">
                <h4 class="nl-card-head">🕒 {{ __('admin.notification_logs_admin.fields.timestamps') }}</h4>
                <dl class="kv-list">
                    <dt>{{ __('admin.notification_logs_admin.fields.created_at') }}</dt>
                    <dd>{{ optional($log->created_at)->format('Y-m-d H:i:s') ?: $dash }}</dd>
                    <dt>{{ __('admin.notification_logs_admin.fields.sent_at') }}</dt>
                    <dd>{{ optional($log->sent_at)->format('Y-m-d H:i:s') ?: $dash }}</dd>
                </dl>
            </div>
        </div>

        {{-- ────── Payload (the option / event context the listener wrote) ────── --}}
        @if (! empty($log->payload))
            <div class="nl-card">
                <h4 class="nl-card-head">📦 {{ __('admin.notification_logs_admin.fields.payload') }}</h4>
                <pre class="nl-raw">{{ json_encode($log->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        @endif

        {{-- ────── Provider response — useful for debugging delivery ────── --}}
        @if (! empty($log->response))
            <div class="nl-card">
                <h4 class="nl-card-head">📡 {{ __('admin.notification_logs_admin.fields.response') }}</h4>
                <pre class="nl-raw">{{ json_encode($log->response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        @endif
    </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--err { background: #fef2f2; border-color: #fecaca; }
        .nl-card-head {
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 700;
            color: var(--na-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .nl-summary {
            display: grid;
            grid-template-columns: 56px 1fr auto;
            gap: 14px;
            align-items: center;
        }
        .nl-summary__status {
            width: 56px; height: 56px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 700;
        }
        .nl-summary__title { margin: 0; font-size: 18px; }
        .nl-summary__sub   { margin: 4px 0 0; font-size: 13px; }
        .nl-summary__addr code { font-size: 13px; color: var(--na-text, #0f172a); }

        .nl-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        @media (max-width: 900px) { .nl-grid { grid-template-columns: 1fr; } }

        .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; }

        .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);
        }
    </style>
    @endpush
@endsection