parking_solution/apps/web/src/ui/SnapshotStrip.tsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import { fetchSnapshots, snapshotImageUrl, type PlateRead } from "../api.js";

/** Keep one entry per (plate, direction) — newest wins (the list is newest-first). */
function dedupePlates(plates: PlateRead[]): PlateRead[] {
  const seen = new Set<string>();
  const out: PlateRead[] = [];
  for (const p of plates) {
    const key = `${p.plate}|${p.direction}`;
    if (seen.has(key)) continue;
    seen.add(key);
    out.push(p);
  }
  return out;
}

// Entry/exit evidence images for a session. Lets the operator verify the car at the
// booth against the ticket. Thumbnails load from /api/snapshots/:id (cookie-authed,
// served with a long immutable cache); clicking one enlarges it. Read-only.

export function SnapshotStrip({ identity }: { identity: string }) {
  const { t } = useTranslation();
  const { data, isLoading } = useQuery({
    queryKey: ["snapshots", identity],
    queryFn: () => fetchSnapshots(identity),
    enabled: !!identity,
  });
  const [zoom, setZoom] = useState<string | null>(null);

  const shots = data?.snapshots ?? [];
  const failures = data?.failures ?? [];
  const plates = data?.plates ?? [];

  /** Localized direction label for a snapshot/failure tile. */
  const dirLabel = (dir: "entry" | "exit" | null): string =>
    dir === "entry" ? t("pay.snapEntry") : dir === "exit" ? t("pay.snapExit") : "—";

  if (isLoading) return <div className="text-[0.6875rem] text-term-muted">{t("pay.loadingSnapshots")}</div>;
  if (shots.length === 0 && failures.length === 0 && plates.length === 0)
    return <div className="text-[0.6875rem] text-term-muted">{t("pay.noSnapshots")}</div>;

  return (
    <>
      {/* Recognized plate(s) (ANPR) — advisory. Dedup by plate+direction so an
          entry+exit read of the same plate shows once per direction. */}
      {plates.length > 0 && (
        <div className="mb-2 flex flex-wrap gap-1.5">
          {dedupePlates(plates).map((p, i) => (
            <span
              key={`${p.plate}-${p.direction}-${i}`}
              className="inline-flex items-center gap-1.5 rounded-term border border-term-cyan/40 bg-term-cyan/10 px-2 py-0.5 text-[0.6875rem]"
              title={`${dirLabel(p.direction)}${p.region ? ` · ${p.region}` : ""}${
                p.at ? ` · ${new Date(p.at).toLocaleString()}` : ""
              }`}
            >
              <span className="text-[0.5625rem] uppercase tracking-wider text-term-muted">{t("pay.plate")}</span>
              <span className="font-mono font-semibold text-term-cyan">{p.plate}</span>
              {typeof p.confidence === "number" && (
                <span className="text-[0.625rem] text-term-muted">{(p.confidence * 100).toFixed(0)}%</span>
              )}
            </span>
          ))}
        </div>
      )}

      <div className="flex flex-wrap gap-2">
        {shots.map((s) => (
          <button
            key={s.id}
            type="button"
            onClick={() => setZoom(s.id)}
            className="group flex flex-col items-center gap-1 rounded-term border border-term-border bg-term-panel-2 p-1 hover:border-term-amber"
            title={`${dirLabel(s.direction)} · ${new Date(s.capturedAt).toLocaleString()}`}
          >
            <img
              src={snapshotImageUrl(s.id)}
              alt={s.direction ?? "snapshot"}
              className="h-20 w-28 object-cover"
              loading="lazy"
            />
            <span
              className={`text-[0.5625rem] uppercase tracking-wider ${
                s.direction === "entry" ? "text-term-green" : s.direction === "exit" ? "text-term-red" : "text-term-muted"
              }`}
            >
              {dirLabel(s.direction)}
            </span>
          </button>
        ))}

        {/* Failed captures — a placeholder tile so an absent image is explained, not
            silently missing. Shown only when no successful shot exists for the same
            direction (the server already filters recovered captures out). */}
        {failures.map((f, i) => (
          <div
            key={`fail-${f.direction ?? "both"}-${i}`}
            className="flex h-[6.75rem] w-28 flex-col items-center justify-center gap-1 rounded-term border border-dashed border-term-amber/60 bg-term-amber/5 p-1 text-center"
            title={`${dirLabel(f.direction)} · ${f.error}${f.occurredAt ? ` · ${new Date(f.occurredAt).toLocaleString()}` : ""}`}
          >
            <span className="text-lg leading-none text-term-amber">⚠</span>
            <span className="text-[0.5625rem] uppercase tracking-wider text-term-amber">{dirLabel(f.direction)}</span>
            <span className="px-1 text-[0.5625rem] leading-tight text-term-muted">{t("pay.snapFailed")}</span>
          </div>
        ))}
      </div>

      {zoom && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
          onClick={() => setZoom(null)}
        >
          <img src={snapshotImageUrl(zoom)} alt="snapshot" className="max-h-full max-w-full object-contain" />
        </div>
      )}
    </>
  );
}