@extends('layouts.app')
@section('title','Notification Center')
@section('page-label','Notification Center')

@push('styles')
<style>
.notification-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.notification-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:12px 14px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--card)}.notification-stat-label{font-size:.75rem;color:var(--muted-foreground)}.notification-stat-value{margin-top:3px;font-size:1.35rem;line-height:1.5rem;font-weight:650}.notification-dot{width:9px;height:9px;border-radius:999px;background:var(--muted-foreground);opacity:.45}.notification-dot.primary{background:var(--primary);opacity:.9}.notification-dot.warning{background:var(--warning);opacity:.9}.notification-dot.danger{background:var(--destructive);opacity:.9}.notification-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:14px;align-items:start}.notification-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}.notification-card-title{font-size:.875rem;font-weight:650}.notification-card-copy{margin-top:2px;font-size:.75rem;color:var(--muted-foreground)}.notification-tabs{display:flex;gap:4px;flex-wrap:wrap}.notification-tab{padding:6px 9px;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--muted-foreground)}.notification-tab.active{background:var(--muted);color:var(--foreground);font-weight:600}.notification-list{display:flex;flex-direction:column;padding:20px}.notification-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border)}.notification-item:last-child{border-bottom:0}.notification-item.unread{background:color-mix(in srgb,var(--primary) 4%,transparent)}.notification-icon{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:7px;background:var(--background)}.notification-icon svg{width:15px;height:15px}.notification-title{font-size:.8rem;font-weight:600}.notification-message{margin-top:3px;font-size:.75rem;line-height:1.25rem;color:var(--muted-foreground)}.notification-meta{margin-top:5px;font-size:.68rem;color:var(--muted-foreground)}.notification-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.notification-side{display:flex;flex-direction:column;gap:14px}.notification-side-row{padding:11px 13px;border-bottom:1px solid var(--border)}.notification-side-row:last-child{border-bottom:0}.notification-side-title{font-size:.77rem;font-weight:600}.notification-side-copy{margin-top:3px;font-size:.7rem;line-height:1.2rem;color:var(--muted-foreground)}.notification-side-meta{margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.66rem;color:var(--muted-foreground)}@media(max-width:900px){.notification-layout{grid-template-columns:1fr}}@media(max-width:640px){.notification-summary{grid-template-columns:1fr}.notification-card-head{flex-direction:column}.notification-item{grid-template-columns:32px minmax(0,1fr)}.notification-actions{grid-column:1/-1;justify-content:flex-start;padding-left:42px}}
</style>
@endpush

@section('content')
<x-ui.page-toolbar title="Notification Center" description="One place for personal notifications, management alerts and notification delivery issues." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Notification Center']]">
    <x-slot:actions>
        @can('management-alerts.view')<a class="mf-btn" href="{{ route('management-alerts.index') }}">Management alerts</a>@endcan
        @can('notifications.view')<a class="mf-btn" href="{{ route('notifications.index') }}">Delivery log</a>@endcan
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="notification-summary">
    <div class="notification-stat"><div><div class="notification-stat-label">Unread personal</div><div class="notification-stat-value">{{ number_format($personalCounts['unread']) }}</div></div><span class="notification-dot primary"></span></div>
    <div class="notification-stat"><div><div class="notification-stat-label">Active management alerts</div><div class="notification-stat-value">{{ number_format($alertSummary['active']) }}</div></div><span class="notification-dot {{ $alertSummary['critical'] > 0 ? 'danger' : 'warning' }}"></span></div>
    <div class="notification-stat"><div><div class="notification-stat-label">Failed deliveries</div><div class="notification-stat-value">{{ number_format($deliveryFailureCount) }}</div></div><span class="notification-dot {{ $deliveryFailureCount > 0 ? 'danger' : '' }}"></span></div>
</div>

