@extends('layouts.admin', ['title' => 'Detalhes da notificação'])

@section('content')
<div class="grid gap-6 lg:grid-cols-3">
    <section class="card lg:col-span-2 space-y-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $notification->type->label() }} · {{ $notification->audience->label() }}</p>
            <h2 class="text-2xl font-black text-slate-950">{{ $notification->title }}</h2>
            <p class="mt-1 text-sm text-slate-500">Enviada por {{ $notification->createdBy?->name ?? 'Sistema' }} em {{ $notification->sent_at?->format('d/m/Y H:i') }}</p>
        </div>

        <div class="rounded-2xl bg-slate-50 p-4 text-sm leading-6 text-slate-700 whitespace-pre-line">
            <div class="prose max-w-none">
                {!! $notification->body !!}
            </div>
        </div>

        <div>
            <h3 class="mb-2 font-bold">Anexos</h3>
            @forelse($notification->attachments as $attachment)
                <a class="mb-2 flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 text-sm hover:bg-slate-50" href="{{ route('admin.notifications.attachments.download', $attachment) }}">
                    <span>{{ $attachment->original_name }}</span>
                    <span class="text-slate-400">{{ number_format($attachment->size_bytes / 1024, 1, ',', '.') }} KB</span>
                </a>
            @empty
                <p class="text-sm text-slate-500">Sem anexos.</p>
            @endforelse
        </div>
    </section>

    <aside class="card space-y-4">
        <div>
            <p class="text-sm text-slate-500">Recebidos</p>
            <p class="text-3xl font-black">{{ $notification->recipients_count }}</p>
        </div>
        <div>
            <p class="text-sm text-slate-500">Lidos</p>
            <p class="text-3xl font-black text-emerald-700">{{ $notification->recipients_read_count }}</p>
        </div>
        <div>
            <p class="text-sm text-slate-500">Não lidos</p>
            <p class="text-3xl font-black text-amber-700">{{ $notification->recipients_unread_count }}</p>
        </div>
    </aside>
</div>

<div class="card mt-6 overflow-x-auto">
    <h3 class="mb-4 text-lg font-bold">Rastreabilidade por destinatário</h3>
    <table class="min-w-full divide-y divide-slate-200">
        <thead>
            <tr>
                <th class="table-th">Influencer</th>
                <th class="table-th">Recebido em</th>
                <th class="table-th">Status</th>
                <th class="table-th">Lido em</th>
                <th class="table-th">IP leitura</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
        @foreach($notification->recipients as $recipient)
            <tr>
                <td class="table-td">
                    <div class="font-semibold text-slate-900">{{ $recipient->influencer->name }}</div>
                    <div class="text-xs text-slate-500">{{ $recipient->user->email }}</div>
                </td>
                <td class="table-td">{{ $recipient->received_at?->format('d/m/Y H:i') }}</td>
                <td class="table-td">{{ $recipient->status->label() }}</td>
                <td class="table-td">{{ $recipient->read_at?->format('d/m/Y H:i') ?? '-' }}</td>
                <td class="table-td">{{ $recipient->read_ip ?? '-' }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endsection