// NotificationFeed：通知列表组件
// 依据：02-architecture-design.md §15.7 通知列表设计
// - 通知列表 + 标记已读 + 全部已读
// - 支持未读筛选

"use client";

import { useState } from "react";
import { useMyNotifications } from "@/hooks/useMyNotifications";
import { formatRelativeTime, cn } from "@/lib/utils";
import type { NotificationItem } from "@/types";

const EVENT_TYPE_LABELS: Record<NotificationItem["eventType"], string> = {
  grade_recorded: "成绩发布",
  homework_graded: "作业评分",
  homework_assigned: "作业布置",
  exam_published: "考试发布",
  attendance_alert: "考勤提醒",
  school_announcement: "学校公告",
  teacher_message: "老师消息",
  fee_reminder: "缴费提醒",
  event_invitation: "活动邀请",
};

export function NotificationFeed() {
  const [unreadOnly, setUnreadOnly] = useState(false);
  const { notifications, loading, markAsRead, markAllAsRead } =
    useMyNotifications(unreadOnly);

  const unreadCount = notifications.filter((n) => !n.read).length;

  async function handleMarkAll() {
    await markAllAsRead();
  }

  async function handleClick(n: NotificationItem) {
    if (!n.read) {
      await markAsRead(n.id);
    }
  }

  if (loading) {
    return <span className="skeleton h-64 w-full rounded" />;
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => setUnreadOnly(false)}
            className={cn(
              "rounded px-3 py-1 text-sm",
              !unreadOnly
                ? "bg-accent text-paper"
                : "border border-rule text-ink-muted",
            )}
          >
            全部
          </button>
          <button
            type="button"
            onClick={() => setUnreadOnly(true)}
            className={cn(
              "rounded px-3 py-1 text-sm",
              unreadOnly
                ? "bg-accent text-paper"
                : "border border-rule text-ink-muted",
            )}
          >
            未读{unreadCount > 0 && ` (${unreadCount})`}
          </button>
        </div>
        {unreadCount > 0 && (
          <button
            type="button"
            onClick={handleMarkAll}
            className="text-sm text-accent hover:underline"
          >
            全部标为已读
          </button>
        )}
      </div>

      <ul className="space-y-2">
        {notifications.length === 0 ? (
          <li className="py-8 text-center text-sm text-ink-muted">暂无通知</li>
        ) : (
          notifications.map((n) => (
            <li
              key={n.id}
              className={cn(
                "rounded border p-3 transition-colors",
                n.read
                  ? "border-rule bg-paper"
                  : "border-accent bg-accent-soft",
              )}
            >
              <button
                type="button"
                onClick={() => handleClick(n)}
                className="block w-full text-left"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <span className="rounded bg-rule px-1.5 py-0.5 text-xs text-ink-muted">
                        {EVENT_TYPE_LABELS[n.eventType]}
                      </span>
                      {!n.read && (
                        <span
                          className="h-2 w-2 rounded-full bg-accent"
                          aria-label="未读"
                        />
                      )}
                    </div>
                    <p className="mt-1 font-serif text-sm">{n.title}</p>
                    <p className="mt-0.5 text-xs text-ink-muted">
                      {formatRelativeTime(n.createdAt)}
                    </p>
                  </div>
                </div>
              </button>
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

export default NotificationFeed;
