<!-- #region BackupDashboardModal [C:3] [TYPE Component] [SEMANTICS dashboard,backup,modal] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Modal for scheduling backup of selected dashboards. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [DashboardHubModel] -->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  import { Button } from '$lib/ui';
  import type { DashboardHubModel } from '$lib/models/DashboardHubModel.svelte';

  let { model, environments = [] }: {
    model: DashboardHubModel;
    environments: Array<{ id: string; name: string }>;
  } = $props();
</script>

{#if model.showBackupModal}
  <div
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    onclick={() => (model.showBackupModal = false)}
    onkeydown={(e) => e.key === 'Escape' && (model.showBackupModal = false)}
    role="presentation"
  >
    <div
      class="bg-surface-card rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
      onclick={(e) => e.stopPropagation()}
      role="dialog"
      aria-modal="true"
      tabindex="-1"
      aria-labelledby="backup-modal-title"
      onkeydown={(e) => e.stopPropagation()}
    >
      <div class="px-6 py-4 border-b border-border flex items-center justify-between relative">
        <h2 id="backup-modal-title" class="text-xl font-bold">
          {($t.dashboard?.backup_modal_title ?? 'Backup').replace('{count}', String(model.selectedIds.size))}
        </h2>
        <Button variant="ghost" onclick={() => (model.showBackupModal = false)} class="absolute top-4 right-4 p-2 text-text-subtle hover:text-text-muted hover:bg-surface-muted rounded-full transition-all" aria-label={$t.common?.close_modal}>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </Button>
      </div>
      <div class="px-6 py-4">
        <div class="space-y-6">
          <!-- Env (Read-only) -->
          <div>
            <label for="backup-env" class="block text-sm font-medium text-text-muted mb-1">{$t.dashboard?.environment}</label>
            <div id="backup-env" class="px-4 py-2 bg-surface-muted border border-border rounded-lg text-text font-medium">
              {environments.find((e) => e.id === model.selectedEnv)?.name || model.selectedEnv}
              {$t.dashboard?.read_only}
            </div>
          </div>

          <!-- Selected Dashboards List -->
          <div>
            <p class="block text-sm font-medium text-text mb-2">{$t.dashboard?.selected_dashboards}</p>
            <div class="max-h-40 overflow-y-auto border border-border rounded-lg bg-surface-muted p-2">
              {#each Array.from(model.selectedIds) as id}
                {#each model.allDashboards as d}
                  {#if d.id === id}
                    <div class="flex items-center text-sm py-1 px-2"><span class="text-success mr-2">☑</span><span class="text-text">{d.title}</span></div>
                  {/if}
                {/each}
              {/each}
            </div>
          </div>

          <!-- Schedule -->
          <div>
            <p id="backup-schedule-label" class="block text-sm font-medium text-text mb-2">{$t.dashboard?.schedule}</p>
            <div class="space-y-3" aria-labelledby="backup-schedule-label">
              <label class="flex items-center">
                <input type="radio" name="schedule" value="" bind:group={model.backupSchedule} class="mr-2" />
                <span class="text-sm">{$t.dashboard?.one_time_backup}</span>
              </label>
              <label class="flex items-center">
                <input type="radio" name="schedule" value="0 0 * * *" bind:group={model.backupSchedule} class="mr-2" />
                <span class="text-sm">{$t.dashboard?.schedule_backup}</span>
              </label>
              {#if model.backupSchedule !== ''}
                <div class="ml-6">
                  <label for="cron-expression" class="block text-xs text-text-muted mb-1">{$t.dashboard?.cron_expression}</label>
                  <input id="cron-expression" type="text" class="search-input w-full text-sm" placeholder={$t.dashboard?.cron_placeholder || '0 2 * * * (daily at 2 AM)'} bind:value={model.backupSchedule} />
                  <Button variant="ghost" size="sm" class="text-xs text-primary hover:underline mt-1">{$t.dashboard?.cron_help}</Button>
                </div>
              {/if}
            </div>
          </div>
        </div>
      </div>
      <div class="px-6 py-4 border-t border-border flex justify-end gap-3">
        <Button variant="secondary" size="sm"
          onclick={() => (model.showBackupModal = false)}
          disabled={model.isSubmittingBackup}>{$t.common?.cancel}</Button>
        <Button variant="primary" size="sm"
          onclick={() => model.handleBulkBackup()}
          disabled={model.selectedIds.size === 0 || model.isSubmittingBackup}>
          {model.isSubmittingBackup ? $t.dashboard?.starting : $t.dashboard?.start_backup}
        </Button>
      </div>
    </div>
  </div>
{/if}
<!-- #endregion BackupDashboardModal -->