<div class="notification-layout">
    <section class="mf-card">
        <div class="notification-card-head">
            <div><div class="notification-card-title">Personal inbox</div><div class="notification-card-copy">Notifications addressed directly to your staff account. Read state is private to you.</div></div>
            <div class="notification-tabs">
                @foreach(['all'=>'All','unread'=>'Unread','read'=>'Read'] as $key=>$label)
                    <a href="{{ route('notification-center.index',['status'=>$key]) }}" class="notification-tab {{ $status===$key?'active':'' }}">{{ $label }} · {{ number_format($personalCounts[$key]) }}</a>
                @endforeach
            </div>
        </div>

        @if($personalCounts['unread'] > 0)
            <div class="flex justify-end border-b border-border px-4 py-2">
                <form method="POST" action="{{ route('notification-center.read-all') }}">@csrf<button class="mf-btn mf-btn-sm" type="submit">Mark all read</button></form>
            </div>
        @endif

        <div class="notification-list">
            @forelse($notifications as $notification)
                @php
                    $data=(array)$notification->data;
                    $event=(string)($data['event'] ?? 'system_notification');
                    $title=(string)($data['title'] ?? match($event){'loan_disbursed'=>'Loan disbursed','loan_payment_reminder'=>'Loan payment reminder','management_alert'=>'Management alert',default=>str($event)->replace('_',' ')->headline()});
                    $message=(string)($data['message'] ?? 'A system notification is available for your review.');
                @endphp
                <article class="notification-item {{ $notification->read_at ? '' : 'unread' }}">
                    <div class="notification-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2"><div class="notification-title">{{ $title }}</div>@if(!$notification->read_at)<span class="mf-badge mf-badge-info">New</span>@endif</div>
                        <div class="notification-message">{{ $message }}</div>
                        <div class="notification-meta">{{ $notification->created_at->diffForHumans() }} · {{ $notification->created_at->format('d M Y H:i') }}</div>
                    </div>
                    <div class="notification-actions">
                        <form method="POST" action="{{ route('notification-center.open',$notification->id) }}">@csrf<button class="mf-btn mf-btn-sm mf-btn-primary" type="submit">Open</button></form>
                        @if(!$notification->read_at)<form method="POST" action="{{ route('notification-center.read',$notification->id) }}">@csrf<button class="mf-btn mf-btn-sm" type="submit">Mark read</button></form>@endif
                        <form method="POST" action="{{ route('notification-center.destroy',$notification->id) }}">@csrf @method('DELETE')<button class="mf-btn mf-btn-sm" type="submit">Remove</button></form>
                    </div>
                </article>
            @empty
                <x-empty-state title="No personal notifications" description="There are no notifications in this inbox for the selected filter." />
            @endforelse
        </div>
        @if($notifications->hasPages())<div class="border-t border-border p-4">{{ $notifications->links() }}</div>@endif
    </section>

    <aside class="notification-side">
        @can('management-alerts.view')
        <section class="mf-card">
            <div class="notification-card-head"><div><div class="notification-card-title">Requires management attention</div><div class="notification-card-copy">{{ number_format($alertSummary['critical']) }} critical active alert(s).</div></div><a class="mf-btn mf-btn-sm" href="{{ route('management-alerts.index') }}">View all</a></div>
            @forelse($alerts as $alert)
                <div class="notification-side-row">
                    <div class="flex items-start justify-between gap-2"><div class="notification-side-title">{{ $alert->title }}</div><span class="mf-badge {{ $alert->severity==='critical'?'mf-badge-danger':($alert->severity==='warning'?'mf-badge-warning':'mf-badge-info') }}">{{ ucfirst($alert->severity) }}</span></div>
                    <div class="notification-side-copy">{{ str($alert->message)->limit(150) }}</div>
                    <div class="notification-side-meta"><span>{{ $alert->branch?->name ?? 'Company' }}</span><span>·</span><span>{{ $alert->occurred_at->diffForHumans() }}</span><span>·</span><span>{{ str($alert->status)->headline() }}</span></div>
                </div>
            @empty<div class="p-4 text-xs text-muted-foreground">No active management alerts in your branch scope.</div>@endforelse
        </section>
        @endcan

        @can('notifications.view')
        <section class="mf-card">
            <div class="notification-card-head"><div><div class="notification-card-title">Delivery failures</div><div class="notification-card-copy">Reminder messages that need operational review.</div></div><a class="mf-btn mf-btn-sm" href="{{ route('notifications.index',['status'=>'failed']) }}">View log</a></div>
            @forelse($deliveryFailures as $log)
                <div class="notification-side-row">
                    <div class="flex items-start justify-between gap-2"><div class="notification-side-title">{{ $log->loan?->loan_number ?? 'Reminder' }} · {{ str($log->channel)->replace('_',' ')->headline() }}</div><span class="mf-badge mf-badge-destructive">Failed</span></div>
                    <div class="notification-side-copy">{{ str($log->error ?: $log->message)->limit(140) }}</div>
                    <div class="notification-side-meta"><span>{{ $log->branch?->name }}</span><span>·</span><span>{{ $log->customer?->full_name }}</span><span>·</span><span>{{ $log->last_attempt_at?->diffForHumans() ?? $log->updated_at->diffForHumans() }}</span></div>
                </div>
            @empty<div class="p-4 text-xs text-muted-foreground">No failed reminder deliveries in your branch scope.</div>@endforelse
        </section>
        @endcan
    </aside>
</div>
@endsection
