import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { Bell, BellOff, Clapperboard, CreditCard, Info, Search, Users } from "lucide-react";
import { api } from "../api";
import type { Notification, NotificationTypeCounts } from "../types";
import type { Page } from "./route-config";
import { routeLabels } from "./route-config";

type TabKey = "all" | "unread" | "task" | "team" | "billing" | "system";

const PAGE_SIZE = 10; // 每次滚到底加载一批
const ZERO_COUNTS: NotificationTypeCounts = { all: 0, unread: 0, task: 0, team: 0, billing: 0, system: 0 };
const TYPE_TABS = new Set<TabKey>(["task", "team", "billing", "system"]);

// tab → 服务端查询参数(tab/未读/搜索全部走后端,滚动逐页拉)
function tabParams(tab: TabKey): { type?: string; unread?: boolean } {
  if (tab === "unread") return { unread: true };
  if (TYPE_TABS.has(tab)) return { type: tab };
  return {};
}

const PRI_LABEL: Record<string, string> = { ok: "已完成", warn: "需关注", err: "风险", info: "更新" };
const ZH_TYPE: Record<string, string> = { all: "全部", unread: "未读", task: "任务", team: "团队", billing: "计费", system: "系统" };

function typeIcon(type: string): ReactNode {
  if (type === "task") return <Clapperboard size={14} />;
  if (type === "team") return <Users size={14} />;
  if (type === "billing") return <CreditCard size={14} />;
  return <Info size={14} />;
}

// 通知 related_url(.html 风格)→ 应用内 Page
function targetPage(n: Notification): Page {
  const url = n.related_url || "";
  if (url.includes("pipeline")) return "pipeline";
  if (url.includes("account")) return "account";
  if (url.includes("library")) return "library";
  if (url.includes("settings")) return "settingsNotify";
  if (url.includes("product")) return "products";
  if (url.includes("team")) return "team";
  return "dashboard";
}

