<template>
  <!-- Placed machine: reuse the same hover map the machine detail page uses, so
       the zoom, scroll-wheel behaviour and teleport-out-of-clipping-containers
       are identical everywhere instead of reimplemented here. -->
  <LocationMapTooltip
    v-if="machine && hasPosition"
    :left="machine.mapx"
    :top="machine.mapy"
    :levelid="machine.levelid"
    :machineName="machine.machinenumber || machine.name || ''"
  >
    <span class="mmc-chip" :title="hoverTitle">
      {{ machine.machinenumber || machine.name || '-' }}
    </span>
  </LocationMapTooltip>

  <!-- Known machine, never placed on the floor map. Still worth its number:
       against real data 17 of 142 linked machines have no position, and
       dropping them would silently lose the column for those rows. -->
  <span v-else-if="machine" class="mmc-chip" :title="hoverTitle">
    {{ machine.machinenumber || machine.name || '-' }}
  </span>

  <span v-else class="muted">-</span>
</template>

<script setup>
import { computed } from 'vue'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'

const props = defineProps({
  machine: { type: Object, default: null }
})

const hasPosition = computed(() =>
  props.machine && props.machine.mapx != null && props.machine.mapy != null)

// The name and location are not in the chip (it has to stay narrow in a table
// column), so they go in the native tooltip. An unplaced machine says so, since
// otherwise hovering it does nothing and looks broken.
const hoverTitle = computed(() => {
  if (!props.machine) return ''
  const parts = []
  if (props.machine.name) parts.push(props.machine.name)
  if (props.machine.locationname) parts.push(props.machine.locationname)
  if (!hasPosition.value) parts.push('not placed on the floor map')
  return parts.join(' - ')
})
</script>

<style scoped>
.mmc-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap;
  cursor: default;
}
.mmc-chip:hover { border-color: var(--primary); }
</style>
