import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import {
  formatLocalTime,
  formatUtcOffset,
  formatDayMonthYear,
} from "@/shared/utils/datetime/index.js";
import type { IFlightTransitionItem, IFlightLegDepartureStation, FlightTransitionStatus } from "../../types.js";
import "./panels.scss";

function formatTransitionTimestamp(iso: string): string {
  const time = formatLocalTime(iso);
  const offset = formatUtcOffset(iso);
  const date = formatDayMonthYear(iso);
  return [time, offset, date].filter(Boolean).join(" ");
}

const STATUS_KEYS: Record<FlightTransitionStatus, string> = {
  Finished: "DETAILS.STATUS_FINISHED",
  Expected: "DETAILS.STATUS_EXPECTED",
  InProgress: "DETAILS.STATUS_IN_PROGRESS",
  Specified: "DETAILS.STATUS_SPECIFIED",
  Scheduled: "DETAILS.STATUS_SCHEDULED",
};

export interface BoardingPanelProps {
  item: IFlightTransitionItem;
  /** Departure station — used to show transfer type + gate (§4.1.15.4). */
  departure?: Pick<IFlightLegDepartureStation, "dispatch" | "gate">;
}

export const BoardingPanel: FC<BoardingPanelProps> = ({ item, departure }) => {
  const { t } = useTranslation();
  const hasEnd = Boolean(item.end?.local);

  return (
    <div className="details-panel" data-testid="boarding-panel">
      <div className="details-panel__row">
        <span className="details-panel__label">{t("DETAILS.STATUS")}</span>
        <span className="details-panel__status">{t(STATUS_KEYS[item.status])}</span>
      </div>
      <div className="details-panel__row">
        <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
        <span className="details-panel__value">{formatTransitionTimestamp(item.start.local)}</span>
      </div>
      {hasEnd && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
          <span className="details-panel__value">{formatTransitionTimestamp(item.end.local)}</span>
        </div>
      )}
      {/* §4.1.15.4: dispatch type (Bus / Bridge) and departure gate from boarding panel
          Angular parity: flight-details-boarding.component.html lines 17–24 */}
      {departure?.dispatch && (
        <div className="details-panel__row" data-testid="boarding-dispatch">
          <span className="details-panel__label">{t("SHARED.LANDING-TRANSFER")}</span>
          <span className="details-panel__value">{t(`DISPATCH.${departure.dispatch}`)}</span>
        </div>
      )}
      {departure?.gate && (
        <div className="details-panel__row" data-testid="boarding-gate">
          <span className="details-panel__label">{t("SHARED.NUMBER-EXIT")}</span>
          <span className="details-panel__value">{departure.gate}</span>
        </div>
      )}
    </div>
  );
};
