import { useEffect, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { Spin, Alert } from "antd";
import { useAuthStore } from "../../../../stores/auth";
import { listAuditLogs, type AuditLogItem } from "../../../../api/auditLogs";
import { EntityName } from "../../../../components/EntityName";
import {
  dashboardApi,
  type SystemHealthResp,
  type UserActivityResp,
  type ModuleStatusResp,
} from "../../../../api/health/dashboard";

function formatTimeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime();
  const minutes = Math.floor(diff / 60000);
  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes} 分钟前`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} 小时前`;
  return `${Math.floor(hours / 24)} 天前`;
}

const ACTION_ICONS: Record<
  string,
  { icon: string; bg: string; color: string }
> = {
  create: { icon: "✓", bg: "#F0FDF4", color: "#16A34A" },
  created: { icon: "✓", bg: "#F0FDF4", color: "#16A34A" },
  update: { icon: "⚙", bg: "#FFFBEB", color: "#D97706" },
  updated: { icon: "⚙", bg: "#FFFBEB", color: "#D97706" },
  delete: { icon: "✕", bg: "#FEF2F2", color: "#DC2626" },
  deleted: { icon: "✕", bg: "#FEF2F2", color: "#DC2626" },
  login: { icon: "👤", bg: "#EFF6FF", color: "#2563EB" },
  "user.create": { icon: "✓", bg: "#F0FDF4", color: "#16A34A" },
  "user.update": { icon: "⚙", bg: "#FFFBEB", color: "#D97706" },
  "user.delete": { icon: "✕", bg: "#FEF2F2", color: "#DC2626" },
};

const ACTION_LABELS: Record<string, string> = {
  create: "创建",
  created: "创建",
  update: "更新",
  updated: "更新",
  delete: "删除",
  deleted: "删除",
  login: "登录",
  "user.create": "创建",
  "user.update": "更新",
  "user.delete": "删除",
};
const RESOURCE_LABELS: Record<string, string> = {
  user: "用户",
  role: "角色",
  patient: "患者",
  doctor: "医护",
  appointment: "预约",
  follow_up_task: "随访",
  consultation_session: "咨询",
  message: "消息",
  plugin: "插件",
  process_instance: "流程实例",
  organization: "组织",
};

const QUICK_ACTIONS = [
  {
    icon: "👤",
    bg: "#EFF6FF",
    color: "#2563EB",
    text: "用户管理",
    path: "/users",
  },
  {
    icon: "🔑",
    bg: "#F5F3FF",
    color: "#7C3AED",
    text: "角色权限",
    path: "/roles",
  },
  {
    icon: "⚙",
    bg: "#FFFBEB",
    color: "#D97706",
    text: "系统配置",
    path: "/settings",
  },
  {
    icon: "📋",
    bg: "#FEF2F2",
    color: "#DC2626",
    text: "审计日志",
    path: "/audit-logs",
  },
  {
    icon: "🧩",
    bg: "#F0FDF4",
    color: "#16A34A",
    text: "插件管理",
    path: "/plugins",
  },
  {
    icon: "📖",
    bg: "#F0F9FF",
    color: "#0284C7",
    text: "菜单管理",
    path: "/menus",
  },
  {
    icon: "📊",
    bg: "#FFF1F2",
    color: "#E11D48",
    text: "数据字典",
    path: "/dictionaries",
  },
  {
    icon: "🔔",
    bg: "#F8FAFC",
    color: "#475569",
    text: "消息管理",
    path: "/messages",
  },
];

