import React, { useState } from "react";
import {
  FileText,
  Search,
  Filter,
  Download,
  Target,
  Clock,
  CheckCircle,
  AlertTriangle,
  Plus,
  TrendingUp,
  TrendingDown,
  ChevronRight,
  User,
  Eye,
} from "lucide-react";
import { useTheme } from "@/contexts/ThemeContext";
import { PageType } from "@/components/Sidebar";

interface TaskDashboardProps {
  onNavigate: (page: PageType) => void;
}

const TaskDashboard: React.FC<TaskDashboardProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === "dark";

  // 主题颜色变量
  const cardBg = isDark ? "bg-slate-800/30" : "bg-white";
  const cardBorder = isDark ? "border-blue-800/30" : "border-red-100";
  const textPrimary = isDark ? "text-white" : "text-gray-900";
  const textSecondary = isDark ? "text-slate-400" : "text-gray-600";
  const textMuted = isDark ? "text-slate-500" : "text-gray-400";
  const inputBg = isDark ? "bg-slate-900/50" : "bg-white";

  const [timeRange, setTimeRange] = useState<string>("month");
  const [categoryFilter, setCategoryFilter] = useState<string>("all");
  const [statusFilter, setStatusFilter] = useState<string>("all");

  // 统计数据
  const stats = {
    total: 1286,
    inProgress: 326,
    completed: 842,
    delayed: 57,
    weeklyNew: 93,
    priorityPending: 41,
  };

  // 二级任务分类数据
  const categoryData = [
    { name: "XK任务", count: 320, percentage: 25 },
    { name: "规划任务", count: 240, percentage: 19 },
    { name: "MNTY任务", count: 280, percentage: 22 },
    { name: "效果PG任务", count: 300, percentage: 23 },
  ];

  // 三级任务数据
  const thirdLevelData = [
    { name: "任务JC", count: 120 },
    { name: "任务调度", count: 200 },
    { name: "任务FX", count: 140 },
    { name: "行动CE", count: 100 },
    { name: "XDTY任务", count: 70 },
    { name: "方案TY任务", count: 120 },
    { name: "XXTY任务", count: 90 },
    { name: "任务PG", count: 160 },
    { name: "行动PG", count: 80 },
    { name: "信息PG", count: 130 },
    { name: "账号PG", count: 60 },
  ];

  // 预警任务列表
  const warningTasks = [
    {
      id: "001",
      name: "五四宣传执行任务",
      category: "规划任务 / 行动CE",
      status: "已延期",
      dueDate: "04-20",
      riskLevel: "high",
    },
    {
      id: "002",
      name: "青年传播调度任务",
      category: "XK任务 / 任务调度",
      status: "待处理",
      dueDate: "04-18",
      riskLevel: "medium",
    },
    {
      id: "003",
      name: "效果复盘信息任务",
      category: "效果PG / 信息PG",
      status: "阻塞中",
      dueDate: "04-17",
      riskLevel: "high",
    },
  ];

  // 我的待办
  const myTodos = {
    pending: 8,
    pendingConfirm: 3,
    pendingReview: 2,
  };

  // Top 5 排行
  const top5ByVolume = [
    { name: "任务PG", count: 160 },
    { name: "信息PG", count: 130 },
    { name: "任务FX", count: 120 },
    { name: "任务调度", count: 100 },
    { name: "方案TY任务", count: 90 },
  ];

  const top5ByDelay = [
    { name: "行动CE", count: 15 },
    { name: "任务调度", count: 12 },
    { name: "信息PG", count: 10 },
    { name: "XDTY任务", count: 8 },
    { name: "账号PG", count: 6 },
  ];

  // 完成率对比
  const completionRates = [
    { name: "XK任务", rate: 72 },
    { name: "规划任务", rate: 61 },
    { name: "MNTY任务", rate: 68 },
    { name: "效果PG任务", rate: 54 },
  ];

  return (
    <div className="h-full flex flex-col">
      {/* 顶部筛选区 */}
      <div
        className={`rounded-xl p-4 flex-shrink-0 mb-4 ${cardBg} border ${cardBorder}`}
      >
        <div className="flex items-center justify-between">
          <div>
            <h1 className={`text-xl font-bold ${textPrimary}`}>任务统计总览</h1>
            <p className={`text-sm ${textMuted}`}>
              面向分级分类任务体系的全局监控看板
            </p>
          </div>
          <div className="flex items-center gap-3">
            <select
              value={timeRange}
              onChange={(e) => setTimeRange(e.target.value)}
              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
            >
              <option value="day">今日</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
              <option value="quarter">本季度</option>
              <option value="custom">自定义</option>
            </select>
            <select
              value={categoryFilter}
              onChange={(e) => setCategoryFilter(e.target.value)}
              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
            >
              <option value="all">全部分类</option>
              <option value="xk">XK任务</option>
              <option value="plan">规划任务</option>
              <option value="mnty">MNTY任务</option>
              <option value="effect">效果PG任务</option>
            </select>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
            >
              <option value="all">全部状态</option>
              <option value="pending">未开始</option>
              <option value="in-progress">进行中</option>
              <option value="completed">已完成</option>
              <option value="delayed">延期</option>
            </select>
            <button
              className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors ${
                isDark
                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
                  : "border-red-200 hover:bg-red-50 text-red-600"
              }`}
            >
              <Download className="w-4 h-4" />
              导出统计
            </button>
            <button
              onClick={() => onNavigate("plan-task-fx")}
              className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
                isDark
                  ? "bg-blue-600 hover:bg-blue-500"
                  : "bg-red-600 hover:bg-red-500"
              }`}
            >
              查看全部任务
            </button>
          </div>
        </div>
      </div>

      {/* 第一行：核心指标卡 */}
      <div className="grid grid-cols-6 gap-4 mb-4 flex-shrink-0">
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-blue-500/20" : "bg-red-100"
              }`}
            >
              <Target
                className={`w-4 h-4 ${
                  isDark ? "text-blue-400" : "text-red-500"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>任务总数</span>
          </div>
          <p className={`text-3xl font-bold ${textPrimary}`}>1,286</p>
          <div className="flex items-center gap-1 mt-1">
            <TrendingUp
              className={`w-3 h-3 ${
                isDark ? "text-green-400" : "text-green-500"
              }`}
            />
            <span
              className={`text-xs ${
                isDark ? "text-green-400" : "text-green-500"
              }`}
            >
              较上周 +8%
            </span>
          </div>
        </div>

        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-cyan-500/20" : "bg-red-100"
              }`}
            >
              <Clock
                className={`w-4 h-4 ${
                  isDark ? "text-cyan-400" : "text-red-500"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>进行中</span>
          </div>
          <p className={`text-3xl font-bold ${textPrimary}`}>326</p>
          <div className="flex items-center gap-1 mt-1">
            <span className={`text-xs ${textMuted}`}>占比 25.4%</span>
          </div>
        </div>

        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-green-500/20" : "bg-green-100"
              }`}
            >
              <CheckCircle
                className={`w-4 h-4 ${
                  isDark ? "text-green-400" : "text-green-500"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>已完成</span>
          </div>
          <p className={`text-3xl font-bold ${textPrimary}`}>842</p>
          <div className="flex items-center gap-1 mt-1">
            <span
              className={`text-xs ${
                isDark ? "text-green-400" : "text-green-500"
              }`}
            >
              完成率 65.5%
            </span>
          </div>
        </div>

        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-red-500/20" : "bg-orange-100"
              }`}
            >
              <AlertTriangle
                className={`w-4 h-4 ${
                  isDark ? "text-red-400" : "text-orange-500"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>延期任务</span>
          </div>
          <p
            className={`text-3xl font-bold ${
              isDark ? "text-red-400" : "text-orange-600"
            }`}
          >
            57
          </p>
          <div className="flex items-center gap-1 mt-1">
            <span
              className={`text-xs ${
                isDark ? "text-red-400" : "text-orange-500"
              }`}
            >
              需重点关注
            </span>
          </div>
        </div>

        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-purple-500/20" : "bg-red-100"
              }`}
            >
              <Plus
                className={`w-4 h-4 ${
                  isDark ? "text-purple-400" : "text-red-500"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>本周新增</span>
          </div>
          <p className={`text-3xl font-bold ${textPrimary}`}>93</p>
          <div className="flex items-center gap-1 mt-1">
            <TrendingUp
              className={`w-3 h-3 ${
                isDark ? "text-green-400" : "text-green-500"
              }`}
            />
            <span
              className={`text-xs ${
                isDark ? "text-green-400" : "text-green-500"
              }`}
            >
              较上周 +12
            </span>
          </div>
        </div>

        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center gap-2 mb-2">
            <div
              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                isDark ? "bg-yellow-500/20" : "bg-yellow-100"
              }`}
            >
              <AlertTriangle
                className={`w-4 h-4 ${
                  isDark ? "text-yellow-400" : "text-yellow-600"
                }`}
              />
            </div>
            <span className={`text-sm ${textSecondary}`}>重点待处理</span>
          </div>
          <p className={`text-3xl font-bold ${textPrimary}`}>41</p>
          <div className="flex items-center gap-1 mt-1">
            <span className={`text-xs ${textMuted}`}>高优先级 12</span>
          </div>
        </div>
      </div>

      {/* 第二行：分类分布区 */}
      <div className="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
        {/* 左侧：二级任务分类分布 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
            二级任务分类分布
          </h3>
          <div className="space-y-3">
            {categoryData.map((item, index) => (
              <div key={index} className="space-y-1">
                <div className="flex items-center justify-between">
                  <span className={`text-sm ${textSecondary}`}>
                    {item.name}
                  </span>
                  <span className={`text-sm font-medium ${textPrimary}`}>
                    {item.count}
                  </span>
                </div>
                <div
                  className={`h-2 rounded-full overflow-hidden ${
                    isDark ? "bg-slate-700" : "bg-gray-200"
                  }`}
                >
                  <div
                    className={`h-full rounded-full transition-all ${
                      index === 0
                        ? isDark
                          ? "bg-blue-500"
                          : "bg-red-500"
                        : index === 1
                        ? isDark
                          ? "bg-cyan-500"
                          : "bg-red-400"
                        : index === 2
                        ? isDark
                          ? "bg-purple-500"
                          : "bg-red-300"
                        : isDark
                        ? "bg-green-500"
                        : "bg-red-200"
                    }`}
                    style={{ width: `${item.percentage}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 中间：三级任务分布（点击下钻） */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center justify-between mb-4">
            <h3 className={`font-semibold ${textPrimary}`}>三级任务分布</h3>
            <select
              className={`text-xs px-2 py-1 rounded ${inputBg} ${cardBorder} ${textMuted}`}
            >
              <option value="plan">规划任务</option>
              <option value="xk">XK任务</option>
              <option value="mnty">MNTY任务</option>
              <option value="effect">效果PG任务</option>
            </select>
          </div>
          <div className="space-y-2">
            {thirdLevelData.slice(0, 5).map((item, index) => (
              <div key={index} className="flex items-center gap-2">
                <span className={`text-xs w-16 ${textMuted}`}>{item.name}</span>
                <div
                  className={`flex-1 h-4 rounded overflow-hidden ${
                    isDark ? "bg-slate-700" : "bg-gray-200"
                  }`}
                >
                  <div
                    className={`h-full rounded ${
                      index === 0
                        ? isDark
                          ? "bg-blue-500"
                          : "bg-red-500"
                        : index === 1
                        ? isDark
                          ? "bg-cyan-500"
                          : "bg-red-400"
                        : index === 2
                        ? isDark
                          ? "bg-purple-500"
                          : "bg-red-300"
                        : index === 3
                        ? isDark
                          ? "bg-green-500"
                          : "bg-red-200"
                        : isDark
                        ? "bg-yellow-500"
                        : "bg-red-100"
                    }`}
                    style={{ width: `${(item.count / 200) * 100}%` }}
                  />
                </div>
                <span
                  className={`text-xs font-medium w-8 text-right ${textPrimary}`}
                >
                  {item.count}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* 右侧：三级任务数量Top5 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
            三级任务数量 Top 5
          </h3>
          <div className="space-y-2">
            {top5ByVolume.map((item, index) => (
              <div key={index} className="flex items-center gap-2">
                <span
                  className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${
                    index === 0
                      ? isDark
                        ? "bg-yellow-500/20 text-yellow-400"
                        : "bg-yellow-100 text-yellow-600"
                      : index === 1
                      ? isDark
                        ? "bg-slate-500/20 text-slate-400"
                        : "bg-gray-200 text-gray-600"
                      : index === 2
                      ? isDark
                        ? "bg-orange-500/20 text-orange-400"
                        : "bg-orange-100 text-orange-600"
                      : isDark
                      ? "bg-slate-600/20 text-slate-500"
                      : "bg-gray-100 text-gray-500"
                  }`}
                >
                  {index + 1}
                </span>
                <span className={`flex-1 text-sm ${textSecondary}`}>
                  {item.name}
                </span>
                <span className={`text-sm font-medium ${textPrimary}`}>
                  {item.count}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 第三行：状态与趋势分析区 */}
      <div className="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
        {/* 左侧：任务状态分布 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>任务状态分布</h3>
          <div className="space-y-3">
            {categoryData.map((item, index) => (
              <div key={index}>
                <div className="flex items-center justify-between mb-1">
                  <span className={`text-xs ${textMuted}`}>{item.name}</span>
                </div>
                <div className="flex gap-1">
                  <div
                    className={`h-3 flex-1 rounded-l ${
                      isDark ? "bg-slate-700" : "bg-gray-200"
                    }`}
                    style={{ width: "30%" }}
                  />
                  <div
                    className={`h-3 flex-1 ${
                      isDark ? "bg-blue-500" : "bg-red-400"
                    }`}
                    style={{ width: "25%" }}
                  />
                  <div
                    className={`h-3 flex-1 ${
                      isDark ? "bg-green-500" : "bg-green-400"
                    }`}
                    style={{ width: "35%" }}
                  />
                  <div
                    className={`h-3 flex-1 rounded-r ${
                      isDark ? "bg-red-500" : "bg-orange-400"
                    }`}
                    style={{ width: "10%" }}
                  />
                </div>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-t ${cardBorder}">
            <div className="flex items-center gap-1">
              <div
                className={`w-2 h-2 rounded ${
                  isDark ? "bg-slate-600" : "bg-gray-400"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>未开始</span>
            </div>
            <div className="flex items-center gap-1">
              <div
                className={`w-2 h-2 rounded ${
                  isDark ? "bg-blue-500" : "bg-red-400"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>进行中</span>
            </div>
            <div className="flex items-center gap-1">
              <div
                className={`w-2 h-2 rounded ${
                  isDark ? "bg-green-500" : "bg-green-400"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>已完成</span>
            </div>
            <div className="flex items-center gap-1">
              <div
                className={`w-2 h-2 rounded ${
                  isDark ? "bg-red-500" : "bg-orange-400"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>延期</span>
            </div>
          </div>
        </div>

        {/* 中间：任务趋势图（简化版） */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center justify-between mb-4">
            <h3 className={`font-semibold ${textPrimary}`}>
              任务趋势（近30天）
            </h3>
            <div className="flex gap-2">
              <button
                className={`px-2 py-1 rounded text-xs ${
                  timeRange === "7d"
                    ? isDark
                      ? "bg-blue-500/20 text-blue-400"
                      : "bg-red-100 text-red-600"
                    : textMuted
                }`}
              >
                近7天
              </button>
              <button
                className={`px-2 py-1 rounded text-xs ${
                  timeRange === "30d"
                    ? isDark
                      ? "bg-blue-500/20 text-blue-400"
                      : "bg-red-100 text-red-600"
                    : textMuted
                }`}
              >
                近30天
              </button>
            </div>
          </div>
          <div className="h-32 flex items-end justify-between gap-2">
            {[65, 72, 68, 75, 80, 78, 85, 82, 88, 92, 87, 95].map(
              (value, index) => (
                <div
                  key={index}
                  className="flex-1 flex flex-col items-center gap-1"
                >
                  <div
                    className={`w-full rounded-t transition-all ${
                      isDark ? "bg-blue-500/50" : "bg-red-300"
                    }`}
                    style={{ height: `${value}%` }}
                  />
                </div>
              )
            )}
          </div>
          <div className="flex items-center justify-center gap-4 mt-2">
            <div className="flex items-center gap-1">
              <div
                className={`w-3 h-1 rounded ${
                  isDark ? "bg-blue-500" : "bg-red-500"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>新增任务</span>
            </div>
            <div className="flex items-center gap-1">
              <div
                className={`w-3 h-1 rounded ${
                  isDark ? "bg-green-500" : "bg-green-500"
                }`}
              />
              <span className={`text-xs ${textMuted}`}>完成任务</span>
            </div>
          </div>
        </div>

        {/* 右侧：分类完成率对比 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
            分类完成率对比
          </h3>
          <div className="space-y-4">
            {completionRates.map((item, index) => (
              <div key={index}>
                <div className="flex items-center justify-between mb-1">
                  <span className={`text-sm ${textSecondary}`}>
                    {item.name}
                  </span>
                  <span
                    className={`text-sm font-medium ${
                      isDark ? "text-blue-400" : "text-red-600"
                    }`}
                  >
                    {item.rate}%
                  </span>
                </div>
                <div
                  className={`h-2 rounded-full overflow-hidden ${
                    isDark ? "bg-slate-700" : "bg-gray-200"
                  }`}
                >
                  <div
                    className={`h-full rounded-full transition-all ${
                      isDark ? "bg-blue-500" : "bg-red-500"
                    }`}
                    style={{ width: `${item.rate}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 第四行：预警与行动区 */}
      <div className="grid grid-cols-3 gap-4 flex-shrink-0">
        {/* 左侧：预警任务列表 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <div className="flex items-center justify-between mb-4">
            <h3 className={`font-semibold ${textPrimary}`}>预警任务</h3>
            <button
              className={`text-xs ${
                isDark
                  ? "text-blue-400 hover:text-blue-300"
                  : "text-red-500 hover:text-red-600"
              }`}
            >
              查看全部
            </button>
          </div>
          <div className="space-y-3">
            {warningTasks.map((task) => (
              <div
                key={task.id}
                className={`p-3 rounded-lg border cursor-pointer transition-all hover:shadow-md ${
                  task.riskLevel === "high"
                    ? isDark
                      ? "bg-red-500/10 border-red-500/30"
                      : "bg-orange-50 border-orange-200"
                    : isDark
                    ? "bg-yellow-500/10 border-yellow-500/30"
                    : "bg-yellow-50 border-yellow-200"
                }`}
              >
                <div className="flex items-start justify-between mb-1">
                  <div className="flex items-center gap-2">
                    <AlertTriangle
                      className={`w-4 h-4 ${
                        task.riskLevel === "high"
                          ? isDark
                            ? "text-red-400"
                            : "text-orange-500"
                          : isDark
                          ? "text-yellow-400"
                          : "text-yellow-500"
                      }`}
                    />
                    <span className={`text-sm font-medium ${textPrimary}`}>
                      {task.name}
                    </span>
                  </div>
                  <span className={`text-xs ${textMuted}`}>
                    截止：{task.dueDate}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span
                    className={`text-xs px-2 py-0.5 rounded ${
                      isDark
                        ? "bg-slate-700/50 text-slate-400"
                        : "bg-gray-100 text-gray-500"
                    }`}
                  >
                    {task.category}
                  </span>
                  <span
                    className={`text-xs ${
                      task.status === "已延期"
                        ? isDark
                          ? "text-red-400"
                          : "text-orange-500"
                        : textMuted
                    }`}
                  >
                    {task.status}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 中间：重点分类排行 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>重点排行</h3>
          <div className="space-y-4">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <TrendingUp
                  className={`w-4 h-4 ${
                    isDark ? "text-blue-400" : "text-red-500"
                  }`}
                />
                <span className={`text-sm font-medium ${textSecondary}`}>
                  任务量 Top 5
                </span>
              </div>
              <div className="space-y-1">
                {top5ByVolume.map((item, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <span className={`w-4 text-xs ${textMuted}`}>
                      {index + 1}.
                    </span>
                    <span className={`flex-1 text-xs ${textSecondary}`}>
                      {item.name}
                    </span>
                    <span className={`text-xs font-medium ${textPrimary}`}>
                      {item.count}
                    </span>
                  </div>
                ))}
              </div>
            </div>
            <div className={`pt-3 border-t ${cardBorder}`}>
              <div className="flex items-center gap-2 mb-2">
                <AlertTriangle
                  className={`w-4 h-4 ${
                    isDark ? "text-red-400" : "text-orange-500"
                  }`}
                />
                <span className={`text-sm font-medium ${textSecondary}`}>
                  延期量 Top 5
                </span>
              </div>
              <div className="space-y-1">
                {top5ByDelay.map((item, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <span className={`w-4 text-xs ${textMuted}`}>
                      {index + 1}.
                    </span>
                    <span className={`flex-1 text-xs ${textSecondary}`}>
                      {item.name}
                    </span>
                    <span
                      className={`text-xs font-medium ${
                        isDark ? "text-red-400" : "text-orange-500"
                      }`}
                    >
                      {item.count}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 右侧：我的待办/快捷入口 */}
        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
          <h3 className={`font-semibold mb-4 ${textPrimary}`}>我的待办</h3>
          <div className="grid grid-cols-3 gap-3 mb-4">
            <div
              className={`p-3 rounded-lg text-center ${
                isDark ? "bg-slate-700/50" : "bg-red-50"
              }`}
            >
              <p className={`text-2xl font-bold ${textPrimary}`}>
                {myTodos.pending}
              </p>
              <p className={`text-xs ${textMuted}`}>待处理</p>
            </div>
            <div
              className={`p-3 rounded-lg text-center ${
                isDark ? "bg-slate-700/50" : "bg-yellow-50"
              }`}
            >
              <p className={`text-2xl font-bold ${textPrimary}`}>
                {myTodos.pendingConfirm}
              </p>
              <p className={`text-xs ${textMuted}`}>待确认</p>
            </div>
            <div
              className={`p-3 rounded-lg text-center ${
                isDark ? "bg-slate-700/50" : "bg-blue-50"
              }`}
            >
              <p className={`text-2xl font-bold ${textPrimary}`}>
                {myTodos.pendingReview}
              </p>
              <p className={`text-xs ${textMuted}`}>待复核</p>
            </div>
          </div>
          <div className="space-y-2">
            <button
              onClick={() => onNavigate("task-create")}
              className={`w-full flex items-center justify-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
                isDark
                  ? "bg-blue-600 hover:bg-blue-500"
                  : "bg-red-600 hover:bg-red-500"
              }`}
            >
              <Plus className="w-4 h-4" />
              新建任务
            </button>
            <button
              onClick={() => onNavigate("plan-task-fx")}
              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
                isDark
                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
                  : "border-red-200 hover:bg-red-50 text-red-600"
              }`}
            >
              <FileText className="w-4 h-4" />
              进入任务中心
            </button>
            <button
              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
                isDark
                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
                  : "border-red-200 hover:bg-red-50 text-red-600"
              }`}
            >
              <AlertTriangle className="w-4 h-4" />
              查看延期任务
            </button>
            <button
              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
                isDark
                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
                  : "border-red-200 hover:bg-red-50 text-red-600"
              }`}
            >
              <User className="w-4 h-4" />
              查看我的任务
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskDashboard;