{# v0.0.1 데이터 마이그레이션 배너 — Alpine + SSE 폴링 #}
<div
  x-data="{
    candidate: null,
    taskId: null,
    state: 'idle',
    progress: 0,
    error: '',
    async checkCandidate() {
      try {
        const r = await fetch('/api/migration/status');
        const d = await r.json();
        this.candidate = (d && d.candidate === null) ? null : d;
      } catch (e) {
        this.candidate = null;
      }
    },
    async start(mode) {
      const r = await fetch('/api/migration/run', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({mode}),
      });
      if (!r.ok) { this.state = 'failed'; this.error = 'run failed'; return; }
      const d = await r.json();
      this.taskId = d.task_id;
      this.state = 'running';
      this.streamProgress();
    },
    streamProgress() {
      const es = new EventSource('/api/migration/progress?task_id=' + encodeURIComponent(this.taskId));
      es.onmessage = (ev) => {
        try {
          const d = JSON.parse(ev.data);
          this.progress = d.progress;
        } catch (e) { /* ignore */ }
      };
      es.addEventListener('done', () => {
        this.state = 'done';
        es.close();
        setTimeout(() => location.reload(), 1500);
      });
      es.addEventListener('error', (ev) => {
        try {
          const d = JSON.parse(ev.data || '{}');
          this.error = d.error || 'unknown error';
        } catch (e) {
          this.error = 'unknown error';
        }
        this.state = 'failed';
        es.close();
      });
    },
    dismiss() {
      this.candidate = null;
      document.cookie = 'migration_dismissed=1; path=/';
    },
  }"
  x-init="checkCandidate()"
  x-show="candidate !== null && !document.cookie.includes('migration_dismissed=1')"
  x-cloak
  class="migration-banner"
>
  <template x-if="state === 'idle'">
    <div>
      <h3>{{ _("v0.0.1 data detected") }}</h3>
      <p>
        <span x-text="candidate?.total_files"></span> {{ _("files") }}
        (<span x-text="Math.round((candidate?.total_bytes || 0) / 1024 / 1024)"></span> MB)
        — {{ _("Migrate to AssetCacheMCP.") }}
      </p>
      <button @click="start('copy')">{{ _("Copy") }}</button>
      <button @click="start('move')">{{ _("Move") }}</button>
      <button @click="dismiss()">{{ _("Later") }}</button>
    </div>
  </template>
  <template x-if="state === 'running'">
    <div>
      <p>{{ _("Migrating...") }} <span x-text="Math.round((progress || 0) * 100)"></span>%</p>
      <progress :value="progress" max="1"></progress>
    </div>
  </template>
  <template x-if="state === 'done'">
    <p>{{ _("Migration complete. Reloading the new data folder.") }}</p>
  </template>
  <template x-if="state === 'failed'">
    <div>
      <p>{{ _("Migration failed:") }} <span x-text="error"></span></p>
      <button @click="state = 'idle'">{{ _("Retry") }}</button>
    </div>
  </template>
</div>