path: root/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx

import { useEffect, useMemo, useRef, useState } from "react";
import Marquee from "react-fast-marquee";
import { useTranslation } from "react-i18next";
import LineIcon from "~components/LineIcon";
import { type ConsolidatedCirculation } from "~routes/stops-$id";

import { AlertTriangle, LocateIcon } from "lucide-react";
import "./ConsolidatedCirculationCard.css";

interface ConsolidatedCirculationCardProps {
  estimate: ConsolidatedCirculation;
  onMapClick?: () => void;
  readonly?: boolean;
  reduced?: boolean;
  driver?: string;
}

// Utility function to parse service ID and get the turn number
const parseServiceId = (serviceId: string): string => {
  const parts = serviceId.split("_");
  if (parts.length === 0) return "";

  const lastPart = parts[parts.length - 1];
  if (lastPart.length < 6) return "";

  const last6 = lastPart.slice(-6);
  const lineCode = last6.slice(0, 3);
  const turnCode = last6.slice(-3);

  // Remove leading zeros from turn
  const turnNumber = parseInt(turnCode, 10).toString();

  // Parse line number with special cases
  const lineNumber = parseInt(lineCode, 10);
  let displayLine: string;

  switch (lineNumber) {
    case 1:
      displayLine = "C1";
      break;
    case 3:
      displayLine = "C3";
      break;
    case 30:
      displayLine = "N1";
      break;
    case 33:
      displayLine = "N4";
      break;
    case 8:
      displayLine = "A";
      break;
    case 101:
      displayLine = "H";
      break;
    case 150:
      displayLine = "REF";
      break;
    case 500:
      displayLine = "TUR";
      break;
    case 201:
      displayLine = "U1";
      break;
    case 202:
      displayLine = "U2";
      break;
    default:
      displayLine = `L${lineNumber}`;
  }

  return `${displayLine}-${turnNumber}`;
};

const AutoMarquee = ({ text }: { text: string }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [shouldScroll, setShouldScroll] = useState(false);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    const checkScroll = () => {
      // 9px per char for text-sm font-mono is a safe upper bound estimate
      // (14px * 0.6 = 8.4px)
      const charWidth = 9;
      const availableWidth = el.offsetWidth;
      const textWidth = text.length * charWidth;

      setShouldScroll(textWidth > availableWidth);
    };

    checkScroll();

    const observer = new ResizeObserver(checkScroll);
    observer.observe(el);

    return () => observer.disconnect();
  }, [text]);

  if (shouldScroll) {
    return (
      <div ref={containerRef} className="w-full overflow-hidden">
        <Marquee speed={60} gradient={false}>
          <div className="mr-64 text-sm font-mono">{text}</div>
        </Marquee>
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      className="w-full overflow-hidden text-sm font-mono truncate"
    >
      {text}
    </div>
  );
};

export const ConsolidatedCirculationCard: React.FC<
  ConsolidatedCirculationCardProps
