/**
 * plugin-designs/key-cities/index.js — bundle entry for KEY CITIES.
 *
 * Registers ONE custom-element tag:
 *   <key-cities-map profile-config='{"profile":"cities-list"}'></key-cities-map>
 *
 * Same shape as country-posters/index.js — folder = bundle, each flat .vue = a
 * profile, `profile` is the FILENAME not the folder. ProfileLoader lives in @map
 * and cannot glob into a bundle folder, so the BUNDLE evaluates the glob and hands
 * the registry over via app.provide('profileModules').
 *
 * NO COLOR STRATEGIES registered here: this bundle currently ships a list profile
 * only. When the map profile lands it will need one, and it goes in src/colors/
 * where the registry auto-discovers it by filename.
 *
 * NO MAPBOX RTL PLUGIN either — nothing here renders a basemap yet. Adding the
 * plugin call before a map exists would be dead code implying a capability the
 * bundle does not have.
 */

import { defineCustomElement } from 'vue'
import { createPinia } from 'pinia'
import ProfileLoader from '@map/ProfileLoader.vue'
import { createAppI18n } from '@map/i18n/index.js'

// Evaluated by Vite at build time relative to THIS file, so it captures only this
// bundle's profiles.
const profileModules = import.meta.glob('./*.vue')

function buildKeyCitiesElement() {
  return defineCustomElement(ProfileLoader, {
    configureApp(app) {
      // Per-instance Pinia + i18n so multiple embeds on one page never bleed state.
      app.use(createPinia())
      app.use(createAppI18n())
      app.provide('profileModules', profileModules)
    },
  })
}

const KeyCitiesElement = buildKeyCitiesElement()

// Guarded: customElements.define() is one-shot per tag per page session, so an
// IIFE loaded twice would throw without this.
if (typeof customElements !== 'undefined') {
  if (!customElements.get('key-cities-map')) {
    customElements.define('key-cities-map', KeyCitiesElement)
  }
}

export default KeyCitiesElement