<script setup>
import { inject } from 'vue'
import { SVC_COLORS } from 'src/composables/useHelpers'

const props = defineProps({
  visible: Boolean,
  panelW: Number,
  selectedTechId: String,
  geoFixJob: Object,
  mapContainer: Object, // template ref
})

const emit = defineEmits([
  'close', 'resize-start', 'cancel-geofix',
])

const store = inject('store')
const TECH_COLORS = inject('TECH_COLORS')
</script>

<template>
<template v-if="visible">
  <div class="sb-map-backdrop" @click="emit('close')"></div>
  <div class="sb-map-panel" @click.stop="()=>{}" :style="`width:${panelW}px;min-width:${panelW}px`">
    <div class="sb-map-resize-handle" @mousedown.prevent="emit('resize-start', $event)"></div>
    <div class="sb-map-bar" :class="{ 'sb-map-bar-geofix': geoFixJob }">
      <span class="sb-map-title">Carte</span>
      <template v-if="geoFixJob">
        <span class="sb-geofix-hint">📍 Cliquer sur la carte pour placer <strong>{{ geoFixJob.subject }}</strong></span>
        <button class="sb-geofix-cancel" @click="emit('cancel-geofix')">✕ Annuler</button>
      </template>
      <template v-else>
        <span v-if="selectedTechId" class="sb-map-tech"
              :style="'color:'+TECH_COLORS[store.technicians.find(t=>t.id===selectedTechId)?.colorIdx||0]">
          ● {{ store.technicians.find(t=>t.id===selectedTechId)?.fullName }}
          <span class="sb-map-route-hint">· Glisser une job sur le trajet</span>
        </span>
        <span v-else class="sb-map-hint">Cliquer un technicien pour voir son trajet</span>
        <button class="sb-map-close" @click="emit('close')">✕</button>
      </template>
    </div>
    <div class="sb-map-legend">
      <div v-for="(col, lbl) in SVC_COLORS" :key="lbl" class="sb-legend-item">
        <span class="sb-legend-dot" :style="'background:'+col"></span>{{ lbl }}
      </div>
    </div>
    <div ref="mapContainer" class="sb-map"></div>
  </div>
</template>
</template>
