{{-- resources/views/notifications/log.blade.php --}}
@extends('layouts.app')
@section('title', 'Notification Log')
@section('page_title', 'Notification Log')
@section('page_subtitle', 'All sent and queued notifications')

@section('content')

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body" style="padding:12px 16px;">
        <form method="GET"
              class="d-flex align-items-center gap-2 flex-wrap">

            <div style="position:relative;">
                <i class="bi bi-search"
                   style="position:absolute;left:9px;top:50%;
                          transform:translateY(-50%);
                          color:var(--muted);font-size:.8rem;"></i>
                <input type="text" name="search"
                       class="form-control form-control-sm"
                       style="padding-left:28px;width:180px;"
                       placeholder="Guest, email..."
                       value="{{ request('search') }}">
            </div>

            <select name="channel"
                    class="form-select form-select-sm"
                    style="width:auto;">
                <option value="">All Channels</option>
                @foreach(['email','sms','whatsapp'] as $ch)
                    <option value="{{ $ch }}"
                            {{ request('channel') === $ch ? 'selected' : '' }}>
                        {{ ucfirst($ch) }}
                    </option>
                @endforeach
            </select>

            <select name="status"
                    class="form-select form-select-sm"
                    style="width:auto;">
                <option value="">All Statuses</option>
                @foreach(['pending','queued','sent','failed'] as $s)
                    <option value="{{ $s }}"
                            {{ request('status') === $s ? 'selected' : '' }}>
                        {{ ucfirst($s) }}
                    </option>
                @endforeach
            </select>

            <select name="event"
                    class="form-select form-select-sm"
                    style="width:auto;">
                <option value="">All Events</option>
                @foreach($events as $event)
                    <option value="{{ $event }}"
                            {{ request('event') === $event ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $event)) }}
                    </option>
                @endforeach
            </select>

            <button type="submit"
                    class="btn btn-sm btn-outline-secondary">
                Filter
            </button>

            @if(request()->hasAny(['search','channel','status','event']))
                <a href="{{ tenant_route('notifications.log') }}"
                   class="btn btn-sm btn-outline-secondary">
                    Clear
                </a>
            @endif

            <div class="ms-auto">
                <a href="{{ tenant_route('notifications.index') }}"
                   class="btn btn-sm btn-outline-secondary">
                    ← Overview
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Log Table --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">
            Notification Log
            <span style="font-size:.75rem;font-weight:400;
                         color:var(--muted);margin-left:6px;">
                {{ $logs->total() }} entries
            </span>
        </span>
    </div>

    @if($logs->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-bell-slash"
               style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No notifications found</p>
        </div>
    @else
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Channel</th>
                        <th>Guest / Recipient</th>
                        <th>Event</th>
                        <th>Subject / Preview</th>
                        <th>Status</th>
                        <th>Sent</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($logs as $log)
                        @php
                            $channelColors = [
                                'email'    => ['bg'=>'#dbeafe','color'=>'#1e40af','icon'=>'bi-envelope'],
                                'sms'      => ['bg'=>'#d1fae5','color'=>'#065f46','icon'=>'bi-chat-dots'],
                                'whatsapp' => ['bg'=>'#dcfce7','color'=>'#166534','icon'=>'bi-whatsapp'],
                            ];
                            $cc = $channelColors[$log->channel] ?? $channelColors['email'];

                            $statusConfig = [
                                'sent'    => ['bg'=>'#d1fae5','color'=>'#065f46'],
                                'failed'  => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                                'pending' => ['bg'=>'#fef3c7','color'=>'#92400e'],
                                'queued'  => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                            ];
                            $sc = $statusConfig[$log->status] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
                        @endphp
                        <tr>
                            <td>
                                <span style="font-size:.7rem;font-weight:600;
                                             padding:3px 8px;border-radius:20px;
                                             background:{{ $cc['bg'] }};
                                             color:{{ $cc['color'] }};
                                             display:inline-flex;
                                             align-items:center;gap:4px;">
                                    <i class="bi {{ $cc['icon'] }}"
                                       style="font-size:.65rem;"></i>
                                    {{ ucfirst($log->channel) }}
                                </span>
                            </td>
                            <td>
                                @if($log->guest)
                                    <div class="fw-semibold"
                                         style="font-size:.82rem;">
                                        {{ $log->guest->first_name }}
                                        {{ $log->guest->last_name }}
                                    </div>
                                @endif
                                <div style="font-size:.7rem;color:var(--muted);">
                                    {{ $log->recipient }}
                                </div>
                            </td>
                            <td style="font-size:.75rem;color:var(--muted);">
                                {{ ucfirst(str_replace('_', ' ', $log->event)) }}
                            </td>
                            <td style="max-width:220px;">
                                @if($log->subject)
                                    <div class="fw-semibold"
                                         style="font-size:.78rem;
                                                white-space:nowrap;
                                                overflow:hidden;
                                                text-overflow:ellipsis;">
                                        {{ $log->subject }}
                                    </div>
                                @endif
                                <div style="font-size:.7rem;color:var(--muted);
                                            white-space:nowrap;overflow:hidden;
                                            text-overflow:ellipsis;">
                                    {{ Str::limit(strip_tags($log->body), 60) }}
                                </div>
                            </td>
                            <td>
                                <span style="font-size:.7rem;font-weight:600;
                                             padding:2px 8px;border-radius:20px;
                                             background:{{ $sc['bg'] }};
                                             color:{{ $sc['color'] }};">
                                    {{ ucfirst($log->status) }}
                                </span>
                                @if($log->status === 'failed' && $log->error)
                                    <div style="font-size:.65rem;color:var(--danger);
                                                margin-top:2px;max-width:140px;
                                                white-space:nowrap;overflow:hidden;
                                                text-overflow:ellipsis;"
                                         title="{{ $log->error }}">
                                        {{ $log->error }}
                                    </div>
                                @endif
                                @if($log->attempts > 1)
                                    <div style="font-size:.65rem;color:var(--muted);">
                                        {{ $log->attempts }} attempts
                                    </div>
                                @endif
                            </td>
                            <td style="font-size:.73rem;color:var(--muted);
                                       white-space:nowrap;">
                                {{ $log->created_at->format('d M Y') }}<br>
                                {{ $log->created_at->format('H:i') }}
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    {{-- Preview --}}
                                    <button class="btn btn-xs btn-outline-secondary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#previewModal"
                                            data-subject="{{ $log->subject }}"
                                            data-body="{{ htmlspecialchars($log->body) }}"
                                            data-channel="{{ $log->channel }}"
                                            data-recipient="{{ $log->recipient }}"
                                            data-event="{{ $log->event }}">
                                        <i class="bi bi-eye"></i>
                                    </button>

                                    {{-- Retry --}}
                                    @if($log->status === 'failed')
                                        <form method="POST"
                                              action="{{ tenant_route('notifications.retry', ['log' => $log->id]) }}">
                                            @csrf
                                            <button class="btn btn-xs btn-outline-warning"
                                                    type="submit"
                                                    title="Retry">
                                                <i class="bi bi-arrow-clockwise"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
            <div class="card-body"
                 style="border-top:1px solid var(--border);padding:12px 16px;">
                {{ $logs->links() }}
            </div>
        @endif
    @endif
</div>

{{-- Preview Modal --}}
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"
                    style="font-size:.9rem;font-weight:700;">
                    Notification Preview
                </h5>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div style="display:flex;gap:8px;margin-bottom:14px;
                            flex-wrap:wrap;font-size:.78rem;">
                    <div style="background:var(--bg);border-radius:6px;
                                padding:6px 10px;">
                        <span style="color:var(--muted);">Channel:</span>
                        <strong id="previewChannel"></strong>
                    </div>
                    <div style="background:var(--bg);border-radius:6px;
                                padding:6px 10px;">
                        <span style="color:var(--muted);">To:</span>
                        <strong id="previewRecipient"></strong>
                    </div>
                    <div style="background:var(--bg);border-radius:6px;
                                padding:6px 10px;">
                        <span style="color:var(--muted);">Event:</span>
                        <strong id="previewEvent"></strong>
                    </div>
                </div>

                <div id="previewSubjectWrap"
                     style="margin-bottom:10px;">
                    <div style="font-size:.68rem;font-weight:700;
                                text-transform:uppercase;letter-spacing:.08em;
                                color:var(--muted);margin-bottom:4px;">
                        Subject
                    </div>
                    <div id="previewSubject"
                         class="fw-semibold"
                         style="font-size:.88rem;"></div>
                </div>

                <div>
                    <div style="font-size:.68rem;font-weight:700;
                                text-transform:uppercase;letter-spacing:.08em;
                                color:var(--muted);margin-bottom:6px;">
                        Message Body
                    </div>
                    <div id="previewBody"
                         style="background:var(--bg);border-radius:8px;
                                padding:14px;font-size:.82rem;
                                line-height:1.7;white-space:pre-wrap;
                                min-height:80px;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-outline-secondary btn-sm"
                        data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('previewModal')
    .addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;

        document.getElementById('previewChannel').textContent   = btn.dataset.channel;
        document.getElementById('previewRecipient').textContent = btn.dataset.recipient;
        document.getElementById('previewEvent').textContent     =
            btn.dataset.event.replace(/_/g, ' ');

        const subject = btn.dataset.subject;
        const subjectWrap = document.getElementById('previewSubjectWrap');
        if (subject) {
            document.getElementById('previewSubject').textContent = subject;
            subjectWrap.style.display = 'block';
        } else {
            subjectWrap.style.display = 'none';
        }

        document.getElementById('previewBody').textContent =
            btn.dataset.body;
    });
</script>
@endpush