import React from 'react';
import type { NodeConfig } from './types';

const BADGE_SIZE = 18;
const BADGE_GAP = 4;
const TRACE_COLOR = 'var(--running)';
const TAP_COLOR = 'var(--purple)';

interface ConfigBadgeProps {
  nodeWidth: number;
  config: NodeConfig;
  /** True if actual trace data was captured for this processor */
  hasTraceData?: boolean;
}

/** Lucide Footprints icon (24x24 viewBox) scaled to fit badge */
function FootprintsIcon({ color, size }: { color: string; size: number }) {
  const scale = size / 24;
  return (
    <g transform={`scale(${scale})`} stroke={color} strokeWidth={2} fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z" />
      <path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z" />
      <path d="M16 17h4" />
      <path d="M4 13h4" />
    </g>
  );
}

export function ConfigBadge({ nodeWidth, config, hasTraceData }: ConfigBadgeProps) {
  const showTap = !!config.tapExpression;
  const showTrace = config.traceEnabled || hasTraceData;
  if (!showTap && !showTrace) return null;

  const badges: React.ReactNode[] = [];
  let xOffset = nodeWidth;

  // Tap badge: always solid purple circle with white droplet icon
  if (showTap) {
    xOffset -= BADGE_SIZE;
    const cx = BADGE_SIZE / 2;
    const cy = BADGE_SIZE / 2;
    badges.push(
      <g key="tap" transform={`translate(${xOffset}, ${-BADGE_SIZE - 4})`}>
        <circle cx={cx} cy={cy} r={BADGE_SIZE / 2} fill={TAP_COLOR} />
        <g transform="translate(4, 4)" stroke="var(--text-inverse)" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
        </g>
      </g>,
    );
  }

  // Trace badge
  if (showTrace) {
    xOffset -= BADGE_SIZE + (showTap ? BADGE_GAP : 0);
    const cx = BADGE_SIZE / 2;
    const cy = BADGE_SIZE / 2;
    const r = BADGE_SIZE / 2;

    if (hasTraceData) {
      // Data captured: solid teal circle, white icon, pulsing rings
      badges.push(
        <g key="trace" transform={`translate(${xOffset}, ${-BADGE_SIZE - 4})`}>
          <circle cx={cx} cy={cy} r={r} fill="none" stroke={TRACE_COLOR} strokeWidth={2} opacity={0.5}>
            <animate attributeName="r" values={`${r};${r + 8}`} dur="1.5s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
          </circle>
          <circle cx={cx} cy={cy} r={r} fill="none" stroke={TRACE_COLOR} strokeWidth={2} opacity={0.5}>
            <animate attributeName="r" values={`${r};${r + 8}`} dur="1.5s" begin="0.75s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
          </circle>
          <circle cx={cx} cy={cy} r={r} fill={TRACE_COLOR} />
          <g transform={`translate(${(BADGE_SIZE - 14) / 2}, ${(BADGE_SIZE - 14) / 2})`}>
            <FootprintsIcon color="var(--text-inverse)" size={14} />
          </g>
        </g>,
      );
    } else {
      // Configured only: bare teal icon, no circle background
      badges.push(
        <g key="trace" transform={`translate(${xOffset}, ${-BADGE_SIZE - 4})`}>
          <g transform={`translate(${(BADGE_SIZE - 14) / 2}, ${(BADGE_SIZE - 14) / 2})`}>
            <FootprintsIcon color={TRACE_COLOR} size={14} />
          </g>
        </g>,
      );
    }
  }

  return <g className="config-badges">{badges}</g>;
}
