<!-- #region MigrationSettings [C:3] [TYPE Component] [SEMANTICS settings, migration, sync, cron, mappings] -->
<!-- @BRIEF Migration sync configuration tab: cron schedule, sync now, mappings table with filtering and pagination. -->
<!-- @LAYER UI -->
<!-- @RELATION BINDS_TO -> [MigrationSettingsModel] -->
<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
<!-- @PRE: API client initialized. -->
<!-- @POST: User can configure sync schedule, trigger sync, and browse resource mappings. -->
<!-- @UX_STATE Loading -> Skeleton/spinner for initial load. -->
<!-- @UX_STATE Loaded -> Full migration sync panel with schedule and mappings table. -->
<!-- @UX_FEEDBACK Toast on save/sync/failure. -->
<script lang="ts">
  import { onMount } from "svelte";
  import { t } from "$lib/i18n/index.svelte.js";
  import { addToast } from "$lib/toasts.svelte.js";
  import { MigrationSettingsModel } from "$lib/models/MigrationSettingsModel.svelte.ts";
  import MigrationMappingsTable from "./MigrationMappingsTable.svelte";
  import HelpTooltip from "$lib/ui/HelpTooltip.svelte";

  let model = $state(new MigrationSettingsModel());

  onMount(() => {
    model.loadSettings();
  });

  async function saveMigrationSettings() {
    await model.saveSettings({ cron: model.cron });
    if (model.success) {
      addToast($t.settings?.save_success || model.success, "success");
    } else if (model.error) {
      addToast($t.settings?.save_failed || model.error, "error");
    }
  }

  async function triggerSyncNow() {
    await model.triggerSyncNow();
    if (model.success) {
      addToast(model.success, model.success.includes("failed") ? "warning" : "success");
    } else if (model.error) {
      addToast($t.settings?.migration_sync_failed || model.error, "error");
    }
  }
</script>

<div class="text-lg font-medium mb-4">
  <h2 class="text-xl font-bold mb-4">
    {$t.settings?.migration_sync_title}
  </h2>
  <p class="text-gray-600 mb-6">
    {$t.settings?.migration_sync_description}
  </p>

  <!-- Cron Configuration -->
  <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-6">
    <h3 class="flex items-center gap-1.5 text-lg font-medium mb-4">
      {$t.settings?.sync_schedule}
      <HelpTooltip text={$t.settings?.help_migration_cron || ""} />
    </h3>
    <div class="flex items-end gap-4">
      <div class="flex-grow">
        <span class="flex items-center gap-1.5">
          <label
            for="migration_cron"
            class="text-sm font-medium text-gray-700"
            >{$t.tasks?.cron_label}</label
          >
          <HelpTooltip text={$t.settings?.help_migration_cron || ""} />
        </span>
        <input
          type="text"
          id="migration_cron"
          bind:value={model.cron}
          placeholder={$t.settings?.migration_cron_placeholder}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 font-mono text-sm"
        />
        <p class="text-xs text-gray-500 mt-1">
          {$t.settings?.migration_cron_hint}
        </p>
      </div>
      <button
        onclick={saveMigrationSettings}
        disabled={model.saving}
        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover h-[42px] min-w-[100px] flex items-center justify-center disabled:opacity-50"
      >
        {model.saving ? $t.settings?.saving : $t.common?.save}
      </button>
      <button
        onclick={triggerSyncNow}
        disabled={model.syncing}
        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 h-[42px] min-w-[150px] flex items-center justify-center gap-2 disabled:opacity-50"
      >
        {#if model.syncing}
          <svg
            class="w-4 h-4 animate-spin"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            ></path></svg
          >
          {$t.settings?.syncing}
        {:else}
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            ></path></svg
          >
          {$t.settings?.sync_now}
        {/if}
      </button>
    </div>
  </div>

  <MigrationMappingsTable refreshKey={model.refreshKey} />
</div>
<!-- #endregion MigrationSettings -->
