import { Chip } from '@heroui/react'
import { formatDistanceToNow, parse } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import {
  AlertCircle,
  Braces,
  Clock,
  FileText,
  FileWarning,
  Fingerprint,
  Gauge,
  GitBranch,
  ListChecks,
  Puzzle,
  QrCode,
  Radio,
  Repeat,
  Route,
  ShieldAlert,
  Terminal,
  Timer
} from 'lucide-react'
import _ from 'node-karin/lodash'
import React from 'react'
import { MdSchedule } from 'react-icons/md'

import { DefaultLayout } from '../../../components/DefaultLayout'
import type { PosterProps } from '../../../types/ctx'
import { generateQRCode } from '../../../../utils/QRcode'
import { isDark } from '../../../../utils/theme'

import { getRandomErrorTitle } from './errorTitles'
import { highlightStack } from './stackHighlight'
import type { AmagiErrorDetail, ApiErrorData } from './types'

/** 业务错误类型：从总数据类型里取，不再单独导出。 */
type BusinessError = ApiErrorData['error']
/** 日志等级：从总数据类型里逐步取。 */
type LogLevel = NonNullable<ApiErrorData['logs']>[number]['level']

/**
 * 取「最后一次 `node_modules/` 之后的那一段」——包名，供调用栈的归属判定使用。
 *
 * 不能只看帧的路径里有没有 `node_modules`：发布后插件**自己**就装在 `node_modules` 里，
 * 帧形如 `…/node_modules/.pnpm/koishi-plugin-kkk@…/node_modules/koishi-plugin-kkk/lib/core_chunk/main.js:…`，
 * `node_modules` 出现两次 —— 只看文本特征会把每一帧都当成依赖压暗，整块图失去分层。
 * 所以改问「这一帧和本模块是不是同一个包」：模块自身的位置就是包根的答案，两边各取包名比对即可。
 * 源码树（开发态）里取不到包名，返回 `undefined`，此时凡进了 `node_modules` 的帧一律算外部帧。
 *
 * 只做字符串切分，**不做 URL→路径转换**：模板在 ktr dev 的 iframe 沙箱里由浏览器求值，
 * `import.meta.url` 是 `http://localhost:5174/@fs/D:/…`，生产 bundle 里是 `file:///…`，
 * 折算成文件系统路径要同时处理协议、主机、`/@fs` 与前导斜杠四种差异，漏一样就会把所有帧
 * 都判成外部帧、整块压暗；而这两种形态都原样带着 `node_modules` 这一段，直接切更稳。
 * 也**不能**为图省事引入 `node:*` 内置模块：模板会被 vite 当浏览器代码打包，`node:url`
 * 这类会被 externalize 成空壳，模块求值期直接抛错，整个判定失效。
 * @param input - 模块 URL 或帧里的路径原文
 * @returns 包名，形如 `koishi-plugin-kkk`；不在 `node_modules` 里时返回 `undefined`
 */
const packageSegmentOf = (input: string): string | undefined => {
  const path = input.replace(/\\/g, '/')
  const marker = '/node_modules/'
  const at = path.lastIndexOf(marker)
  if (at < 0) return undefined
  return path.slice(at + marker.length).split('/')[0]
}

/**
 * 本模块所在的包名；开发态跑源码树时为 `undefined`。
 *
 * Koishi 移植：上游用 `import.meta.url`（模板在 ktr dev 的浏览器沙箱里求值）。
 * 我们的产物是 CJS，`import.meta` 会让 Node 把整个文件当 ESM（报 "exports is not defined"），
 * 因此改用 `__filename` 拼一个 file:// URL —— 这里只做字符串切分找 `node_modules`，语义一致。
 */
const selfModuleUrl =
  typeof __filename === 'string' ? 'file:///' + __filename.replace(/\\/g, '/') : ''
const selfPackageSegment = packageSegmentOf(selfModuleUrl)

/**
 * 判断一个调用帧的位置是否属于本插件自己的代码。
 * @param location - 帧里的位置原文，形如 `路径:行:列` 或 `node:internal/…`
 * @returns 是否属于本插件自己的代码
 */
