<!-- [DEF:EnvSelector:Component] -->
<!--
@SEMANTICS: environment, selector, dropdown, migration
@PURPOSE:   Provides a UI component for selecting source and target environments.
@LAYER:     Feature
@RELATION:  BINDS_TO -> environments store

@INVARIANT: Source and target environments must be selectable from the list of configured environments.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { onMount, createEventDispatcher } from 'svelte';
  // [/SECTION]

  // [SECTION: PROPS]
  export let label: string = "Select Environment";
  export let selectedId: string = "";
  export let environments: Array<{id: string, name: string, url: string}> = [];
  // [/SECTION]

  const dispatch = createEventDispatcher();

  // [DEF:handleSelect:Function]
  /**
   * @purpose Dispatches the selection change event.
   * @pre     event.target must be an HTMLSelectElement.
   * @post    selectedId is updated and 'change' event is dispatched.
   * @param   {Event} event - The change event from the select element.
   */
  function handleSelect(event: Event) {
    const target = event.target as HTMLSelectElement;
    selectedId = target.value;
    dispatch('change', { id: selectedId });
  }
  // [/DEF:handleSelect:Function]
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="flex flex-col space-y-1">
  <label for="env-select" class="text-sm font-medium text-gray-700">{label}</label>
  <select
    id="env-select"
    class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
    value={selectedId}
    on:change={handleSelect}
  >
    <option value="" disabled>-- Choose an environment --</option>
    {#each environments as env}
      <option value={env.id}>{env.name} ({env.url})</option>
    {/each}
  </select>
</div>
<!-- [/SECTION] -->

<style>
  /* Component specific styles */
</style>

<!-- [/DEF:EnvSelector:Component] -->