import type { InboxItemAction } from './InboxItem'
import type { KvRow } from './KvPanel'

export type MapNodePulse = 'ok' | 'busy' | 'down'

export interface MapChip {
  label: string
  hot?: boolean
}

export interface MapNodeModel {
  id: string
  title: string
  subtitle?: string
  pulse: MapNodePulse
  chips: MapChip[]
  /** Percent position within the canvas (0–100). */
  x: number
  y: number
  inspectorKvs: KvRow[]
  actions: InboxItemAction[]
}

export interface MapNodeProps {
  node: MapNodeModel
  selected?: boolean
  onSelect?: (id: string) => void
}

const PULSE_CLASS: Record<MapNodePulse, string> = {
  ok: 'bg-success shadow-[0_0_9px_var(--mod-color-success)]',
  busy: 'bg-warning shadow-[0_0_9px_var(--mod-color-warning)]',
  down: 'bg-danger shadow-[0_0_9px_var(--mod-color-danger)]',
}

/** `.node` — one glassmorphism host/cloud card on the infrastructure map. */
export function MapNode({ node, selected, onSelect }: MapNodeProps) {
  return (
    <button
      type="button"
      data-map-node-id={node.id}
      aria-pressed={selected}
      onClick={() => onSelect?.(node.id)}
      className={`absolute min-w-[150px] cursor-pointer rounded-[14px] border px-[15px] py-3 text-left backdrop-blur-[6px] ${
        selected
          ? 'border-accent/60 bg-[rgba(20,28,52,0.88)] shadow-[0_0_30px_rgba(76,110,245,0.25)]'
          : 'border-accent/35 bg-[rgba(20,28,52,0.72)] shadow-[0_0_30px_rgba(76,110,245,0.15)]'
      }`}
      style={{ left: `${node.x}%`, top: `${node.y}%` }}
    >
      <h5 className="mb-[7px] flex items-center gap-[7px] text-[12px] text-white">
        <span className={`h-2 w-2 rounded-full ${PULSE_CLASS[node.pulse]}`} />
        {node.title}
      </h5>
      {node.subtitle ? <div className="mb-1 text-[10.5px] text-[#66759c]">{node.subtitle}</div> : null}
      <div>
        {node.chips.map((chip) => (
          <span
            key={chip.label}
            className={`mr-[3px] mt-0.5 inline-block rounded-[5px] border px-[7px] py-px text-[10.5px] ${
              chip.hot
                ? 'border-danger/40 bg-danger/15 text-[#ff9d9d]'
                : 'border-accent/25 bg-accent/15 text-[#9db4e8]'
            }`}
          >
            {chip.label}
          </span>
        ))}
      </div>
    </button>
  )
}