<template>
  <div class="marker-list-sidebar">
    <!-- Header with add button -->
    <div class="marker-list-header">
      <h3>Marqueurs ({{ markers.length }}/{{ maxMarkers }})</h3>
      <button
        type="button"
        class="k-button k-button-icon"
        @click="$emit('add-marker')"
        :disabled="!canAddMarker"
        title="Ajouter un marqueur"
      >
        <k-icon type="add" />
      </button>
    </div>

    <!-- Geocode search -->
    <div class="geocode-search-container">
      <GeocodeSearch @select-location="$emit('select-location', $event)" />
    </div>

    <!-- Marker list items -->
    <div class="marker-list-items">
      <div
        v-for="(marker, index) in markers"
        :key="marker.id"
        class="marker-item"
        :class="{ active: selectedMarkerId === marker.id }"
        @click="$emit('select-marker', marker.id)"
      >
        <div class="marker-item-content">
          <span class="marker-number">{{ index + 1 }}</span>
          <span class="marker-title">
            {{ marker.title || `Marqueur ${index + 1}` }}
          </span>
        </div>
        <div class="marker-item-actions">
          <button
            type="button"
            class="k-button k-button-small"
            @click.stop="$emit('edit-marker', marker.id)"
            title="Modifier le marqueur"
          >
            <k-icon type="edit" />
          </button>
          <button
            type="button"
            class="k-button k-button-small"
            @click.stop="$emit('delete-marker', marker.id)"
            title="Supprimer le marqueur"
          >
            <k-icon type="trash" />
          </button>
        </div>
      </div>

      <div v-if="markers.length === 0" class="marker-list-empty">
        Cliquez sur la carte pour ajouter des marqueurs
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import GeocodeSearch from './GeocodeSearch.vue';

export default {
  components: {
    GeocodeSearch,
  },

  props: {
    markers: {
      type: Array,
      required: true,
    },
    selectedMarkerId: {
      type: String,
      default: null,
    },
    maxMarkers: {
      type: Number,
      default: 50,
    },
  },

  emits: [
    'add-marker',
    'select-marker',
    'edit-marker',
    'delete-marker',
    'select-location',
  ],

  setup(props) {
    const canAddMarker = computed(() => props.markers.length < props.maxMarkers);

    return {
      canAddMarker,
    };
  },
};
</script>

<style scoped>
.marker-list-sidebar {
  width: var(--marker-list-width, 250px);
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-background);
}

.marker-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}

.marker-list-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  flex: 1;
}

.marker-list-header .k-button-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}

.marker-list-header .k-button-icon .k-icon {
  color: var(--color-black);
}

.marker-list-header .k-button-icon:hover {
  background: var(--color-background);
}

.marker-list-header .k-button-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.geocode-search-container {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}

.marker-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.marker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-sm);
  cursor: pointer;
  transition: all 0.2s;
  color: #000;
}

.marker-item:hover {
  background: var(--color-background);
  border-color: var(--color-focus);
  color: #fff;
}

.marker-item.active {
  background: var(--color-focus-outline);
  border-color: var(--color-focus);
}

.marker-item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.marker-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-gray-400);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.marker-item.active .marker-number {
  background: var(--color-focus);
}

.marker-title {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marker-item-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.k-button-small {
  padding: 0.25rem 0.5rem;
  min-height: auto;
}

.marker-list-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
}
</style>
