"use client";

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

export default function NotificationBell({ initialUnread = 0 }: { initialUnread?: number }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  // SSR 直出未读数，红点不再挂载后才弹出；挂载后轮询自然校正
  const [unread, setUnread] = useState(initialUnread);
  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
  const [loading, setLoading] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // 轮询未读数（30 秒）；页面从后台切回时立即探测一次，
  // 使账号被封禁等服务端状态变化在用户切回标签页的瞬间即可被发现
  useEffect(() => {
    let cancelled = false;
    const fetchCount = () => {
      apiUnreadCount()
        .then((res) => {
          if (!cancelled) setUnread(res.count || 0);
        })
        .catch(() => {});
    };
    fetchCount();
    const timer = setInterval(fetchCount, 30000);
    const onVisible = () => {
      if (document.visibilityState === "visible") fetchCount();
    };
    document.addEventListener("visibilitychange", onVisible);
    return () => {
      cancelled = true;
      clearInterval(timer);
      document.removeEventListener("visibilitychange", onVisible);
    };
  }, []);

  // 点击外部关闭下拉
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

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

  const handleToggle = () => {
    const next = !open;
    setOpen(next);
    if (next) {
      loadNotifications();
    }
  };

  const handleClickNotification = async (n: NotificationItem) => {
    if (!n.is_read) {
      apiMarkRead(n.id).catch(() => {});
      setUnread((c) => Math.max(0, c - 1));
      setNotifications((list) =>
        list.map((item) => (item.id === n.id ? { ...item, is_read: true } : item))
      );
    }
    setOpen(false);
    router.push(`/post/${n.post_id}`);
  };

  const handleMarkAllRead = async () => {
    await apiMarkAllRead();
    setUnread(0);
    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} 小时前`;
    const day = Math.floor(hour / 24);
    return `${day} 天前`;
  };

  const actionText = (n: NotificationItem) => {
    if (n.type === "comment") return "评论了你的帖子";
    if (n.type === "reply") return "回复了你的评论";
    if (n.type === "approved") return "审核通过";
    if (n.type === "rejected") return "未通过审核";
    return "点赞了你的帖子";
  };

  // 审核结果类通知：无互动对象语义，使用专用图标与语义色
  const isApproval = (n: NotificationItem) => n.type === "approved" || n.type === "rejected";
  const iconStyle = (n: NotificationItem): { color: string; bg: string; node: React.ReactNode } => {
    if (n.type === "approved")
      return { color: "var(--ok)", bg: "var(--ok-soft)", node: <CheckCircle2 size={15} /> };
    if (n.type === "rejected")
      return { color: "var(--danger)", bg: "var(--danger-soft)", node: <XCircle size={15} /> };
    if (n.type === "like")
      return { color: "var(--clay)", bg: "var(--clay-soft)", node: <Heart size={15} /> };
    return { color: "var(--accent)", bg: "var(--accent-soft)", node: <MessageCircle size={15} /> };
  };

  return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={handleToggle}
        aria-label="通知"
        className="relative w-10 h-10 flex items-center justify-center rounded-full transition-colors"
        style={{
          color: open ? "var(--accent)" : "var(--ink-2)",
          border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
          background: open ? "var(--accent-soft)" : "var(--panel)",
        }}
      >
        <Bell size={17} />
        {unread > 0 && (
          <span
            className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-bold flex items-center justify-center rounded-full"
            style={{
              background: "var(--clay)",
              color: "#fff",
              border: "2px solid var(--bg)",
            }}
          >
            {unread > 99 ? "99+" : unread}
          </span>
        )}
      </button>

      {open && (
        <div
          className="absolute right-0 mt-2.5 w-[340px] max-w-[calc(100vw-2rem)] overflow-hidden z-50 j13-toast-in"
          style={{
            background: "var(--panel)",
            border: "1px solid var(--line)",
            borderRadius: "var(--r)",
            boxShadow: "var(--shadow-lg)",
          }}
        >
          <div
            className="flex items-center justify-between px-5 py-3.5"
            style={{ borderBottom: "1px solid var(--line)" }}
          >
            <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>通知</span>
            {unread > 0 && (
              <button
                onClick={handleMarkAllRead}
                className="flex items-center gap-1 text-xs meta hover:text-[var(--accent)] transition-colors"
              >
                <CheckCheck size={13} /> 全部已读
              </button>
            )}
          </div>

          <div className="max-h-[24rem] overflow-y-auto">
            {loading ? (
              <p className="text-center py-10 meta">加载中...</p>
            ) : notifications.length === 0 ? (
              <div className="text-center py-12">
                <Bell size={26} className="mx-auto mb-2.5" style={{ color: "var(--ink-3)" }} />
                <p className="meta">还没有通知</p>
              </div>
            ) : (
              notifications.map((n) => {
                const ic = iconStyle(n);
                const approval = isApproval(n);
                return (
                <button
                  key={n.id}
                  onClick={() => handleClickNotification(n)}
                  className={`w-full text-left px-4 py-3.5 flex items-start gap-3 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] ${
                    n.is_read ? "" : "bg-[var(--panel-2)]"
                  }`}
                  style={{
                    borderBottom: "1px solid var(--line)",
                  }}
                >
                  <span
                    className="w-9 h-9 shrink-0 rounded-full flex items-center justify-center"
                    style={{ color: ic.color, background: ic.bg }}
                  >
                    {ic.node}
                  </span>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
                      {approval ? (
                        <span
                          className="font-bold"
                          style={{ color: n.type === "approved" ? "var(--ok)" : "var(--danger)" }}
                        >
                          {actionText(n)}
                        </span>
                      ) : (
                        <>
                          <span className="font-medium">{n.actor.nickname}</span>{" "}
                          <span className="meta">{actionText(n)}</span>
                        </>
                      )}
                    </p>
                    <p className="text-xs mt-1 truncate" style={{ color: "var(--ink-2)" }}>
                      《{n.post.title}》
                    </p>
                    {n.content && (
                      <p className="text-xs mt-1 line-clamp-1" style={{ color: "var(--ink-3)" }}>
                        {n.content}
                      </p>
                    )}
                    <p className="meta mt-1.5 text-xs">{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
            className="px-4 py-2.5 text-center"
            style={{ borderTop: "1px solid var(--line)" }}
          >
            <Link
              href="/notifications"
              onClick={() => setOpen(false)}
              className="meta text-xs hover:text-[var(--accent)] transition-colors"
            >
              查看全部通知 →
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}