"use client"

import Link from "next/link"
import { Bell, ChevronRight } from "lucide-react"
import { useTranslations } from "next-intl"

import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { EmptyState } from "@/shared/components/ui/empty-state"

/**
 * 仪表盘通知中心 Widget（L5）。
 *
 * 集成到仪表盘侧边栏，显示最近通知摘要。
 * 完整通知下拉由 SiteHeader 的 NotificationDropdown 处理，
 * 此 Widget 提供仪表盘内的快速入口。
 */
export interface DashboardNotificationItem {
  id: string
  title: string
  body: string
  createdAt: string
  read: boolean
  href?: string
}

export function DashboardNotificationWidget({
  notifications,
  viewAllHref = "/notifications",
}: {
  notifications: readonly DashboardNotificationItem[]
  viewAllHref?: string
}) {
  const t = useTranslations("dashboard")
  const unreadCount = notifications.filter((n) => !n.read).length

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <Bell className="h-4 w-4 text-muted-foreground" aria-hidden />
          {t("sections.notifications")}
          {unreadCount > 0 && (
            <Badge variant="default" className="tabular-nums">
              {unreadCount}
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {notifications.length === 0 ? (
          <EmptyState
            title={t("empty.noNotifications")}
            description={t("empty.noNotificationsDesc")}
            className="h-auto border-none shadow-none"
          />
        ) : (
          <ul className="space-y-1" role="list">
            {notifications.slice(0, 5).map((n) => (
              <li key={n.id}>
                <Link
                  href={n.href ?? "#"}
                  className="group flex items-start justify-between gap-2 rounded-md border border-transparent px-3 py-2 hover:bg-muted/50 transition-colors"
                >
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      {!n.read && (
                        <span className="h-2 w-2 shrink-0 rounded-full bg-primary" aria-label="Unread" />
                      )}
                      <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
                        {n.title}
                      </span>
                    </div>
                    <p className="text-xs text-muted-foreground truncate mt-0.5">{n.body}</p>
                  </div>
                  <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden />
                </Link>
              </li>
            ))}
          </ul>
        )}
        <div className="flex justify-end pt-3">
          <Button asChild variant="ghost" size="sm">
            <Link href={viewAllHref}>
              {t("sections.viewAllNotifications")}
              <ChevronRight className="ml-1 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