function fmtTime(iso: string): string {
  const diff = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
  if (diff < 1) return "刚刚";
  if (diff < 60) return `${diff}m`;
  if (diff < 1440) return `${Math.floor(diff / 60)}h`;
  return `${Math.floor(diff / 1440)}d`;
}
function fmtFull(iso: string): string {
  const d = new Date(iso);
  const z = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${z(d.getMonth() + 1)}-${z(d.getDate())} ${z(d.getHours())}:${z(d.getMinutes())}`;
}

// 处理记录:从 notification.metadata.timeline 解析成 [时间, 描述] 列表;兼容数组对 / 对象两种存法
function readTimeline(meta: Record<string, unknown> | undefined): Array<[string, string]> {
  const raw = meta?.timeline;
  if (!Array.isArray(raw)) return [];
  return raw
    .map((step): [string, string] => {
      if (Array.isArray(step)) return [String(step[0] ?? ""), String(step[1] ?? "")];
      if (step && typeof step === "object") {
        const o = step as Record<string, unknown>;
        return [String(o.t ?? o.time ?? ""), String(o.d ?? o.desc ?? "")];
      }
      return ["", String(step ?? "")];
    })
    .filter(([t, d]) => t || d);
}

// 失败/异常日志:后端只有 notification.metadata(无独立 log 字段),按 metadata.log 取;
// 缺则返回 ""(此时只展开壳、不造假日志)。兼容字符串 / 字符串数组两种存法。
function readLog(meta: Record<string, unknown> | undefined): string {
  const raw = meta?.log ?? meta?.logs ?? meta?.error_log;
  if (typeof raw === "string") return raw;
  if (Array.isArray(raw)) return raw.map((line) => String(line ?? "")).join("\n");
  return "";
}

// 详情底栏的「派生动作」:除固定的 归档 / 静音同类,主操作集按 notification_type + priority 推断。
// kind 决定点击行为:nav=跳目标页;log=就地展开日志;ack=标已读;mute 由底栏固定项单独处理。
type DetailAction = {
  id: string;
  label: string;
  primary?: boolean;
  kind: "nav" | "log" | "ack";
};

// 按消息类型 / 状态推断动作集(纯前端,不依赖后端额外字段)。
// 首个为 primary;err/ok 任务带「查看日志」(展开 .msg-log);system 类无额外跳转,只「我已了解」。
function inferActions(n: Notification): DetailAction[] {
  const type = n.notification_type;
  const list: DetailAction[] = [];
  if (type === "task") {
    list.push({ id: "goto", label: "进入项目", primary: true, kind: "nav" });
    if (n.priority === "err" || n.priority === "ok") list.push({ id: "log", label: "查看日志", kind: "log" });
  } else if (type === "team") {
    list.push({ id: "goto", label: "查看团队", primary: true, kind: "nav" });
    list.push({ id: "perm", label: "调整权限", kind: "nav" });
  } else if (type === "billing") {
    list.push({ id: "goto", label: "前往充值", primary: true, kind: "nav" });
  } else if (type === "system") {
    if (!n.is_read) list.push({ id: "ack", label: "我已了解", primary: true, kind: "ack" });
  } else {
    // 未知类型:保底给一个跳目标页的主操作(label 在渲染时用解析出的目标页名)
    list.push({ id: "goto", label: "", primary: true, kind: "nav" });
  }
  return list;
}

export function MessagesPage({ unreadCount, onMarkRead, onMarkAllRead, onArchive, navigate }: {
  unreadCount: number;
  onMarkRead: (id: string) => void | Promise<unknown>;
  onMarkAllRead: () => void | Promise<unknown>;
  onArchive: (id: string) => void | Promise<unknown>;
  navigate: (page: Page) => void;
}) {
  const [tab, setTab] = useState<TabKey>("all");
  const [query, setQuery] = useState("");
  const [debounced, setDebounced] = useState("");
  const [selectedId, setSelectedId] = useState("");
  // 静音同类:纯前端本地态(记被静音的 notification_type),命中的消息从列表里隐藏;不落后端
  const [mutedTypes, setMutedTypes] = useState<Set<string>>(() => new Set());
  // 查看日志:记当前展开日志的消息 id(单条展开),切换其它消息自动收起
  const [showLogId, setShowLogId] = useState<string>("");
  // 轻量本地 toast(复用 design-restraint 的 .toast 组件;本页没有全局 toast 注入,故就地渲染)
  const [toast, setToast] = useState<{ title: string; sub: string } | null>(null);
  const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const [items, setItems] = useState<Notification[]>([]);
  const [counts, setCounts] = useState<NotificationTypeCounts>(() => ({ ...ZERO_COUNTS, unread: unreadCount }));
  const [total, setTotal] = useState(0); // 当前筛选(tab/搜索)下的总条数,作「已加载 X / Y」的分母
  const [page, setPage] = useState(1); // 下一个要拉的页码
  const [hasMore, setHasMore] = useState(false);
  const [loading, setLoading] = useState(false);
  const loadingRef = useRef(false); // 防滚动重复触发追加
  const genRef = useRef(0); // 代号:tab/搜索一变就 +1,丢弃旧请求的回包
  const listRef = useRef<HTMLDivElement>(null);

  // 搜索去抖 300ms 再打服务端
  useEffect(() => {
    const t = setTimeout(() => setDebounced(query.trim()), 300);
    return () => clearTimeout(t);
  }, [query]);

  useEffect(() => () => { if (toastTimer.current) clearTimeout(toastTimer.current); }, []);

  function showToast(title: string, sub: string) {
    setToast({ title, sub });
    if (toastTimer.current) clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2800);
  }

  const load = useCallback(
    async (pageToLoad: number, replace: boolean) => {
      // 追加(滚动)要防并发;重拉(replace)不阻塞,靠代号作废在途旧请求
      if (!replace && loadingRef.current) return;
      const gen = replace ? (genRef.current += 1) : genRef.current;
      loadingRef.current = true;
      setLoading(true);
      try {
        const res = await api
          .listNotifications({ ...tabParams(tab), search: debounced || undefined, page: pageToLoad, pageSize: PAGE_SIZE })
          .catch(() => null);
        if (gen !== genRef.current) return; // tab/搜索已切换,丢弃过期结果
        if (!res) return;
        setItems((prev) => (replace ? res.results : [...prev, ...res.results]));
        setHasMore(Boolean(res.next));
        setPage(pageToLoad + 1);
        setTotal(res.count);
        if (res.type_counts) setCounts(res.type_counts);
      } finally {
        if (gen === genRef.current) {
          loadingRef.current = false;
          setLoading(false);
        }
      }
    },
    [tab, debounced]
  );

  // tab / 搜索变化 → 清空重拉第 1 页
  useEffect(() => {
    setItems([]);
    setSelectedId("");
    setHasMore(false);
    void load(1, true);
  }, [load]);

  // 滚到接近底部就拉下一批
  const onScroll = useCallback(() => {
    const el = listRef.current;
    if (!el || !hasMore || loadingRef.current) return;
    if (el.scrollHeight - el.scrollTop - el.clientHeight < 120) void load(page, false);
  }, [hasMore, page, load]);

  // 首批撑不满面板(没出现滚动条)却还有更多 → 自动续拉,保证可触达
  useEffect(() => {
    const el = listRef.current;
    if (el && hasMore && !loadingRef.current && el.scrollHeight <= el.clientHeight) void load(page, false);
  }, [items, hasMore, page, load]);

  // 静音同类只在前端隐藏(不打后端);其余照常分页/搜索
  const visibleItems = mutedTypes.size === 0 ? items : items.filter((n) => !mutedTypes.has(n.notification_type));
  const selected = visibleItems.find((n) => n.id === selectedId) || visibleItems[0] || null;

  // 标记单条已读:同步后端/侧边栏徽标 + 本地乐观更新(列表与未读计数)
  function markOne(id: string) {
    void onMarkRead(id);
    setItems((prev) => prev.map((x) => (x.id === id ? { ...x, is_read: true, unread: false } : x)));
    setCounts((c) => ({ ...c, unread: Math.max(0, c.unread - 1) }));
  }

  function selectItem(n: Notification) {
    setSelectedId(n.id);
    setShowLogId(""); // 切换消息时收起上一条的日志
    if (!n.is_read) markOne(n.id);
  }

  async function markAll() {
    await onMarkAllRead();
    setItems((prev) => prev.map((x) => ({ ...x, is_read: true, unread: false })));
    setCounts((c) => ({ ...c, unread: 0 }));
  }

  // 归档:后端落 archived_at(下次拉取即不再返回)+ 本地乐观移除该条,并扣减总数/分类/未读计数
  function archiveOne(n: Notification) {
    void onArchive(n.id);
    setItems((prev) => prev.filter((x) => x.id !== n.id));
    setTotal((t) => Math.max(0, t - 1));
    setSelectedId(""); // 落回 items[0]
    setCounts((c) => {
      const next: NotificationTypeCounts = { ...c, all: Math.max(0, c.all - 1) };
      if (!n.is_read) next.unread = Math.max(0, c.unread - 1);
      const tk = n.notification_type as keyof NotificationTypeCounts;
      if (typeof next[tk] === "number") next[tk] = Math.max(0, next[tk] - 1);
      return next;
    });
    showToast("已归档", n.title);
  }

  // 静音同类:把该 notification_type 记进本地静音集,列表即时隐藏同类;再点对应 chip / 此处可恢复
  function muteType(n: Notification) {
    setMutedTypes((prev) => {
      const next = new Set(prev);
      next.add(n.notification_type);
      return next;
    });
    setSelectedId(""); // 当前条会被隐藏,落回首条
    showToast("已静音同类", `${ZH_TYPE[n.notification_type] || n.notification_type} 类提醒已隐藏 · 可在通知设置恢复`);
  }

  // 详情底栏派生动作的统一分发
  function runAction(n: Notification, action: DetailAction) {
    if (action.kind === "log") {
      setShowLogId((cur) => (cur === n.id ? "" : n.id));
      return;
    }
    if (action.kind === "ack") {
      if (!n.is_read) markOne(n.id);
      showToast("已确认", n.title);
      return;
    }
    // nav:跳到该消息关联的目标页
    navigate(targetPage(n));
  }

  const filters: Array<[TabKey, string, number]> = [
    ["all", "全部", counts.all],
    ["unread", "未读", counts.unread],
    ["task", "任务", counts.task],
    ["team", "团队", counts.team],
    ["billing", "计费", counts.billing],
    ["system", "系统", counts.system]
  ];

  const target = selected ? targetPage(selected) : "dashboard";
  const detailActions = selected ? inferActions(selected) : [];
  // 「标为已读」与派生的「我已了解」(ack)同义,二者择一,避免底栏重复
  const hasAck = detailActions.some((a) => a.kind === "ack");

  return (
    <div className="msg-page">
      <div className="page-head">
        <div>
          <h1>消息中心</h1>
          <div className="sub"><span className="mono">// {counts.unread} 条未读 · {counts.all} 条总计</span> 任务提醒 · 团队协作 · 计费与系统公告</div>
        </div>
        <div className="msg-head-actions">
          <button className="btn" type="button" onClick={() => void markAll()} disabled={counts.unread === 0}>全部标已读</button>
          <button className="btn" type="button" onClick={() => navigate("settingsNotify")}>通知设置</button>
        </div>
      </div>

      <div className="msg-workbench">
        <section className="msg-panel msg-inbox">
          <div className="msg-panel-h"><span className="ti">收件箱</span><span className="mono">// 显示 {visibleItems.length} 条{total > visibleItems.length ? ` / ${total}` : ""}</span></div>
          <div className="msg-filters">
            {filters.map(([id, label, ct]) => (
              <button key={id} className={`msg-filter ${tab === id ? "active" : ""}`} type="button" onClick={() => setTab(id)}>
                {label}<span className="ct">{ct}</span>
              </button>
            ))}
          </div>
          <div className="msg-search">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
            <input type="text" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索项目、来源、内容" />
          </div>
          <div className="msg-list" ref={listRef} onScroll={onScroll}>
            {visibleItems.length === 0 && !loading ? (
              <div className="msg-empty"><Search /><span>没有符合条件的消息</span></div>
            ) : (
              <>
                {visibleItems.map((n) => (
                  <button key={n.id} className={`msg-item ${selected?.id === n.id ? "active" : ""} ${n.is_read ? "read" : ""}`} type="button" onClick={() => selectItem(n)}>
                    <span className={`msg-type-ic ${n.notification_type}`}>{typeIcon(n.notification_type)}</span>
                    <span className="msg-item-main">
                      <span className="msg-item-row">
                        <span className="msg-dot"></span>
                        <span className="msg-item-title">{n.title}</span>
                        <span className="msg-time">{fmtTime(n.created_at)}</span>
                      </span>
                      <span className="msg-brief">{n.brief}</span>
                      <span className="msg-item-foot">
                        <span className={`msg-priority ${n.priority}`}>{PRI_LABEL[n.priority] || "更新"}</span>
                        {n.project_name ? <span className="msg-priority">{n.project_name}</span> : null}
                      </span>
                    </span>
                  </button>
                ))}
                {(loading || hasMore) && <div className="msg-load-more mono">{loading ? "// 加载中…" : "// 滚动加载更多"}</div>}
                {!loading && !hasMore && visibleItems.length > 0 && <div className="msg-load-more mono">// 已全部加载</div>}
              </>
            )}
          </div>
        </section>

        <section className="msg-panel msg-detail">
          {selected ? (
            <>
              <div className="msg-detail-body">
                <div className="msg-detail-top">
                  <span className={`msg-type-ic ${selected.notification_type}`}>{typeIcon(selected.notification_type)}</span>
                  <div className="msg-detail-title">
                    <h2>{selected.title}</h2>
                    <div className="meta"><span>{selected.source || ZH_TYPE[selected.notification_type]}</span><span>// {ZH_TYPE[selected.notification_type]}</span><span>{fmtFull(selected.created_at)}</span></div>
                  </div>
                  <span className={`msg-priority ${selected.priority}`}>{PRI_LABEL[selected.priority] || "更新"}</span>
                </div>
                <p className="msg-body-text">{selected.body || selected.brief}</p>
                <div className="msg-props">
                  {([
                    ["来源", selected.source || "-"],
                    ["类别", ZH_TYPE[selected.notification_type] || selected.notification_type],
                    ["项目", selected.project_name || "-"],
                    ["阶段", selected.stage || "-"],
                    ["负责人", selected.owner_label || "-"],
                    ["费用", selected.cost_label || "-"],
                    ["时间", fmtFull(selected.created_at)]
                  ] as Array<[string, string]>).flatMap(([k, v]) => [
                    <span className="k" key={`${k}-k`}>{k}</span>,
                    <span className="v" key={`${k}-v`}>{v}</span>
                  ])}
                  <span className="k">关联资源</span>
                  <span className="v"><a onClick={() => navigate(target)}>{routeLabels[target]} →</a></span>
                </div>
                {(() => {
                  const timeline = readTimeline(selected.metadata);
                  if (timeline.length === 0) return null;
                  return (
                    <div className="msg-timeline">
                      <div className="msg-timeline-h">处理记录</div>
                      {timeline.map(([t, d], i) => (
                        <div className="msg-step" key={i}><span className="t">{t}</span><span className="d">{d}</span></div>
                      ))}
                    </div>
                  );
                })()}
                {showLogId === selected.id && (() => {
                  const log = readLog(selected.metadata);
                  // 后端暂未下发 log 字段 → 壳照出,内容缺位时给占位,不造假日志
                  return log
                    ? <pre className="msg-log">{log}</pre>
                    : <pre className="msg-log msg-log-empty">// 暂无日志详情</pre>;
                })()}
              </div>
              <div className="msg-detail-f">
                <button className="btn btn-ghost" type="button" onClick={() => archiveOne(selected)}>归档</button>
                <button className="btn btn-ghost" type="button" onClick={() => muteType(selected)}>
                  <BellOff size={14} />静音同类
                </button>
                {!selected.is_read && !hasAck && <button className="btn btn-ghost" type="button" onClick={() => markOne(selected.id)}>标为已读</button>}
                <span className="spacer"></span>
                {detailActions.map((a) => (
                  <button
                    key={a.id}
                    className={`btn ${a.primary ? "btn-primary" : ""} ${a.kind === "log" && showLogId === selected.id ? "is-active" : ""}`}
                    type="button"
                    onClick={() => runAction(selected, a)}
                  >
                    {/* nav 主操作未带文案时,用解析出的目标页名兜底 */}
                    {a.label || `进入${routeLabels[target]}`}
                  </button>
                ))}
              </div>
            </>
          ) : (
            <div className="msg-detail-empty"><div className="ic"><Bell /></div><div>暂无消息</div></div>
          )}
        </section>
      </div>

      <div className="msg-foot-note">
        <span>// 消息保留 90 天 · 高风险任务会同时进入工作台队列</span>
        <a onClick={() => navigate("settingsNotify")}>管理通知策略 →</a>
      </div>

      {toast && (
        <div className="toast show" role="status" aria-live="polite">
          <div className="ic-t"><Info size={13} aria-hidden="true" /></div>
          <div className="txt">{toast.title}<span className="mono">// {toast.sub}</span></div>
        </div>
      )}
    </div>
  );
}