import { ANALYZE_COPY_MISSION_PIPELINE_STEPS } from '../lib/copyFlow'
import { jobStatusBadgeClass, jobStatusLabel } from '../lib/jobStatus'
import type { JobData } from '../types/api'
import { ProgressBar, StatusBadge } from './ui'

const STEP_STATUS_LABEL: Record<string, string> = {
  pending: '等待',
  running: '進行中',
  succeeded: '完成',
  failed: '失敗',
  skipped: '略過',
  cancelled: '取消',
}

function analyzeJobHint(job: JobData): string {
  if (job.status === 'cancel_requested') {
    return '研究地圖任務取消中，通常幾秒內完成。'
  }
  if (job.status === 'queued' || job.status === 'pending') {
    return '任務已排隊，背景 worker 即將接手…'
  }
  return job.progress?.summary?.trim() || '研究地圖產生中，請稍候…'
}

export function CopyMissionAnalyzeJobPanel({ job }: { job: JobData }) {
  const steps = job.progress?.steps ?? []
  const stepMap = new Map(steps.map((s) => [s.id, s]))
  const pct = job.progress?.percentage ?? 0

  return (
    <div className="space-y-4">
      <p className="text-sm leading-relaxed text-ink">{analyzeJobHint(job)}</p>
      <div className="flex flex-wrap items-center gap-2">
        <StatusBadge className={jobStatusBadgeClass(job.status)}>
          {jobStatusLabel(job.status)}
        </StatusBadge>
        <span className="text-xs font-bold text-muted">{pct}%</span>
      </div>
      <ProgressBar value={pct} />
      <ol className="flex flex-wrap gap-2 text-[11px]">
        {ANALYZE_COPY_MISSION_PIPELINE_STEPS.map((step) => {
          const live = stepMap.get(step.id)
          const status = live?.status ?? 'pending'
          const isDone = status === 'succeeded' || status === 'done'
          const isRunning = status === 'running'
          return (
            <li
              key={step.id}
              className={`inline-flex items-center gap-1 rounded-[var(--radius-pill)] border-2 px-2.5 py-1 font-bold ${
                isDone
                  ? 'border-success/40 bg-success-soft text-success'
                  : isRunning
                    ? 'border-brand/40 bg-brand-soft text-brand'
                    : 'border-line text-muted'
              }`}
              title={step.hint}
            >
              <span>{step.title}</span>
              <span className="opacity-70">· {STEP_STATUS_LABEL[status] ?? status}</span>
            </li>
          )
        })}
      </ol>
      {job.error ? (
        <p className="text-xs font-semibold leading-relaxed text-danger">錯誤：{job.error}</p>
      ) : null}
    </div>
  )
}