<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'

const integrations = [
  {
    name: 'Google Maps',
    package: '@googlemaps/js-api-loader',
    description: 'Full-featured maps with Places, Directions, and Street View. Requires an API key.',
    docs: 'https://developers.google.com/maps/documentation/javascript',
  },
  {
    name: 'Mapbox GL JS',
    package: 'mapbox-gl',
    description: 'High-performance vector tile maps with rich customization and offline support.',
    docs: 'https://docs.mapbox.com/mapbox-gl-js/',
  },
  {
    name: 'Leaflet + vue-leaflet',
    package: '@vue-leaflet/vue-leaflet',
    description: 'Lightweight, open-source maps using OpenStreetMap tiles. No API key required.',
    docs: 'https://vue-leaflet.github.io/vue-leaflet/',
  },
]
</script>

<template>
  <DashboardLayout>
    <div class="space-y-6">

      <!-- Placeholder map area -->
      <div class="relative overflow-hidden rounded-2xl bg-white shadow-soft-md">
        <div class="flex h-96 items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200">
          <!-- Grid lines to suggest a map -->
          <svg class="absolute inset-0 h-full w-full opacity-30" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#adb5bd" stroke-width="0.5"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>

          <!-- Simulated pin -->
          <div class="relative flex flex-col items-center">
            <div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-primary shadow-primary">
              <span class="material-icons text-2xl text-white">place</span>
            </div>
            <div class="-mt-1 h-3 w-px bg-primary" />
            <div class="mt-4 rounded-xl bg-white px-6 py-4 shadow-soft-lg text-center">
              <p class="text-sm font-bold text-dark">Map Integration</p>
              <p class="text-xs text-secondary">Mount your map library component here</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Integration options -->
      <div class="rounded-2xl bg-white p-6 shadow-soft-md">
        <h6 class="mb-1 text-sm font-bold text-dark">Recommended Integrations</h6>
        <p class="mb-6 text-xs text-secondary">
          Maps require a third-party library. Choose one and mount it inside
          <code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">MapsView.vue</code>.
        </p>
        <div class="grid gap-4 sm:grid-cols-3">
          <div
            v-for="lib in integrations"
            :key="lib.name"
            class="rounded-xl border border-gray-200 p-4 transition-shadow hover:shadow-soft-sm"
          >
            <p class="font-semibold text-dark text-sm">{{ lib.name }}</p>
            <code class="mt-1 block text-xs text-secondary font-mono">{{ lib.package }}</code>
            <p class="mt-2 text-xs text-secondary leading-relaxed">{{ lib.description }}</p>
            <a
              :href="lib.docs"
              target="_blank"
              rel="noopener"
              class="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
            >
              Docs <span class="material-icons text-xs leading-none">open_in_new</span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </DashboardLayout>
</template>
