import type { LegacyTrajectoryController } from "./legacyRunController";
import {
  getLegacyTrajectoryStatusLabel,
  LEGACY_TRAJECTORY_AUTOPLAY_OPTIONS,
} from "./legacyRunConfig";

interface LegacyTrajectoryStageProps {
  session: LegacyTrajectoryController;
}

export function LegacyTrajectoryStage({ session }: LegacyTrajectoryStageProps) {
  const latestStep = session.trajectory.at(-1);
  const canOpenSummary = latestStep?.isEnd ?? false;

  return (
    <section className="legacy-stage">
      <div className="section-head">
        <h3>Trajectory</h3>
        <p>The original event and talent pipeline now runs inside React.</p>
      </div>
      <div className="stage-actions">
        {LEGACY_TRAJECTORY_AUTOPLAY_OPTIONS.map((option) => (
          <button
            className="secondary-button"
            disabled={canOpenSummary}
            key={option.speed}
            onClick={() => session.setAutoPlaySpeed(option.speed)}
            type="button"
          >
            {option.label}
          </button>
        ))}
        <button
          className="secondary-button"
          onClick={() => session.setAutoPlaySpeed(null)}
          type="button"
        >
          Stop
        </button>
        <button
          className="secondary-button"
          disabled={canOpenSummary}
          onClick={session.stepLife}
          type="button"
        >
          Next year
        </button>
        <button
          className="secondary-button"
          disabled={!canOpenSummary}
          onClick={session.openSummary}
          type="button"
        >
          Summary
        </button>
      </div>
      <div className="legacy-timeline">
        {session.trajectory.map((step, index) => (
          <div className="legacy-timeline-entry" key={`${step.age}-${index}`}>
            <div className="legacy-timeline-meta">
              <span>Age {step.age}</span>
              <span>{getLegacyTrajectoryStatusLabel(step)}</span>
            </div>
            <div className="legacy-timeline-lines">
              {step.content.map((entry, entryIndex) => (
                <div
                  className="legacy-line"
                  key={`${entry.type}-${entryIndex}`}
                >
                  <strong>{entry.type === "TLT" ? entry.name : "Event"}</strong>
                  <p>{entry.description}</p>
                  {entry.postEvent ? (
                    <p className="legacy-post-event">{entry.postEvent}</p>
                  ) : null}
                </div>
              ))}
            </div>
          </div>
        ))}
        {session.trajectory.length === 0 ? (
          <div className="empty-block">Life has not started yet.</div>
        ) : null}
      </div>
    </section>
  );
}
