<!-- [DEF:MissingMappingModal:Component] -->
<!--
@SEMANTICS: modal, mapping, prompt, migration
@PURPOSE:   Prompts the user to provide a database mapping when one is missing during migration.
@LAYER:     Feature
@RELATION:  DISPATCHES -> resolve

@INVARIANT: Modal blocks migration progress until resolved or cancelled.
-->

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

  // [SECTION: PROPS]
  export let show: boolean = false;
  export let sourceDbName: string = "";
  export let sourceDbUuid: string = "";
  export let targetDatabases: Array<{uuid: string, database_name: string}> = [];
  // [/SECTION]

  let selectedTargetUuid = "";
  const dispatch = createEventDispatcher();

  // [DEF:resolve:Function]
  // @PURPOSE: Dispatches the resolution event with the selected mapping.
  // @PRE: selectedTargetUuid must be set.
  // @POST: 'resolve' event is dispatched and modal is hidden.
  function resolve() {
    if (!selectedTargetUuid) return;
    dispatch('resolve', {
      sourceDbUuid,
      targetDbUuid: selectedTargetUuid,
      targetDbName: targetDatabases.find(d => d.uuid === selectedTargetUuid)?.database_name
    });
    show = false;
  }
  // [/DEF:resolve:Function]

  // [DEF:cancel:Function]
  // @PURPOSE: Cancels the mapping resolution modal.
  // @PRE: Modal is open.
  // @POST: 'cancel' event is dispatched and modal is hidden.
  function cancel() {
    dispatch('cancel');
    show = false;
  }
  // [/DEF:cancel:Function]
</script>

<!-- [SECTION: TEMPLATE] -->
{#if show}
  <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
        <div>
          <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
            <svg class="h-6 w-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-5">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
              Missing Database Mapping
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">
                The database <strong>{sourceDbName}</strong> is used in the assets being migrated but has no mapping to the target environment. Please select a target database.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-5 sm:mt-6">
          <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"
            bind:value={selectedTargetUuid}
          >
            <option value="" disabled>-- Select Target Database --</option>
            {#each targetDatabases as tDb}
              <option value={tDb.uuid}>{tDb.database_name}</option>
            {/each}
          </select>
        </div>

        <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
          <button
            type="button"
            on:click={resolve}
            disabled={!selectedTargetUuid}
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-400"
          >
            Apply & Continue
          </button>
          <button
            type="button"
            on:click={cancel}
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
          >
            Cancel Migration
          </button>
        </div>
      </div>
    </div>
  </div>
{/if}
<!-- [/SECTION] -->

<style>
  /* Modal specific styles */
</style>

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