path: root/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx

import {
  AlertTriangle,
  ArrowDownRightSquare,
  ArrowUpRightSquare,
  BusFront,
  LocateIcon,
} from "lucide-react";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import RouteIcon from "~/components/RouteIcon";
import { type Arrival } from "../../api/schema";
import "./ArrivalCard.css";

interface ArrivalCardProps {
  arrival: Arrival;
  onClick?: () => void;
}

export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
  arrival,
  onClick,
}) => {
  const { t } = useTranslation();
  const {
    route,
    headsign,
    estimate,
    delay,
    shift,
    vehicleInformation,
    operator,
    operation,
  } = arrival;

  const etaValue = estimate.minutes.toString();

  const timeClass = useMemo(() => {
    switch (estimate.precision) {
      case "confident":
        return "time-running";
      case "unsure":
        return "time-delayed";
      case "past":
        return "time-past";
      default:
        return "time-scheduled";
    }
  }, [estimate.precision]);

  const metaChips = useMemo(() => {
    const chips: Array<{
      label: string;
      tone?: string;
      kind?:
        | "regular"
        | "gps"
        | "delay"
        | "warning"
        | "vehicle"
        | "pickup"
        | "dropoff";
    }> = [];

    if (operation !== "pickup_dropoff") {
      chips.push({
        label:
          operation === "pickup_only"
            ? t("journey.pickup_only", "Solo subida")
            : t("journey.dropoff_only", "Solo bajada"),
        tone: operation === "pickup_only" ? "pickup" : "dropoff",
        kind: operation === "pickup_only" ? "pickup" : "dropoff",
      });
    }

    if (operator) {
      chips.push({
        label: operator,
        kind: "regular",
      });
    }

    // Badge/Shift info as a chip
    if (headsign.badge) {
      chips.push({
        label: headsign.badge,
        kind: "regular",
      });
    }

    // Delay chip
    if (delay) {
      const delta = Math.round(delay.minutes);
      const absDelta = Math.abs(delta);

      if (delta === 0) {
        chips.push({
          label: "OK",
          tone: "delay-ok",
          kind: "delay",
        });
      } else if (delta > 0) {
        const tone =
          delta <= 2
            ? "delay-ok"
            : delta <= 10
              ? "delay-warn"
              : "delay-critical";
        chips.push({
          label: `R${delta}`,
          tone,
          kind: "delay",
        });
      } else {
        const tone = absDelta <= 2 ? "delay-ok" : "delay-early";
        chips.push({
          label: `A${absDelta}`,
          tone,
          kind: "delay",
        });
      }
    }

    // Shift chip
    if (shift) {
      chips.push({
        label: `${shift.shiftName} · ${shift.shiftTrip}`,
        kind: "regular",
      });
    }

    // Precision chips
    if (estimate.precision === "unsure") {
      chips.push({
        label: "!",
        tone: "warning",
        kind: "warning",
      });
    } else if (
      estimate.precision === "confident" &&
      arrival.currentPosition !== null
    ) {
      chips.push({
        label: "", // Just the icon for reduced
        kind: "gps",
      });
    }

    // Vehicle information if available
    if (vehicleInformation) {
      let label = vehicleInformation.identifier;
      if (vehicleInformation.make) {
        label += ` (${vehicleInformation.make}`;
        if (vehicleInformation.kind) {
          const kindLabel =
            vehicleInformation.kind.charAt(0).toUpperCase() +
            vehicleInformation.kind.slice(1).toLowerCase();
          label += ` ${kindLabel}.`;
        }
        if (vehicleInformation.year) {
          label += ` ${vehicleInformation.year}`;
        }
        label += `)`;
      }
      chips.push({
        label,
        kind: "vehicle",
      });
    }

    return chips;
  }, [
    delay,
    shift,
    estimate.precision,
    headsign.badge,
    vehicleInformation,
    operator,
    operation,
  ]);

  const isClickable = !!onClick && estimate.precision !== "past";
  const Tag = isClickable ? "button" : "div";

  return (
    <Tag
      onClick={isClickable ? onClick : undefined}
      className={`w-full text-left flex-none flex items-center gap-3 min-h-12 rounded p-2 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 ${
        isClickable
          ? "hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.99] cursor-pointer"
          : ""
      }`}
    >
      <div className="shrink-0 min-w-[4ch] mt-0.5">
        <RouteIcon
          line={route.shortName}
          colour={route.colour}
          textColour={route.textColour}
          mode="pill"
        />
      </div>
      <div className="flex-1 min-w-0 flex flex-col gap-0.5">
        <span
          className={`text-base font-medium overflow-hidden text-ellipsis line-clamp-2 leading-tight ${estimate.precision == "past" ? "line-through opacity-60" : ""}`}
        >
          {headsign.destination}
        </span>
        {metaChips.length > 0 && (
          <div className="flex items-center gap-0.5 flex-wrap">
            {metaChips.map((chip, idx) => {
              let chipColourClasses = "";
              switch (chip.tone) {
                case "pickup":
                  chipColourClasses =
                    "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
                  break;
                case "dropoff":
                  chipColourClasses =
                    "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
                  break;
                case "delay-ok":
                  chipColourClasses =
                    "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
                  break;
                case "delay-warn":
                  chipColourClasses =
                    "bg-amber-600/10 dark:bg-yellow-600/20 text-amber-700 dark:text-yellow-300";
                  break;
                case "delay-critical":
                  chipColourClasses =
                    "bg-red-400/10 dark:bg-red-600/20 text-red-600 dark:text-red-300";
                  break;
                case "delay-early":
                  chipColourClasses =
                    "bg-blue-400/10 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300";
                  break;
                case "warning":
                  chipColourClasses =
                    "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
                  break;
                default:
                  chipColourClasses =
                    "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400";
              }

              return (
                <span
                  key={`${chip.label}-${idx}`}
                  className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
                >
                  {chip.kind === "gps" && (
                    <LocateIcon className="w-3 h-3 my-0.5 inline-block" />
                  )}
                  {chip.kind === "warning" && (
                    <AlertTriangle className="w-3 h-3 my-0.5 inline-block" />
                  )}
                  {chip.kind === "vehicle" && (
                    <BusFront className="w-3 h-3 my-0.5 inline-block" />
                  )}
                  {/** I tried imitating the tachograph symbols for loading/unloading, but "bottom right" was better distinguished compared to "bottom left" */}
                  {chip.kind === "pickup" && (
                    <ArrowUpRightSquare className="w-3 h-3 my-0.5 inline-block" />
                  )}
                  {chip.kind === "dropoff" && (
                    <ArrowDownRightSquare className="w-3 h-3 my-0.5 inline-block" />
                  )}
                  {chip.label}
                </span>
              );
            })}
          </div>
        )}
      </div>
      <div
        className={`
          inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
          ${timeClass}
        `.trim()}
      >
        <div className="flex flex-col items-center leading-none">
          <span className="text-lg font-bold leading-none">
            {etaValue}&apos;
          </span>
        </div>
      </div>
    </Tag>
  );
};