const isOwnFrameLocation = (location: string): boolean => {
  const path = location.replace(/\\/g, '/')
  // node 内部帧没有包名可言，直接算外部帧（与 stackHighlight 的兜底判定同款）
  if (/^node:|\(node:/.test(path)) return false
  // 没进 node_modules 的帧就是源码树里的自己（开发态）
  if (!path.includes('/node_modules/')) return true
  // 进了 node_modules：只有和本模块同属一个包才算自己的代码
  return packageSegmentOf(path) === selfPackageSegment
}

/**
 * ANSI 颜色代码映射
 */
const ansiColorMap: Record<number, string> = {
  30: 'text-foreground',
  31: 'text-danger',
  32: 'text-success',
  33: 'text-warning',
  34: 'text-accent',
  35: 'text-accent',
  36: 'text-cyan-600',
  37: 'text-muted',
  90: 'text-foreground/70',
  91: 'text-danger',
  92: 'text-success',
  93: 'text-warning',
  94: 'text-accent',
  95: 'text-accent',
  96: 'text-muted',
  97: 'text-background/80'
}

const ansi256ToColor = (colorCode: number): string => {
  const standardColors = [
    '#000000',
    '#800000',
    '#008000',
    '#808000',
    '#000080',
    '#800080',
    '#008080',
    '#c0c0c0',
    '#808080',
    '#ff0000',
    '#00ff00',
    '#ffff00',
    '#0000ff',
    '#ff00ff',
    '#00ffff',
    '#ffffff'
  ]
  if (colorCode < 16) return standardColors[colorCode]
  if (colorCode < 232) {
    const index = colorCode - 16
    const r = Math.floor(index / 36),
      g = Math.floor((index % 36) / 6),
      b = index % 6
    const toHex = (v: number) => (v === 0 ? 0 : 55 + v * 40).toString(16).padStart(2, '0')
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
  }
  const gray = (colorCode - 232) * 10 + 8
  const hex = gray.toString(16).padStart(2, '0')
  return `#${hex}${hex}${hex}`
}

const convertAnsiToHtml = (text: string): string => {
  // 完全避免在正则字面量中出现任何转义
  const ESC = String.fromCharCode(27)
  const ansiRegex = new RegExp(ESC + '\\[([0-9;]+)m', 'g')
  let result = '',
    lastIndex = 0
  let currentStyles: { classes: string[]; inlineColor?: string } = { classes: [] }
  let match

  const escapeHtml = (str: string) =>
    str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;')
  const formatLogContent = (content: string) =>
    escapeHtml(content).replace(
      /([\u3400-\u9fff\uf900-\ufaff\u3000-\u303f\uff00-\uffef]+)/g,
      '<span class="font-[HarmonyOSHans-Regular]">$1</span>'
    )
  const makeSpan = (content: string) => {
    const hasClass = currentStyles.classes.length > 0,
      hasInline = currentStyles.inlineColor
    if (!hasClass && !hasInline) return formatLogContent(content)
    const classAttr = hasClass ? ` class="${currentStyles.classes.join(' ')}"` : ''
    const styleAttr = hasInline ? ` style="color: ${currentStyles.inlineColor}"` : ''
    return `<span${classAttr}${styleAttr}>${formatLogContent(content)}</span>`
  }

  while ((match = ansiRegex.exec(text)) !== null) {
    if (match.index > lastIndex) result += makeSpan(text.substring(lastIndex, match.index))
    const codes = match[1].split(';').map(Number)
    let i = 0
    while (i < codes.length) {
      const code = codes[i]
      if (code === 90 && codes[i + 1] === 2) {
        currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-'))
        currentStyles.inlineColor = undefined
        currentStyles.classes.push('text-muted')
        i++
      } else if (code === 0 || code === 39 || code === 49) {
        currentStyles.classes = currentStyles.classes.filter(
          (c) => !c.startsWith('text-') && !c.startsWith('bg-') && !c.startsWith('dark:')
        )
        currentStyles.inlineColor = undefined
      } else if (code === 1) {
        if (!currentStyles.classes.includes('font-bold')) currentStyles.classes.push('font-bold')
      } else if (code === 22) {
        currentStyles.classes = currentStyles.classes.filter((c) => c !== 'font-bold')
      } else if (code === 38 && codes[i + 1] === 5) {
        const colorCode = codes[i + 2]
        if (colorCode !== undefined) {
          currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-') && !c.startsWith('dark:'))
          currentStyles.inlineColor = ansi256ToColor(colorCode)
          i += 2
        }
      } else if (ansiColorMap[code]) {
        currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-') && !c.startsWith('dark:'))
        currentStyles.inlineColor = undefined
        currentStyles.classes.push(ansiColorMap[code])
      }
      i++
    }
    lastIndex = ansiRegex.lastIndex
  }
  if (lastIndex < text.length) result += makeSpan(text.substring(lastIndex))
  return result
}

/** 把请求 URL 拆成「主体」与「查询参数名」两截：签名 URL 动辄上千字符，全印没法看 */
const splitRequestUrl = (raw: string): { head: string; names: string[]; queryLength: number } => {
  try {
    const u = new URL(raw)
    const names = [...u.searchParams.keys()]
    return { head: `${u.origin}${u.pathname}`, names, queryLength: u.search.length }
  } catch {
    return { head: raw, names: [], queryLength: 0 }
  }
}

/** trace 里 reason 的中文名 */
const TRACE_REASON_LABELS: Record<string, string> = {
  initial: '首次',
  retry: '重试',
  page: '翻页',
  segment: '分段',
  prepare: '前置'
}

const getLogLevelTheme = (level: LogLevel, dark: boolean) => {
  const themeMap: Record<    LogLevel,
    {
      bgClass: string
      borderClass: string
      textClass: string
      iconClass: string
      levelClass: string
      dotClass: string
    }
  > = {
    TRAC: {
      bgClass: dark ? 'bg-muted/10' : 'bg-muted/5',
      borderClass: 'border-muted/20',
      textClass: 'text-muted',
      iconClass: 'text-muted',
      levelClass: dark ? 'text-muted/10' : 'text-muted/10',
      dotClass: 'bg-muted/40'
    },
    DEBU: {
      bgClass: dark ? 'bg-cyan-400/10' : 'bg-cyan-500/5',
      borderClass: dark ? 'border-cyan-400/20' : 'border-cyan-500/20',
      textClass: dark ? 'text-cyan-400' : 'text-cyan-600',
      iconClass: dark ? 'text-cyan-400' : 'text-cyan-600',
      levelClass: dark ? 'text-cyan-400/10' : 'text-cyan-600/10',
      dotClass: dark ? 'bg-cyan-400/40' : 'bg-cyan-500/40'
    },
    MARK: {
      bgClass: dark ? 'bg-muted/10' : 'bg-muted/5',
      borderClass: 'border-muted/20',
      textClass: 'text-muted',
      iconClass: 'text-muted',
      levelClass: dark ? 'text-muted/10' : 'text-muted/10',
      dotClass: 'bg-muted/40'
    },
    INFO: {
      bgClass: 'bg-success-soft',
      borderClass: 'border-success/25',
      textClass: 'text-success',
      iconClass: 'text-success',
      levelClass: dark ? 'text-success/10' : 'text-success/10',
      dotClass: 'bg-success/40'
    },
    WARN: {
      bgClass: 'bg-warning-soft',
      borderClass: 'border-warning/25',
      textClass: 'text-warning',
      iconClass: 'text-warning',
      levelClass: dark ? 'text-warning/10' : 'text-warning-soft',
      dotClass: 'bg-warning/40'
    },
    ERRO: {
      bgClass: 'bg-danger-soft',
      borderClass: 'border-danger/25',
      textClass: 'text-danger',
      iconClass: 'text-danger',
      levelClass: dark ? 'text-danger/10' : 'text-danger/10',
      dotClass: 'bg-danger/40'
    },
    FATA: {
      bgClass: dark ? 'bg-pink-400/10' : 'bg-pink-500/5',
      borderClass: dark ? 'border-pink-400/25' : 'border-pink-500/25',
      textClass: dark ? 'text-pink-400' : 'text-pink-500',
      iconClass: dark ? 'text-pink-400' : 'text-pink-500',
      levelClass: dark ? 'text-pink-400/10' : 'text-pink-500/10',
      dotClass: dark ? 'bg-pink-400/40' : 'bg-pink-500/40'
    }
  }
  return themeMap[level] || themeMap['TRAC']
}

/**
 * 实现端关键字 → 图标。
 *
 * ⚠️ **顺序有意义**：`getAdapterLogo` 命中第一个就返回，所以「具体的」必须排在「笼统的」前面。
 * 尤其 `onebot` / `satori` 这两个兜底项**只能放最后** —— 它们会匹配到
 * `NapCat.Onebot` / `Lagrange.OneBot` 这类实现端名字，放前面就把各家自己的图标顶掉了。
 *
 * 资源文件在 `resources/image/other/handlerError/`（Milky 的图是 `Milky.png`，注意大小写）。
 */
const ADAPTER_LOGO_MAP: Record<string, string> = {
  napcat: '/image/other/handlerError/napcat.webp',
  lagrange: '/image/other/handlerError/lagrange.webp',
  chronocat: '/image/other/handlerError/chronocat.svg',
  llonebot: '/image/other/handlerError/llonebot.webp',
  lltwobot: '/image/other/handlerError/llonebot.webp',
  conwechat: '/image/other/handlerError/conwechat.webp',
  gocq: '/image/other/handlerError/gocq-http.webp',
  /** Milky：QQ NT 的实现端之一，和 NapCat 同级，不是 OneBot 系 */
  milky: '/image/other/handlerError/Milky.png',
  // ↓↓ 兜底项：只在这上面都配不上时才用
  onebot: '/image/other/handlerError/onebot.png',
  satori: '/image/other/handlerError/satori.png'
}

/**
 * 适配器图标。
 *
 * 要拿**实现端名字**（`NapCat.Onebot` / `LLOneBot`）去配，不能拿平台名：
 * OneBot 系各家都自报 `onebot`，用平台名永远配不上，卡片上就只剩一个万能拼图。
 * 识别不出实现端时退回平台名再试一次（QQ / 频道这类平台名本身就是标识），
 * 还是配不上才用拼图。
 */
const getAdapterLogo = (adapterInfo: { name?: string; implementationName?: string }): React.ReactNode => {
  const candidates = [String(adapterInfo?.implementationName ?? ''), String(adapterInfo?.name ?? '')]
  for (const candidate of candidates) {
    const nameLower = candidate.toLowerCase()
    if (!nameLower) continue
    for (const [key, logoPath] of Object.entries(ADAPTER_LOGO_MAP)) {
      if (nameLower.includes(key)) return <img src={logoPath} className="h-20 w-auto" alt={candidate} />
    }
  }
  return <Puzzle size={64} className="text-danger/80" />
}

/**
 * amagi 12 个错误大类的中文名与「该怎么办」。
 *
 * 印 `kind` 本身对看图的人没用 —— 有用的是它指向哪一类处置：改配置、等一会儿、
 * 还是提 issue。所以每一类都带一句处置提示。
 */
/** 未知 kind 的兜底（表里找不到时用它，避免整张错误卡片渲染失败） */
const FALLBACK_KIND_META = { zh: '接口错误', hint: '接口没有返回预期数据，可能是登录凭证过期或被风控拦截。' }

const ERROR_KIND_META: Record<AmagiErrorDetail['kind'], { zh: string; hint: string }> = {
  validation: { zh: '参数校验', hint: '调用参数不合法，通常是插件自身的问题' },
  auth: { zh: '身份失效', hint: 'Cookie 缺失或已过期，重新扫码登录即可' },
  rate_limit: { zh: '触发限流', hint: '请求太频繁，等一会儿再试' },
  risk: { zh: '命中风控', hint: '平台要求人机验证，或需要换一个账号的 Cookie' },
  not_found: { zh: '内容不存在', hint: '作品可能已删除、被设为私密或仅粉丝可见' },
  forbidden: { zh: '无权访问', hint: '当前账号看不到这份内容（付费 / 地区 / 权限）' },
  unavailable: { zh: '服务不可用', hint: '平台侧临时故障，稍后重试' },
  network: { zh: '网络错误', hint: '检查代理配置与出口网络' },
  timeout: { zh: '请求超时', hint: '调大 amagi.timeout，或检查代理链路' },
  parse: { zh: '响应解析失败', hint: '平台改了协议，或返回的是反爬页面' },
  internal: { zh: 'amagi 内部错误', hint: '解析库内部异常，建议反馈' },
  unknown: { zh: '未分类错误', hint: '平台返回了未被识别的错误码' }
}

/** 诊断区的一格：小标签 + 大值，值缺失时整格不渲染 */
const DetailCell: React.FC<{
  icon: React.ReactNode
  label: string
  value?: string | number
  color: string
  valueColor: string
}> = ({ icon, label, value, color, valueColor }) => {
  if (value === undefined || value === null || value === '') return null
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-3 opacity-70">
        {icon}
        <span className="text-xl font-semibold tracking-[0.12em]" style={{ color }}>
          {label}
        </span>
      </div>
      <span className="text-3xl font-bold font-mono break-all" style={{ color: valueColor }}>
        {value}
      </span>
    </div>
  )
}

