@extends('layouts.app')
@section('title', __('ui.notifications_title').' — Coaster World')

@section('content')
<section class="notifications-hero notifications-hero-v3">
    <div class="container notifications-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.notifications_kicker') }}</span>
            <h1>{{ __('ui.notifications_title') }}</h1>
            <p>{{ __('ui.notifications_intro_v3') }}</p>
        </div>
        <div class="notifications-hero-stats">
            <div class="notifications-hero-count">
                <strong>{{ $unreadCount }}</strong>
                <span>{{ __('ui.notifications_unread') }}</span>
            </div>
            <div class="notifications-hero-count">
                <strong>{{ $importantUnreadCount }}</strong>
                <span>{{ __('ui.notifications_important_unread') }}</span>
            </div>
            <div class="notifications-hero-count">
                <strong>{{ $todayCount }}</strong>
                <span>{{ __('ui.notifications_today') }}</span>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        @if(session('notification_status'))
            <div class="admin-success">{{ session('notification_status') }}</div>
        @endif

        @php
            $selectedUnreadCount = $category === 'all'
                ? $unreadCount
                : (int) ($categoryUnreadCounts[$category] ?? 0);
            $baseQuery = [
                'filter' => $filter === 'unread' ? 'unread' : null,
                'category' => $category !== 'all' ? $category : null,
                'priority' => $priority !== 'all' ? $priority : null,
            ];
            $categoryIcons = [
                'friends' => '👥',
                'groups' => '🎟️',
                'group_visits' => '📅',
                'road_trips' => '🧭',
                'meetups' => '📍',
                'ride_together' => '🎢',
                'trip_chat' => '💬',
                'trip_program' => '🗓️',
                'teams' => '🏁',
                'visit_live' => '⚡',
                'community' => '📷',
                'progression' => '🏆',
                'generic' => '🔔',
            ];
        @endphp

        <div class="notifications-toolbar notifications-toolbar-v3">
            <div class="notifications-filter-groups">
                <div class="notifications-filters">
                    <a
                        href="{{ route('notifications.index', array_filter(['category' => $baseQuery['category'], 'priority' => $baseQuery['priority']])) }}"
                        class="{{ $filter === 'all' ? 'is-active' : '' }}"
                    >{{ __('ui.notifications_filter_all') }}</a>
                    <a
                        href="{{ route('notifications.index', array_filter(['filter' => 'unread', 'category' => $baseQuery['category'], 'priority' => $baseQuery['priority']])) }}"
                        class="{{ $filter === 'unread' ? 'is-active' : '' }}"
                    >{{ __('ui.notifications_filter_unread') }}</a>
                </div>

                <div class="notifications-priority-filters" aria-label="{{ __('ui.notifications_priority_filters') }}">
                    <a
                        href="{{ route('notifications.index', array_filter(['filter' => $baseQuery['filter'], 'category' => $baseQuery['category']])) }}"
                        class="{{ $priority === 'all' ? 'is-active' : '' }}"
                    >{{ __('ui.notifications_priority_all') }}</a>
                    <a
                        href="{{ route('notifications.index', array_filter(['filter' => $baseQuery['filter'], 'category' => $baseQuery['category'], 'priority' => 'important'])) }}"
                        class="{{ $priority === 'important' ? 'is-active' : '' }}"
                    >{{ __('ui.notifications_filter_important') }}</a>
                    <a
                        href="{{ route('notifications.index', array_filter(['filter' => $baseQuery['filter'], 'category' => $baseQuery['category'], 'priority' => 'urgent'])) }}"
                        class="{{ $priority === 'urgent' ? 'is-active' : '' }}"
                    >{{ __('ui.notifications_filter_urgent') }}</a>
                </div>
            </div>

            <div class="notifications-toolbar-actions">
                @if($selectedUnreadCount > 0)
                    <form method="post" action="{{ route('notifications.read-all') }}">
                        @csrf
                        @if($category !== 'all')
                            <input type="hidden" name="category" value="{{ $category }}">
                        @endif
                        <button class="button button-ghost" type="submit">
                            {{ $category !== 'all' ? __('ui.notifications_read_category') : __('ui.notifications_read_all') }}
                        </button>
                    </form>
                @endif

                @if($readCount > 0)
                    <form
                        method="post"
                        action="{{ route('notifications.delete-read') }}"
                        onsubmit="return confirm(@js(__('ui.notifications_delete_read_confirm')))"
                    >
                        @csrf
                        @method('DELETE')
                        @if($category !== 'all')
                            <input type="hidden" name="category" value="{{ $category }}">
                        @endif
                        <button class="button button-ghost" type="submit">{{ __('ui.notifications_delete_read') }}</button>
                    </form>
                @endif
            </div>
        </div>

        <div class="notifications-category-strip" aria-label="{{ __('ui.notifications_categories') }}">
            <a
                href="{{ route('notifications.index', array_filter(['filter' => $baseQuery['filter'], 'priority' => $baseQuery['priority']])) }}"
                class="notification-category-chip {{ $category === 'all' ? 'is-active' : '' }}"
            >
                <span>🔔</span>
                <strong>{{ __('ui.notifications_category_all') }}</strong>
                @if($unreadCount > 0)
                    <em>{{ $unreadCount }}</em>
                @endif
            </a>

            @foreach(array_keys($notificationPreferenceModes) as $categoryKey)
                @php
                    $categoryUnread = (int) ($categoryUnreadCounts[$categoryKey] ?? 0);
                @endphp
                <a
                    href="{{ route('notifications.index', array_filter(['filter' => $baseQuery['filter'], 'priority' => $baseQuery['priority'], 'category' => $categoryKey])) }}"
                    class="notification-category-chip {{ $category === $categoryKey ? 'is-active' : '' }}"
                >
                    <span>{{ $categoryIcons[$categoryKey] ?? '🔔' }}</span>
                    <strong>{{ __('ui.notifications_category_'.$categoryKey) }}</strong>
                    @if($categoryUnread > 0)
                        <em>{{ $categoryUnread }}</em>
                    @endif
                </a>
            @endforeach
        </div>

        <div class="notifications-v3-settings-grid">
            <details class="notifications-preferences-panel">
                <summary>
                    <span>⚙️</span>
                    <div>
                        <strong>{{ __('ui.notifications_preferences_title') }}</strong>
                        <small>{{ __('ui.notifications_preferences_intro_v3') }}</small>
                    </div>
                </summary>
                <form method="post" action="{{ route('notifications.preferences') }}" class="notifications-preferences-form">
                    @csrf
                    @method('PUT')
                    <div class="notifications-preferences-grid">
                        @foreach($notificationPreferenceModes as $categoryKey => $mode)
                            <label class="notification-preference-item notification-preference-item-v3">
                                <span class="notification-preference-icon">{{ $categoryIcons[$categoryKey] ?? '🔔' }}</span>
                                <span>
                                    <strong>{{ __('ui.notifications_category_'.$categoryKey) }}</strong>
                                    <small>{{ __('ui.notifications_preference_'.$categoryKey) }}</small>
                                </span>
                                <select name="category_modes[{{ $categoryKey }}]" aria-label="{{ __('ui.notifications_category_'.$categoryKey) }}">
                                    <option value="all" @selected($mode === 'all')>{{ __('ui.notifications_mode_all') }}</option>
                                    <option value="important" @selected($mode === 'important')>{{ __('ui.notifications_mode_important') }}</option>
                                    <option value="off" @selected($mode === 'off')>{{ __('ui.notifications_mode_off') }}</option>
                                </select>
                            </label>
                        @endforeach
                    </div>
                    <button class="button button-primary" type="submit">{{ __('ui.notifications_preferences_save') }}</button>
                </form>
            </details>

            <div class="notifications-browser-card">
                <div class="notifications-browser-icon">🖥️</div>
                <div>
                    <strong>{{ __('ui.notifications_browser_title') }}</strong>
                    <p>{{ __('ui.notifications_browser_intro') }}</p>
                    <small>{{ __('ui.notifications_browser_site_open') }}</small>
                </div>
                <div class="notifications-browser-actions">
                    <button
                        class="button button-ghost"
                        type="button"
                        data-desktop-notifications-toggle
                        data-label-enable="{{ __('ui.notifications_browser_enable') }}"
                        data-label-disable="{{ __('ui.notifications_browser_disable') }}"
                    >{{ __('ui.notifications_browser_enable') }}</button>
                    <span
                        class="notifications-browser-status"
                        data-desktop-notifications-status
                        data-status-active="{{ __('ui.notifications_browser_active') }}"
                        data-status-inactive="{{ __('ui.notifications_browser_inactive') }}"
                        data-status-blocked="{{ __('ui.notifications_browser_blocked') }}"
                        data-status-unsupported="{{ __('ui.notifications_browser_unsupported') }}"
                    >{{ __('ui.notifications_browser_inactive') }}</span>
                </div>
            </div>
        </div>

        <div class="notifications-list">
            @forelse($notifications as $notification)
                @php
                    $payload = is_array($notification->payload) ? $notification->payload : [];
                    $payload['attraction'] = $payload['attraction'] ?? $payload['attraction_name'] ?? '';
                    $payload['wait'] = $payload['wait'] ?? $payload['wait_minutes'] ?? $payload['wait_time'] ?? '';
                    $isUnread = $notification->read_at === null;
                    $icon = $categoryIcons[$notification->category] ?? '🔔';
                    $categoryLabelKey = 'ui.notifications_category_'.$notification->category;
                    $categoryLabel = trans()->has($categoryLabelKey)
                        ? __($categoryLabelKey)
                        : __('ui.notifications_category_generic');
                @endphp
                <article class="notification-card {{ $isUnread ? 'is-unread' : '' }} priority-{{ $notification->priority ?: 'normal' }}">
                    <div class="notification-icon" aria-hidden="true">{{ $icon }}</div>
                    <div class="notification-copy">
                        <div class="notification-meta">
                            <span>{{ $categoryLabel }}</span>
                            @if(($notification->priority ?? 'normal') !== 'normal')
                                <span class="notification-priority">{{ __('ui.notifications_priority_'.$notification->priority) }}</span>
                            @endif
                            <time datetime="{{ $notification->created_at?->toIso8601String() }}">{{ $notification->created_at?->diffForHumans() }}</time>
                        </div>
                        <h2>{{ __($notification->title_key, $payload) }}</h2>
                        <p>{{ __($notification->body_key, $payload) }}</p>
                    </div>
                    <div class="notification-actions notification-actions-v2">
                        @if($notification->action_url)
                            <a
                                class="button {{ $isUnread ? 'button-primary' : 'button-ghost' }}"
                                href="{{ route('notifications.open', $notification) }}"
                            >{{ __('ui.notifications_open') }}</a>
                        @elseif($isUnread)
                            <form method="post" action="{{ route('notifications.read', $notification) }}">
                                @csrf
                                <button class="button button-ghost" type="submit">{{ __('ui.notifications_mark_read') }}</button>
                            </form>
                        @endif

                        <form
                            method="post"
                            action="{{ route('notifications.destroy', $notification) }}"
                            onsubmit="return confirm(@js(__('ui.notifications_delete_confirm')))"
                        >
                            @csrf
                            @method('DELETE')
                            <button class="button button-ghost notification-delete-button" type="submit">{{ __('ui.notifications_delete') }}</button>
                        </form>
                    </div>
                </article>
            @empty
                <div class="notifications-empty">
                    <div>🔔</div>
                    <strong>{{ $filter === 'unread' ? __('ui.notifications_empty_unread_title') : __('ui.notifications_empty_title') }}</strong>
                    <p>{{ $filter === 'unread' ? __('ui.notifications_empty_unread_text') : __('ui.notifications_empty_text') }}</p>
                </div>
            @endforelse
        </div>

        @if($notifications->hasPages())
            <div class="notifications-pagination">{{ $notifications->links() }}</div>
        @endif
    </div>
</section>
@endsection