<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import { computed } from 'vue';
import {
    AlertTriangle,
    Bell,
    CheckCheck,
    FileUp,
    Mail,
    RefreshCw,
    Send,
} from 'lucide-vue-next';
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/AppLayout.vue';
import type { AppNotification, NotificationType } from '@/types/notification';

type Props = {
    notifications: {
        data: AppNotification[];
        links: { url: string | null; label: string; active: boolean }[];
        current_page: number;
        last_page: number;
    };
    markAllReadUrl: string;
    readUrl: string;
};

const props = defineProps<Props>();

const hasUnread = computed(() =>
    props.notifications.data.some((n) => !n.read_at),
);

const iconMap: Record<NotificationType, typeof Send> = {
    nudge: Send,
    declaration_overdue: AlertTriangle,
    document_uploaded: FileUp,
    bulk_notification: Mail,
    status_changed: RefreshCw,
};

function getIcon(notificationType?: NotificationType) {
    if (!notificationType) return Bell;
    return iconMap[notificationType] ?? Bell;
}

function getDescription(notification: AppNotification): string {
    const type = notification.data?.notification_type;
    const title = notification.data?.declaration_title ?? 'Déclaration';
    const sender = notification.data?.sender_name;

    switch (type) {
        case 'nudge':
            return sender
                ? `Relance de ${sender} sur ${title}`
                : `Relance sur ${title}`;
        case 'declaration_overdue':
            return `Déclaration en retard : ${title}`;
        case 'document_uploaded':
            return `Document téléversé pour ${title}`;
        case 'status_changed':
            return `Statut modifié : ${title}`;
        case 'bulk_notification':
            return `Notification groupée : ${title}`;
        default:
            return title;
    }
}

function markAllRead() {
    router.post(props.markAllReadUrl);
}

function markAsRead(notification: AppNotification) {
    if (notification.read_at) return;

    const url = props.readUrl.replace('__ID__', notification.id);
    router.post(url, {}, { preserveScroll: true });
}

function navigateToNotification(notification: AppNotification) {
    const targetUrl = notification.data?.url;

    if (!notification.read_at) {
        const url = props.readUrl.replace('__ID__', notification.id);
        router.post(url, {}, {
            preserveScroll: true,
            onSuccess: () => {
                if (targetUrl) {
                    router.visit(targetUrl);
                }
            },
        });
        return;
    }

    if (targetUrl) {
        router.visit(targetUrl);
    }
}

function goToPage(url: string | null) {
    if (url) {
        router.visit(url);
    }
}
</script>

<template>
    <AppLayout :breadcrumbs="[{ title: 'Notifications', href: '#' }]">
        <Head title="Notifications" />

        <div class="flex items-center justify-between">
            <Heading
                title="Notifications"
                description="Consultez vos notifications."
            />
            <Button
                v-if="hasUnread"
                variant="outline"
                size="sm"
                @click="markAllRead"
            >
                <CheckCheck class="mr-1.5 size-4" />
                Tout marquer comme lu
            </Button>
        </div>

        <div
            v-if="notifications.data.length === 0"
            class="mt-8 flex flex-col items-center justify-center py-12 text-center"
        >
            <Bell class="mb-4 h-12 w-12 text-muted-foreground" />
            <p class="text-muted-foreground">
                Aucune notification
            </p>
        </div>

        <div v-else class="mt-6 space-y-2">
            <div
                v-for="notification in notifications.data"
                :key="notification.id"
                class="flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-colors hover:bg-muted/30"
                :class="{
                    'border-primary/20 bg-muted/50': !notification.read_at,
                    'opacity-70': notification.read_at,
                }"
                @click="navigateToNotification(notification)"
            >
                <component
                    :is="getIcon(notification.data?.notification_type)"
                    class="mt-0.5 size-5 shrink-0 text-muted-foreground"
                />
                <div class="flex-1 space-y-1">
                    <p class="text-sm font-medium">
                        {{ getDescription(notification) }}
                    </p>
                    <p class="text-xs text-muted-foreground">
                        {{ notification.created_at }}
                    </p>
                </div>
                <div class="flex shrink-0 items-center gap-2">
                    <button
                        v-if="!notification.read_at"
                        class="text-xs text-muted-foreground hover:text-foreground"
                        @click.stop="markAsRead(notification)"
                    >
                        Marquer lu
                    </button>
                    <span
                        v-if="!notification.read_at"
                        class="size-2 rounded-full bg-primary"
                    />
                </div>
            </div>

            <!-- Pagination -->
            <div
                v-if="notifications.last_page > 1"
                class="flex items-center justify-center gap-2 pt-4"
            >
                <template
                    v-for="(link, index) in notifications.links"
                    :key="index"
                >
                    <Button
                        v-if="link.url || link.active"
                        variant="outline"
                        size="sm"
                        :disabled="!link.url || link.active"
                        @click="goToPage(link.url)"
                        v-html="link.label"
                    />
                </template>
            </div>
        </div>
    </AppLayout>
</template>
