window.SecuritySettings = {
    emits: ['updated'],
    setup(props, { emit }) {
        const { ref, onMounted } = Vue;
        const api = useApi();

        const loading = ref(false);
        const saving = ref(false);
        const currentUsername = ref('');
        const form = ref({
            current_password: '',
            new_username: '',
            new_password: '',
            confirm_password: '',
        });

        async function load() {
            loading.value = true;
            const json = await api.getAuthStatus();
            if (json) {
                currentUsername.value = json.username || '';
                form.value.new_username = json.username || '';
            }
            loading.value = false;
        }

        async function save() {
            const payload = {
                current_password: form.value.current_password || '',
                new_username: (form.value.new_username || '').trim(),
                new_password: form.value.new_password || '',
            };

            if (!payload.current_password) {
                ElementPlus.ElMessage.warning('请输入当前密码');
                return;
            }
            if (!payload.new_username) {
                ElementPlus.ElMessage.warning('请输入新账号');
                return;
            }
            if (payload.new_password.length < 8) {
                ElementPlus.ElMessage.warning('新密码至少 8 位');
                return;
            }
            if (payload.new_password !== form.value.confirm_password) {
                ElementPlus.ElMessage.warning('两次输入的新密码不一致');
                return;
            }

            saving.value = true;
            const json = await api.changeCredentials(payload);
            saving.value = false;
            if (!json) return;

            currentUsername.value = json.username || payload.new_username;
            form.value.current_password = '';
            form.value.new_password = '';
            form.value.confirm_password = '';
            form.value.new_username = currentUsername.value;

            emit('updated', currentUsername.value);
            window.dispatchEvent(new CustomEvent('webui-auth-updated', {
                detail: { username: currentUsername.value },
            }));
            ElementPlus.ElMessage.success('账号密码已更新');
        }

        onMounted(load);

        return {
            loading,
            saving,
            currentUsername,
            form,
            save,
        };
    },
    template: `
    <div class="panel-scroll">
        <el-card shadow="never" class="security-wrap">
            <template #header>
                <div class="plugin-main">
                    <span class="plugin-name">管理员账号安全</span>
                    <el-tag size="small" type="info">当前账号: {{ currentUsername || '-' }}</el-tag>
                </div>
            </template>

            <el-skeleton v-if="loading" :rows="6" animated />
            <div v-else>
                <el-alert
                    title="密码仅保存为哈希值，修改后会立即写入 main_config.toml"
                    type="info"
                    :closable="false"
                    style="margin-bottom:16px;" />

                <el-form label-position="top">
                    <el-form-item label="当前密码">
                        <el-input
                            v-model="form.current_password"
                            show-password
                            autocomplete="current-password"
                            placeholder="请输入当前密码" />
                    </el-form-item>

                    <el-form-item label="新账号">
                        <el-input
                            v-model="form.new_username"
                            autocomplete="username"
                            placeholder="请输入新账号" />
                    </el-form-item>

                    <el-form-item label="新密码（至少 8 位）">
                        <el-input
                            v-model="form.new_password"
                            show-password
                            autocomplete="new-password"
                            placeholder="请输入新密码" />
                    </el-form-item>

                    <el-form-item label="确认新密码">
                        <el-input
                            v-model="form.confirm_password"
                            show-password
                            autocomplete="new-password"
                            placeholder="请再次输入新密码"
                            @keyup.enter="save" />
                    </el-form-item>

                    <el-button type="primary" :loading="saving" @click="save">
                        保存账号密码
                    </el-button>
                </el-form>
            </div>
        </el-card>
    </div>
    `,
};