NextEdu/src/modules/messaging/components/notification-list.tsx

"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { useTranslations } from "next-intl"
import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { cn, formatDate } from "@/shared/lib/utils"

import { markAllNotificationsAsReadAction, markNotificationAsReadAction } from "../actions"
import type { Notification, NotificationType } from "@/modules/notifications/types"

const TYPE_ICON: Record<NotificationType, typeof Bell> = {
  message: MessageSquare,
  announcement: Megaphone,
  homework: PenTool,
  grade: GraduationCap,
}

export function NotificationList({ notifications }: { notifications: Notification[] }) {
  const t = useTranslations("messages")
  const router = useRouter()
  const [isWorking, setIsWorking] = useState(false)
  const hasUnread = notifications.some((n) => !n.isRead)

  const handleMarkAllRead = async () => {
    setIsWorking(true)
    try {
      const res = await markAllNotificationsAsReadAction()
      if (res.success) {
        toast.success(res.message)
        router.refresh()
      } else {
        toast.error(res.message || t("messages.markReadFailed"))
      }
    } catch {
      toast.error(t("messages.markReadFailed"))
    } finally {
      setIsWorking(false)
    }
  }

  const handleMarkRead = async (id: string) => {
    try {
      const res = await markNotificationAsReadAction(id)
      if (res.success) {
        router.refresh()
      }
    } catch {
      toast.error(t("messages.markReadFailed"))
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">{t("title.notifications")}</h2>
          <p className="text-muted-foreground text-sm">{t("description.notifications")}</p>
        </div>
        {hasUnread ? (
          <Button onClick={handleMarkAllRead} disabled={isWorking} variant="outline">
            <CheckCheck className="mr-2 h-4 w-4" />
            {t("actions.markAllRead")}
          </Button>
        ) : null}
      </div>

      {notifications.length === 0 ? (
        <EmptyState
          title={t("empty.noNotifications")}
          description={t("empty.noNotificationsDesc")}
          icon={Bell}
          className="h-auto border-none shadow-none"
        />
      ) : (
        <div className="space-y-3">
          {notifications.map((n) => {
            const Icon = TYPE_ICON[n.type] ?? Bell
            return (
              <Card
                key={n.id}
                className={cn("transition-colors", !n.isRead && "border-primary/40 bg-primary/5")}
              >
                <CardContent className="flex items-start gap-3 py-4">
                  <div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-full">
                    <Icon className="h-4 w-4" aria-hidden="true" />
                  </div>
                  <div className="min-w-0 flex-1 space-y-1">
                    <div className="flex items-center gap-2">
                      <span className={cn("text-sm", !n.isRead ? "font-semibold" : "font-medium")}>
                        {n.title}
                      </span>
                      {!n.isRead ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
                    </div>
                    {n.content ? (
                      <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
                        {n.content}
                      </p>
                    ) : null}
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Badge variant="outline" className="text-xs">
                        {t(`notificationType.${n.type}`)}
                      </Badge>
                      <span>{formatDate(n.createdAt)}</span>
                      {!n.isRead ? (
                        <button
                          type="button"
                          onClick={() => handleMarkRead(n.id)}
                          className="text-primary hover:underline"
                          aria-label={t("actions.markRead")}
                        >
                          {t("actions.markRead")}
                        </button>
                      ) : null}
                      {n.link ? (
                        <Link href={n.link} className="ml-auto text-primary hover:underline">
                          {t("actions.view")}
                        </Link>
                      ) : null}
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}