> = ({ estimate, onMapClick, readonly, reduced, driver }) => {
  const { t } = useTranslation();

  const formatDistance = (meters: number) => {
    if (meters > 1024) {
      return `${(meters / 1000).toFixed(1)} km`;
    }
    return `${meters} ${t("estimates.meters", "m")}`;
  };

  const getTripIdDisplay = (tripId: string): string => {
    const parts = tripId.split("_");
    return parts.length > 1 ? parts[1] : tripId;
  };

  const etaMinutes =
    estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? null;

  let etaValue: string;
  let etaUnit: string;

  if (etaMinutes === null) {
    etaValue = "--";
    etaUnit = t("estimates.minutes", "min");
  } else {
    const isRenfe = driver === "renfe";
    const isLongWait = etaMinutes > 60;

    if (isRenfe || isLongWait) {
      const now = new Date();
      const arrivalTime = new Date(now.getTime() + etaMinutes * 60 * 1000);
      etaValue = arrivalTime.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
      });
      etaUnit = "";
    } else {
      etaValue = Math.max(0, Math.round(etaMinutes)).toString();
      etaUnit = t("estimates.minutes", "min");
    }
  }

  const timeClass = useMemo(() => {
    if (estimate.realTime && estimate.schedule?.running) {
      return "time-running";
    }
    if (estimate.realTime && !estimate.schedule) {
      return "time-running";
    }
    if (estimate.realTime && !estimate.schedule?.running) {
      return "time-delayed";
    }
    return "time-scheduled";
  }, [estimate.realTime, estimate.schedule]);

  const delayChip = useMemo(() => {
    if (!estimate.schedule || !estimate.realTime) {
      return null;
    }

    const delta = Math.round(
      estimate.realTime.minutes - estimate.schedule.minutes
    );
    const absDelta = Math.abs(delta);

    // On time
    if (delta === 0) {
      return {
        label: reduced ? "OK" : t("estimates.delay_on_time"),
        tone: "delay-ok",
        kind: "delay",
      } as const;
    }

    // Delayed
    if (delta > 0) {
      const tone =
        delta <= 2 ? "delay-ok" : delta <= 10 ? "delay-warn" : "delay-critical";
      return {
        label: reduced
          ? `R${delta}`
          : t("estimates.delay_positive", {
              minutes: delta,
            }),
        tone,
        kind: "delay",
      } as const;
    }

    // Early
    const tone = absDelta <= 2 ? "delay-ok" : "delay-early";
    return {
      label: reduced
        ? `A${absDelta}`
        : t("estimates.delay_negative", {
            minutes: absDelta,
          }),
      tone,
      kind: "delay",
    } as const;
  }, [estimate.schedule, estimate.realTime, t, reduced]);

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

    if (delayChip) {
      chips.push(delayChip);
    }

    if (estimate.schedule && driver !== "renfe") {
      chips.push({
        label: `${parseServiceId(estimate.schedule.serviceId)} · ${getTripIdDisplay(
          estimate.schedule.tripId
        )}`,
        kind: "regular",
      });
    }

    if (estimate.realTime && estimate.realTime.distance >= 0) {
      chips.push({
        label: formatDistance(estimate.realTime.distance),
        kind: "regular",
      });
    }

    if (estimate.currentPosition) {
      if (estimate.isPreviousTrip) {
        chips.push({ label: t("estimates.previous_trip"), kind: "gps" });
      } else {
        chips.push({ label: t("estimates.bus_gps_position"), kind: "gps" });
      }
    }

    if (timeClass === "time-delayed") {
      chips.push({
        label: reduced ? "!" : t("estimates.low_accuracy"),
        tone: "warning",
        kind: "warning",
      });
    }

    if (timeClass === "time-scheduled") {
      chips.push({
        label: reduced ? "⧗" : t("estimates.no_realtime"),
        tone: "warning",
        kind: "warning",
      });
    }

    return chips;
  }, [delayChip, estimate.schedule, estimate.realTime, timeClass, t, reduced]);

  // Check if bus has GPS position (live tracking)
  const hasGpsPosition = !!estimate.currentPosition;
  const isRenfe = driver === "renfe";
  const isClickable = hasGpsPosition;
  const looksDisabled = !isClickable && !isRenfe;

  const Tag = readonly ? "div" : "button";
  const interactiveProps = readonly
    ? {}
    : {
        onClick: isClickable ? onMapClick : undefined,
        type: "button" as const,
        disabled: !isClickable,
      };

  if (reduced) {
    return (
      <Tag
        className={`
          flex-none flex items-center gap-2.5 min-h-12
          bg-(--message-background-color) border border-(--border-color)
          rounded-xl px-3 py-2.5 transition-all
          ${
            readonly
              ? looksDisabled
                ? "opacity-70 cursor-not-allowed"
                : ""
              : isClickable
                ? "cursor-pointer hover:shadow-[0_4px_14px_rgba(0,0,0,0.08)] hover:border-(--button-background-color) hover:bg-[color-mix(in_oklab,var(--button-background-color)_5%,var(--message-background-color))] active:scale-[0.98]"
                : looksDisabled
                  ? "opacity-70 cursor-not-allowed"
                  : ""
          }
        `.trim()}
        {...interactiveProps}
      >
        <div className="shrink-0 min-w-[7ch]">
          <LineIcon line={estimate.line} mode="pill" />
        </div>
        <div className="flex-1 min-w-0 flex flex-col gap-1">
          <strong className="text-base text-(--text-color) overflow-hidden text-ellipsis line-clamp-2 leading-tight">
            {driver === "renfe" && estimate.schedule?.tripId && (
              <span className="font-mono text-slate-500 mr-1.5 text-sm">
                {estimate.schedule.tripId}
              </span>
            )}
            {driver === "renfe" ? estimate.route.toUpperCase() : estimate.route}
          </strong>
          {metaChips.length > 0 && (
            <div className="flex items-center gap-1.5 flex-wrap">
              {metaChips.map((chip, idx) => {
                let chipColourClasses = "";
                switch (chip.tone) {
                  case "delay-ok":
                    chipColourClasses =
                      "bg-green-600/20 dark:bg-green-600/30 text-green-700 dark:text-green-300";
                    break;
                  case "delay-warn":
                    chipColourClasses =
                      "bg-amber-600/20 dark:bg-yellow-600/30 text-amber-700 dark:text-yellow-300";
                    break;
                  case "delay-critical":
                    chipColourClasses =
                      "bg-red-400/20 dark:bg-red-600/30 text-red-600 dark:text-red-300";
                    break;
                  case "delay-early":
                    chipColourClasses =
                      "bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300";
                    break;
                  case "warning":
                    chipColourClasses =
                      "bg-orange-400/20 dark:bg-orange-600/30 text-orange-700 dark:text-orange-300";
                    break;
                  default:
                    chipColourClasses =
                      "bg-black/[0.06] dark:bg-white/[0.12] text-[var(--text-color)]";
                }

                return (
                  <span
                    key={`${chip.label}-${idx}`}
                    className={`text-xs px-2 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 ${chipColourClasses}`}
                  >
                    {chip.kind === "gps" && (
                      <LocateIcon className="w-3 h-3 inline-block" />
                    )}
                    {chip.kind === "warning" && (
                      <AlertTriangle className="w-3 h-3 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 === "time-running"
                ? "bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e]"
                : timeClass === "time-delayed"
                  ? "bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c]"
                  : "bg-blue-900/20 dark:bg-blue-600/25 text-[#0b3d91] dark:text-[#93c5fd]"
            }
          `.trim()}
        >
          <div className="flex flex-col items-center leading-none">
            <span className="text-lg font-bold leading-none">{etaValue}</span>
            <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">
              {etaUnit}
            </span>
          </div>
        </div>
      </Tag>
    );
  }

  return (
    <Tag
      className={`consolidated-circulation-card ${
        readonly
          ? looksDisabled
            ? "no-gps"
            : ""
          : isClickable
            ? "has-gps"
            : looksDisabled
              ? "no-gps"
              : ""
      }`}
      {...interactiveProps}
    >
      <>
        <div className="card-row main">
          <div className="line-info">
            <LineIcon line={estimate.line} mode="pill" />
          </div>
          <div className="route-info">
            <strong>
              {driver === "renfe" && estimate.schedule?.tripId && (
                <span className="font-mono text-slate-500 mr-2 text-[0.9em]">
                  {estimate.schedule.tripId}
                </span>
              )}
              {driver === "renfe"
                ? estimate.route.toUpperCase()
                : estimate.route}
            </strong>
            {estimate.nextStreets && estimate.nextStreets.length > 0 && (
              <AutoMarquee text={estimate.nextStreets.join(" — ")} />
            )}
          </div>
          <div className={`eta-badge ${timeClass}`}>
            <div className="eta-text">
              <span className="eta-value">{etaValue}</span>
              <span className="eta-unit">{etaUnit}</span>
            </div>
          </div>
        </div>

        {metaChips.length > 0 && (
          <div className="card-row meta">
            {metaChips.map((chip, idx) => (
              <span
                key={`${chip.label}-${idx}`}
                className={`meta-chip ${chip.tone ?? ""}`.trim()}
              >
                {chip.kind === "gps" && (
                  <LocateIcon className="w-3 h-3 inline-block" />
                )}
                {chip.kind === "warning" && (
                  <AlertTriangle className="w-3 h-3 inline-block" />
                )}
                {chip.label}
              </span>
            ))}
          </div>
        )}
      </>
    </Tag>
  );
};