@extends('layouts.app')

@section('title', 'Alerts')

@section('content')
@php
    $canMarkRead = auth()->user()->hasAction('alerts.mark_read');
    $canDelete = auth()->user()->hasAction('alerts.delete');
    $canSelect = $canMarkRead || $canDelete;
    $unreadOnPage = $alerts->filter(fn ($alert) => ! $alert->is_read);
    $allOnPageIds = $alerts->pluck('id')->values();
@endphp

<div @if ($canSelect) x-data="alertManager(@js($unreadOnPage->pluck('id')->values()), @js($allOnPageIds))" @endif>
    <x-page-header title="Alerts" subtitle="OTP, large payments, and sync failures" icon="alerts" icon-color="amber" animate="pulse">
        @if ($canMarkRead && $unreadOnPage->isNotEmpty())
            <x-slot:actions>
                <form method="POST" action="{{ route('alerts.bulk-read') }}" class="inline" onsubmit="return confirm('Mark all unread alerts as read?')">
                    @csrf
                    <input type="hidden" name="scope" value="all">
                    <button type="submit" class="btn-secondary btn-sm">
                        <x-icon name="check" class="w-4 h-4" />
                        Mark all as read
                    </button>
                </form>
            </x-slot:actions>
        @endif
    </x-page-header>

    @include('partials.ephemeral-logs-banner')

    @if ($errors->any())
        <div class="flash-error mb-4">
            {{ $errors->first() }}
        </div>
    @endif

    @if ($canSelect && $alerts->isNotEmpty())
        <div class="glass-card-subtle p-4 mb-4 flex flex-wrap items-center gap-3 animate-slide-up">
            @if ($canDelete)
                <label class="inline-flex items-center gap-2 text-sm">
                    <input type="checkbox" @change="toggleAllOnPage($event)" class="rounded border-themed">
                    <span>Select all on page</span>
                </label>
            @elseif ($canMarkRead && $unreadOnPage->isNotEmpty())
                <label class="inline-flex items-center gap-2 text-sm">
                    <input type="checkbox" @change="toggleUnread($event)" class="rounded border-themed">
                    <span>Select unread on page</span>
                </label>
            @endif
            <span class="text-xs text-themed-muted" x-text="`${selected.length} selected`"></span>
            @if ($canMarkRead)
                <form method="POST" action="{{ route('alerts.bulk-read') }}" class="inline" @submit.prevent="submitBulk($event, 'Mark selected alerts as read?')">
                    @csrf
                    <input type="hidden" name="scope" value="selected">
                    <button type="submit" class="btn-primary btn-sm" :disabled="selected.length === 0">
                        <x-icon name="check" class="w-4 h-4" />
                        Mark selected as read
                    </button>
                </form>
            @endif
            @if ($canDelete)
                <form method="POST" action="{{ route('alerts.bulk-destroy') }}" class="inline" @submit.prevent="submitBulk($event, 'Delete selected alerts? This cannot be undone.')">
                    @csrf
                    <input type="hidden" name="scope" value="selected">
                    <button type="submit" class="btn-danger btn-sm" :disabled="selected.length === 0">
                        <x-icon name="trash" class="w-4 h-4" />
                        Delete selected
                    </button>
                </form>
            @endif
        </div>
    @endif

    <div class="table-wrap">
        <div class="overflow-x-auto md:overflow-visible">
            <table class="data-table responsive-table">
                <thead>
                    <tr>
                        @if ($canSelect)
                            <th class="w-10"></th>
                        @endif
                        <th>Time</th>
                        <th>Type</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($alerts as $alert)
                        <tr class="{{ !$alert->is_read ? 'bg-amber-500/5 ring-1 ring-amber-500/10' : '' }}">
                            @if ($canSelect)
                                <td data-label="Select">
                                    @if ($canDelete || ! $alert->is_read)
                                        <input type="checkbox"
                                               value="{{ $alert->id }}"
                                               @change="toggleOne({{ (int) $alert->id }}, $event.target.checked)"
                                               :checked="selected.includes({{ (int) $alert->id }})"
                                               class="rounded border-themed">
                                    @endif
                                </td>
                            @endif
                            <td data-label="Time" class="whitespace-nowrap tabular-nums">{{ $alert->created_at->format('M d, H:i') }}</td>
                            <td data-label="Type">
                                <span class="badge-warning capitalize">{{ str_replace('_', ' ', $alert->type) }}</span>
                            </td>
                            <td data-label="Message" class="break-words max-w-md">{{ $alert->message?->message ?? '—' }}</td>
                            <td data-label="Status">
                                <span class="{{ $alert->is_read ? 'badge-neutral' : 'badge-warning' }}">
                                    {{ $alert->is_read ? 'Read' : 'Unread' }}
                                </span>
                            </td>
                            <td data-label="" class="td-actions">
                                <div class="flex flex-wrap items-center gap-1 justify-end">
                                    @if (!$alert->is_read && $canMarkRead)
                                        <form method="POST" action="{{ route('alerts.read', $alert) }}">
                                            @csrf
                                            <button type="submit" class="btn-ghost btn-sm text-teal-600">
                                                <x-icon name="check" class="w-4 h-4" />
                                                Mark read
                                            </button>
                                        </form>
                                    @endif
                                    @if ($canDelete)
                                        <form method="POST" action="{{ route('alerts.destroy', $alert) }}" onsubmit="return confirm('Delete this alert?')">
                                            @csrf
                                            <button type="submit" class="btn-ghost btn-sm text-red-400 hover:text-red-300">
                                                <x-icon name="trash" class="w-4 h-4" />
                                                Delete
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $canSelect ? 6 : 5 }}" class="!block text-center py-12 text-slate-500">
                                <x-icon name="alerts" class="w-10 h-10 mx-auto mb-2 opacity-40 animate-icon-float" />
                                No alerts yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4">{{ $alerts->links() }}</div>
</div>

@if ($canSelect)
@push('scripts')
<script>
window.alertManager = function (unreadPageIds, allPageIds) {
    return {
        selected: [],
        unreadPageIds: (unreadPageIds || []).map(Number),
        allPageIds: (allPageIds || []).map(Number),
        toggleOne(id, checked) {
            id = Number(id);
            if (checked) {
                if (!this.selected.includes(id)) {
                    this.selected.push(id);
                }
            } else {
                this.selected = this.selected.filter((item) => item !== id);
            }
        },
        toggleUnread(event) {
            this.selected = event.target.checked ? [...this.unreadPageIds] : [];
        },
        toggleAllOnPage(event) {
            this.selected = event.target.checked ? [...this.allPageIds] : [];
        },
        submitBulk(event, message) {
            if (this.selected.length === 0) {
                return;
            }
            if (!confirm(message)) {
                return;
            }
            const form = event.target;
            form.querySelectorAll('input[name="alert_ids[]"]').forEach((input) => input.remove());
            this.selected.forEach((id) => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'alert_ids[]';
                input.value = String(id);
                form.appendChild(input);
            });
            form.submit();
        },
    };
};
</script>
@endpush
@endif
@endsection