'use client'

import { formatHumanBytes, formatHumanSpeed, formatTransferProgressSummary } from '@/lib/human-readable-transfer'

type UploadTask = {
  uploadId?: string
  fileName?: string
  username?: string
  materialType?: string
  progress?: number
  currentSpeed?: number
  uploadedBytes?: number
  fileSize?: number
  isActive?: boolean
  inactiveMs?: number
}

type TranscodeTask = {
  materialId?: string
  fileName?: string
  materialType?: string
  authorName?: string
  stage?: string | null
  progress?: number | null
  queuePosition?: number
}

export type SystemPerformanceData = {
  cpu?: { usage: number; loadAverage: number[]; cores?: number }
  memory?: {
    used: number
    total: number
    percentage: number
    usedBytes?: number
    totalBytes?: number
    source?: 'container' | 'host'
    hostUsedBytes?: number
    hostTotalBytes?: number
    hostPercentage?: number
  }
  network?: { uploadSpeed: number; downloadSpeed: number }
  uploadQueue?: { total: number; processing: UploadTask[]; waiting: UploadTask[] }
  transcodeQueue?: { total: number; maxConcurrent: number; processing: TranscodeTask[]; waiting: TranscodeTask[] }
}

const STAGE_LABEL: Record<string, string> = {
  preview: '预览视频',
  clip: '片段生成',
  cover: '封面提取',
}

function formatAgo(ms: number): string {
  if (!Number.isFinite(ms) || ms < 0) return '--'
  const sec = Math.floor(ms / 1000)
  if (sec < 60) return `${sec} 秒`
  const min = Math.floor(sec / 60)
  if (min < 60) return `${min} 分钟`
  const hr = Math.floor(min / 60)
  return `${hr} 小时 ${min % 60} 分钟`
}

function Meter({ value, warn = false }: { value: number; warn?: boolean }) {
  const width = Math.min(Math.max(value, 0), 100)
  return (
    <div className="h-1.5 w-full overflow-hidden rounded-full bg-[#e7e8ea]">
      <div
        className={`h-full rounded-full ${warn ? 'bg-[#8a3b32]' : 'bg-[#1a1c1d]'}`}
        style={{ width: `${width}%` }}
      />
    </div>
  )
}

function QueueSummary({
  processing,
  waiting,
  capacity,
}: {
  processing: number
  waiting: number
  capacity?: number
}) {
  if (processing === 0 && waiting === 0) {
    return <span className="text-[#6b7075]">空闲</span>
  }
  const processingText =
    typeof capacity === 'number' && capacity > 0 ? `进行中 ${processing} / ${capacity}` : `进行中 ${processing}`
  return (
    <span>
      {processingText}
      {waiting > 0 ? ` · 停住 ${waiting}` : ''}
    </span>
  )
}

