<!-- #region MissingMappingModal [C:3] [TYPE Component] [SEMANTICS mapping, modal, migration, prompt, resolve] -->
<!-- @BRIEF Component component: components/MissingMappingModal.svelte -->
<!-- @LAYER UI -->
<!--
@SEMANTICS: modal, mapping, prompt, migration
@PURPOSE:   Prompts the user to provide a database mapping when one is missing during migration.
@LAYER     Feature
@RELATION  BINDS_TO -> [EXT:frontend:onresolve]
@RELATION  BINDS_TO -> [EXT:frontend:oncancel]

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

<script lang="ts">
  // [SECTION: PROPS]
  let {
    show = false,
    sourceDbName = "",
    sourceDbUuid = "",
    targetDatabases = [],
    onresolve = () => {},
    oncancel = () => {},
  } = $props();

  // [/SECTION]

  let selectedTargetUuid = $state("");

  // #region resolve:Function [TYPE Function]
  // @PURPOSE: Resolves the missing mapping via callback prop.
  // @PRE: selectedTargetUuid must be set.
  // @POST: Parent callback receives mapping payload and modal closes.
  function resolve() {
    if (!selectedTargetUuid) return;
    onresolve({
      sourceDbUuid,
      targetDbUuid: selectedTargetUuid,
      targetDbName: targetDatabases.find(d => d.uuid === selectedTargetUuid)?.database_name
    });
    show = false;
  }
  // #endregion resolve:Function

  // #region cancel:Function [TYPE Function]
  // @PURPOSE: Cancels the mapping resolution modal.
  // @PRE: Modal is open.
  // @POST: Parent cancel callback is invoked and modal is hidden.
  function cancel() {
    oncancel();
    show = false;
  }
  // #endregion 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"
            onclick={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"
            onclick={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] -->


<!-- #endregion MissingMappingModal -->
