<!-- [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 { t } from '../lib/i18n';
  // [/SECTION]

  // [SECTION: PROPS]
  let {
    label = "",
    selectedId = "",
    environments = [],
    onchange = () => {},
  } = $props();

  // [/SECTION]

  // [DEF:handleSelect:Function]
  /**
   * @purpose Propagates the selection change through a callback prop.
   * @pre     event.target must be an HTMLSelectElement.
   * @post    selectedId is updated and parent callback receives the selected environment id.
   * @param   {Event} event - The change event from the select element.
   */
  function handleSelect(event: Event) {
    const target = event.target as HTMLSelectElement;
    selectedId = target.value;
    onchange({ 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}
    onchange={handleSelect}
  >
    <option value="" disabled>{$t.common?.choose_environment}</option>
    {#each environments as env}
      <option value={env.id}>{env.name} ({env.url})</option>
    {/each}
  </select>
</div>
<!-- [/SECTION] -->


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