<template>
  <div class="address-map">
    <div class="toolbar-row mb-2">
      <h3 class="section-title">Location map</h3>
      <v-spacer />
      <v-btn
        v-if="hasAddress"
        :href="linkUrl"
        target="_blank"
        rel="noopener"
        size="small"
        variant="text"
        prepend-icon="mdi-open-in-new"
      >Open in Google Maps</v-btn>
    </div>

    <div v-if="!hasAddress" class="map-empty quiet text-body-2">
      Enter an address above to preview the location on a map.
    </div>

    <template v-else>
      <div v-if="!show" class="map-empty">
        <v-btn variant="tonal" prepend-icon="mdi-map-search-outline" @click="show = true">Show map</v-btn>
        <div class="quiet text-caption mt-2">{{ activeQuery }}</div>
      </div>
      <iframe
        v-else
        :key="embedUrl"
        :src="embedUrl"
        class="map-frame"
        title="Location map"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
        allowfullscreen
      />
    </template>
  </div>
</template>

<script>
// Embeds an interactive Google map for an address using the keyless maps.google.com `output=embed`
// endpoint (no API key required). The address is debounced so live typing in the form doesn't reload
// the iframe on every keystroke.
export default {
  props: {
    line1: { type: String, default: '' },
    line2: { type: String, default: '' },
    city: { type: String, default: '' },
    region: { type: String, default: '' },
    postalCode: { type: String, default: '' },
    country: { type: String, default: '' },
    // Start with the map already visible (e.g. when viewing an existing contact that has an address).
    autoShow: { type: Boolean, default: false }
  },
  data() {
    return { activeQuery: '', show: this.autoShow, timer: null };
  },
  computed: {
    formattedAddress() {
      return [this.line1, this.line2, this.city, this.region, this.postalCode, this.country]
        .map((part) => String(part || '').trim())
        .filter(Boolean)
        .join(', ');
    },
    hasAddress() {
      return this.formattedAddress.length > 0;
    },
    embedUrl() {
      return `https://maps.google.com/maps?q=${encodeURIComponent(this.activeQuery)}&z=15&output=embed`;
    },
    linkUrl() {
      return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(this.activeQuery)}`;
    }
  },
  watch: {
    // Debounce: only refresh the embedded query a beat after the user stops typing.
    formattedAddress(value) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => { this.activeQuery = value; }, 600);
    }
  },
  mounted() {
    this.activeQuery = this.formattedAddress;
  },
  beforeUnmount() {
    clearTimeout(this.timer);
  }
};
</script>

<style scoped>
.map-frame {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 8px;
  display: block;
}
.map-empty {
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.25);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
</style>