const SectionTitle: React.FC<{ icon: React.ReactNode; en: string; zh: string; color: string }> = ({ icon, en, zh, color }) => (
  <div className="flex items-center gap-5 mb-6">
    {icon}
    <div className="flex flex-col leading-tight">
      <span className="text-xl font-semibold tracking-[0.2em] uppercase" style={{ color }}>
        {en}
      </span>
      <span className="text-base font-medium tracking-[0.08em] opacity-80" style={{ color }}>
        {zh}
      </span>
    </div>
  </div>
)

/**
 * API错误显示组件 - 手机端 Apple 风格
 */
export const handlerError: React.FC<PosterProps<ApiErrorData>> = (props) => {
  const { data } = props
  const dark = isDark(props.ctx)
  const isBusinessError = data.type === 'business_error'
  const businessError = isBusinessError ? (data.error as BusinessError) : null
  const displayMethod = businessError?.businessName || data.method

  // 高亮方式看文本本身有没有 ANSI，而不是看错误来源：amagi 与非 amagi 现在都只印
  // 纯文本调用帧，走结构上色；只有调用方显式覆盖进来的 util.inspect 转储仍走 ANSI 那条。
  // 归属判定必须由本包给出：插件发布后自己就装在 node_modules 里，只看路径特征会把
  // 每一帧都当成依赖压暗（构建产物整块图失去分层）。
  const stackText = String(businessError?.stack || data.error?.stack || '')
  const stackHtml = stackText.includes(String.fromCharCode(27))
    ? convertAnsiToHtml(stackText)
    : highlightStack(stackText, dark, { isOwnFrame: isOwnFrameLocation })

  // 631 配色 - 红/珊瑚色系
  const bgColor = dark ? '#0f0a0a' : '#faf5f5'
  const primaryColor = dark ? '#f87171' : '#dc2626'
  const secondaryColor = dark ? '#fca5a5' : '#b91c1c'
  const mutedColor = dark ? 'rgba(248,113,113,0.7)' : '#991b1b'
  const accentColor = dark ? '#fecaca' : '#7f1d1d'

  return (
    <DefaultLayout
      {...props}
      // version={undefined}
      className="relative overflow-hidden"
      style={{ backgroundColor: bgColor, width: '1440px', minHeight: '1800px' }}
    >
      {/* 弥散光背景 - 深浅模式完全适配 */}
      <div className="absolute inset-0 pointer-events-none">
        {/* 左上主光斑 */}
        <div
          className="absolute rounded-full w-300 h-350 -top-75 -left-50 blur-[120px] -rotate-15"
          style={{
            background: dark
              ? 'radial-gradient(ellipse at 40% 40%, rgba(220,38,38,0.35) 0%, rgba(185,28,28,0.18) 50%, transparent 100%)'
              : 'radial-gradient(ellipse at 40% 40%, rgba(248,113,113,0.45) 0%, rgba(252,165,165,0.22) 50%, transparent 100%)'
          }}
        />
        {/* 右侧光斑 */}
        <div
          className="absolute rounded-full w-225 h-250 top-100 -right-25 blur-[100px] rotate-20"
          style={{
            background: dark
              ? 'radial-gradient(ellipse at 50% 50%, rgba(127,29,29,0.3) 0%, rgba(69,10,10,0.15) 50%, transparent 100%)'
              : 'radial-gradient(ellipse at 50% 50%, rgba(254,202,202,0.4) 0%, rgba(254,226,226,0.2) 50%, transparent 100%)'
          }}
        />
        {/* 底部光斑 */}
        <div
          className="absolute rounded-full w-250 h-200 -bottom-50 left-50 blur-[140px] -rotate-10"
          style={{
            background: dark
              ? 'radial-gradient(ellipse at 50% 60%, rgba(153,27,27,0.3) 0%, rgba(127,29,29,0.15) 50%, transparent 100%)'
              : 'radial-gradient(ellipse at 50% 60%, rgba(252,165,165,0.35) 0%, rgba(254,202,202,0.18) 50%, transparent 100%)'
          }}
        />
      </div>

      {/* 单色噪点层 - 明显颗粒感 */}
      <div className="absolute inset-0 pointer-events-none" style={{ opacity: dark ? 0.12 : 0.18 }}>
        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
          <filter id="errorPixelNoise" x="0%" y="0%" width="100%" height="100%">
            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" stitchTiles="stitch" result="noise" />
            <feColorMatrix type="saturate" values="0" result="gray" />
            <feComponentTransfer>
              <feFuncR type="discrete" tableValues="0 1" />
              <feFuncG type="discrete" tableValues="0 1" />
              <feFuncB type="discrete" tableValues="0 1" />
            </feComponentTransfer>
          </filter>
          <rect width="100%" height="100%" filter="url(#errorPixelNoise)" />
        </svg>
      </div>

      {/* 背景大字装饰 */}
      <div className="absolute bottom-20 right-15 pointer-events-none select-none opacity-[0.03]">
        <span
          className="text-[180px] font-bold tracking-tighter leading-none block text-right"
          style={{ color: dark ? '#fff' : '#7f1d1d' }}
        >
          ERROR
        </span>
      </div>

      {/* 四周装饰性图形点缀 */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
        {/* 右上角：实心方块阵列 */}
        <div className="absolute top-10 right-10 grid grid-cols-2 gap-3 opacity-20">
          <div className="w-4 h-4" style={{ backgroundColor: primaryColor }} />
          <div className="w-4 h-4" style={{ backgroundColor: secondaryColor }} />
          <div className="w-4 h-4" style={{ backgroundColor: secondaryColor }} />
          <div className="w-4 h-4" style={{ backgroundColor: primaryColor }} />
        </div>

        {/* 左下角：对角线条纹 */}
        <div
          className="absolute bottom-0 left-0 w-125 h-125 opacity-[0.06] pointer-events-none"
          style={{
            backgroundImage: `repeating-linear-gradient(45deg, ${primaryColor}, ${primaryColor} 4px, transparent 2px, transparent 12px)`,
            maskImage: 'linear-gradient(to top right, black, transparent 70%)',
            WebkitMaskImage: 'linear-gradient(to top right, black, transparent 70%)'
          }}
        />

        {/* 右下角：同心圆弧 */}
        <div className="absolute -bottom-20 -right-20 w-150 h-150 opacity-10 pointer-events-none">
          <div className="absolute bottom-0 right-0 w-full h-full border-40 rounded-full" style={{ borderColor: primaryColor }} />
          <div
            className="absolute bottom-20 right-20 w-[calc(100%-160px)] h-[calc(100%-160px)] border-20 rounded-full"
            style={{ borderColor: secondaryColor }}
          />
          <div
            className="absolute bottom-35 right-35 w-[calc(100%-280px)] h-[calc(100%-280px)] border-10 rounded-full"
            style={{ borderColor: mutedColor }}
          />
        </div>
      </div>

      {/* 内容层 */}
      <div className="relative z-10 flex flex-col h-full p-16">
        {/* 顶部状态栏 */}
        <div className="flex items-center justify-between mb-14">
          {/* 优化后的左侧状态标签 */}
          <div className="flex items-center">
            {/* 左侧装饰竖条 */}
            <div
              className="h-16 w-3 mr-4 opacity-80"
              style={{
                backgroundColor: primaryColor,
                backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px)'
              }}
            />

            {/* 主标签容器 */}
            <div
              className="relative px-8 py-3 backdrop-blur-md"
              style={{
                backgroundColor: dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
                border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}`
              }}
            >
              {/* 四角装饰钉 */}
              <div className="absolute top-0 left-0 w-2 h-2 border-t-2 border-l-2" style={{ borderColor: primaryColor }} />
              <div className="absolute top-0 right-0 w-2 h-2 border-t-2 border-r-2" style={{ borderColor: primaryColor }} />
              <div className="absolute bottom-0 left-0 w-2 h-2 border-b-2 border-l-2" style={{ borderColor: primaryColor }} />
              <div className="absolute bottom-0 right-0 w-2 h-2 border-b-2 border-r-2" style={{ borderColor: primaryColor }} />

              <div className="flex items-center gap-6">
                {/* 状态指示器 */}
                <div
                  className="flex flex-col items-center justify-center border-r pr-6"
                  style={{ borderColor: dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }}
                >
                  <div
                    className="w-4 h-4 rounded-full shadow-[0_0_15px_currentColor] animate-pulse"
                    style={{ backgroundColor: primaryColor, color: primaryColor }}
                  />
                  <span className="text-[10px] font-mono mt-2 tracking-wider opacity-50" style={{ color: mutedColor }}>
                    ERR.01
                  </span>
                </div>

                {/* 文字信息 */}
                <div className="flex flex-col">
                  <span
                    className="text-xs font-mono font-bold tracking-[0.4em] uppercase mb-1 opacity-50"
                    style={{ color: secondaryColor }}
                  >
                    System Alert
                  </span>
                  <span className="text-2xl font-bold tracking-[0.25em] uppercase" style={{ color: primaryColor }}>
                    Runtime Exception
                  </span>
                </div>
              </div>
            </div>
          </div>
          {/* 优化后的时间显示模块 */}
          <div className="flex items-center gap-8 pr-12">
            {/* 装饰线条组 */}
            <div className="flex flex-col gap-1 items-end opacity-40">
              <div className="w-16 h-0.5" style={{ backgroundColor: primaryColor }} />
              <div className="w-8 h-0.5" style={{ backgroundColor: secondaryColor }} />
            </div>

            {/* 时间数字显示 */}
            <div className="text-right">
              <div className="flex items-center justify-end gap-3 mb-1">
                <span className="text-xs font-bold tracking-[0.3em] uppercase opacity-60" style={{ color: mutedColor }}>
                  System Time
                </span>
                <span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: primaryColor }} />
              </div>
              <div className="font-mono text-5xl font-bold tracking-widest leading-none" style={{ color: mutedColor }}>
                {new Date(data.timestamp).toLocaleTimeString('en-GB', { hour12: false })}
              </div>
            </div>

            {/* 分割线 */}
            <div className="h-12 w-0.5 opacity-20" style={{ backgroundColor: mutedColor }} />

            {/* 日期显示 */}
            <div className="text-right">
              <div className="text-xs font-bold tracking-[0.3em] uppercase opacity-60 mb-1" style={{ color: mutedColor }}>
                Date
              </div>
              <div className="font-mono text-3xl font-bold tracking-[0.2em]" style={{ color: secondaryColor }}>
                {new Date(data.timestamp)
                  .toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
                  .replaceAll('/', '-')}
              </div>
            </div>
          </div>
        </div>

        {/* 主标题 */}
        <div className="mb-20">
          <h1 className="text-[120px] font-bold leading-none tracking-tight mb-10" style={{ color: accentColor }}>
            {getRandomErrorTitle()}
          </h1>
          <p className="text-5xl font-semibold" style={{ color: primaryColor }}>
            {displayMethod}
          </p>
        </div>

        {/* amagi 错误诊断：只有失败来自解析库时才有这一块 */}
        {data.amagi && (
          <div className="mb-16">
            <SectionTitle
              icon={<ShieldAlert size={36} style={{ color: mutedColor }} />}
              en="Amagi Diagnosis"
              zh="解析库错误诊断"
              color={mutedColor}
            />
            <div
              className="p-12 rounded-[36px]"
              style={{
                backgroundColor: dark ? 'rgba(0,0,0,0.22)' : 'rgba(255,255,255,0.55)',
                border: `1px solid ${dark ? 'rgba(248,113,113,0.18)' : 'rgba(252,165,165,0.45)'}`
              }}
            >
              {/* 第一行：错误大类 + 是否可重试。这两个决定「现在该做什么」 */}
              <div className="flex items-center gap-6 flex-wrap mb-4">
                <span
                  className="px-8 py-3 rounded-full text-3xl font-bold tracking-wide"
                  style={{
                    backgroundColor: dark ? 'rgba(248,113,113,0.18)' : 'rgba(220,38,38,0.12)',
                    color: primaryColor
                  }}
                >
                  {(ERROR_KIND_META[data.amagi.kind] ?? FALLBACK_KIND_META).zh}
                </span>
                <span
                  className="px-6 py-3 rounded-full text-2xl font-bold tracking-wide"
                  style={{
                    backgroundColor: data.amagi.retryable
                      ? dark
                        ? 'rgba(74,222,128,0.16)'
                        : 'rgba(22,163,74,0.12)'
                      : dark
                        ? 'rgba(148,163,184,0.16)'
                        : 'rgba(100,116,139,0.12)',
                    color: data.amagi.retryable ? (dark ? '#4ade80' : '#15803d') : dark ? '#cbd5e1' : '#475569'
                  }}
                >
                  {data.amagi.retryable ? '可以重试' : '重试无用'}
                </span>
                <span className="font-mono text-2xl opacity-70" style={{ color: mutedColor }}>
                  {data.amagi.kind}
                </span>
              </div>

              <p className="text-3xl mb-10" style={{ color: secondaryColor }}>
                {(ERROR_KIND_META[data.amagi.kind] ?? FALLBACK_KIND_META).hint}
              </p>

              {/* 错误说明：与堆栈里那份 inspect 转储不同，这里是干净的一句话。
                  标签随 `raw` 在场与否切换 —— 响应体是纯文本时 amagi 提不出平台文案，
                  这一句必然是它自己的兜底句，继续印「平台原文」会让看图的人以为那是平台说的 */}
              <div
                className="p-8 rounded-7xl mb-10"
                style={{ backgroundColor: dark ? 'rgba(220,38,38,0.12)' : 'rgba(254,202,202,0.35)' }}
              >
                <div className="text-xl font-semibold tracking-[0.12em] opacity-70 mb-3" style={{ color: mutedColor }}>
                  {data.amagi.raw ? '错误说明' : '平台原文'}
                </div>
                <p className="text-3xl leading-relaxed break-all" style={{ color: accentColor }}>
                  {data.amagi.reason || '(平台未给出说明)'}
                </p>
              </div>

              {/* 响应体原文：只有反爬页 / 拦截文本那一类才有（amagi 判 ANTIBOT_PAGE 的情形）。
                  上面那句是兜底文案，平台究竟回了什么只在这里，所以单独一块 */}
              {data.amagi.raw && (
                <div
                  className="p-8 rounded-7xl mb-10"
                  style={{
                    backgroundColor: dark ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.55)',
                    border: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(220,38,38,0.14)'}`
                  }}
                >
                  <div className="flex items-center gap-3 mb-3 opacity-70">
                    <FileWarning size={26} style={{ color: mutedColor }} />
                    <span className="text-xl font-semibold tracking-[0.12em]" style={{ color: mutedColor }}>
                      响应体原文
                    </span>
                  </div>
                  <pre className="text-2xl leading-relaxed whitespace-pre-wrap break-all font-mono" style={{ color: accentColor }}>
                    {data.amagi.raw}
                  </pre>
                </div>
              )}

              {/* 分层错误码与请求归因 */}
              <div className="grid grid-cols-3 gap-x-12 gap-y-10">
                <DetailCell
                  icon={<AlertCircle size={26} style={{ color: mutedColor }} />}
                  label="AMAGI 码"
                  value={data.amagi.code}
                  color={mutedColor}
                  valueColor={accentColor}
                />
                <DetailCell
                  icon={<Radio size={26} style={{ color: mutedColor }} />}
                  label="平台业务码"
                  value={data.amagi.platformCode}
                  color={mutedColor}
                  valueColor={accentColor}
                />
                <DetailCell
                  icon={<Gauge size={26} style={{ color: mutedColor }} />}
                  label="HTTP 状态"
                  value={data.amagi.httpStatus}
                  color={mutedColor}
                  valueColor={accentColor}
                />
                <DetailCell
                  icon={<Fingerprint size={26} style={{ color: mutedColor }} />}
                  label="请求 ID"
                  value={data.amagi.requestId}
                  color={mutedColor}
                  valueColor={accentColor}
                />
                <DetailCell
                  icon={<Repeat size={26} style={{ color: mutedColor }} />}
                  label="实际请求次数"
                  value={data.amagi.attempts}
                  color={mutedColor}
                  valueColor={accentColor}
                />
                <DetailCell
                  icon={<Timer size={26} style={{ color: mutedColor }} />}
                  label="耗时"
                  value={data.amagi.durationMs === undefined ? undefined : `${data.amagi.durationMs} ms`}
                  color={mutedColor}
                  valueColor={accentColor}
                />
              </div>

              {/* 参数校验的字段级错误，只有 kind === 'validation' 时有 */}
              {data.amagi.issues && data.amagi.issues.length > 0 && (
                <div className="mt-12">
                  <div className="flex items-center gap-3 mb-5 opacity-70">
                    <ListChecks size={26} style={{ color: mutedColor }} />
                    <span className="text-xl font-semibold tracking-[0.12em]" style={{ color: mutedColor }}>
                      参数问题
                    </span>
                  </div>
                  <ul className="space-y-4">
                    {data.amagi.issues.map((issue, index) => (
                      <li key={`${issue.path}-${index}`} className="flex gap-5 text-2xl leading-relaxed">
                        <span className="font-mono font-bold shrink-0" style={{ color: primaryColor }}>
                          {issue.path || '(根)'}
                        </span>
                        <span style={{ color: accentColor }}>{issue.message}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* 逐个请求的明细。一次「翻 3 页 + 重试 1 次」在这里就是 4 行 */}
              {data.amagi.trace && data.amagi.trace.length > 0 && (
                <div className="mt-12">
                  <div className="flex items-center gap-3 mb-6 opacity-70">
                    <Route size={26} style={{ color: mutedColor }} />
                    <span className="text-xl font-semibold tracking-[0.12em]" style={{ color: mutedColor }}>
                      请求轨迹（{data.amagi.trace.length} 次）
                    </span>
                  </div>
                  <div className="space-y-6">
                    {data.amagi.trace.map((entry, index) => {
                      const { head, names, queryLength } = splitRequestUrl(entry.url)
                      const ok = entry.status !== undefined && entry.status >= 200 && entry.status < 300
                      return (
                        <div
                          key={`${entry.url}-${index}`}
                          className="p-8 rounded-7xl"
                          style={{ backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }}
                        >
                          <div className="flex items-center gap-4 flex-wrap mb-4">
                            <span
                              className="px-4 py-1 rounded-full text-xl font-bold"
                              style={{
                                backgroundColor: dark ? 'rgba(148,163,184,0.18)' : 'rgba(100,116,139,0.14)',
                                color: dark ? '#cbd5e1' : '#475569'
                              }}
                            >
                              {TRACE_REASON_LABELS[entry.reason] ?? entry.reason}
                            </span>
                            <span className="font-mono text-2xl font-bold" style={{ color: accentColor }}>
                              {entry.method}
                            </span>
                            <span
                              className="font-mono text-2xl font-bold"
                              style={{ color: entry.status === undefined ? mutedColor : ok ? (dark ? '#4ade80' : '#15803d') : primaryColor }}
                            >
                              {entry.status ?? '未发出'}
                            </span>
                            <span className="font-mono text-xl opacity-70" style={{ color: mutedColor }}>
                              {entry.durationMs} ms
                            </span>
                            {entry.retryOf && (
                              <span className="font-mono text-xl" style={{ color: primaryColor }}>
                                重试于 {entry.retryOf}
                              </span>
                            )}
                          </div>
                          <p className="font-mono text-xl break-all leading-relaxed" style={{ color: secondaryColor }}>
                            {head}
                          </p>
                          {names.length > 0 && (
                            <p className="font-mono text-lg break-all mt-3 opacity-60" style={{ color: mutedColor }}>
                              {names.length} 个查询参数 / {queryLength} 字符：{names.slice(0, 12).join(' ')}
                              {names.length > 12 ? ` …+${names.length - 12}` : ''}
                            </p>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 验证二维码 */}
        {data.isVerification && data.verificationUrl && (
          <div className="mb-16 p-12 rounded-[40px]" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.6)' }}>
            <div className="flex items-center gap-6 mb-10">
              <QrCode size={40} className="text-warning" />
              <span className="text-3xl font-semibold" style={{ color: accentColor }}>
                人机验证
              </span>
            </div>
            <div className="flex gap-16 items-center">
              <img src={generateQRCode(data.verificationUrl, dark)} alt="验证二维码" className="w-64 h-64 rounded-3xl" />
              <div className="space-y-6">
                <p className="text-3xl" style={{ color: secondaryColor }}>
                  请在 120 秒内完成验证
                </p>
                <ol className="space-y-4 text-2xl" style={{ color: mutedColor }}>
                  <li>1. 使用手机扫描二维码</li>
                  <li>2. 在网页中完成人机验证</li>
                  <li>3. 将验证结果发送至此对话</li>
                </ol>
                {data.verificationUrl && (
                  <p className="text-xl break-all mt-8" style={{ color: mutedColor }}>
                    {data.verificationUrl}
                  </p>
                )}
              </div>
            </div>
          </div>
        )}

        {/* 触发命令 */}
        {data.triggerCommand && (
          <div className="mb-14">
            <SectionTitle
              icon={<Terminal size={36} style={{ color: mutedColor }} />}
              en="Trigger Command"
              zh="触发命令"
              color={mutedColor}
            />
            <div className="p-10 rounded-[36px]" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }}>
              <pre
                className="text-3xl leading-relaxed whitespace-pre-wrap break-all font-mono"
                style={{ color: accentColor }}
                dangerouslySetInnerHTML={{ __html: convertAnsiToHtml(data.triggerCommand) }}
              />
            </div>
          </div>
        )}

        {/* 错误堆栈 */}
        <div className="mb-14">
          <SectionTitle
            icon={<AlertCircle size={36} style={{ color: mutedColor }} />}
            en="Stack Trace"
            zh={data.amagi ? '调用栈（结构化上下文见上）' : data.error?.dump ? '调用栈（对象转储见下）' : '错误堆栈'}
            color={mutedColor}
          />
          <div
            className="p-10 rounded-[36px]"
            style={{
              backgroundColor: dark ? 'rgba(220,38,38,0.1)' : 'rgba(254,202,202,0.4)',
              border: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(252,165,165,0.5)'}`
            }}
          >
            <pre
              className="text-2xl leading-relaxed whitespace-pre-wrap break-all font-mono"
              style={{ color: dark ? 'rgba(255,255,255,0.85)' : 'rgba(127,29,29,0.9)' }}
              dangerouslySetInnerHTML={{ __html: stackHtml }}
            />
          </div>
        </div>

        {/* 对象转储：非 amagi 异常的自有属性，帧已经在上面单独高亮了 */}
        {data.error?.dump && (
          <div className="mb-14">
            <SectionTitle icon={<Braces size={36} style={{ color: mutedColor }} />} en="Object Dump" zh="对象转储" color={mutedColor} />
            <div className="p-10 rounded-[36px]" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }}>
              <pre
                className="text-2xl leading-relaxed whitespace-pre-wrap break-all font-mono"
                style={{ color: dark ? 'rgba(255,255,255,0.85)' : 'rgba(127,29,29,0.9)' }}
                dangerouslySetInnerHTML={{ __html: convertAnsiToHtml(data.error.dump) }}
              />
            </div>
          </div>
        )}

        {/* 执行日志 */}
        {data.logs && data.logs.length > 0 && (
          <div className="mb-14">
            <SectionTitle
              icon={<FileText size={36} style={{ color: mutedColor }} />}
              en="Execution Logs"
              zh="执行日志"
              color={mutedColor}
            />
            <div className="space-y-6">
              {data.logs.map((log, index) => {
                const theme = getLogLevelTheme(log.level, dark)
                return (
                  <fieldset key={index} className={`relative rounded-3xl ${theme.bgClass} border-2 ${theme.borderClass} p-6`}>
                    {/* 时间戳 */}
                    <legend className="flex items-center gap-2 ml-4">
                      {/* 左侧圆角装饰 */}
                      <span className={`w-2 h-6 rounded-full -mr-1.5 ${theme.dotClass}`} />
                      <span className="flex items-center gap-2 px-3">
                        <Clock size={18} className={theme.iconClass} />
                        <span className={`text-xl font-mono font-medium ${theme.textClass}`}>{log.timestamp}</span>
                      </span>
                      {/* 右侧圆角装饰 */}
                      <span className={`w-2 h-6 rounded-full -ml-1.5 ${theme.dotClass}`} />
                    </legend>

                    {/* 日志等级 */}
                    <div className="absolute bottom-2 right-6 pointer-events-none">
                      <span className={`text-6xl font-bold uppercase leading-none tracking-tight ${theme.levelClass}`}>{log.level}」</span>
                    </div>

                    {/* 日志内容 */}
                    <div
                      className="relative z-1 text-2xl font-mono whitespace-pre-wrap break-all leading-relaxed"
                      style={{ color: dark ? 'rgba(255,255,255,0.88)' : 'rgba(0,0,0,0.82)' }}
                      dangerouslySetInnerHTML={{ __html: convertAnsiToHtml(log.message) }}
                    />
                  </fieldset>
                )
              })}
            </div>
          </div>
        )}

        {/* 底部版本信息 */}
        <div className="mt-auto pt-12" style={{ borderTop: `2px solid ${dark ? 'rgba(248,113,113,0.15)' : 'rgba(252,165,165,0.3)'}` }}>
          {/* 版本信息：框架版本 / 插件版本 / 适配器 —— 合并成一行；适配器带版本号（取不到就不占位） */}
          <div className="flex items-center flex-wrap gap-x-16 gap-y-6 mb-12">
            <div className="flex items-center gap-6">
              <img src={(data as any).frameworkLogo ?? '/image/frame-logo.png'} className="h-16 w-auto" alt="Framework" />
              <div>
                <p className="text-xl" style={{ color: mutedColor }}>Framework / 框架版本</p>
                <p className="text-3xl font-bold" style={{ color: accentColor }}>{data.frameworkVersion}</p>
              </div>
            </div>
            <div className="flex items-center gap-6">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 221" className="h-16 w-auto" style={{ color: accentColor }}>
              <path
              d="M132.75,87.37l-53.72-53.37c-4.66-4.63-1.38-12.58,5.18-12.58h115.13c6.57,0,9.84,7.95,5.18,12.58l-53.72,53.37c-4.99,4.96-13.06,4.96-18.05,0Z"
              fill="currentColor"
              />
              <path
              d="M28.49,186.89l.03-51.42c-.02-6.57,7.92-9.87,12.56-5.23l57.02,57.02c4.64,4.64,1.34,12.41-5.23,12.39h-51.42c-7.04-.02-12.94-5.72-12.96-12.76Z"
              fill="currentColor"
              />
              <path
              d="M41.54,23.68l163.04,163.05c4.78,4.78,1.39,12.95-5.36,12.94h-47.88c-9.69,0-18.99-3.86-25.84-10.71L39.3,102.75c-6.85-6.85-10.7-16.15-10.7-25.84V29.04c0-6.76,8.16-10.14,12.94-5.36Z"
              fill="currentColor"
              />
              </svg>
              <div>
                <p className="text-xl" style={{ color: mutedColor }}>Plugin / 插件版本</p>
                <p className="text-3xl font-bold" style={{ color: accentColor }}>{data.pluginVersion}</p>
              </div>
            </div>
            {data.adapterInfo && (
              <div className="flex items-center gap-6">
                {getAdapterLogo(data.adapterInfo)}
                <div>
                  <p className="text-xl" style={{ color: mutedColor }}>Adapter / 适配器</p>
                  <p className="text-3xl font-bold truncate" style={{ color: accentColor }}>{data.adapterInfo.name}</p>
                  {data.adapterInfo.version && (
                    <p className="text-2xl font-bold truncate" style={{ color: mutedColor }}>v{data.adapterInfo.version}</p>
                  )}
                </div>
              </div>
            )}
          </div>
          {/* 次要信息 */}
          <div className="flex items-center gap-10 text-xl mb-12" style={{ color: mutedColor }}>
            {data.buildTime && (
              <div className="flex items-center gap-3">
                <MdSchedule size={24} />
                <span>
                  Built Time: {data.buildTime} 于{' '}
                  {formatDistanceToNow(parse(data.buildTime, 'yyyy年MM月dd日 HH:mm', new Date()), { locale: zhCN })}前
                </span>
              </div>
            )}
            {data.commitHash && (
              <div className="flex items-center gap-3">
                <GitBranch size={24} />
                <span>Commit Hash: {data.commitHash}</span>
              </div>
            )}
          </div>

          {/* 帮助提示 */}
          <div className="p-10 rounded-[36px]" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }}>
            <div className="flex items-end justify-between mb-6">
              <div>
                <p className="text-3xl font-semibold mb-2" style={{ color: accentColor }}>
                  Need Help? / 需要帮助？
                </p>
                <p className="text-2xl" style={{ color: secondaryColor }}>
                  {data.report
                    ? '错误信息已上传，进群发送下面的上报编号或这张图片即可。'
                    : '提交问题时请附上完整报错截图、复现步骤和环境版本信息。'}
                </p>
              </div>
              <span
                className="text-xs font-bold tracking-[0.2em] uppercase px-3 py-1 rounded-full"
                style={{
                  color: primaryColor,
                  backgroundColor: dark ? 'rgba(248,113,113,0.12)' : 'rgba(220,38,38,0.08)'
                }}
              >
                Support
              </span>
            </div>
            <div
              className="grid grid-cols-2 gap-x-6 gap-y-6 text-2xl leading-relaxed py-6"
              style={{
                borderTop: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(220,38,38,0.12)'}`,
                borderBottom: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(220,38,38,0.12)'}`
              }}
            >
              <div>
                <p className="font-semibold mb-1" style={{ color: accentColor }}>
                  GitHub Issue
                </p>
                <p className="text-xl break-all" style={{ color: secondaryColor }}>
                  https://github.com/maimai993/koishi-plugin-kkk/issues/new/choose
                </p>
              </div>
              <div>
                <p className="font-semibold mb-1" style={{ color: accentColor }}>
                  GitHub Repository
                </p>
                <p className="text-xl break-all" style={{ color: secondaryColor }}>
                  https://github.com/maimai993/koishi-plugin-kkk
                </p>
              </div>
              <div>
                <p className="font-semibold mb-1" style={{ color: accentColor }}>
                  QQ 群
                </p>
                <p className="text-xl" style={{ color: secondaryColor }}>
                  {data.report?.group ?? '1050229473'}
                </p>
                <p className="text-lg break-all opacity-80" style={{ color: secondaryColor }}>
                  {data.report?.groupUrl ?? 'https://qm.qq.com/q/viymkIPvvq'}
                </p>
              </div>
              <div>
                <p className="font-semibold mb-1" style={{ color: accentColor }}>
                  附带信息
                </p>
                <p className="text-xl" style={{ color: secondaryColor }}>
                  此图片 + 触发命令 + 对应配置（自行脱敏处理）
                </p>
              </div>
              {data.report && (
                <div>
                  <p className="font-semibold mb-1" style={{ color: accentColor }}>
                    错误上报编号
                  </p>
                  <p className="text-xl break-all font-mono" style={{ color: secondaryColor }}>
                    {data.report.id}
                  </p>
                  <p className="text-lg break-all opacity-80" style={{ color: secondaryColor }}>
                    {data.report.url}
                  </p>
                </div>
              )}
            </div>
            <div className="flex items-center gap-4 mt-6 text-xl" style={{ color: mutedColor }}>
              <span className="font-mono">Tips:</span>
              <span>信息越完整，定位越快。</span>
            </div>
          </div>
        </div>
      </div>
    </DefaultLayout>
  )
}

handlerError.displayName = 'handlerError'

export default handlerError