Sensor Fusion

"use client";

import * as React from "react";
import { useReducedMotion } from "motion/react";
import { Radar, Satellite, Radio, Waves } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SensorContribution {
  id: string;
  name: string;
  kind: "radar" | "eo" | "elint" | "acoustic";
  /** Per-sensor confidence, 0–1. */
  confidence: number;
  /** Whether this sensor currently holds the track. */
  holding: boolean;
}

export interface SensorFusionProps extends React.ComponentProps<"div"> {
  sensors?: SensorContribution[];
  trackId?: string;
  static?: boolean;
}

const KIND_ICON = {
  radar: Radar,
  eo: Satellite,
  elint: Radio,
  acoustic: Waves,
};

const DEFAULT_SENSORS: SensorContribution[] = [
  { id: "s1", name: "AN/SPY-6", kind: "radar", confidence: 0.92, holding: true },
  { id: "s2", name: "MTS-B EO/IR", kind: "eo", confidence: 0.74, holding: true },
  { id: "s3", name: "ELINT-4", kind: "elint", confidence: 0.58, holding: true },
  { id: "s4", name: "SONAR-A", kind: "acoustic", confidence: 0.31, holding: false },
];

// Bayesian-style fusion: 1 - Π(1 - c) over holding sensors.
function fuse(sensors: SensorContribution[]) {
  const held = sensors.filter((s) => s.holding);
  if (held.length === 0) return 0;
  const miss = held.reduce((acc, s) => acc * (1 - s.confidence), 1);
  return 1 - miss;
}

/**
 * A multi-sensor fusion panel. Each contributing sensor shows a confidence
 * bar; the SVG on the right connects the holding sensors' output nodes into a
 * single fused track node, with the connector opacity scaled by each sensor's
 * confidence — all node coordinates computed from the row layout, none
 * eyeballed. The fused confidence uses a Bayesian combine and springs its
 * readout. Reduced motion drops the flowing dashes.
 */
export function SensorFusion({
  sensors = DEFAULT_SENSORS,
  trackId = "TK-1174",
  static: isStatic = false,
  className,
  ...props
}: SensorFusionProps) {
  const reduced = useReducedMotion();
  const fused = fuse(sensors);
  const held = sensors.length;

  // Node geometry: sensors stacked on the left rail, fused node centered right.
  const W = 120;
  const H = 96;
  const leftX = 8;
  const rightX = W - 12;
  const rightY = H / 2;
  const rowY = (i: number) => ((i + 0.5) / sensors.length) * H;

  return (
    <div
      className={cn(
        "w-full max-w-md rounded-xl bg-card p-4 text-card-foreground shadow-border",
        className,
      )}
      {...props}
    >
      <style href="paragon-sensor-fusion" precedence="paragon">{`
        @keyframes pg-fusion-flow { to { stroke-dashoffset: -8; } }
        .pg-fusion-link { animation: pg-fusion-flow 0.9s linear infinite; }
        @media (prefers-reduced-motion: reduce) { .pg-fusion-link { animation: none; } }
      `}</style>

      <div className="mb-3 flex items-center justify-between">
        <div>
          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
            Sensor Fusion
          </p>
          <p className="font-mono text-sm font-semibold">{trackId}</p>
        </div>
        <span className="rounded-md bg-secondary px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground">
          {held} sensors
        </span>
      </div>

      <div className="grid grid-cols-[1fr_140px] gap-3">
        <ul className="flex flex-col gap-2">
          {sensors.map((s) => {
            const Icon = KIND_ICON[s.kind];
            return (
              <li key={s.id} className="flex items-center gap-2">
                <Icon
                  className={cn(
                    "size-3.5 shrink-0",
                    s.holding ? "text-foreground" : "text-muted-foreground/50",
                  )}
                />
                <span className="w-20 shrink-0 truncate font-mono text-[11px]">
                  {s.name}
                </span>
                <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-secondary">
                  <span
                    className="block h-full rounded-full bg-primary transition-[width,opacity] duration-(--duration-base) ease-(--ease-out)"
                    style={{
                      width: `${Math.round(s.confidence * 100)}%`,
                      opacity: s.holding ? 1 : 0.35,
                    }}
                  />
                </span>
                <span className="w-7 shrink-0 text-right tabular-nums text-[10px] text-muted-foreground">
                  {Math.round(s.confidence * 100)}
                </span>
              </li>
            );
          })}
        </ul>

        <div className="relative">
          <svg viewBox={`0 0 ${W} ${H}`} className="h-full w-full">
            {sensors.map((s, i) => {
              const y = rowY(i);
              const midX = (leftX + rightX) / 2;
              const d = `M ${leftX} ${y} C ${midX} ${y}, ${midX} ${rightY}, ${rightX} ${rightY}`;
              return (
                <g key={s.id}>
                  <path
                    d={d}
                    fill="none"
                    stroke="var(--color-primary)"
                    strokeOpacity={s.holding ? 0.25 + s.confidence * 0.55 : 0.1}
                    strokeWidth={0.8 + s.confidence * 1.4}
                    strokeLinecap="round"
                    strokeDasharray={s.holding ? "3 4" : "1 4"}
                    className={s.holding && !isStatic && !reduced ? "pg-fusion-link" : undefined}
                    vectorEffect="non-scaling-stroke"
                  />
                  <circle
                    cx={leftX}
                    cy={y}
                    r={2}
                    fill={s.holding ? "var(--color-primary)" : "var(--color-muted-foreground)"}
                  />
                </g>
              );
            })}
            {/* fused node */}
            <circle cx={rightX} cy={rightY} r={7} fill="var(--color-primary)" fillOpacity={0.14} />
            <circle
              cx={rightX}
              cy={rightY}
              r={4}
              fill="var(--color-primary)"
              stroke="var(--color-card)"
              strokeWidth={1}
            />
          </svg>
        </div>
      </div>

      <div className="mt-3 flex items-center justify-between border-t border-border pt-3">
        <span className="text-[11px] text-muted-foreground">Fused confidence</span>
        <span className="font-mono text-lg font-semibold tabular-nums text-primary">
          {Math.round(fused * 100)}%
        </span>
      </div>
    </div>
  );
}