<script setup lang="ts">
import { ref } from 'vue'
import Icon from '@/components/ds/core/Icon.vue'
import Button from '@/components/ds/core/Button.vue'
import Input from '@/components/ds/forms/Input.vue'

const props = defineProps<{
  warps: Record<string, { x: number; y: number; z: number }>
}>()

const emit = defineEmits<{
  'update:warps': [warps: Record<string, { x: number; y: number; z: number }>]
}>()

const newWarpName = ref('')

function addWarp() {
  const name = newWarpName.value.trim()
  if (!name || props.warps[name]) return
  const updated = { ...props.warps, [name]: { x: 0, y: 0, z: 0 } }
  emit('update:warps', updated)
  newWarpName.value = ''
}

function removeWarp(name: string) {
  const updated = { ...props.warps }
  delete updated[name]
  emit('update:warps', updated)
}
</script>

<template>
  <div class="warp-editor">
    <div class="warp-editor__label">Warps</div>

    <!-- Add warp row -->
    <div class="warp-editor__add">
      <Input
        v-model="newWarpName"
        placeholder="Warp name..."
        :mono="true"
        style="flex: 1"
        @keydown.enter="addWarp"
      />
      <Button
        size="sm"
        icon="plus"
        :disabled="!newWarpName.trim()"
        @click="addWarp"
      >Add</Button>
    </div>

    <!-- Empty state -->
    <div v-if="Object.keys(warps).length === 0" class="warp-editor__empty">
      No warps defined. Add warps here and set coordinates in-game.
    </div>

    <!-- Warp list -->
    <div
      v-for="(coords, name) in warps"
      :key="name"
      class="warp-row"
    >
      <div class="warp-row__id">
        <span class="warp-row__name">{{ name }}</span>
        <span class="warp-row__coords">
          {{ (coords as { x: number; y: number; z: number }).x.toFixed(1) }},
          {{ (coords as { x: number; y: number; z: number }).y.toFixed(1) }},
          {{ (coords as { x: number; y: number; z: number }).z.toFixed(1) }}
        </span>
      </div>
      <button
        class="warp-row__remove"
        type="button"
        :aria-label="`Remove warp ${name}`"
        @click="removeWarp(name as string)"
      >
        <Icon name="trash-2" :size="14" :stroke-width="2" />
      </button>
    </div>
  </div>
</template>

<style scoped>
.warp-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.warp-editor__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warp-editor__add {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.warp-editor__empty {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4) 0;
}

.warp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  background: var(--surface-raised);
  box-shadow: var(--ring-default);
  border-radius: var(--radius-md);
}

.warp-row__id {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.warp-row__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.warp-row__coords {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.warp-row__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.warp-row__remove:hover {
  background: var(--status-offline-soft);
  color: var(--status-offline);
}

.warp-row__remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
</style>
