jiang13-bbs/frontend/app/notifications/page.tsx

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Heart, MessageCircle, CheckCheck, Bell, ChevronRight } from "lucide-react";
import {
  apiFetchNotifications,
  apiMarkRead,
  apiMarkAllRead,
  type NotificationItem,
} from "@/lib/api";

export default function NotificationsPage() {
  const router = useRouter();
  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
  const [loading, setLoading] = useState(true);

  const load = async () => {
    setLoading(true);
    try {
      const res = await apiFetchNotifications(1);
      setNotifications(res.notifications || []);
    } catch {
      setNotifications([]);
    }
    setLoading(false);
  };

  useEffect(() => {
    load();
  }, []);

  const handleClick = async (n: NotificationItem) => {
    if (!n.is_read) {
      apiMarkRead(n.id).catch(() => {});
      setNotifications((list) =>
        list.map((item) => (item.id === n.id ? { ...item, is_read: true } : item))
      );
    }
    router.push(`/post/${n.post_id}`);
  };

  const handleMarkAll = async () => {
    await apiMarkAllRead();
    setNotifications((list) => list.map((item) => ({ ...item, is_read: true })));
  };

  const formatTime = (dateStr: string) => {
    const diff = Date.now() - new Date(dateStr).getTime();
    const min = Math.floor(diff / 60000);
    if (min < 1) return "刚刚";
    if (min < 60) return `${min} 分钟前`;
    const hour = Math.floor(min / 60);
    if (hour < 24) return `${hour} 小时前`;
    return `${Math.floor(hour / 24)} 天前`;
  };

  const hasUnread = notifications.some((n) => !n.is_read);

  return (
    <div className="max-w-2xl mx-auto">
      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>通知中心</span>
      </nav>

      <div className="flex items-end justify-between mb-6 gap-4">
        <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
          通知中心
        </h1>
        {hasUnread && (
          <button onClick={handleMarkAll} className="btn btn-line btn-sm">
            <CheckCheck size={14} /> 全部已读
          </button>
        )}
      </div>

      {loading ? (
        <div className="panel text-center py-16">
          <p className="meta">正在加载通知…</p>
        </div>
      ) : notifications.length === 0 ? (
        <div className="panel text-center py-20 px-6">
          <span
            className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
          >
            <Bell size={26} />
          </span>
          <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>还没有通知</p>
          <p className="meta mt-1.5">当有人评论或点赞你的帖子时，会在这里提醒你</p>
        </div>
      ) : (
        <div className="panel overflow-hidden p-0">
          {notifications.map((n, i) => (
            <button
              key={n.id}
              onClick={() => handleClick(n)}
              className="w-full text-left px-4 sm:px-5 py-4 flex items-start gap-3.5 transition-colors hover:bg-[var(--panel-2)]"
              style={{
                borderTop: i === 0 ? "none" : "1px solid var(--line)",
                background: n.is_read ? "transparent" : "var(--panel-2)",
              }}
            >
              <span
                className="w-10 h-10 shrink-0 rounded-full flex items-center justify-center"
                style={{
                  color: n.type === "like" ? "var(--clay)" : "var(--accent)",
                  background:
                    n.type === "like" ? "var(--clay-soft)" : "var(--accent-soft)",
                }}
              >
                {n.type === "like" ? <Heart size={16} /> : <MessageCircle size={16} />}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
                  <Link
                    href={`/u/${n.actor.id}`}
                    onClick={(e) => e.stopPropagation()}
                    className="font-semibold hover:text-[var(--accent)] transition-colors"
                  >
                    {n.actor.nickname}
                  </Link>{" "}
                  <span className="meta">{n.type === "comment" ? "评论了你的帖子" : "点赞了你的帖子"}</span>
                </p>
                <p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
                  《{n.post.title}》
                </p>
                {n.content && (
                  <p className="text-[13px] mt-1.5 line-clamp-2" style={{ color: "var(--ink-3)" }}>
                    {n.content}
                  </p>
                )}
                <p className="meta text-xs mt-2">{formatTime(n.created_at)}</p>
              </div>
              {!n.is_read && (
                <span className="w-2.5 h-2.5 shrink-0 mt-2 rounded-full" style={{ background: "var(--clay)" }} />
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}