import { useStore } from '../store'

function fmtDuration(ms: number): string {
  const s = Math.round(ms / 1000)
  const m = Math.floor(s / 60)
  const rem = s % 60
  return m > 0 ? `${m}분 ${rem}초` : `${rem}초`
}

/** 잡 완료 후 결과 리포트 */
export function ReportView(): JSX.Element {
  const report = useStore((s) => s.report)
  const errors = useStore((s) => s.errors)
  if (!report) return <></>

  const stats = [
    { label: '총 처리', value: report.total, cls: 'text-slate-700' },
    { label: '이동', value: report.moved, cls: 'text-emerald-600' },
    { label: '복사', value: report.copied, cls: 'text-sky-600' },
    { label: '미정', value: report.unmatched, cls: 'text-slate-500' },
    { label: '실패', value: report.failed, cls: 'text-red-600' }
  ]

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-4">
      <div className="flex items-center justify-between mb-3">
        <h2 className="font-semibold">✅ 작업 완료</h2>
        <span className="text-sm text-slate-500">소요 {fmtDuration(report.elapsedMs)}</span>
      </div>

      <div className="grid grid-cols-5 gap-2 mb-3">
        {stats.map((s) => (
          <div key={s.label} className="bg-slate-50 rounded-lg p-2 text-center">
            <div className={`text-lg font-bold ${s.cls}`}>{s.value}</div>
            <div className="text-[11px] text-slate-400">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="text-xs text-slate-400 mono truncate" title={report.logPath}>
        로그: {report.logPath}
      </div>

      {errors.length > 0 && (
        <details className="mt-3">
          <summary className="text-xs text-red-600 cursor-pointer">
            오류 {errors.length}건 보기
          </summary>
          <ul className="mt-1 max-h-32 overflow-y-auto text-[11px] text-red-500 mono">
            {errors.map((e, i) => (
              <li key={i} className="truncate">
                {e.file}: {e.message}
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  )
}