import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Tag } from "antd";
import { Bell } from "lucide-react";
import { lazy, Suspense, useEffect, useState, type CSSProperties } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";

import { aceternityMotion } from "@/lib/aceternity-motion";
import { getAnnouncementFeed, markAnnouncementsRead } from "@/services/api/announcements";

const AnnouncementTimelineModal = lazy(() => import("@/components/ui/aceternity/announcement-timeline-modal").then((module) => ({ default: module.AnnouncementTimelineModal })));

const ANNOUNCEMENT_REFRESH_INTERVAL_MS = 5 * 60_000;
const ANNOUNCEMENT_CACHE_TTL_MS = 60_000;
const ANNOUNCEMENT_DISMISS_TODAY_PREFIX = "yingce.announcements.dismiss-today";
const ANNOUNCEMENT_DISMISS_SESSION_PREFIX = "yingce.announcements.dismiss-session";

type AnnouncementFeed = Awaited<ReturnType<typeof getAnnouncementFeed>>;

type SystemAnnouncementCenterProps = {
    userId: string;
    className?: string;
    style?: CSSProperties;
    showLabel?: boolean;
    labelClassName?: string;
    staticMotion?: boolean;
    autoOpen?: boolean;
};

export function SystemAnnouncementCenter({ userId, className, style, showLabel = false, labelClassName, staticMotion = false, autoOpen = false }: SystemAnnouncementCenterProps) {
    const reducedMotion = useReducedMotion();
    const queryClient = useQueryClient();
    const [open, setOpen] = useState(false);
    const [automaticPrompt, setAutomaticPrompt] = useState(false);
    const [dismissedFingerprint, setDismissedFingerprint] = useState("");
    const queryKey = ["system-announcements", userId] as const;
    const feedQuery = useQuery({
        queryKey,
        queryFn: getAnnouncementFeed,
        enabled: Boolean(userId),
        staleTime: ANNOUNCEMENT_CACHE_TTL_MS,
        refetchInterval: ANNOUNCEMENT_REFRESH_INTERVAL_MS,
        // 公告在打开面板时会显式 refetch；不把浏览器 focus 变成每个工作区实例的请求触发器。
        refetchOnWindowFocus: false,
    });
    const announcements = feedQuery.data?.announcements || [];
    const unreadCount = Math.max(0, feedQuery.data?.unreadCount || 0);
    const error = feedQuery.error instanceof Error ? feedQuery.error.message : feedQuery.error ? "读取公告失败" : "";

    useEffect(() => {
        if (!autoOpen || open || !feedQuery.isSuccess || announcements.length === 0) return;
        const fingerprint = announcementFeedFingerprint(announcements);
        if (!fingerprint || fingerprint === dismissedFingerprint || announcementAutoPromptSuppressed(userId, fingerprint)) return;
        setAutomaticPrompt(true);
        setOpen(true);
    }, [announcements, autoOpen, dismissedFingerprint, feedQuery.isSuccess, open, unreadCount, userId]);

    const openAnnouncements = async () => {
        setAutomaticPrompt(false);
        setOpen(true);
        const feed = (await feedQuery.refetch()).data;
        if (!feed?.unreadCount) return;
        try {
            const result = await markAnnouncementsRead(feed.announcements.map((announcement) => announcement.id));
            const nextUnreadCount = Math.max(0, result.unreadCount || 0);
            queryClient.setQueryData<AnnouncementFeed>(queryKey, (current) => current ? { ...current, unreadCount: nextUnreadCount } : current);
            if (nextUnreadCount > 0) void queryClient.invalidateQueries({ queryKey });
        } catch {
            // 已读状态是辅助读路径，失败时保留角标，下一次打开或轮询会继续尝试同步。
        }
    };

    const dismissAutomaticPrompt = (duration: "once" | "today") => {
        const fingerprint = announcementFeedFingerprint(announcements);
        if (fingerprint) setDismissedFingerprint(fingerprint);
        if (fingerprint) rememberAnnouncementDismissalSession(userId, fingerprint);
        if (duration === "today") rememberAnnouncementDismissalToday(userId, fingerprint);
        setAutomaticPrompt(false);
        setOpen(false);
    };

    return (
        <>
            <motion.button
                type="button"
                className={className}
                style={style}
                whileHover={reducedMotion || staticMotion ? undefined : { y: -1, scale: 1.035 }}
                whileTap={reducedMotion || staticMotion ? undefined : { scale: 0.94 }}
                transition={aceternityMotion.spring.dock}
                onClick={() => void openAnnouncements()}
                aria-label={unreadCount ? `系统公告，${unreadCount} 条未读` : "系统公告"}
                title="系统公告"
                data-icon-only={showLabel ? undefined : true}
            >
                <span className="relative shrink-0">
                    <Bell className="size-4" />
                    <AnimatePresence initial={false}>
                        {unreadCount > 0 ? (
                            <motion.span
                                key="unread-dot"
                                initial={reducedMotion ? false : { opacity: 0, scale: 0.5 }}
                                animate={{ opacity: 1, scale: 1 }}
                                exit={{ opacity: 0, scale: 0.6 }}
                                transition={aceternityMotion.spring.dock}
                                className="absolute -right-1 -top-1 size-2 rounded-full border border-background bg-red-500"
                                aria-hidden
                            />
                        ) : null}
                    </AnimatePresence>
                </span>
                {showLabel ? (
                    <span className={`min-w-0 flex-1 items-center justify-between gap-2 whitespace-nowrap ${labelClassName || ""}`}>
                        <span>系统公告</span>
                        <Tag color={unreadCount > 0 ? "gold" : undefined} className="!m-0 !min-w-6 !px-1.5 !text-center !text-[var(--fs-micro)] !font-medium !leading-[18px] tabular-nums">{announcements.length}</Tag>
                    </span>
                ) : null}
            </motion.button>
            {open ? (
                <Suspense fallback={null}>
                    <AnnouncementTimelineModal
                        open
                        announcements={announcements}
                        loading={feedQuery.isFetching}
                        error={announcements.length ? "" : error}
                        automaticPrompt={automaticPrompt}
                        onClose={() => dismissAutomaticPrompt("once")}
                        onDismissOnce={() => dismissAutomaticPrompt("once")}
                        onDismissToday={() => dismissAutomaticPrompt("today")}
                        onRetry={() => void feedQuery.refetch()}
                    />
                </Suspense>
            ) : null}
        </>
    );
}