export default function SystemPerformanceCard({
  data,
  loading,
  error,
}: {
  data: SystemPerformanceData | null
  loading: boolean
  error: string | null
}) {
  const cpu = data?.cpu
  const memory = data?.memory
  const memoryBytes =
    typeof memory?.usedBytes === 'number' && typeof memory?.totalBytes === 'number'
      ? { used: memory.usedBytes, total: memory.totalBytes }
      : memory
        ? { used: memory.used * 1024 * 1024, total: memory.total * 1024 * 1024 }
        : null
  const memoryWarn = (memory?.percentage ?? 0) >= 85
  const uploadProcessing = data?.uploadQueue?.processing || []
  const uploadWaiting = data?.uploadQueue?.waiting || []
  const transcodeProcessing = data?.transcodeQueue?.processing || []
  const transcodeWaiting = data?.transcodeQueue?.waiting || []

  return (
    <div
      id="system-performance-panel"
      role="status"
      aria-live="polite"
      className="absolute right-0 z-50 mt-2 w-[22rem] rounded-xl border border-[#e7e8ea] bg-white p-4 text-[#1a1c1d]"
    >
      <div className="mb-3 flex items-baseline justify-between gap-3">
        <span className="text-[13px] font-semibold tracking-tight">系统性能</span>
        <span className="text-[11px] text-[#6b7075]">
          {error ? error : !data && loading ? '正在读取' : '应用容器此刻'}
        </span>
      </div>

      <div className="space-y-3">
        <div>
          <div className="mb-1 flex justify-between text-[13px]">
            <span>CPU</span>
            <span>{cpu ? `${cpu.usage}%` : '--'}</span>
          </div>
          <Meter value={cpu?.usage ?? 0} />
          <div className="mt-1 flex justify-between text-[11px] text-[#6b7075]">
            <span>{cpu?.cores ? `${cpu.cores} 核 · 1/5/15 分钟负载` : '1/5/15 分钟负载'}</span>
            <span>{cpu?.loadAverage?.length ? cpu.loadAverage.map((value) => value.toFixed(2)).join(' / ') : '--'}</span>
          </div>
        </div>

        <div>
          <div className="mb-1 flex justify-between text-[13px]">
            <span>{memory?.source === 'host' ? '内存 · 整机' : '内存'}</span>
            <span>
              {memoryBytes
                ? `${formatHumanBytes(memoryBytes.used)} / ${formatHumanBytes(memoryBytes.total)}（${memory?.percentage}%）`
                : '--'}
            </span>
          </div>
          <Meter value={memory?.percentage ?? 0} warn={memoryWarn} />
          {memory?.source === 'container' && typeof memory.hostPercentage === 'number' ? (
            <div className="mt-1 text-[11px] text-[#6b7075]">
              整台机器大约用了 {memory.hostPercentage}%
              {typeof memory.hostUsedBytes === 'number' && typeof memory.hostTotalBytes === 'number'
                ? `（${formatHumanBytes(memory.hostUsedBytes)} / ${formatHumanBytes(memory.hostTotalBytes)}）`
                : ''}
              ，主要是存储机自己在用
            </div>
          ) : null}
          {memoryWarn ? (
            <div className="mt-1 text-[11px] text-[#8a3b32]">这个应用自己的内存已经偏高，继续堆任务容易变慢</div>
          ) : null}
        </div>

        <div>
          <div className="mb-1 flex justify-between text-[13px]">
            <span>进出流量</span>
            <span className="text-[11px] text-[#6b7075]">本应用，不是整台机器</span>
          </div>
          <div className="space-y-1 text-[12px] text-[#6b7075]">
            <div className="flex justify-between">
              <span>进来（别人上传）</span>
              <span>{data?.network ? formatHumanSpeed(data.network.uploadSpeed) : '--'}</span>
            </div>
            <div className="flex justify-between">
              <span>出去（别人下载）</span>
              <span>{data?.network ? formatHumanSpeed(data.network.downloadSpeed) : '--'}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-3 space-y-3 border-t border-[#e7e8ea] pt-3">
        <div>
          <div className="mb-1 flex justify-between text-[13px]">
            <span>上传</span>
            <QueueSummary processing={uploadProcessing.length} waiting={uploadWaiting.length} />
          </div>
          <div className="max-h-32 overflow-y-auto">
          {uploadProcessing.map((task, index) => {
            const uploadedBytes = task.uploadedBytes || (task.fileSize || 0) * ((task.progress || 0) / 100)
            const speedText = task.currentSpeed
              ? formatTransferProgressSummary({
                  speedBytesPerSecond: task.currentSpeed,
                  loadedBytes: uploadedBytes,
                  totalBytes: task.fileSize,
                })
              : '速度还在统计'
            return (
              <div key={task.uploadId || `upload-p-${index}`} className="mt-1.5 rounded-md bg-[#f7f7f8] px-2.5 py-2 text-[12px] text-[#6b7075]">
                <div className="truncate font-medium text-[#1a1c1d]">{task.fileName || '未命名文件'}</div>
                <div className="mt-1 flex justify-between">
                  <span>{task.username || '未知用户'}</span>
                  <span>{task.materialType || '未知类型'}</span>
                </div>
                <div className="mt-1">{task.progress ?? 0}% · {speedText}</div>
              </div>
            )
          })}
          {uploadWaiting.map((task, index) => (
            <div key={task.uploadId || `upload-w-${index}`} className="mt-1.5 rounded-md bg-[#f7f7f8] px-2.5 py-2 text-[12px] text-[#6b7075]">
              <div className="truncate font-medium text-[#1a1c1d]">{task.fileName || '未命名文件'}</div>
              <div className="mt-1 flex justify-between">
                <span>{task.username || '未知用户'}</span>
                <span>{task.materialType || '未知类型'}</span>
              </div>
              <div className="mt-1">已经停住 {formatAgo(task.inactiveMs || 0)}</div>
            </div>
          ))}
          </div>
        </div>

        <div>
          <div className="mb-1 flex justify-between text-[13px]">
            <span>转码</span>
            <QueueSummary
              processing={transcodeProcessing.length}
              waiting={transcodeWaiting.length}
              capacity={data?.transcodeQueue?.maxConcurrent}
            />
          </div>
          <div className="max-h-32 overflow-y-auto">
          {transcodeProcessing.map((task, index) => (
            <div key={task.materialId || `transcode-p-${index}`} className="mt-1.5 rounded-md bg-[#f7f7f8] px-2.5 py-2 text-[12px] text-[#6b7075]">
              <div className="truncate font-medium text-[#1a1c1d]">{task.fileName || '未命名文件'}</div>
              <div className="mt-1 flex justify-between">
                <span>
                  {task.materialType || '未知类型'}
                  {task.stage ? ` · ${STAGE_LABEL[task.stage] || task.stage}` : ''}
                </span>
                <span>{task.progress ?? 0}%</span>
              </div>
              <div className="mt-1">上传人 {task.authorName || '未知用户'}</div>
            </div>
          ))}
          {transcodeWaiting.map((task, index) => (
            <div key={task.materialId || `transcode-w-${index}`} className="mt-1.5 rounded-md bg-[#f7f7f8] px-2.5 py-2 text-[12px] text-[#6b7075]">
              <div className="truncate font-medium text-[#1a1c1d]">{task.fileName || '未命名文件'}</div>
              <div className="mt-1 flex justify-between">
                <span>{task.materialType || '未知类型'}</span>
                <span>排队 #{task.queuePosition || index + 1}</span>
              </div>
              <div className="mt-1">上传人 {task.authorName || '未知用户'}</div>
            </div>
          ))}
          </div>
        </div>
      </div>
    </div>
  )
}