import Plot from "react-plotly.js";
import type { Data } from "plotly.js";

import type { Trajectory } from "./useOptimisation";

// f at each iteration, one line per run
export default function HistoryPlot({ trajectories }: { trajectories: Trajectory[] }) {
  const data = trajectories.map((t) => ({
    x: t.path.map((_, k) => k),
    y: t.path.map((p) => p.value),
    type: "scatter",
    mode: "lines+markers",
    name: t.label,
    line: { color: t.color, width: 2 },
    marker: { color: t.color, size: 4 },
    hovertemplate: "iteration %{x}<br>f = %{y:.4g}<extra></extra>",
  })) as Data[];

  return (
    <div className="flex flex-col gap-1">
      <span className="text-sm text-gray-700">f at each iteration</span>
      <div className="h-40">
        <Plot
          data={data}
          layout={{
            showlegend: false,
            margin: { t: 8, r: 8, b: 32, l: 48 },
            font: { size: 11 },
            xaxis: { title: { text: "iteration", standoff: 4 }, rangemode: "tozero" },
            yaxis: { automargin: true },
          }}
          config={{ displayModeBar: false, responsive: true }}
          style={{ width: "100%", height: "100%" }}
        />
      </div>
    </div>
  );
}