function announcementFeedFingerprint(announcements: AnnouncementFeed["announcements"]) {
    return announcements
        .map((announcement) => `${announcement.id}:${announcement.publishedAt}`)
        .sort()
        .join("|");
}

function announcementAutoPromptSuppressed(userId: string, fingerprint: string) {
    if (hasAnnouncementDismissalSession(userId, fingerprint)) return true;
    try {
        const value = localStorage.getItem(`${ANNOUNCEMENT_DISMISS_TODAY_PREFIX}.${userId}`);
        const parsed = value ? JSON.parse(value) as { date?: string; fingerprint?: string } : null;
        return parsed?.date === localDateKey() && parsed.fingerprint === fingerprint;
    } catch {
        return false;
    }
}

function hasAnnouncementDismissalSession(userId: string, fingerprint: string) {
    try {
        return sessionStorage.getItem(`${ANNOUNCEMENT_DISMISS_SESSION_PREFIX}.${userId}`) === fingerprint;
    } catch {
        return false;
    }
}

function rememberAnnouncementDismissalSession(userId: string, fingerprint: string) {
    try {
        sessionStorage.setItem(`${ANNOUNCEMENT_DISMISS_SESSION_PREFIX}.${userId}`, fingerprint);
    } catch {
        // sessionStorage 不可用时保留页内 dismissedFingerprint 作为降级。
    }
}

function rememberAnnouncementDismissalToday(userId: string, fingerprint: string) {
    try {
        localStorage.setItem(`${ANNOUNCEMENT_DISMISS_TODAY_PREFIX}.${userId}`, JSON.stringify({ date: localDateKey(), fingerprint }));
    } catch {
        // 浏览器禁用存储时仍允许关闭弹窗，本次组件生命周期内不会重复打开。
    }
}

function localDateKey() {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
}