import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import {
  formatLocalTime,
  formatUtcOffset,
  formatDayMonthYear,
} from "@/shared/utils/datetime/index.js";
import type {
  IFlightTransitionItem,
  IFlightLegArrivalStation,
  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 DeboardingPanelProps {
  item: IFlightTransitionItem;
  arrival: IFlightLegArrivalStation;
}

export const DeboardingPanel: FC<DeboardingPanelProps> = ({ item, arrival }) => {
  const { t } = useTranslation();
  const hasEnd = Boolean(item.end?.local);

  return (
    <div className="details-panel" data-testid="deboarding-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>
      )}
      {arrival.terminal && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.TERMINAL")}</span>
          <span className="details-panel__value">{arrival.terminal}</span>
        </div>
      )}
      {arrival.gate && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.GATE")}</span>
          <span className="details-panel__value">{arrival.gate}</span>
        </div>
      )}
      {arrival.bagBelt && (
        <div className="details-panel__row">
          <span className="details-panel__label">{t("DETAILS.BAG_BELT")}</span>
          <span className="details-panel__value">{arrival.bagBelt}</span>
        </div>
      )}
    </div>
  );
};
