@extends('admin.layouts.app')

@section('title', $notification->title . ' — ' . __('admin.notification_center.title'))
@section('page_title', __('admin.notification_center.title'))

@php
    use App\Models\AdminNotification;

    $statusMeta = [
        AdminNotification::STATUS_DRAFT   => ['fg' => '#475569', 'bg' => '#f1f5f9'],
        AdminNotification::STATUS_SENDING => ['fg' => '#9a3412', 'bg' => '#ffedd5'],
        AdminNotification::STATUS_SENT    => ['fg' => '#047857', 'bg' => '#ecfdf5'],
        AdminNotification::STATUS_PARTIAL => ['fg' => '#92400e', 'bg' => '#fef3c7'],
        AdminNotification::STATUS_FAILED  => ['fg' => '#b91c1c', 'bg' => '#fef2f2'],
    ];
    $sm = $statusMeta[$notification->status] ?? $statusMeta['draft'];
@endphp

@push('styles')
<style>
    .nc-detail { max-width: 880px; margin: 16px auto 0; display: grid; gap: 18px; }
    .card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06); overflow: hidden; }
    .card-head { padding: 16px 22px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
    .card-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
    .nc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
    .nc-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
    .meta { display: grid; gap: 3px; }
    .meta__label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
    .meta__value { font-size: 14px; color: #0f172a; font-weight: 600; }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; }
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 12px; }
    .stat { border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; text-align: center; }
    .stat__num { font-size: 24px; font-weight: 800; color: #0f172a; }
    .stat__label { font-size: 11.5px; color: #64748b; margin-top: 2px; }
    .stat--sent .stat__num { color: #047857; }
    .stat--failed .stat__num { color: #b91c1c; }
    .stat--pending .stat__num { color: #9a3412; }
    .ch-stat { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f1f5f9; }
    .ch-stat__name { font-weight: 700; font-size: 13px; color: #0f172a; text-transform: capitalize; }
    .ch-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #f1f5f9; }
    .ch-bar__seg { height: 100%; }
    .ch-stat__legend { font-size: 11.5px; color: #64748b; margin-top: 5px; display: flex; gap: 12px; }
    .actions-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #fafbfc; border-top: 1px solid #f1f5f9; flex-wrap: wrap; }
    .btn-primary { background: #4f46e5; color: #fff; border: 0; border-radius: 10px; padding: 11px 24px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
    .btn-primary:hover { background: #4338ca; }
    .btn-ghost { background: transparent; color: #334155; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
    .btn-ghost:hover { background: #f1f5f9; }
    .btn-danger { background: transparent; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
    .btn-danger:hover { background: #fef2f2; }
    .inline-form { display: inline; }
    .body-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: #1e293b; white-space: pre-wrap; }
    .rc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .rc-table th, .rc-table td { text-align: start; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
    .rc-table th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
    .rc-table tbody tr:hover { background: #fafbff; }
    .rc-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    .rc-err { max-width: 320px; white-space: normal; color: #b91c1c; font-size: 12px; }
</style>
@endpush

@section('content')
    <x-admin.page-header :title="$notification->title" :subtitle="__('admin.notification_center.detail_subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.notification-center.index') }}" class="btn-ghost">{{ __('admin.notification_center.back') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="nc-detail">
        {{-- ── Summary ── --}}
        <div class="card">
            <div class="card-head">
                <h3>{{ __('admin.notification_center.summary') }}</h3>
                <span class="nc-badge" style="color: {{ $sm['fg'] }}; background: {{ $sm['bg'] }};">
                    <span class="nc-badge__dot" aria-hidden="true"></span>{{ __('admin.notification_center.status.' . $notification->status) }}
                </span>
            </div>
            <div class="card-body">
                <div class="meta-grid">
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.col.channels') }}</span>
                        <span class="meta__value">
                            @forelse (($notification->channels ?: []) as $c)
                                <span class="chip">{{ __('admin.notification_center.channels.' . $c) }}</span>
                            @empty
                                <span style="color:#b91c1c;">{{ __('admin.notification_center.errors.no_channels') }}</span>
                            @endforelse
                        </span>
                    </div>
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.col.audience') }}</span>
                        <span class="meta__value">{{ __('admin.notification_center.recipients_count', ['count' => $audienceTotal]) }}</span>
                    </div>
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.groups') }}</span>
                        <span class="meta__value">
                            <span class="chips">
                                @foreach ($notification->groups as $g)
                                    <span class="chip">{{ $g->name }}</span>
                                @endforeach
                            </span>
                        </span>
                    </div>
                    @if ($notification->scheduled_at)
                        @php $schedTz = $notification->timezone ?: 'UTC'; @endphp
                        <div class="meta">
                            <span class="meta__label">{{ __('admin.notification_center.scheduled_for') }}</span>
                            <span class="meta__value">
                                {{ $notification->scheduled_at->copy()->setTimezone($schedTz)->format('Y-m-d H:i') }}
                                <span style="color:#64748b; font-weight:500;">({{ $schedTz }})</span>
                            </span>
                        </div>
                    @endif
                    @if ($notification->sent_at)
                        <div class="meta">
                            <span class="meta__label">{{ __('admin.notification_center.sent_at') }}</span>
                            <span class="meta__value">{{ $notification->sent_at->format('Y-m-d H:i') }}</span>
                        </div>
                    @endif
                </div>

                @if (filled($notification->email_subject) || filled($notification->email_body))
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.channels.email') }}</span>
                        @if (filled($notification->email_subject))
                            <div style="font-weight:600; color:#0f172a; margin-bottom:4px;" dir="auto">{{ $notification->email_subject }}</div>
                        @endif
                        <div class="body-block" dir="auto">{!! nl2br(e(strip_tags($notification->email_body ?? ''))) !!}</div>
                    </div>
                @endif
                @if (filled($notification->sms_body))
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.channels.sms') }}</span>
                        <div class="body-block" dir="auto">{{ $notification->sms_body }}</div>
                    </div>
                @endif
                @if (filled($notification->whatsapp_template_id))
                    <div class="meta">
                        <span class="meta__label">{{ __('admin.notification_center.channels.whatsapp') }}</span>
                        <div class="body-block" dir="auto">{{ $notification->whatsapp_template_id }}</div>
                    </div>
                @endif
            </div>

            <div class="actions-bar" id="retry">
                @php
                    $ncSendBtn = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></svg>';
                @endphp
                @if ($notification->isDraft())
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.destroy', $notification) }}"
                          onsubmit="return confirm('{{ __('admin.notification_center.confirm.delete') }}');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn-danger">{{ __('admin.actions.delete') }}</button>
                    </form>
                    <a href="{{ route('admin.notification-center.edit', $notification) }}" class="btn-ghost">{{ __('admin.actions.edit') }}</a>
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.send', $notification) }}"
                          onsubmit="return confirm('{{ __('admin.notification_center.confirm.send', ['count' => $audienceTotal]) }}');">
                        @csrf
                        <button type="submit" class="btn-primary">{!! $ncSendBtn !!} {{ __('admin.notification_center.send_now') }}</button>
                    </form>
                @elseif ($notification->isScheduled())
                    {{-- Pending scheduled broadcast: editable, cancellable, and can
                         be sent earlier — all reuse the same engine + atomic claim. --}}
                    <a href="{{ route('admin.notification-center.edit', $notification) }}" class="btn-ghost">{{ __('admin.actions.edit') }}</a>
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.duplicate', $notification) }}">
                        @csrf
                        <button type="submit" class="btn-ghost">{{ __('admin.notification_center.duplicate') }}</button>
                    </form>
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.cancel', $notification) }}"
                          onsubmit="return confirm('{{ __('admin.notification_center.confirm.cancel') }}');">
                        @csrf
                        <button type="submit" class="btn-danger">{{ __('admin.notification_center.cancel_action') }}</button>
                    </form>
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.send', $notification) }}"
                          onsubmit="return confirm('{{ __('admin.notification_center.confirm.send_now_scheduled', ['count' => $audienceTotal]) }}');">
                        @csrf
                        <button type="submit" class="btn-primary">{!! $ncSendBtn !!} {{ __('admin.notification_center.send_now') }}</button>
                    </form>
                @elseif ($notification->isCancelled())
                    {{-- Cancelled: read-only; duplicate to send again. --}}
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.duplicate', $notification) }}">
                        @csrf
                        <button type="submit" class="btn-ghost">{{ __('admin.notification_center.duplicate') }}</button>
                    </form>
                @else
                    <form class="inline-form" method="POST" action="{{ route('admin.notification-center.duplicate', $notification) }}">
                        @csrf
                        <button type="submit" class="btn-ghost">{{ __('admin.notification_center.duplicate') }}</button>
                    </form>
                    {{-- SAME Smart-Retry modal + planner + dry-run used by Demo pages
                         (the shared component). Automation-only filters are hidden
                         because a broadcast is a single source targeting investors. --}}
                    <x-admin.retry-notifications
                        :preview-url="route('admin.notification-center.retry.preview', $notification)"
                        :execute-url="route('admin.notification-center.retry', $notification)"
                        entity-type="notification"
                        :entity-id="$notification->id"
                        :entity-title="$notification->title"
                        :entity-label="__('admin.notification_center.entity_label')"
                        :show-automation-type="false"
                        :show-audience="false"
                        :show-not-confirmed="false" />
                @endif
            </div>
        </div>

        {{-- ── Delivery stats (only once sent) ── --}}
        @if ($stats)
            <div class="card">
                <div class="card-head"><h3>{{ __('admin.notification_center.delivery') }}</h3></div>
                <div class="card-body">
                    <div class="stat-grid">
                        <div class="stat"><div class="stat__num">{{ $stats['targeted'] }}</div><div class="stat__label">{{ __('admin.notification_center.stats.targeted') }}</div></div>
                        <div class="stat stat--sent"><div class="stat__num">{{ $stats['delivered'] }}</div><div class="stat__label">{{ __('admin.notification_center.stats.delivered') }}</div></div>
                        <div class="stat"><div class="stat__num">{{ $stats['partial'] }}</div><div class="stat__label">{{ __('admin.notification_center.stats.partial') }}</div></div>
                        <div class="stat stat--failed"><div class="stat__num">{{ $stats['failed'] }}</div><div class="stat__label">{{ __('admin.notification_center.stats.failed') }}</div></div>
                        <div class="stat stat--pending"><div class="stat__num">{{ $stats['pending'] }}</div><div class="stat__label">{{ __('admin.notification_center.stats.pending') }}</div></div>
                    </div>

                    @foreach (($stats['channels'] ?? []) as $channel => $counts)
                        @php
                            $total = max(1, array_sum($counts));
                            $sent = $counts['sent'] ?? 0; $failed = $counts['failed'] ?? 0; $notSent = $counts['not_sent'] ?? 0;
                        @endphp
                        <div class="ch-stat">
                            <div class="ch-stat__name">{{ __('admin.notification_center.channels.' . $channel) }}</div>
                            <div>
                                <div class="ch-bar">
                                    <span class="ch-bar__seg" style="width: {{ $sent / $total * 100 }}%; background:#10b981;"></span>
                                    <span class="ch-bar__seg" style="width: {{ $failed / $total * 100 }}%; background:#ef4444;"></span>
                                    <span class="ch-bar__seg" style="width: {{ $notSent / $total * 100 }}%; background:#cbd5e1;"></span>
                                </div>
                                <div class="ch-stat__legend">
                                    <span>✓ {{ $sent }} {{ __('admin.notification_center.stats.delivered') }}</span>
                                    <span>✕ {{ $failed }} {{ __('admin.notification_center.stats.failed') }}</span>
                                    <span>• {{ $notSent }} {{ __('admin.notification_center.stats.pending') }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <p class="help" style="font-size:11.5px; color:#94a3b8; margin:0;">{{ __('admin.notification_center.stats.hint') }}</p>
                </div>
            </div>
        @endif

        {{-- ── Recipients (per-recipient × channel delivery, from the shared log) ── --}}
        @if (! $notification->isDraft())
            @php
                $logStatusMeta = [
                    'sent'               => ['#047857', '#ecfdf5'],
                    'delivered'          => ['#047857', '#ecfdf5'],
                    'read'               => ['#047857', '#ecfdf5'],
                    'pending'            => ['#475569', '#f1f5f9'],
                    'failed'             => ['#b91c1c', '#fef2f2'],
                    'undelivered'        => ['#b91c1c', '#fef2f2'],
                    'permanently_failed' => ['#b91c1c', '#fef2f2'],
                ];
            @endphp
            <div class="card">
                <div class="card-head"><h3>{{ __('admin.notification_center.recipients_heading') }}</h3></div>
                <div class="card-body" style="padding:0;">
                    @if ($recipients->isEmpty())
                        <div style="padding:22px; color:#64748b; font-size:13.5px;">{{ __('admin.notification_center.recipients_empty') }}</div>
                    @else
                        <div style="overflow-x:auto;">
                            <table class="rc-table">
                                <thead><tr>
                                    <th>{{ __('admin.notification_center.recipients_table.investor') }}</th>
                                    <th>{{ __('admin.notification_center.recipients_table.channel') }}</th>
                                    <th>{{ __('admin.notification_center.recipients_table.status') }}</th>
                                    <th>{{ __('admin.notification_center.recipients_table.sent_at') }}</th>
                                    <th>{{ __('admin.notification_center.recipients_table.error') }}</th>
                                    <th>{{ __('admin.notification_center.recipients_table.retries') }}</th>
                                </tr></thead>
                                <tbody>
                                    @foreach ($recipients as $log)
                                        @php $lm = $logStatusMeta[$log->status] ?? $logStatusMeta['pending']; @endphp
                                        <tr>
                                            <td>{{ optional($log->recipient)->display_name ?? $log->address ?? '—' }}</td>
                                            <td style="text-transform:capitalize;">{{ __('admin.notification_center.channels.' . $log->channel) }}</td>
                                            <td><span class="rc-badge" style="color:{{ $lm[0] }};background:{{ $lm[1] }};">{{ $log->status }}</span></td>
                                            <td>{{ $log->sent_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                            <td class="rc-err" title="{{ $log->error }}">{{ $log->error ? \Illuminate\Support\Str::limit($log->error, 80) : '—' }}</td>
                                            <td>{{ (int) $log->attempt_count }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if ($recipients->count() >= 500)
                            <div style="padding:12px 22px; color:#94a3b8; font-size:11.5px;">{{ __('admin.notification_center.recipients_capped') }}</div>
                        @endif
                    @endif
                </div>
            </div>
        @endif

        {{-- ── Audience preview (draft) ── --}}
        @if ($notification->isDraft() && $audiencePreview->isNotEmpty())
            <div class="card">
                <div class="card-head"><h3>{{ __('admin.notification_center.audience_preview') }}</h3></div>
                <div class="card-body">
                    <div class="chips">
                        @foreach ($audiencePreview as $inv)
                            <span class="chip">{{ $inv->display_name ?? $inv->email }}</span>
                        @endforeach
                        @if ($audienceTotal > $audiencePreview->count())
                            <span class="chip">+{{ $audienceTotal - $audiencePreview->count() }}</span>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection