import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { FlightStatus as FlightStatusType } from "@/features/online-board/types.js";
import "./FlightStatus.scss";

export interface FlightStatusProps {
  status: FlightStatusType;
  /** When true, renders a plane icon above the status label (Angular parity) */
  withIcon?: boolean;
}

const STATUS_CLASSES: Record<FlightStatusType, string> = {
  Scheduled: "flight-status--scheduled",
  Sent: "flight-status--departed",
  InFlight: "flight-status--in-flight",
  Landed: "flight-status--landed",
  Arrived: "flight-status--arrived",
  Delayed: "flight-status--delayed",
  Cancelled: "flight-status--cancelled",
  Unknown: "flight-status--unknown",
};

// Mirrors Angular's `flight-status-colors.ts` palette via the brand
// color tokens (see `src/styles/_colors.scss`): Delayed uses $orange,
// Cancelled uses $red, and every in-flight / landed / arrived / sent /
// unknown state uses $green. Scheduled falls through to $blue, which is
// what Angular's statusColors.scheduled ('blue') resolves to.
function statusColor(status: FlightStatusType): string {
  switch (status) {
    case "Delayed":
      return "#f37b09"; // $orange
    case "Cancelled":
      return "#c8102e"; // $red
    case "Arrived":
    case "Landed":
    case "Sent":
    case "InFlight":
    case "Unknown":
      return "#25a24e"; // $green
    case "Scheduled":
    default:
      return "#1b62b4"; // $blue
  }
}

/**
 * Flight status block — plane icon over a one-line status label. Drops
 * into either the row header or the full details page. When `withIcon`
 * is false, degrades to a bare label (back-compat for spots that only
 * want the text badge).
 *
 * Status text comes from i18n (`FLIGHT-STATUSES.{status}`) so it
 * renders in whichever locale the visitor is browsing in.
 */
export const FlightStatus: FC<FlightStatusProps> = ({ status, withIcon = true }) => {
  const { t } = useTranslation();
  const label = t(`FLIGHT-STATUSES.${status}`);

  if (!withIcon) {
    return (
      <span className={`flight-status ${STATUS_CLASSES[status]}`}>
        {label}
      </span>
    );
  }

  const color = statusColor(status);
  return (
    <div className={`flight-status flight-status--with-icon ${STATUS_CLASSES[status]}`}>
      <svg
        className="flight-status__plane"
        viewBox="0 0 24 24"
        width="20"
        height="20"
        fill={color}
        aria-hidden="true"
      >
        <path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 1 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z" />
      </svg>
      <span className="flight-status__label">{label}</span>
    </div>
  );
};
