Route ETA Card

"use client";

import * as React from "react";
import { useReducedMotion } from "motion/react";
import { Clock, MapPin } from "lucide-react";
import { cn } from "@/lib/utils";

export interface RouteStop {
  label: string;
  /** Optional caption, e.g. window or address. */
  detail?: string;
  done?: boolean;
}

export interface RouteEtaCardProps
  extends React.ComponentProps<"div"> {
  /** Destination name. */
  destination: string;
  /** Seconds remaining until arrival at mount. Counts down live. */
  secondsRemaining: number;
  stops: RouteStop[];
  /** Suppresses the tick countdown and delay flash. */
  static?: boolean;
}

function formatDuration(totalSeconds: number) {
  const s = Math.max(Math.floor(totalSeconds), 0);
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`;
  return `${m}:${String(sec).padStart(2, "0")}`;
}

/**
 * A live ETA card that counts down from a seeded seconds-remaining value
 * (never Date.now in render — the mount value is captured once and ticked by
 * an interval). When the remaining time jumps upward — a delay — the readout
 * flashes with a warning tint. The stops list marks completed stops. The
 * countdown and flash are suppressed under reduced motion or `static`.
 */
export function RouteEtaCard({
  destination,
  secondsRemaining,
  stops,
  static: isStatic = false,
  className,
  ...props
}: RouteEtaCardProps) {
  const reducedMotion = useReducedMotion();
  const animate = !isStatic && !reducedMotion;

  const [remaining, setRemaining] = React.useState(secondsRemaining);
  const [delayed, setDelayed] = React.useState(false);
  const prevProp = React.useRef(secondsRemaining);
  const flashTimeout = React.useRef<ReturnType<typeof setTimeout>>(null);

  // Live tick.
  React.useEffect(() => {
    if (!animate) return;
    const interval = setInterval(() => {
      setRemaining((r) => Math.max(r - 1, 0));
    }, 1000);
    return () => clearInterval(interval);
  }, [animate]);

  // React to a new ETA from props: sync value and flash on a delay (increase).
  React.useEffect(() => {
    if (secondsRemaining > prevProp.current + 1 && animate) {
      setDelayed(true);
      if (flashTimeout.current) clearTimeout(flashTimeout.current);
      flashTimeout.current = setTimeout(() => setDelayed(false), 1200);
    }
    prevProp.current = secondsRemaining;
    setRemaining(secondsRemaining);
  }, [secondsRemaining, animate]);

  React.useEffect(() => {
    return () => {
      if (flashTimeout.current) clearTimeout(flashTimeout.current);
    };
  }, []);

  return (
    <div
      data-slot="route-eta-card"
      className={cn(
        "w-full max-w-sm rounded-xl bg-card p-5 shadow-border",
        className,
      )}
      {...props}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="text-xs font-medium text-muted-foreground">
            Arriving at
          </p>
          <p className="truncate text-sm font-medium">{destination}</p>
        </div>
        <span
          className={cn(
            "flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium transition-colors duration-200",
            delayed
              ? "bg-warning/15 text-warning"
              : "bg-secondary text-muted-foreground",
          )}
        >
          <Clock aria-hidden className="size-3.5" />
          {delayed ? "Delayed" : "On time"}
        </span>
      </div>

      <div
        className={cn(
          "mt-4 rounded-lg p-4 text-center transition-colors duration-200",
          delayed ? "bg-warning/10" : "bg-secondary/50",
        )}
      >
        <p
          aria-live="polite"
          className={cn(
            "text-3xl font-semibold tabular-nums transition-colors duration-200",
            delayed ? "text-warning" : "text-foreground",
          )}
        >
          {formatDuration(remaining)}
        </p>
        <p className="mt-0.5 text-xs text-muted-foreground">
          {remaining <= 0 ? "Arrived" : "remaining"}
        </p>
      </div>

      <ol className="mt-4 flex flex-col gap-3">
        {stops.map((stop, i) => (
          <li key={`${stop.label}-${i}`} className="flex items-start gap-3">
            <span
              aria-hidden
              className={cn(
                "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full",
                stop.done
                  ? "bg-primary text-primary-foreground"
                  : "border border-border bg-background text-muted-foreground",
              )}
            >
              <MapPin className="size-3" />
            </span>
            <span className="min-w-0">
              <span
                className={cn(
                  "block truncate text-sm",
                  stop.done
                    ? "text-muted-foreground line-through"
                    : "font-medium text-foreground",
                )}
              >
                {stop.label}
              </span>
              {stop.detail && (
                <span className="block truncate text-xs text-muted-foreground tabular-nums">
                  {stop.detail}
                </span>
              )}
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}