{% extends "base.html" %}

{% block title %}客户端定制 · RustDesk 客户端定制平台{% endblock %}

{% block content %}
<div class="page-head">
    <h1 class="page-title">定制 RustDesk 客户端</h1>
    <p class="page-subtitle">填写以下配置并提交，系统将通过 {{ build_platform_label|default:"GitHub" }} Actions 自动构建专属客户端，通常需要 30～45 分钟，可在「我的构建」中随时查看进度。</p>
</div>

<form id="myForm" action="/generator" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    {# ---------- 平台与版本 ---------- #}
    <div class="card">
        <div class="card-header"><svg class="icon"><use href="#i-monitor"/></svg> 目标平台与版本</div>
        <div class="card-body">
            <div class="platform-grid">
                <div class="platform-card active" data-platform="windows">
                    <svg class="brand-icon"><use href="#b-windows"/></svg>
                    <div class="platform-name">Windows</div>
                    <div class="platform-tag">64 位</div>
                </div>
                <div class="platform-card" data-platform="windows-x86">
                    <svg class="brand-icon"><use href="#b-windows"/></svg>
                    <div class="platform-name">Windows</div>
                    <div class="platform-tag">32 位</div>
                </div>
                <div class="platform-card" data-platform="linux">
                    <svg class="brand-icon"><use href="#b-linux"/></svg>
                    <div class="platform-name">Linux</div>
                    <div class="platform-tag">deb / rpm 等</div>
                </div>
                <div class="platform-card" data-platform="android">
                    <svg class="brand-icon"><use href="#b-android"/></svg>
                    <div class="platform-name">Android</div>
                    <div class="platform-tag">APK</div>
                </div>
                <div class="platform-card" data-platform="macos">
                    <svg class="brand-icon"><use href="#b-apple"/></svg>
                    <div class="platform-name">macOS</div>
                    <div class="platform-tag">dmg</div>
                </div>
            </div>
            {{ form.platform }}

            <div class="grid-2" style="margin-top:20px">
                <div class="field" style="margin-bottom:0">
                    <label for="{{ form.version.id_for_label }}">RustDesk 版本</label>
                    {{ form.version }}
                    {% if version_source == 'github' %}
                    <div class="version-note is-live">
                        <svg class="icon"><use href="#b-github"/></svg>
                        版本列表来自 GitHub 官方仓库 rustdesk/rustdesk，跟随官方发版自动更新
                    </div>
                    {% else %}
                    <div class="version-note is-fallback">
                        <svg class="icon"><use href="#i-alert"/></svg>
                        官方版本列表暂时获取失败，当前显示内置版本列表；保存配置或配置代理后会自动重试
                    </div>
                    {% endif %}
                    {% if form.version.help_text %}<div class="help-text">{{ form.version.help_text }}</div>{% endif %}
                </div>
                <div class="field field-check-control">
                    <label class="check-item">
                        {{ form.delayFix }} <span>修复使用第三方 API 时的连接延迟问题</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {# ---------- 配置方案：账号绑定 / 载入 / 另存 / 导入导出 ---------- #}
    <div class="card">
        <div class="card-header"><svg class="icon"><use href="#i-save"/></svg> 配置方案（保存 · 载入 · 导入导出）</div>
        <div class="card-body">
            <p class="field-hint" style="margin:0 0 14px">
                把当前配置「另存为方案」后与账号绑定，下次直接选择方案即可填表创建构建任务；
                也可导出 JSON 本地备份、从 JSON 文件导入，或前往
                <a href="{% url 'saved_configs' %}">配置文件管理页</a>统一维护。
            </p>
            <div class="profile-row">
                <select id="profileSelect" class="form-control">
                    <option value="">— 选择已保存的配置方案 —</option>
                    {% for p in profiles %}
                    <option value="{{ p.id }}">{{ p.name }}</option>
                    {% endfor %}
                </select>
                <button type="button" class="btn btn-secondary" id="loadProfileBtn">
                    <svg class="icon"><use href="#i-zap"/></svg> 载入方案
                </button>
                <a class="btn btn-secondary" href="{% url 'saved_configs' %}">
                    <svg class="icon"><use href="#i-list"/></svg> 管理配置文件
                </a>
            </div>
            <div class="profile-row">
                <input type="text" id="profileName" class="form-control" maxlength="100"
                       placeholder="方案名称，如：公司标准-Windows 版">
                <button type="button" class="btn btn-primary" id="saveProfileBtn">
                    <svg class="icon"><use href="#i-save"/></svg> 另存当前配置为方案
                </button>
                <button type="button" class="btn btn-secondary" onclick="saveFormData()">
                    <svg class="icon"><use href="#i-file-down"/></svg> 导出为 JSON 文件
                </button>
                <button type="button" class="btn btn-secondary" onclick="loadFormData()">
                    <svg class="icon"><use href="#i-file-up"/></svg> 从 JSON 文件导入
                </button>
                <input type="file" id="fileInput" style="display:none;" accept=".json,application/json">
            </div>
            <div id="profileMsg"></div>
        </div>
    </div>

    <div class="grid-2">
        {# ---------- 常规 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-settings"/></svg> 常规设置</div>
            <div class="card-body">
                <div class="field">
                    <label for="{{ form.exename.id_for_label }}">{{ form.exename.label }}</label>
                    {{ form.exename }}
                    <span id="filenameError" class="inline-error"></span>
                    {{ form.exename.errors }}
                    {% if form.exename.help_text %}<div class="field-hint">{{ form.exename.help_text }}</div>{% endif %}
                </div>
                <div class="field">
                    <label for="{{ form.appname.id_for_label }}">{{ form.appname.label }}</label>
                    {{ form.appname }}
                    {{ form.appname.errors }}
                    {% if form.appname.help_text %}<div class="field-hint">{{ form.appname.help_text }}</div>{% endif %}
                </div>
                <div class="field radio-group">
                    <label class="field-label">{{ form.direction.label }}</label>
                    {{ form.direction }}
                </div>
                <div class="field">
                    <label for="{{ form.installation.id_for_label }}">{{ form.installation.label }}</label>
                    {{ form.installation }}
                </div>
                <div class="field">
                    <label for="{{ form.settings.id_for_label }}">{{ form.settings.label }}</label>
                    {{ form.settings }}
                </div>
                <div class="field" style="margin-bottom:0">
                    <label for="{{ form.androidappid.id_for_label }}">{{ form.androidappid.label }}</label>
                    {{ form.androidappid }}
                    {% if form.androidappid.help_text %}<div class="field-hint">{{ form.androidappid.help_text }}</div>{% endif %}
                </div>
            </div>
        </div>

        {# ---------- 自定义服务器 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-server"/></svg> 自定义服务器</div>
            <div class="card-body">
                <div class="grid-2">
                    <div class="field">
                        <label for="{{ form.serverIP.id_for_label }}">{{ form.serverIP.label }}</label>
                        {{ form.serverIP }}
                        {% if form.serverIP.help_text %}<div class="field-hint">{{ form.serverIP.help_text }}</div>{% endif %}
                    </div>
                    <div class="field">
                        <label for="{{ form.serverPort.id_for_label }}">{{ form.serverPort.label }}</label>
                        {{ form.serverPort }}
                    </div>
                </div>
                <div class="field">
                    <label for="{{ form.apiServer.id_for_label }}">{{ form.apiServer.label }}</label>
                    {{ form.apiServer }}
                    {% if form.apiServer.help_text %}<div class="field-hint">{{ form.apiServer.help_text }}</div>{% endif %}
                </div>
                <div class="field">
                    <label for="{{ form.key.id_for_label }}">{{ form.key.label }}</label>
                    {{ form.key }}
                </div>
                <div class="field">
                    <label for="{{ form.urlLink.id_for_label }}">{{ form.urlLink.label }}</label>
                    {{ form.urlLink }}
                    {% if form.urlLink.help_text %}<div class="field-hint">{{ form.urlLink.help_text }}</div>{% endif %}
                </div>
                <div class="field">
                    <label for="{{ form.downloadLink.id_for_label }}">{{ form.downloadLink.label }}</label>
                    {{ form.downloadLink }}
                    {% if form.downloadLink.help_text %}<div class="field-hint">{{ form.downloadLink.help_text }}</div>{% endif %}
                </div>
                <div class="field" style="margin-bottom:0">
                    <label for="{{ form.compname.id_for_label }}">{{ form.compname.label }}</label>
                    {{ form.compname }}
                    {{ form.compname.errors }}
                    {% if form.compname.help_text %}<div class="field-hint">{{ form.compname.help_text }}</div>{% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="grid-2">
        {# ---------- 安全 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-shield"/></svg> 安全设置</div>
            <div class="card-body">
                <div class="field">
                    <label for="{{ form.passApproveMode.id_for_label }}">{{ form.passApproveMode.label }}</label>
                    {{ form.passApproveMode }}
                </div>
                <div class="field">
                    <label for="{{ form.permanentPassword.id_for_label }}">{{ form.permanentPassword.label }}</label>
                    {{ form.permanentPassword }}
                    {% if form.permanentPassword.help_text %}<div class="field-hint">{{ form.permanentPassword.help_text }}</div>{% endif %}
                </div>
                <div id="passwordRequirement" class="inline-warning">使用「隐藏连接窗口」功能时，请先设置固定访问密码。</div>
                <label class="check-item" for="{{ form.denyLan.id_for_label }}">{{ form.denyLan }} <span>禁止局域网发现</span></label>
                <label class="check-item" for="{{ form.enableDirectIP.id_for_label }}">{{ form.enableDirectIP }} <span>允许直接 IP 直连</span></label>
                <label class="check-item" for="{{ form.autoClose.id_for_label }}">{{ form.autoClose }} <span>用户无操作时自动断开入站会话</span></label>
                <label class="check-item" for="{{ form.hidecm.id_for_label }}">{{ form.hidecm }} <span>允许在远程画面中隐藏连接窗口</span></label>
            </div>
        </div>

        {# ---------- 外观 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-image"/></svg> 外观定制</div>
            <div class="card-body">
                {{ form.iconbase64.as_hidden }}
                {{ form.logobase64.as_hidden }}
                {{ form.privacybase64.as_hidden }}
                <div class="field">
                    <label for="{{ form.iconfile.id_for_label }}">{{ form.iconfile.label }}</label>
                    {{ form.iconfile }}
                    {{ form.iconfile.errors }}
                    {% if form.iconfile.help_text %}<div class="field-hint">{{ form.iconfile.help_text }}</div>{% endif %}
                    <div id="icon-preview" class="image-preview"></div>
                </div>
                <div class="field">
                    <label for="{{ form.logofile.id_for_label }}">{{ form.logofile.label }}</label>
                    {{ form.logofile }}
                    {% if form.logofile.help_text %}<div class="field-hint">{{ form.logofile.help_text }}</div>{% endif %}
                    <div id="logo-preview" class="image-preview"></div>
                </div>
                <div class="field">
                    <label for="{{ form.privacyfile.id_for_label }}">{{ form.privacyfile.label }}</label>
                    {{ form.privacyfile }}
                    {% if form.privacyfile.help_text %}<div class="field-hint">{{ form.privacyfile.help_text }}</div>{% endif %}
                    <div id="privacy-preview" class="image-preview photo"></div>
                </div>
                <div class="grid-2">
                    <div class="field" style="margin-bottom:0">
                        <label for="{{ form.theme.id_for_label }}">主题</label>
                        {{ form.theme }}
                    </div>
                    <div class="field" style="margin-bottom:0">
                        <label for="{{ form.themeDorO.id_for_label }}">主题生效方式</label>
                        {{ form.themeDorO }}
                    </div>
                </div>
                <div class="field-hint">「默认」仅设定初始主题，客户端用户可自行更改；「强制锁定」后用户无法更改主题。</div>
            </div>
        </div>
    </div>

    <div class="grid-2">
        {# ---------- 权限 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-lock"/></svg> 权限设置</div>
            <div class="card-body">
                <div class="field">
                    <label for="{{ form.permissionsDorO.id_for_label }}">权限生效方式</label>
                    {{ form.permissionsDorO }}
                    <div class="field-hint">「默认」用户仍可自行修改；「强制锁定」后用户无法修改以下权限。</div>
                </div>
                <div class="field">
                    <label for="{{ form.permissionsType.id_for_label }}">{{ form.permissionsType.label }}</label>
                    {{ form.permissionsType }}
                </div>
                <div class="check-grid">
                    <label class="check-item" for="{{ form.enableKeyboard.id_for_label }}">{{ form.enableKeyboard }} <span>键盘 / 鼠标控制</span></label>
                    <label class="check-item" for="{{ form.enableClipboard.id_for_label }}">{{ form.enableClipboard }} <span>剪贴板同步</span></label>
                    <label class="check-item" for="{{ form.enableFileTransfer.id_for_label }}">{{ form.enableFileTransfer }} <span>文件传输</span></label>
                    <label class="check-item" for="{{ form.enableAudio.id_for_label }}">{{ form.enableAudio }} <span>音频传输</span></label>
                    <label class="check-item" for="{{ form.enableTCP.id_for_label }}">{{ form.enableTCP }} <span>TCP 隧道</span></label>
                    <label class="check-item" for="{{ form.enableRemoteRestart.id_for_label }}">{{ form.enableRemoteRestart }} <span>远程重启</span></label>
                    <label class="check-item" for="{{ form.enableRecording.id_for_label }}">{{ form.enableRecording }} <span>会话录制</span></label>
                    <label class="check-item" for="{{ form.enableBlockingInput.id_for_label }}">{{ form.enableBlockingInput }} <span>屏蔽被控端键鼠</span></label>
                    <label class="check-item" for="{{ form.enableRemoteModi.id_for_label }}">{{ form.enableRemoteModi }} <span>允许修改远程配置</span></label>
                    <label class="check-item" for="{{ form.enablePrinter.id_for_label }}">{{ form.enablePrinter }} <span>远程打印机</span></label>
                    <label class="check-item" for="{{ form.enableCamera.id_for_label }}">{{ form.enableCamera }} <span>远程摄像头</span></label>
                    <label class="check-item" for="{{ form.enableTerminal.id_for_label }}">{{ form.enableTerminal }} <span>远程终端</span></label>
                </div>

                <div class="subsection-title"><svg class="icon"><use href="#i-zap"/></svg> 定制功能</div>
                <label class="check-item" for="{{ form.xOffline.id_for_label }}">{{ form.xOffline }} <span>通讯录中离线设备显示 X 标记</span></label>
                <label class="check-item" for="{{ form.removeNewVersionNotif.id_for_label }}">{{ form.removeNewVersionNotif }} <span>移除新版本更新通知</span></label>
            </div>
        </div>

        {# ---------- 其他 / 高级 ---------- #}
        <div class="card">
            <div class="card-header"><svg class="icon"><use href="#i-sliders"/></svg> 其他与高级设置</div>
            <div class="card-body">
                <label class="check-item" for="{{ form.removeWallpaper.id_for_label }}">{{ form.removeWallpaper }} <span>入站会话期间移除桌面壁纸</span></label>

                <p class="field-hint" style="margin:18px 0 10px">
                    高级设置项参考：
                    <a href="https://rustdesk.com/docs/en/self-host/client-configuration/advanced-settings/" target="_blank" rel="noopener">RustDesk 官方文档
                        <svg class="icon" style="font-size:12px"><use href="#i-external"/></svg>
                    </a>
                </p>
                <div class="field">
                    <label for="{{ form.defaultManual.id_for_label }}">{{ form.defaultManual.label }}</label>
                    {{ form.defaultManual }}
                    {% if form.defaultManual.help_text %}<div class="field-hint">{{ form.defaultManual.help_text }}</div>{% endif %}
                </div>
                <div class="field" style="margin-bottom:0">
                    <label for="{{ form.overrideManual.id_for_label }}">{{ form.overrideManual.label }}</label>
                    {{ form.overrideManual }}
                    {% if form.overrideManual.help_text %}<div class="field-hint">{{ form.overrideManual.help_text }}</div>{% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body" style="text-align:center">
            <button type="submit" id="submitBtn" class="btn btn-primary" style="min-width:240px">
                <svg class="icon"><use href="#i-send"/></svg> 开始生成自定义客户端
            </button>
            <p class="field-hint" style="margin-top:12px">提交后将自动跳转到构建进度页，构建期间可关闭页面，稍后在「我的构建」中回来下载。</p>
        </div>
    </div>
</form>
{% endblock %}

{% block head_extra %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    /* ---------- 平台卡片选择 ---------- */
    const platformSelect = document.getElementById('id_platform');
    document.querySelectorAll('.platform-card').forEach(card => {
        card.addEventListener('click', function () {
            document.querySelectorAll('.platform-card').forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            platformSelect.value = this.dataset.platform;
        });
    });
    // 回显当前选中平台
    const current = platformSelect.value;
    document.querySelectorAll('.platform-card').forEach(c => {
        if (c.dataset.platform === current) {
            document.querySelectorAll('.platform-card').forEach(x => x.classList.remove('active'));
            c.classList.add('active');
        }
    });

    /* ---------- 图片预览 ---------- */
    function previewImage(input, previewContainerId) {
        const box = document.getElementById(previewContainerId);
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                box.innerHTML = '';
                const img = document.createElement('img');
                img.src = e.target.result;
                box.appendChild(img);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    document.getElementById("{{ form.iconfile.id_for_label }}").addEventListener('change', e => previewImage(e.target, 'icon-preview'));
    document.getElementById("{{ form.logofile.id_for_label }}").addEventListener('change', e => previewImage(e.target, 'logo-preview'));
    document.getElementById("{{ form.privacyfile.id_for_label }}").addEventListener('change', e => previewImage(e.target, 'privacy-preview'));

    /* ---------- 隐藏连接窗口联动 ---------- */
    const hidecm = document.getElementById("{{ form.hidecm.id_for_label }}");
    const passApproveMode = document.getElementById("{{ form.passApproveMode.id_for_label }}");
    const permanentPassword = document.getElementById("{{ form.permanentPassword.id_for_label }}");
    hidecm.addEventListener('change', function () {
        const tip = document.getElementById('passwordRequirement');
        if (this.checked) {
            tip.style.display = 'block';
            permanentPassword.focus();
            passApproveMode.value = 'password';
        } else {
            tip.style.display = 'none';
            passApproveMode.value = 'password-click';
        }
    });

    /* ---------- 权限预设联动 ---------- */
    const permissionChecks = [
        "{{ form.enableKeyboard.id_for_label }}", "{{ form.enableClipboard.id_for_label }}",
        "{{ form.enableFileTransfer.id_for_label }}", "{{ form.enableAudio.id_for_label }}",
        "{{ form.enableTCP.id_for_label }}", "{{ form.enableRemoteRestart.id_for_label }}",
        "{{ form.enableRecording.id_for_label }}", "{{ form.enableBlockingInput.id_for_label }}",
        "{{ form.enableRemoteModi.id_for_label }}", "{{ form.enablePrinter.id_for_label }}",
        "{{ form.enableCamera.id_for_label }}", "{{ form.enableTerminal.id_for_label }}"
    ].map(id => document.getElementById(id));

    function setChecks(checked, disabled) {
        permissionChecks.forEach(cb => { cb.checked = checked; cb.disabled = disabled; });
    }
    document.getElementById("{{ form.permissionsType.id_for_label }}").addEventListener('change', function () {
        if (this.value === 'full') {
            setChecks(true, true);
        } else if (this.value === 'view') {
            setChecks(false, true);
        } else {
            // 自定义：恢复可编辑，不改变当前勾选
            permissionChecks.forEach(cb => { cb.disabled = false; });
        }
    });

    /* ---------- 重复提交保护 ---------- */
    document.getElementById('myForm').addEventListener('submit', function () {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.textContent = '正在提交构建任务…';
    });

    /* ---------- 配置数据收集 / 填充（账号方案、JSON 导入导出共用） ---------- */
    const form = document.getElementById('myForm');

    async function readFileAsBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = e => resolve(e.target.result);
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    }

    // 导入配置中遇到未知字段时原样保留，避免另存时丢失
    let carriedUnknownFields = {};

    // 收集当前表单为可序列化 JSON（图片转 base64 data URL）
    async function collectFormData() {
        const formData = {};
        new FormData(form).forEach((value, key) => {
            // File 对象序列化为 {}，需跳过并在下面单独读取
            if (value instanceof File) return;
            formData[key] = value;
        });

        form.querySelectorAll('select').forEach(sel => { formData[sel.name] = sel.value; });
        form.querySelectorAll('input[type="checkbox"]').forEach(input => {
            if (input.name) { formData[input.name] = input.checked; }
        });
        form.querySelectorAll('input[type="radio"]:checked').forEach(input => {
            if (input.name) { formData[input.name] = input.value; }
        });

        // 图片：优先取已预览的 base64，其次读取新选择的文件
        async function collectImage(fieldName, previewId, fileInputId) {
            const preview = document.getElementById(previewId);
            if (preview.firstChild && preview.firstChild.src && preview.firstChild.src.startsWith('data:image/')) {
                formData[fieldName] = preview.firstChild.src;
            } else {
                const file = document.getElementById(fileInputId).files[0];
                if (file) { formData[fieldName] = await readFileAsBase64(file); }
            }
        }
        await collectImage('iconfile', 'icon-preview', "{{ form.iconfile.id_for_label }}");
        await collectImage('logofile', 'logo-preview', "{{ form.logofile.id_for_label }}");
        await collectImage('privacyfile', 'privacy-preview', "{{ form.privacyfile.id_for_label }}");

        for (const k in carriedUnknownFields) {
            if (!Object.prototype.hasOwnProperty.call(formData, k)) formData[k] = carriedUnknownFields[k];
        }
        return formData;
    }

    // 导出为本地 JSON 文件（沿用配置名称作为文件名）
    window.saveFormData = async function () {
        const filenameInput = document.getElementById("{{ form.exename.id_for_label }}");
        const filename = filenameInput.value.trim();
        const errorBox = document.getElementById('filenameError');
        if (!filename) {
            errorBox.textContent = '请先填写配置名称。';
            filenameInput.focus();
            return;
        }
        errorBox.textContent = '';

        const formData = await collectFormData();
        const blob = new Blob([JSON.stringify(formData, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename + '.json';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    function showLoadWarnings(keys) {
        let banner = document.getElementById('loadWarnings');
        if (!keys.length) {
            if (banner) banner.remove();
            return;
        }
        if (!banner) {
            banner = document.createElement('div');
            banner.id = 'loadWarnings';
            banner.className = 'alert alert-warning';
            form.parentNode.insertBefore(banner, form);
        }
        banner.textContent = '以下字段包含无效值，已被忽略：' + keys.join('、') + '。';
    }

    function fillPreview(key, fieldId, previewId) {
        // 兼容历史导出中 iconbase64 命名
        const hidden = document.getElementById(fieldId);
        if (hidden) hidden.value = key;
        document.getElementById(previewId).innerHTML =
            '<img src="' + key + '" alt="预览图">';
    }

    // 用 JSON 数据填充整个表单，返回被忽略的异常字段名列表
    function fillFormFromData(data) {
        carriedUnknownFields = {};
        const skippedKeys = [];
        for (const key in data) {
            const elements = document.querySelectorAll('[name="' + key + '"], [id="' + key + '"]');
            if (elements.length > 0) {
                elements.forEach(el => {
                    const v = data[key];
                    if ((typeof v === 'object' && v !== null) || v === '[object Object]') {
                        if (!skippedKeys.includes(key)) skippedKeys.push(key);
                        return;
                    }
                    if (el.type === 'radio') {
                        el.checked = (el.value === String(v));
                    } else if (el.type === 'checkbox') {
                        el.checked = !!v;
                    } else if (el.type !== 'file') {
                        el.value = v;
                    }
                });
            } else if (['string', 'number', 'boolean'].includes(typeof v)) {
                carriedUnknownFields[key] = v;
            }
        }

        // 图片字段（兼容 iconfile / iconbase64 两种命名）
        const imgFields = [
            ['iconfile', 'id_iconbase64', 'icon-preview'],
            ['logofile', 'id_logobase64', 'logo-preview'],
            ['privacyfile', 'id_privacybase64', 'privacy-preview'],
        ];
        imgFields.forEach(([jsonKey, hiddenId, previewId]) => {
            const v = data[jsonKey] || data[hiddenId];
            if (v && typeof v === 'string' && v.startsWith('data:image/')) {
                fillPreview(v, hiddenId, previewId);
            }
        });

        // 同步联动控件状态
        document.querySelectorAll('.platform-card').forEach(c => {
            c.classList.toggle('active', c.dataset.platform === platformSelect.value);
        });
        document.getElementById("{{ form.permissionsType.id_for_label }}").dispatchEvent(new Event('change'));
        return skippedKeys;
    }

    window.loadFormData = function () {
        const fileInput = document.getElementById('fileInput');
        fileInput.value = '';
        fileInput.click();
        fileInput.onchange = function (event) {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function (e) {
                let data;
                try {
                    data = JSON.parse(e.target.result);
                } catch (err) {
                    alert('加载失败：配置文件不是有效的 JSON。');
                    return;
                }
                showLoadWarnings(fillFormFromData(data));
                showProfileMsg('已从 JSON 文件导入配置，可直接提交构建或继续修改。', true);
            };
            reader.readAsText(file);
        };
    };

    /* ---------- 账号绑定的配置方案 ---------- */
    const profileSelect = document.getElementById('profileSelect');
    const profileName = document.getElementById('profileName');
    const profileMsg = document.getElementById('profileMsg');
    const csrfInput = document.querySelector('[name=csrfmiddlewaretoken]').value;

    function showProfileMsg(text, ok) {
        profileMsg.className = 'profile-msg ' + (ok ? 'is-ok' : 'is-bad');
        profileMsg.textContent = text;
    }

    async function loadProfileById(id) {
        try {
            const resp = await fetch('{% url "saved_configs" %}' + id + '/data/');
            if (!resp.ok) {
                showProfileMsg('方案不存在或已被删除，请刷新页面后重试。', false);
                profileSelect.value = '';
                return;
            }
            const json = await resp.json();
            showLoadWarnings(fillFormFromData(json.data));
            profileSelect.value = id;
            showProfileMsg('已载入方案「' + json.name + '」，可直接提交构建或继续修改。', true);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        } catch (e) {
            showProfileMsg('载入方案失败：' + e, false);
        }
    }

    document.getElementById('loadProfileBtn').addEventListener('click', function () {
        const id = profileSelect.value;
        if (!id) { showProfileMsg('请先在下拉框中选择一个配置方案。', false); return; }
        loadProfileById(id);
    });

    document.getElementById('saveProfileBtn').addEventListener('click', async function () {
        const btn = this;
        const name = profileName.value.trim();
        if (!name) {
            showProfileMsg('请先在左侧输入方案名称。', false);
            profileName.focus();
            return;
        }
        const payload = { name: name, data: await collectFormData(), overwrite: false };
        btn.disabled = true;
        const originalHtml = btn.innerHTML;
        btn.textContent = '正在保存…';

        async function submit(overwrite) {
            payload.overwrite = overwrite;
            const resp = await fetch('{% url "save_config" %}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfInput },
                body: JSON.stringify(payload),
            });
            const json = await resp.json().catch(() => ({}));
            if (resp.ok && json.ok) {
                let option = profileSelect.querySelector('option[value="' + json.id + '"]');
                if (!option) {
                    option = document.createElement('option');
                    option.value = json.id;
                    profileSelect.appendChild(option);
                }
                option.textContent = name;
                profileSelect.value = json.id;
                showProfileMsg(json.overwritten ? '方案「' + name + '」已更新。' : '方案「' + name + '」已保存，下次可直接选择载入。', true);
            } else if (resp.status === 409 && json.duplicate) {
                if (window.confirm('已存在同名方案「' + name + '」，是否用当前配置覆盖它？')) {
                    return submit(true);
                }
            } else {
                showProfileMsg(json.message || '保存失败，请稍后重试。', false);
            }
        }

        submit(false).catch(e => showProfileMsg('保存失败：' + e, false)).finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        });
    });

    // 从「配置文件管理」页点「载入并构建」跳转过来时自动填充
    const autoConfigId = new URLSearchParams(window.location.search).get('config');
    if (autoConfigId) {
        loadProfileById(autoConfigId);
    }
});
</script>
{% endblock %}