// Auto-extracted from backup-page.js (verbatim) — augments BackupPage.prototype. Loaded after the base.
Object.assign(BackupPage.prototype, {
    renderMigrate() {
        const body  = document.getElementById('backup-migrate-body');
        const empty = document.getElementById('backup-migrate-empty');
        if (!body || !empty) return;

        const data = this.migrate || {};
        const locations = (data.locations || []).filter(l => (l.hosts || []).length > 0);

        if (!locations.length) {
            body.innerHTML = '';
            empty.hidden = false;
            return;
        }
        empty.hidden = true;

        // Group: one card per source-host, with that host's apps listed underneath.
        // We collapse across locations — if the same host appears in two locations,
        // we still show it once with the union of apps (the per-app row carries
        // which location it came from). Most setups have one shared location anyway.
        const installed = new Set(data.destination?.installed_apps || []);
        const html = locations.map(loc => `
            <div class="backup-migrate-location">
                <div class="backup-card-header" style="margin-bottom:8px">
                    <h3 style="margin:0">${this.escape(loc.name || 'Location')}</h3>
                    <span class="backup-card-hint">${(loc.hosts || []).length} other host${loc.hosts.length === 1 ? '' : 's'} backing up here</span>
                </div>
                ${loc.hosts.map(host => {
                    const peerName = (this.hostnameToPeerName || {})[host.hostname];
                    const headerLabel = peerName
                        ? `<strong style="font-size:1.05em">${this.escape(peerName)}</strong><span class="backup-card-hint" style="margin-left:6px; font-size:.85em">host: <code>${this.escape(host.hostname)}</code></span>`
                        : `<strong style="font-size:1.05em">${this.escape(host.hostname)}</strong>`;
                    return `
                    <div class="backup-migrate-host" style="border:1px solid var(--border-color, #2a2a2a); border-radius:8px; padding:14px; margin-bottom:12px">
                        <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px">
                            <div>
                                ${headerLabel}
                                <span class="backup-card-hint" style="margin-left:10px">${(host.apps || []).length} app${host.apps.length === 1 ? '' : 's'} available</span>
                            </div>
                            <button class="backup-primary-btn" data-action="migrate-host"
                                data-loc="${loc.idx}" data-host="${this.escape(host.hostname)}">
                                Migrate every app from this host
                            </button>
                        </div>
                        <div class="backup-migrate-apps" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px">
                            ${(host.apps || []).map(app => {
                                const collide = installed.has(app.slug);
                                return `
                                <div class="backup-migrate-app" style="display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--surface-2, #1a1a1a); border-radius:6px">
                                    <div style="display:flex; flex-direction:column; min-width:0">
                                        <span style="display:flex; align-items:center; gap:8px">
                                            <strong>${this.escape(app.slug)}</strong>
                                            ${collide ? `<span class="backup-status-dot warn" title="Already installed here"></span>` : ''}
                                        </span>
                                        <span class="backup-card-hint" style="font-size:.82em">
                                            ${app.snapshots} snapshot${app.snapshots === 1 ? '' : 's'} · latest ${this.escape(this.formatRelativeTime(app.latest_date))}
                                        </span>
                                    </div>
                                    <button class="backup-secondary-btn" data-action="migrate-app"
                                        data-loc="${loc.idx}" data-host="${this.escape(host.hostname)}" data-app="${this.escape(app.slug)}">
                                        Migrate
                                    </button>
                                </div>
                                `;
                            }).join('')}
                        </div>
                    </div>
                `;
                }).join('')}
            </div>
        `).join('');

        body.innerHTML = html;
    },
    formatRelativeTime(iso) {
        if (!iso) return 'never';
        const t = Date.parse(iso);
        if (!t) return iso;
        const diff = Date.now() - t;
        const minute = 60_000, hour = 60 * minute, day = 24 * hour;
        if (diff < hour)    return `${Math.max(1, Math.round(diff / minute))} min ago`;
        if (diff < day)     return `${Math.round(diff / hour)} h ago`;
        if (diff < 7 * day) return `${Math.round(diff / day)} d ago`;
        return new Date(t).toISOString().slice(0, 10);
    },
    openMigrateModal({ mode, locIdx, host, app }) {
        const modal = document.getElementById('backup-migrate-modal');
        const body  = document.getElementById('backup-migrate-modal-body');
        if (!modal || !body) return;

        const dest = this.migrate?.destination || {};
        const installed = new Set(dest.installed_apps || []);
        const running   = new Set(dest.running_apps   || []);
        const locName = this.locName(locIdx);

        // App-mode: one specific app. Host-mode: every app from the host.
        let targetApps = [];
        if (mode === 'app') {
            targetApps = [app];
        } else {
            const loc = (this.migrate?.locations || []).find(l => l.idx === locIdx);
            const h = (loc?.hosts || []).find(x => x.hostname === host);
            targetApps = (h?.apps || []).map(a => a.slug);
        }
        const collisions = targetApps.filter(a => installed.has(a));
        const collisionsRunning = collisions.filter(a => running.has(a));

        const intro = mode === 'app'
            ? `<p>Migrate <strong>${this.escape(app)}</strong> from <strong>${this.escape(host)}</strong> via <strong>${this.escape(locName)}</strong> onto this host.</p>`
            : `<p>Migrate <strong>every app</strong> (${targetApps.length}) from <strong>${this.escape(host)}</strong> via <strong>${this.escape(locName)}</strong> onto this host.</p>`;

        let collisionNote = '';
        if (collisions.length) {
            collisionNote = `
                <p class="backup-card-hint" style="color:var(--warning, #d97706); margin-top:8px">
                    ⚠ Already installed here: ${collisions.map(c => `<code>${this.escape(c)}</code>`).join(', ')}.
                    These will be <strong>replaced</strong>.
                    ${collisionsRunning.length ? `Currently running: ${collisionsRunning.map(c => `<code>${this.escape(c)}</code>`).join(', ')} — will be stopped first.` : ''}
                </p>
            `;
        }

        body.innerHTML = `
            ${intro}
            ${collisionNote}
            <div style="margin-top:14px; display:flex; flex-direction:column; gap:8px">
                <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer">
                    <input type="checkbox" id="migrate-opt-pre-backup" ${collisions.length ? 'checked' : 'disabled'}>
                    <span>
                        Back up the destination's existing copy first
                        <span class="backup-card-hint" style="display:block; font-size:.85em">
                            Safety net: snapshot the current ${mode === 'app' ? this.escape(app) : 'app'} into your first
                            enabled backup location (tagged <code>pre-migrate</code>) before wipe.
                            ${collisions.length ? '' : 'No collision — nothing to back up.'}
                        </span>
                    </span>
                </label>
                <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer">
                    <input type="checkbox" id="migrate-opt-rewrite-urls" checked>
                    <span>
                        Rewrite host-bound URLs to this host
                        <span class="backup-card-hint" style="display:block; font-size:.85em">
                            Replaces <code>CFG_*_URL</code>, <code>*_DOMAIN</code>, <code>*_HOSTNAME</code> with this
                            host's values. Uncheck only if you want the moved app to keep claiming the source's hostname.
                        </span>
                    </span>
                </label>
            </div>
        `;
        modal.dataset.mode   = mode;
        modal.dataset.locIdx = String(locIdx);
        modal.dataset.host   = host;
        modal.dataset.app    = app || '';
        modal.classList.add('open');
    },
    async confirmMigrate() {
        const modal = document.getElementById('backup-migrate-modal');
        if (!modal) return;
        const { mode, locIdx, host, app } = modal.dataset;
        const preBackup = document.getElementById('migrate-opt-pre-backup')?.checked;
        const rewrite   = document.getElementById('migrate-opt-rewrite-urls')?.checked;

        // The bash CLI defaults are: pre-backup ON, URL rewrite ON. Opt-out flags
        // only get appended when the user un-ticks; matches the kernel's defaults.
        const opts = [];
        if (preBackup === false) opts.push('--no-pre-backup');
        if (rewrite   === false) opts.push('--keep-urls');
        const optStr = opts.length ? ' ' + opts.join(' ') : '';

        this.closeAllModals();
        if (mode === 'app') {
            await this.runTask(
                `libreportal restore migrate app ${app} ${host} ${locIdx}${optStr}`,
                'restore', app);
        } else {
            await this.runTask(
                `libreportal restore migrate system ${host} ${locIdx}${optStr}`,
                'restore', null);
        }
    },
});