import { type EvaluationRun } from "@/hooks/useRoundEvaluationRun";

type EvaluationHistoryPanelProps = {
  runs: EvaluationRun[];
  historyOpen: boolean;
  onToggle: () => void;
  formatEventTime: (value?: string | null) => string | null;
};

export default function EvaluationHistoryPanel({
  runs,
  historyOpen,
  onToggle,
  formatEventTime,
}: EvaluationHistoryPanelProps) {
  return (
    <div className="space-y-2 text-sm text-foreground-700">
      <button
        type="button"
        className="flex w-full items-center justify-between text-left font-semibold"
        onClick={onToggle}
      >
        <span>Historie vyhodnocování</span>
        <span>{historyOpen ? "−" : "+"}</span>
      </button>
      {historyOpen && (
        <>
          {runs.length === 0 && <div className="text-foreground-600">Zatím bez historie.</div>}
          {runs.length > 0 && (
            <div className="space-y-2">
              {runs.map((item) => (
                <div key={item.id} className="rounded border border-divider p-2">
                  <div className="font-semibold">Run #{item.id}</div>
                  <div>Stav: {item.status ?? "—"}</div>
                  {item.result_type && <div>Výsledek: {item.result_type}</div>}
                  <div>Start: {formatEventTime(item.started_at ?? item.created_at) ?? "—"}</div>
                  <div>Konec: {formatEventTime(item.finished_at) ?? "—"}</div>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
}