@extends('layouts.app')

@php
    use App\Enums\NotificationType;

    /** @var \App\Models\Notification[] $notifications */
    /** @var int $totalCount */
    /** @var int $unreadCount */
    /** @var int $readCount */
    $typeCounts = $typeCounts ?? [];

    // Compute totals per group so we can show badges on the filter card.
    $groupTotals = [];
    foreach ($typeCounts as $type => $count) {
        $enum = NotificationType::tryFrom($type);
        if ($enum) {
            $group = $enum->group();
            $groupTotals[$group] = ($groupTotals[$group] ?? 0) + $count;
        }
    }
@endphp

@section('title', 'Notifications')

@section('page-header')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">
        <i class="fas fa-bell me-2 text-gray-500"></i>Notifications
    </h1>
    <div>
        <form action="{{ route('notifications.mark-all-read') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm">
                <i class="fas fa-check-double fa-sm text-white-50"></i> Mark All Read
            </button>
        </form>
        <form action="{{ route('notifications.destroy-all') }}" method="POST" class="d-inline"
              onsubmit="return confirm('Delete all notifications?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="d-none d-sm-inline-block btn btn-sm btn-danger shadow-sm">
                <i class="fas fa-trash fa-sm text-white-50"></i> Delete All
            </button>
        </form>
    </div>
</div>
@endsection

@section('content')

{{-- ═══════════════════════════════════════════════════════
     STATISTICS
═══════════════════════════════════════════════════════ --}}
<div class="row mb-4">
    <div class="col-xl-4 col-md-4 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Notifications
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalCount }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-bell fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-4 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Unread
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $unreadCount }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-envelope fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-4 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Read
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $readCount }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
     QUICK FILTERS BY QMS CATEGORY
═══════════════════════════════════════════════════════ --}}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-th-large me-2"></i>Quick Filters
        </h6>
    </div>
    <div class="card-body">
        <div class="row">
           @php
    $groups = [
        'Documents'      => ['icon' => 'fa-file-alt',             'color' => 'primary'],
        'Training'       => ['icon' => 'fa-graduation-cap',       'color' => 'info'],
        'CAPA'           => ['icon' => 'fa-tasks',                'color' => 'success'],
        'Deviations'     => ['icon' => 'fa-exclamation-triangle', 'color' => 'warning'],
        'Audits'         => ['icon' => 'fa-clipboard-list',       'color' => 'secondary'],
        'Change Control' => ['icon' => 'fa-exchange-alt',         'color' => 'primary'],
        'Risk'           => ['icon' => 'fa-shield-alt',           'color' => 'dark'],
        'Complaints'     => ['icon' => 'fa-comment-dots',         'color' => 'info'],
    ];
@endphp
            @foreach($groups as $group => $meta)
                @php
                    $groupTypes = array_filter(
                        NotificationType::cases(),
                        fn ($t) => $t->group() === $group
                    );
                    $ids = array_map(fn ($t) => $t->value, $groupTypes);
                    $count = $groupTotals[$group] ?? 0;
                @endphp

                <div class="col-md-4 col-lg-3 mb-2">
                    <a href="{{ route('notifications.index', ['type' => implode(',', $ids)]) }}"
                       class="btn btn-outline-{{ $meta['color'] }} btn-block text-left d-flex justify-content-between align-items-center">
                        <span>
                            <i class="fas {{ $meta['icon'] }} mr-2"></i>{{ $group }}
                        </span>
                        @if($count > 0)
                            <span class="badge badge-{{ $meta['color'] }}">{{ $count }}</span>
                        @else
                            <span class="badge badge-light text-muted">0</span>
                        @endif
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
     FILTERS
═══════════════════════════════════════════════════════ --}}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-filter me-2"></i>Filter Notifications
        </h6>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('notifications.index') }}" class="row g-3">
            <div class="col-md-3">
                <label class="small text-muted font-weight-bold text-uppercase">Status</label>
                <select name="filter" class="form-control">
                    <option value="">All</option>
                    <option value="unread" @selected(request('filter') === 'unread')>Unread</option>
                    <option value="read" @selected(request('filter') === 'read')>Read</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="small text-muted font-weight-bold text-uppercase">Type</label>
                <select name="type" class="form-control">
                    <option value="">All Types</option>
                    @foreach(NotificationType::grouped() as $group => $types)
                        <optgroup label="{{ $group }}">
                            @foreach($types as $t)
                                <option value="{{ $t->value }}" @selected(request('type') === $t->value)>
                                    {{ $t->label() }}
                                </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="small text-muted font-weight-bold text-uppercase">From</label>
                <input type="date" name="from" class="form-control" value="{{ request('from') }}">
            </div>

            <div class="col-md-2">
                <label class="small text-muted font-weight-bold text-uppercase">To</label>
                <input type="date" name="to" class="form-control" value="{{ request('to') }}">
            </div>

            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-secondary btn-block">
                    <i class="fas fa-filter"></i>
                </button>
            </div>

            <div class="col-md-1 d-flex align-items-end">
                <a href="{{ route('notifications.index') }}" class="btn btn-outline-secondary btn-block" title="Clear">
                    <i class="fas fa-times"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
     NOTIFICATIONS LIST
