unis_crm/frontend/src/pages/Dashboard.tsx

import { useEffect, useMemo, useState } from "react";
import { BarChart3, Building2, Check, TrendingUp, Users } from "lucide-react";
import { motion } from "motion/react";
import { completeDashboardTodo, getDashboardHome, type DashboardActivity, type DashboardHome, type DashboardStat, type DashboardTodo } from "@/lib/auth";

const DASHBOARD_PREVIEW_COUNT = 5;
const DASHBOARD_HISTORY_PREVIEW_COUNT = 3;

const baseStats = [
  { name: "本月新增商机", metricKey: "monthlyOpportunities", icon: TrendingUp, color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-100 dark:bg-emerald-500/20" },
  { name: "已推送OMS项目", metricKey: "pushedOmsProjects", icon: Users, color: "text-blue-600 dark:text-blue-400", bg: "bg-blue-100 dark:bg-blue-500/20" },
  { name: "本月新增渠道", metricKey: "monthlyChannels", icon: Building2, color: "text-violet-600 dark:text-violet-400", bg: "bg-violet-100 dark:bg-violet-500/20" },
  { name: "本月打卡次数", metricKey: "monthlyCheckins", icon: BarChart3, color: "text-amber-600 dark:text-amber-400", bg: "bg-amber-100 dark:bg-amber-500/20" },
] as const;

export default function Dashboard() {
  const [home, setHome] = useState<DashboardHome>({});
  const [loading, setLoading] = useState(true);
  const [showAllActivities, setShowAllActivities] = useState(false);
  const [showAllHistoryTodos, setShowAllHistoryTodos] = useState(false);
  const [historyExpanded, setHistoryExpanded] = useState(false);
  const [completingTodoId, setCompletingTodoId] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function loadDashboard() {
      try {
        const data = await getDashboardHome();
        if (!cancelled) {
          setHome(data ?? {});
        }
      } catch {
        if (!cancelled) {
          setHome({});
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    void loadDashboard();

    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    setShowAllActivities(false);
    setShowAllHistoryTodos(false);
    setHistoryExpanded(false);
  }, [home.activities, home.todos]);

  const statMap = new Map((home.stats ?? []).map((item: DashboardStat) => [item.metricKey, item.value]));
  const stats = baseStats.map((stat) => ({
    ...stat,
    value: statMap.get(stat.metricKey),
  }));
  const pendingTodos = useMemo(
    () => (home.todos ?? []).filter((item) => item.status !== "done"),
    [home.todos],
  );
  const historyTodos = useMemo(
    () => (home.todos ?? []).filter((item) => item.status === "done"),
    [home.todos],
  );
  const visibleHistoryTodos = showAllHistoryTodos ? historyTodos : historyTodos.slice(0, DASHBOARD_HISTORY_PREVIEW_COUNT);
  const activities = (home.activities?.length
    ? home.activities
    : [{ id: 0, title: "无", content: "无", timeText: "无" }]) as DashboardActivity[];
  const visibleActivities = showAllActivities ? activities : activities.slice(0, DASHBOARD_PREVIEW_COUNT);
  const hasMoreActivities = activities.length > DASHBOARD_PREVIEW_COUNT && activities[0]?.id !== 0;
  const hasMoreHistoryTodos = historyTodos.length > DASHBOARD_HISTORY_PREVIEW_COUNT;

  const handleCompleteTodo = async (todoId: string) => {
    if (!todoId || completingTodoId === todoId) {
      return;
    }
    setCompletingTodoId(todoId);
    try {
      await completeDashboardTodo(todoId);
      setHome((current) => ({
        ...current,
        todos: (current.todos ?? []).map((item) => (
          item.id === todoId
            ? { ...item, status: "done", updatedAt: new Date().toISOString() }
            : item
        )),
      }));
    } catch {
      // Keep current UI state when completion fails silently.
    } finally {
      setCompletingTodoId(null);
    }
  };

  return (
    <div className="crm-page-stack">
      <header className="space-y-1 sm:space-y-2">
        <h1 className="text-xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-2xl">工作台</h1>
        <p className="text-xs leading-5 text-slate-500 dark:text-slate-400 sm:text-sm">
          欢迎回来，{home.realName || "无"}。今天是你入职的第 {home.onboardingDays ?? 0} 天。
        </p>
      </header>

      {loading ? (
        <motion.div
          key="dashboard-skeleton"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.22, ease: "easeOut" }}
        >
          <DashboardSkeleton />
        </motion.div>
      ) : (
        <motion.div
          key="dashboard-content"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.24, ease: "easeOut" }}
        >
          <div className="grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-4 xl:grid-cols-4">
            {stats.map((stat, i) => (
              <motion.div
                key={stat.name}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
                className="crm-card min-h-[88px] rounded-xl p-3 transition-all hover:shadow-md dark:hover:bg-slate-900 sm:min-h-[104px] sm:rounded-2xl sm:p-5"
              >
                <div className="flex items-center gap-2.5 sm:gap-4">
                  <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${stat.bg} sm:h-12 sm:w-12 sm:rounded-xl`}>
                    <stat.icon className={`h-4.5 w-4.5 ${stat.color} sm:h-6 sm:w-6`} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-[11px] font-medium leading-4 text-slate-500 dark:text-slate-400 sm:text-sm sm:leading-5">{stat.name}</p>
                    <p className="mt-1 text-lg font-bold leading-none text-slate-900 dark:text-white sm:text-2xl">{stat.value ?? 0}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          <div className="mt-5 grid gap-5 md:mt-6 md:grid-cols-2 md:gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="crm-card crm-card-pad-lg rounded-2xl"
            >
              <div className="mb-3 flex items-center justify-between sm:mb-4">
                <h2 className="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">待办事项</h2>
                <span className="text-[11px] text-slate-400 dark:text-slate-500 sm:text-xs">
                  共 {pendingTodos.length + historyTodos.length} 条
                </span>
              </div>
              <div className="crm-section-stack sm:gap-5">
                <div className="crm-card-subtle rounded-xl p-3 sm:p-4">
                  <div className="mb-2 flex items-center gap-2 sm:mb-3">
                    <span className="crm-pill crm-pill-neutral">待办</span>
                    <span className="text-xs text-slate-400 dark:text-slate-500">{pendingTodos.length} 条未完成</span>
                  </div>
                  {pendingTodos.length ? (
                    <ul className="space-y-2.5 sm:space-y-3">
                      {pendingTodos.map((task: DashboardTodo) => (
                        <li key={task.id} className="group flex items-start gap-2.5 rounded-xl border border-white/80 bg-white px-3 py-2.5 transition-all hover:bg-slate-50 dark:border-slate-700/60 dark:bg-slate-900/40 dark:hover:bg-slate-800 sm:gap-3 sm:p-3">
                          <button
                            type="button"
                            onClick={() => void handleCompleteTodo(task.id)}
                            disabled={completingTodoId === task.id}
                            className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-slate-300 text-transparent transition-colors hover:border-violet-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-600 dark:hover:border-violet-400"
                            aria-label={`完成待办：${getTodoDisplayTitle(task)}`}
                          >
                            <Check className="h-3 w-3" />
                          </button>
                          <div className="min-w-0 flex-1">
                            <p className="truncate text-sm text-slate-700 transition-colors group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-white">
                              {getTodoDisplayTitle(task)}
                            </p>
                          </div>
                        </li>
                      ))}
                    </ul>
                  ) : (
                    <div className="crm-empty-state rounded-xl border border-dashed border-slate-200 px-4 py-5 dark:border-slate-700">
                      暂无未完成待办
                    </div>
                  )}
                </div>

                <div className="crm-card-subtle rounded-xl p-3 sm:p-4">
                  <button
                    type="button"
                    onClick={() => setHistoryExpanded((current) => !current)}
                    className="flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 text-left transition-colors hover:border-violet-300 hover:bg-violet-50/50 dark:border-slate-700 dark:bg-slate-900/40 dark:hover:border-violet-600 dark:hover:bg-slate-800"
                  >
                    <div className="flex items-center gap-2">
                      <span className="crm-pill crm-pill-violet">历史</span>
                      <span className="text-xs text-slate-400 dark:text-slate-500">{historyTodos.length} 条已完成</span>
                    </div>
                    <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
                      {historyExpanded ? "收起" : "展开"}
                    </span>
                  </button>
                  {historyExpanded ? (
                    historyTodos.length ? (
                      <>
                        <ul className="mt-3 space-y-2.5 sm:space-y-3">
                          {visibleHistoryTodos.map((task: DashboardTodo) => (
                            <li key={task.id} className="flex items-start gap-2.5 rounded-xl border border-white/80 bg-white px-3 py-2.5 dark:border-slate-700/60 dark:bg-slate-900/40 sm:gap-3 sm:p-3">
                              <div className="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
                                <Check className="h-3 w-3" />
                              </div>
                              <div className="min-w-0 flex-1">
                                <p className="truncate text-sm text-slate-500 line-through dark:text-slate-400">
                                  {getTodoDisplayTitle(task)}
                                </p>
                              </div>
                            </li>
                          ))}
                        </ul>
                        {hasMoreHistoryTodos ? (
                          <button
                            type="button"
                            onClick={() => setShowAllHistoryTodos((current) => !current)}
                            className="mt-3 w-full rounded-xl border border-dashed border-slate-200 px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:border-violet-300 hover:text-violet-600 dark:border-slate-700 dark:text-slate-400 dark:hover:border-violet-700 dark:hover:text-violet-400"
                          >
                            {showAllHistoryTodos ? "收起历史明细" : `展开更多 (${historyTodos.length})`}
                          </button>
                        ) : null}
                      </>
                    ) : (
                      <div className="crm-empty-state mt-3 rounded-xl border border-dashed border-slate-200 px-4 py-6 dark:border-slate-700">
                        暂无历史待办
                      </div>
                    )
                  ) : null}
                </div>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className="crm-card crm-card-pad-lg rounded-2xl"
            >
              <h2 className="mb-4 text-lg font-semibold text-slate-900 dark:text-white">最新动态</h2>
              <div className="crm-section-stack sm:gap-5">
                {visibleActivities.map((news: DashboardActivity, i: number) => (
                  <div key={news.id ?? i} className="flex gap-4">
                    <div className="relative mt-1 flex h-3 w-3 items-center justify-center">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-20"></span>
                      <span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500"></span>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate-900 dark:text-white">{news.title || "无"}</p>
                      <p className="crm-field-note mt-0.5">{news.content || "无"}</p>
                      <p className="mt-1 text-[10px] text-slate-400 dark:text-slate-500">{news.timeText || "无"}</p>
                    </div>
                  </div>
                ))}
              </div>
              {hasMoreActivities && !showAllActivities ? (
                <button
                  type="button"
                  onClick={() => setShowAllActivities(true)}
                  className="mt-4 w-full rounded-xl border border-dashed border-slate-200 px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:border-violet-300 hover:text-violet-600 dark:border-slate-700 dark:text-slate-400 dark:hover:border-violet-700 dark:hover:text-violet-400"
                >
                  ...
                </button>
              ) : null}
            </motion.div>
          </div>
        </motion.div>
      )}
    </div>
  );
}

function DashboardSkeleton() {
  return (
    <div className="animate-[fadeIn_220ms_ease-out]">
      <div className="grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-4 xl:grid-cols-4">
        {[0, 1, 2, 3].map((item) => (
          <div
            key={`dashboard-stat-skeleton-${item}`}
            className="crm-card min-h-[88px] rounded-xl p-3 sm:min-h-[104px] sm:rounded-2xl sm:p-5"
          >
            <div className="flex items-center gap-2.5 sm:gap-4">
              <div className="h-9 w-9 animate-pulse rounded-lg bg-slate-100 dark:bg-slate-800 sm:h-12 sm:w-12 sm:rounded-xl" />
              <div className="min-w-0 flex-1 space-y-2">
                <div className="h-3 w-20 animate-pulse rounded bg-slate-100 dark:bg-slate-800 sm:h-4" />
                <div className="h-6 w-10 animate-pulse rounded bg-slate-100 dark:bg-slate-800 sm:h-8" />
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-5 grid gap-5 md:mt-6 md:grid-cols-2 md:gap-6">
        <div className="crm-card crm-card-pad-lg rounded-2xl">
          <div className="mb-4 flex items-center justify-between">
            <div className="h-5 w-20 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
            <div className="h-3 w-12 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
          </div>
          <div className="crm-section-stack sm:gap-5">
            <div className="crm-card-subtle rounded-xl p-3 sm:p-4">
              <div className="mb-3 flex items-center gap-2">
                <div className="h-6 w-10 animate-pulse rounded-full bg-slate-100 dark:bg-slate-800" />
                <div className="h-3 w-20 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
              </div>
              <div className="space-y-3">
                {[0, 1].map((item) => (
                  <div key={`todo-skeleton-${item}`} className="flex items-start gap-3 rounded-xl border border-white/80 bg-white px-3 py-3 dark:border-slate-700/60 dark:bg-slate-900/40">
                    <div className="mt-0.5 h-5 w-5 animate-pulse rounded-full bg-slate-100 dark:bg-slate-800" />
                    <div className="flex-1 space-y-2">
                      <div className="h-3 w-11/12 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                      <div className="h-3 w-2/3 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="crm-card-subtle rounded-xl p-3 sm:p-4">
              <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-700 dark:bg-slate-900/40">
                <div className="flex items-center gap-2">
                  <div className="h-6 w-10 animate-pulse rounded-full bg-slate-100 dark:bg-slate-800" />
                  <div className="h-3 w-20 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                </div>
                <div className="h-4 w-10 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
              </div>
            </div>
          </div>
        </div>

        <div className="crm-card crm-card-pad-lg rounded-2xl">
          <div className="mb-4 h-5 w-24 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
          <div className="crm-section-stack sm:gap-5">
            {[0, 1, 2].map((item) => (
              <div key={`activity-skeleton-${item}`} className="flex gap-4">
                <div className="mt-1 h-3 w-3 animate-pulse rounded-full bg-violet-100 dark:bg-violet-500/20" />
                <div className="flex-1 space-y-2">
                  <div className="h-4 w-32 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                  <div className="h-3 w-full animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                  <div className="h-3 w-10 animate-pulse rounded bg-slate-100 dark:bg-slate-800" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function getTodoDisplayTitle(task: DashboardTodo) {
  const title = task.title?.trim();
  if (!title) {
    return "无";
  }
  if (task.bizType === "report" && title.startsWith("明日工作计划：")) {
    return title.slice("明日工作计划：".length).trim() || "明日工作计划";
  }
  return title;
}