import { type FC, useState } from "react";
import type { IFlightLeg } from "../../types.js";
import { Station } from "./Station.js";
import { StationChange } from "./StationChange.js";

export interface TimelineProps {
  legs: IFlightLeg[];
  canChange: boolean;
}

function depTime(leg: IFlightLeg, canChange: boolean): string {
  const t = leg.departure.times;
  if (canChange) return t.actualBlockOff?.local ?? t.scheduledDeparture.local;
  return t.scheduledDeparture.local;
}

function arrTime(leg: IFlightLeg, canChange: boolean): string {
  const t = leg.arrival.times;
  if (canChange) return t.actualBlockOn?.local ?? t.scheduledArrival.local;
  return t.scheduledArrival.local;
}

function isSpecifying(leg: IFlightLeg, canChange: boolean): boolean {
  return canChange && leg.estimatedDuration?.isNegative === true;
}

interface SectionProps {
  legNumber: number;
  duration: string;
  specifying: boolean;
}

const Section: FC<SectionProps> = ({ legNumber, duration, specifying }) => (
  <div className="timeline-section">
    <div className="timeline-section__separator" />
    <span className="timeline-section__number">{legNumber}</span>
    <span
      className={`timeline-section__duration${
        specifying ? " timeline-section__duration--specifying" : ""
      }`}
    >
      {duration}
    </span>
    <div className="timeline-section__separator" />
  </div>
);

export const Timeline: FC<TimelineProps> = ({ legs, canChange }) => {
  const [index, setIndex] = useState(0);
  const lastPairStart = Math.max(0, legs.length - 2);
  const currentLeg = legs[index];
  const nextLeg = legs[index + 1];

  if (!currentLeg || !nextLeg) return null;

  return (
    <div className="timeline">
      {index > 0 && (
        <button
          type="button"
          className="timeline__arrow"
          data-testid="timeline-prev"
          onClick={() => setIndex((i) => Math.max(0, i - 1))}
          aria-label="Previous legs"
        >
          {"\u2039"}
        </button>
      )}

      <div className="timeline__content">
        <div className="timeline__row timeline__row--times">
          <span>{depTime(currentLeg, canChange)}</span>
          <Section
            legNumber={index + 1}
            duration={currentLeg.flyingTime}
            specifying={isSpecifying(currentLeg, canChange)}
          />
          <span>{arrTime(currentLeg, canChange)}</span>
          <Section
            legNumber={index + 2}
            duration={nextLeg.flyingTime}
            specifying={isSpecifying(nextLeg, canChange)}
          />
          <span>{depTime(nextLeg, canChange)}</span>
          <span>{arrTime(nextLeg, canChange)}</span>
        </div>

        <div className="timeline__row timeline__row--stations">
          <Station station={currentLeg.departure} align="left" size="medium" />
          <StationChange from={currentLeg.arrival} to={nextLeg.departure} />
          <Station station={nextLeg.arrival} align="right" size="medium" />
        </div>
      </div>

      {index < lastPairStart && (
        <button
          type="button"
          className="timeline__arrow"
          data-testid="timeline-next"
          onClick={() => setIndex((i) => Math.min(lastPairStart, i + 1))}
          aria-label="Next legs"
        >
          {"\u203a"}
        </button>
      )}
    </div>
  );
};
