import { type ScheduleRunSummary } from "../../services/api";
import Icon from "../../components/common/Icon";
import { formatTime, formatDuration } from "./utils";

const RUN_STATUS_LABELS: Record<string, string> = {
  queued: "排队中",
  running: "运行中",
  succeeded: "成功",
  failed: "失败",
  cancelled: "已取消",
  timed_out: "已超时",
};

export function RunHistory({
  runs,
  loading,
  disabled,
  onRefresh,
}: {
  runs: ScheduleRunSummary[];
  loading: boolean;
  disabled: boolean;
  onRefresh: () => void;
}) {
  return (
    <section className="schedule-run-history">
      <header>
        <div>
          <strong>运行记录</strong>
          <span>{runs.length}</span>
        </div>
        <button
          type="button"
          aria-label="刷新运行记录"
          disabled={disabled || loading}
          onClick={onRefresh}
        >
          <Icon name="refresh" size={13} />
        </button>
      </header>
      <div className="schedule-run-list">
        {loading && runs.length === 0 ? (
          <p>正在加载运行记录…</p>
        ) : runs.length === 0 ? (
          <p>点击右上角"立即运行"后，这里会显示状态和耗时。</p>
        ) : (
          runs.map((run) => (
            <article className="schedule-run-card" key={run.run_id}>
              <span className={`run-status-dot is-${run.run_status}`} />
              <div>
                <strong>{RUN_STATUS_LABELS[run.run_status]}</strong>
                <small>
                  {formatTime(run.queued_at)} · {formatDuration(run.duration_ms)}
                </small>
                {run.error_message && <p>{run.error_message}</p>}
              </div>
              <code title={run.run_id}>{run.run_id.slice(-8)}</code>
            </article>
          ))
        )}
      </div>
    </section>
  );
}