/**
 * Node state, carried by VALUE, never hue — see UI_REDESIGN.md §2.3.
 * One diamond mark at four weights. Green is gone entirely (it measured
 * ΔE 4.1 against major-red under deuteranopia — the same colour).
 *   recording    — filled + accent ring (the one state allowed a colour
 *                  ring, since it doubles as the "live now" indicator,
 *                  not a hue distinguishing it from other node states)
 *   online       — filled ink
 *   offline      — hollow ink
 *   unconfigured — hollow ink, dashed
 */
import type { NodeStatus } from "@/lib/types";

export function NodeMark({
  status,
  size = 14,
  className,
}: {
  status: NodeStatus;
  size?: number;
  className?: string;
}) {
  const half = size / 2;
  const points = `${half},1 ${size - 1},${half} ${half},${size - 1} 1,${half}`;

  if (status === "recording") {
    return (
      <span className={`relative inline-block ${className ?? ""}`} style={{ width: size * 1.8, height: size * 1.8 }}>
        <span
          aria-hidden
          className="node-pulse-ring absolute rounded-full"
          style={{
            width: size * 1.8,
            height: size * 1.8,
            border: "2px solid var(--accent)",
            top: 0,
            left: 0,
          }}
        />
        <svg
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
          className="absolute"
          style={{ top: size * 0.4, left: size * 0.4 }}
          aria-hidden
        >
          <polygon points={points} fill="var(--ink)" stroke="var(--accent)" strokeWidth={1.5} />
        </svg>
      </span>
    );
  }

  if (status === "online") {
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
        <polygon points={points} fill="var(--ink)" />
      </svg>
    );
  }

  if (status === "unconfigured") {
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
        <polygon points={points} fill="none" stroke="var(--ink-muted)" strokeWidth={1.5} strokeDasharray="2.5 2" />
      </svg>
    );
  }

  // offline — hollow
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
      <polygon points={points} fill="none" stroke="var(--ink-muted)" strokeWidth={1.5} />
    </svg>
  );
}