export default function AdminDashboard() {
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);

  const [loading, setLoading] = useState(true);
  const [errors, setErrors] = useState<string[]>([]);
  const [auditLogs, setAuditLogs] = useState<AuditLogItem[]>([]);
  const [auditTotal, setAuditTotal] = useState(0);
  const [systemHealth, setSystemHealth] = useState<SystemHealthResp | null>(
    null,
  );
  const [userActivity, setUserActivity] = useState<UserActivityResp | null>(
    null,
  );
  const [modules, setModules] = useState<ModuleStatusResp[]>([]);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setErrors([]);

    const [auditResult, healthResult, activityResult, modulesResult] =
      await Promise.allSettled([
        listAuditLogs({ page: 1, page_size: 6 }),
        dashboardApi.getSystemHealth(),
        dashboardApi.getUserActivity(),
        dashboardApi.getModuleStatus(),
      ]);

    const failed: string[] = [];

    if (auditResult.status === "fulfilled") {
      const data = auditResult.value;
      setAuditLogs(data.data.filter((a) => a.action !== "login_failed"));
      setAuditTotal(data.total);
    } else {
      failed.push("审计日志");
    }

    if (healthResult.status === "fulfilled") {
      setSystemHealth(healthResult.value);
    } else {
      failed.push("系统健康");
    }

    if (activityResult.status === "fulfilled") {
      setUserActivity(activityResult.value);
    } else {
      failed.push("用户统计");
    }

    if (modulesResult.status === "fulfilled") {
      setModules(modulesResult.value);
    } else {
      failed.push("模块状态");
    }

    setErrors(failed);
    setLoading(false);
  }, []);

  useEffect(() => {
    void fetchData();
  }, [fetchData]);

  const firstName = user?.display_name ?? user?.username ?? "管理员";
  const now = new Date();
  const greeting =
    now.getHours() < 12 ? "早上好" : now.getHours() < 18 ? "下午好" : "晚上好";
  const activeModules =
    modules.length > 0 ? modules.filter((m) => m.active).length : 0;
  const totalModules = modules.length || 8;

  const statCards = [
    {
      label: "注册用户",
      value: userActivity?.total_registered ?? "--",
      color: "#2563EB",
      gradient: "linear-gradient(90deg,#2563EB,#60A5FA)",
      sub:
        userActivity
          ? `今日活跃 ${userActivity.daily_active}`
          : "加载中...",
    },
    {
      label: "业务模块",
      value: `${activeModules} / ${totalModules}`,
      color: "#7C3AED",
      gradient: "linear-gradient(90deg,#7C3AED,#A78BFA)",
      sub:
        totalModules > 0
          ? `${totalModules - activeModules} 个模块待启用`
          : "加载中...",
    },
    {
      label: "审计记录",
      value: auditTotal,
      color: "#16A34A",
      gradient: "linear-gradient(90deg,#16A34A,#4ADE80)",
      sub:
        auditTotal > 0
          ? `显示最近 ${auditLogs.length} 条`
          : "暂无操作记录",
    },
    {
      label: "本周活跃",
      value: userActivity?.weekly_active ?? "--",
      color: "#EA580C",
      gradient: "linear-gradient(90deg,#EA580C,#FB923C)",
      sub: userActivity
        ? `月活 ${userActivity.monthly_active}`
        : "加载中...",
    },
  ];

  const healthServices = systemHealth?.services ?? [
    {
      name: "API 服务",
      status: "unknown" as const,
      message: "数据加载中...",
      response_ms: null,
    },
    {
      name: "数据库",
      status: "unknown" as const,
      message: "数据加载中...",
      response_ms: null,
    },
    {
      name: "定时任务",
      status: "unknown" as const,
      message: "数据加载中...",
      response_ms: null,
    },
  ];

  if (loading && !systemHealth) {
    return (
      <Spin size="large" style={{ display: "block", margin: "80px auto" }} />
    );
  }

  return (
    <div>
      {errors.length > 0 && (
        <Alert
          type="warning"
          showIcon
          closable
          message={`部分数据加载失败：${errors.join("、")}`}
          style={{ marginBottom: 16 }}
        />
      )}

      {/* 欢迎栏 */}
      <div style={{ marginBottom: 24 }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 4px" }}>
          {greeting}，{firstName.charAt(0)}主任
        </h1>
        <p style={{ color: "#64748B", fontSize: 13, margin: 0 }}>
          平台运行正常 · {activeModules} 个模块已激活 · 今日数据概览
        </p>
      </div>

      {/* 系统健康条 */}
      <div
        style={{
          display: "flex",
          gap: 12,
          marginBottom: 20,
          padding: "14px 20px",
          background: "var(--erp-bg-container, #fff)",
          borderRadius: 12,
          border: "1px solid #E2E8F0",
          alignItems: "center",
          flexWrap: "wrap",
        }}
      >
        {healthServices.map((item, i) => (
          <div
            key={item.name}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              fontSize: 12,
              color: "#64748B",
              paddingRight: 12,
              borderRight:
                i < healthServices.length - 1 ? "1px solid #F1F5F9" : undefined,
            }}
          >
            <div
              style={{
                width: 8,
                height: 8,
                borderRadius: "50%",
                flexShrink: 0,
                background:
                  item.status === "healthy"
                    ? "#22C55E"
                    : item.status === "degraded"
                      ? "#EAB308"
                      : item.status === "unknown"
                        ? "#94A3B8"
                        : "#EF4444",
              }}
            />
            <span style={{ fontWeight: 500, color: "#334155" }}>
              {item.name}
            </span>{" "}
            {item.message}
            {item.response_ms != null && (
              <span style={{ color: "#94A3B8", fontSize: 11 }}>
                {item.response_ms}ms
              </span>
            )}
          </div>
        ))}
      </div>

      {/* 统计卡片 */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 14,
          marginBottom: 24,
        }}
      >
        {statCards.map((card) => (
          <div
            key={card.label}
            style={{
              background: "var(--erp-bg-container, #fff)",
              borderRadius: 12,
              border: "1px solid #E2E8F0",
              overflow: "hidden",
              cursor: "pointer",
              transition: "all 0.2s",
            }}
          >
            <div style={{ height: 3, background: card.gradient }} />
            <div style={{ padding: "14px 18px" }}>
              <div style={{ fontSize: 12, color: "#64748B", marginBottom: 4 }}>
                {card.label}
              </div>
              <div style={{ fontSize: 26, fontWeight: 700, color: card.color }}>
                {card.value}
              </div>
              <div style={{ fontSize: 11, color: "#64748B", marginTop: 3 }}>
                {card.sub}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 双栏：审计日志 + 模块状态 */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 16,
          marginBottom: 20,
        }}
      >
        {/* 最近审计日志 */}
        <div
          style={{
            background: "var(--erp-bg-container, #fff)",
            borderRadius: 12,
            border: "1px solid #E2E8F0",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              padding: "12px 18px",
              borderBottom: "1px solid #F1F5F9",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <h3 style={{ fontSize: 14, fontWeight: 600 }}>最近操作记录</h3>
            <span
              style={{ fontSize: 11, color: "#2563EB", cursor: "pointer" }}
              onClick={() => navigate("/audit-logs")}
            >
              审计日志 →
            </span>
          </div>
          {auditLogs.length === 0 ? (
            <div
              style={{
                padding: 24,
                textAlign: "center",
                color: "#64748B",
                fontSize: 13,
              }}
            >
              暂无操作记录
            </div>
          ) : (
            auditLogs.map((log) => {
              const actionKey = log.action.split(".").pop() ?? log.action;
              const iconCfg = ACTION_ICONS[log.action] ??
                ACTION_ICONS[actionKey] ?? {
                  icon: "📋",
                  bg: "#F0F9FF",
                  color: "#0284C7",
                };
              const actionLabel =
                ACTION_LABELS[log.action] ??
                ACTION_LABELS[actionKey] ??
                log.action;
              const resourceLabel =
                RESOURCE_LABELS[log.resource_type] ??
                RESOURCE_LABELS[log.resource_type.split(".").pop() ?? ""] ??
                log.resource_type;
              return (
                <div
                  key={log.id}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 10,
                    padding: "10px 18px",
                    borderBottom: "1px solid #F1F5F9",
                    fontSize: 13,
                    transition: "background 0.15s",
                    cursor: "pointer",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = "#F8FAFC";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = "transparent";
                  }}
                >
                  <div
                    style={{
                      width: 28,
                      height: 28,
                      borderRadius: 6,
                      background: iconCfg.bg,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontSize: 12,
                      flexShrink: 0,
                      color: iconCfg.color,
                    }}
                  >
                    {iconCfg.icon}
                  </div>
                  <span style={{ fontWeight: 500, flexShrink: 0, maxWidth: 80 }}>
                    {log.user_name ? (
                      log.user_name
                    ) : log.user_id ? (
                      <EntityName
                        name={null}
                        id={log.user_id}
                        fallbackLabel="未知用户"
                      />
                    ) : (
                      "系统"
                    )}
                  </span>
                  <span style={{ flex: 1, color: "#475569" }}>
                    {actionLabel}了{resourceLabel}
                  </span>
                  <span
                    style={{ fontSize: 11, color: "#64748B", flexShrink: 0 }}
                  >
                    {formatTimeAgo(log.created_at)}
                  </span>
                </div>
              );
            })
          )}
        </div>

        {/* 模块状态 */}
        <div
          style={{
            background: "var(--erp-bg-container, #fff)",
            borderRadius: 12,
            border: "1px solid #E2E8F0",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              padding: "12px 18px",
              borderBottom: "1px solid #F1F5F9",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <h3 style={{ fontSize: 14, fontWeight: 600 }}>模块状态</h3>
            <span
              style={{ fontSize: 11, color: "#2563EB", cursor: "pointer" }}
              onClick={() => navigate("/plugins")}
            >
              模块管理 →
            </span>
          </div>
          {(modules.length > 0 ? modules : []).map((mod) => (
            <div
              key={mod.name}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "10px 18px",
                borderBottom: "1px solid #F1F5F9",
              }}
            >
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>
                  {mod.display_name}
                </div>
                <div style={{ fontSize: 11, color: "#64748B" }}>
                  {mod.description}
                  {mod.entity_count != null && (
                    <span style={{ marginLeft: 8, color: "#94A3B8" }}>
                      {mod.entity_count} 实体
                    </span>
                  )}
                </div>
              </div>
              <span
                style={{
                  fontSize: 11,
                  padding: "2px 10px",
                  borderRadius: 10,
                  fontWeight: 500,
                  background: mod.active ? "#F0FDF4" : "#F1F5F9",
                  color: mod.active ? "#16A34A" : "#64748B",
                }}
              >
                {mod.active ? "运行中" : "未启用"}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* 快捷管理入口 */}
      <div
        style={{
          background: "var(--erp-bg-container, #fff)",
          borderRadius: 12,
          border: "1px solid #E2E8F0",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            padding: "12px 18px",
            borderBottom: "1px solid #F1F5F9",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <h3 style={{ fontSize: 14, fontWeight: 600 }}>系统管理</h3>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 10,
            padding: "14px 18px",
          }}
        >
          {QUICK_ACTIONS.map((item) => (
            <div
              key={item.path}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: 6,
                padding: "14px 8px",
                borderRadius: 10,
                border: "1px solid #E2E8F0",
                cursor: "pointer",
                transition: "all 0.15s",
                textAlign: "center",
              }}
              onClick={() => navigate(item.path)}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = "#2563EB";
                e.currentTarget.style.background = "#F8FAFC";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = "#E2E8F0";
                e.currentTarget.style.background = "transparent";
              }}
            >
              <div
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 8,
                  background: item.bg,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontSize: 16,
                  color: item.color,
                }}
              >
                {item.icon}
              </div>
              <span style={{ fontSize: 12, fontWeight: 500 }}>
                {item.text}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