═══════════════════════════════════════════════════════ --}}
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-list me-2"></i>All Notifications
        </h6>
        <small class="text-muted">
            {{ $notifications->total() }} total
            @if($notifications->total() > 0)
                · page {{ $notifications->currentPage() }} of {{ $notifications->lastPage() }}
            @endif
        </small>
    </div>
    <div class="card-body p-0">
        @if($notifications->count() > 0)
            <div class="list-group list-group-flush">
                @foreach($notifications as $notification)
                    <div class="list-group-item list-group-item-action py-3 border-bottom {{ $notification->is_unread ? 'bg-light' : '' }}">
                        <div class="d-flex w-100 justify-content-between align-items-start">
                            <div class="d-flex align-items-start flex-grow-1">
                                {{-- Icon --}}
                                <div class="icon-circle bg-{{ $notification->type_badge }} mr-3 mt-1"
                                     style="width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                    <i class="fas {{ $notification->icon }} text-white"></i>
                                </div>

                                {{-- Content --}}
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center flex-wrap mb-1">
                                        <h6 class="mb-1 mr-2 {{ $notification->is_unread ? 'font-weight-bold text-primary' : 'text-gray-800' }}">
                                            {{ $notification->title }}
                                        </h6>

                                        @if($notification->is_unread)
                                            <span class="badge badge-info ml-1">New</span>
                                        @endif

                                        <span class="badge badge-{{ $notification->type_badge }} ml-1">
                                            {{ $notification->type_label }}
                                        </span>
                                    </div>

                                    <p class="mb-1 text-gray-800">{{ $notification->message }}</p>

                                    <small class="text-muted">
                                        <i class="fas fa-clock mr-1"></i>{{ $notification->time_ago }}
                                    </small>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="dropdown no-arrow ml-2">
                                <button class="btn btn-sm btn-link text-gray-600" data-toggle="dropdown">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in">
                                    @if($notification->link)
                                        <a href="{{ $notification->link }}"
                                           class="dropdown-item"
                                           onclick="event.preventDefault();
                                                   document.getElementById('mark-read-{{ $notification->id }}').submit();
                                                   window.location = '{{ $notification->link }}';">
                                            <i class="fas fa-eye mr-2 text-gray-400"></i>View
                                        </a>
                                    @endif

                                    <a href="#"
                                       class="dropdown-item"
                                       onclick="event.preventDefault();
                                               document.getElementById('mark-read-{{ $notification->id }}').submit();">
                                        <i class="fas fa-check mr-2 text-gray-400"></i>Mark as Read
                                    </a>

                                    <div class="dropdown-divider"></div>

                                    <form action="{{ route('notifications.destroy', $notification->id) }}"
                                          method="POST"
                                          class="d-inline"
                                          onsubmit="return confirm('Delete this notification?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="dropdown-item text-danger">
                                            <i class="fas fa-trash mr-2"></i>Delete
                                        </button>
                                    </form>
                                </div>

                                {{-- Hidden form used by the "View" and "Mark as Read" actions --}}
                                <form id="mark-read-{{ $notification->id }}"
                                      action="{{ route('notifications.mark-read', $notification->id) }}"
                                      method="POST"
                                      class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Pagination --}}
            <div class="card-footer bg-white py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="text-muted small mb-2 mb-md-0">
                        Showing {{ $notifications->firstItem() ?? 0 }}
                        to {{ $notifications->lastItem() ?? 0 }}
                        of {{ $notifications->total() }} notifications
                    </div>
                    <div>
                        {{ $notifications->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-bell-slash fa-4x text-gray-300 mb-3"></i>
                <h5 class="text-gray-800">No Notifications Found</h5>
                <p class="text-muted">You don't have any notifications at the moment.</p>
                @if(request()->hasAny(['filter', 'type', 'from', 'to']))
                    <a href="{{ route('notifications.index') }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-times"></i> Clear Filters
                    </a>
                @endif
            </div>
        @endif
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
     LEGEND — what each category means
═══════════════════════════════════════════════════════ --}}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-info-circle me-2"></i>Notification Categories
        </h6>
    </div>
    <div class="card-body">
        <div class="row">
            @foreach(NotificationType::cases() as $type)
                <div class="col-md-6 col-lg-4 mb-2">
                    <span class="badge badge-{{ $type->badge() }} mr-2">
                        <i class="fas {{ $type->icon() }} mr-1"></i>
                    </span>
                    <small>
                        <strong>{{ $type->label() }}</strong>
                        <span class="text-muted">— {{ $type->group() }}</span>
                    </small>
                </div>
            @endforeach
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Auto-dismiss alerts after 5 seconds
    setTimeout(function () {
        document.querySelectorAll('.alert-dismissible').forEach(function (alert) {
            alert.style.transition = 'opacity 0.5s';
            alert.style.opacity = '0';
            setTimeout(function () {
                alert.remove();
            }, 500);
        });
    }, 5000);
</script>
@endpush