"use client";

import type { OptimizationResultVersion } from "../../lib/cases/types";
import { formatDate, versionLabel } from "./case-format";

interface CaseResultVersionListProps {
  versions: OptimizationResultVersion[];
  selectedVersionId: string | null;
  onSelect: (versionId: string) => void;
}

export function CaseResultVersionList({
  versions,
  selectedVersionId,
  onSelect,
}: CaseResultVersionListProps) {
  return (
    <section className="panel stack">
      <div className="panel-heading">结果版本</div>
      {versions.length > 0 ? (
        <div className="case-version-list">
          {versions.map((version) => (
            <button
              className={
                version.id === selectedVersionId
                  ? "case-version-item selected"
                  : "case-version-item"
              }
              key={version.id}
              onClick={() => onSelect(version.id)}
              type="button"
            >
              <strong>{versionLabel(version)}</strong>
              <small>{version.result_summary || version.error_summary || "暂无摘要"}</small>
              <small>{formatDate(version.created_at)}</small>
            </button>
          ))}
        </div>
      ) : (
        <p className="empty-panel">还没有结果版本。</p>
      )}
    </section>
  );
}
