import React from "react";

export default function TestRunCard({ testRun, onRunSafe, onRunLive }) {
  if (!testRun) return null;
  const { status, mode, steps, startedAt, finishedAt, summary } = testRun;
  const statusLabel = status === "running"
    ? "В процессе"
    : status === "ok"
      ? "Готово"
      : status === "warn"
        ? "С предупреждениями"
        : status === "error"
          ? "Ошибки"
          : "Не запускался";
  return (
    <section className="card">
      <div className="row-header">
        <h3>Тестовый прогон</h3>
        <div className="row-inline">
          <button className="secondary" type="button" onClick={onRunSafe}>Safe</button>
          <button className="secondary" type="button" onClick={onRunLive}>Live</button>
        </div>
      </div>
      <div className="status-banner">
        Статус: <strong>{statusLabel}</strong>{mode ? ` · режим: ${mode}` : ""}{summary ? ` · ${summary}` : ""}
      </div>
      {(startedAt || finishedAt) && (
        <div className="status-caption">
          Старт: {startedAt || "—"} · Завершение: {finishedAt || "—"}
        </div>
      )}
      <div className="log-table">
        <div className="log-head">
          <span>Шаг</span>
          <span>Статус</span>
          <span>Детали</span>
        </div>
        {steps.length === 0 && (
          <div className="log-empty">Прогон ещё не запускался.</div>
        )}
        {steps.map((step, index) => (
          <div className="log-row" key={`${step.key || step.title}-${index}`}>
            <div>{step.title}</div>
            <div>{step.status}</div>
            <div>{step.details || "—"}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
