<template>
  <div class="ride-map" :style="{ height: mapHeight }">
    <!-- Loading -->
    <div v-if="loading" class="ride-map__loading">
      <q-spinner color="primary" size="48px" />
      <span>Caricamento mappa...</span>
    </div>

    <!-- Mappa Leaflet -->
    <div ref="mapContainer" class="ride-map__container"></div>

    <!-- Controlli -->
    <div class="ride-map__controls">
      <q-btn
        round
        color="white"
        text-color="dark"
        icon="my_location"
        size="sm"
        @click="centerOnUser"
      >
        <q-tooltip>La mia posizione</q-tooltip>
      </q-btn>

      <q-btn
        round
        color="white"
        text-color="dark"
        icon="zoom_out_map"
        size="sm"
        @click="fitBounds"
      >
        <q-tooltip>Mostra tutto il percorso</q-tooltip>
      </q-btn>

      <q-btn
        v-if="showFullscreenButton"
        round
        color="white"
        text-color="dark"
        :icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
        size="sm"
        @click="toggleFullscreen"
      >
        <q-tooltip>{{ isFullscreen ? 'Esci' : 'Schermo intero' }}</q-tooltip>
      </q-btn>
    </div>

    <!-- Info percorso -->
    <div v-if="routeInfo && showRouteInfo" class="ride-map__route-info">
      <div class="ride-map__route-info-item">
        <q-icon name="route" size="18px" />
        <span>{{ routeInfo.distance }} km</span>
      </div>
      <div class="ride-map__route-info-item">
        <q-icon name="schedule" size="18px" />
        <span>{{ formattedDuration }}</span>
      </div>
    </div>

    <!-- Legenda -->
    <div v-if="showLegend" class="ride-map__legend">
      <div class="ride-map__legend-item">
        <div class="ride-map__legend-marker ride-map__legend-marker--start"></div>
        <span>Partenza</span>
      </div>
      <div class="ride-map__legend-item">
        <div class="ride-map__legend-marker ride-map__legend-marker--end"></div>
        <span>Arrivo</span>
      </div>
      <div v-if="waypoints.length > 0" class="ride-map__legend-item">
        <div class="ride-map__legend-marker ride-map__legend-marker--waypoint"></div>
        <span>Tappe</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./RideMap.ts" />
<style lang="scss" src="./RideMap.scss" />
