@extends('layouts.base')

@section('title', 'Notifications - Animation Vendeurs')

@section('x-data', 'notificationsComponent()')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-3xl pb-32">

    <header class="mb-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h1 class="text-3xl font-display font-bold text-boulanger-dark">
                    🔔 Notifications
                </h1>
                <p class="text-boulanger-gray mt-1" x-text="`${unreadCount} non lue(s)`"></p>
            </div>

            <button @click="markAllAsRead()"
                    x-show="unreadCount > 0"
                    class="text-boulanger-orange hover:underline text-sm font-medium">
                Tout marquer comme lu
            </button>
        </div>

        {{-- * Filtres par type --}}
        <div class="flex gap-2 overflow-x-auto pb-2">
            <button @click="filter = 'all'; fetchNotifications('all')"
                    :class="filter === 'all' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-700 border border-gray-200'"
                    class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition">
                Tout
            </button>
            <button @click="filter = 'likes'; fetchNotifications('likes')"
                    :class="filter === 'likes' ? 'bg-red-500 text-white' : 'bg-white text-gray-700 border border-gray-200'"
                    class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition">
                ❤️ Likes
            </button>
            <button @click="filter = 'comments'; fetchNotifications('comments')"
                    :class="filter === 'comments' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 border border-gray-200'"
                    class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition">
                💬 Commentaires
            </button>
            <button @click="filter = 'pins'; fetchNotifications('pins')"
                    :class="filter === 'pins' ? 'bg-yellow-500 text-white' : 'bg-white text-gray-700 border border-gray-200'"
                    class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition">
                📌 Épinglés
            </button>
        </div>
    </header>

    {{-- * Loading State --}}
    <template x-if="isLoading">
        <div class="text-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange mx-auto"></div>
        </div>
    </template>

    {{-- * Liste des notifications (US-11) --}}
    <div class="space-y-3" x-show="!isLoading">
        <template x-for="notif in notifications" :key="notif.id">
            <a :href="notif.data?.url || '#'"
               @click="markAsRead(notif.id)"
               class="block bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition"
               :class="!notif.read_at ? 'border-orange-200 bg-orange-50/50' : ''">
                <div class="flex items-start gap-4">
                    {{-- * Icône du type de notification --}}
                    <div class="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0"
                         :class="getNotifIcon(notif.type || notif.data?.type).bg">
                        <span x-text="getNotifIcon(notif.type || notif.data?.type).emoji" class="text-2xl"></span>
                    </div>

                    {{-- * Contenu de la notification --}}
                    <div class="flex-1 min-w-0">
                        {{-- Message (groupé ou simple) --}}
                        <p class="font-semibold text-boulanger-dark text-base mb-1">
                            <template x-if="notif.grouped && notif.count > 1">
                                <span>
                                    <strong x-text="notif.users[0].name"></strong>
                                    <template x-if="notif.count === 2">
                                        <span> et <strong x-text="notif.users[1].name"></strong></span>
                                    </template>
                                    <template x-if="notif.count > 2">
                                        <span> et <strong x-text="(notif.count - 1) + ' autre' + (notif.count > 2 ? 's' : '')"></strong></span>
                                    </template>
                                    <span x-text="' ' + getGroupedMessage(notif.type)"></span>
                                </span>
                            </template>
                            <template x-if="!notif.grouped || notif.count === 1">
                                <span x-text="notif.data?.message || getNotificationTitle(notif)"></span>
                            </template>
                        </p>

                        {{-- * Preview du contenu du post/commentaire --}}
                        <template x-if="notif.data.post_content || notif.data.comment_content">
                            <div class="bg-gray-50 rounded-lg p-3 mt-2 border border-gray-100">
                                <p class="text-sm text-gray-700 line-clamp-2" x-text="notif.data.post_content || notif.data.comment_content"></p>
                            </div>
                        </template>

                        {{-- * Infos auteur --}}
                        <div class="flex items-center gap-2 mt-3">
                            <template x-if="notif.data.liker_name || notif.data.commenter_name || notif.data.admin_name">
                                <div class="flex items-center gap-2">
                                    <div class="w-6 h-6 rounded-full bg-boulanger-orange/10 flex items-center justify-center text-xs font-bold text-boulanger-orange">
                                        <span x-text="(notif.data.liker_name || notif.data.commenter_name || notif.data.admin_name).charAt(0)"></span>
                                    </div>
                                    <span class="text-xs text-gray-600" x-text="notif.data.liker_name || notif.data.commenter_name || notif.data.admin_name"></span>
                                </div>
                            </template>
                            <span class="text-xs text-gray-400">•</span>
                            <span class="text-xs text-gray-400" x-text="timeAgo(notif.created_at)"></span>
                        </div>
                    </div>

                    {{-- * Badge non lu --}}
                    <div x-show="!notif.read_at" class="w-3 h-3 bg-boulanger-orange rounded-full flex-shrink-0 animate-pulse"></div>
                </div>
            </a>
        </template>
    </div>

    {{-- * Empty State --}}
    <template x-if="!isLoading && notifications.length === 0">
        <div class="text-center py-12">
            <p class="text-boulanger-gray">Aucune notification</p>
        </div>
    </template>

</div>
@endsection