
<div class="wrap">
    <h1><?php echo esc_html__('评论样式设置', 'acs'); ?></h1>
    
    <form method="post" action="options.php">
        <?php settings_fields('acs_comment_style_group'); ?>
        
        <div class="card" style="margin-bottom: 2rem;">
            <h2><?php echo esc_html__('实时预览', 'acs'); ?></h2>
            <div class="comment-preview" style="background: <?php echo esc_attr($presets[$current_style]['preview_color']); ?>; padding: 1.5rem; border-radius: 8px;">
                <div class="comment-header">
                    <span class="comment-author"><?php echo esc_html__('示例用户', 'acs'); ?></span>
                    <span class="comment-date"><?php echo esc_html__('1天前', 'acs'); ?></span>
                </div>
                <div class="comment-content" style="margin: 1rem 0;">
                    <?php echo esc_html__('这是样式设置后的评论预览效果', 'acs'); ?>
                </div>
                <div class="comment-actions">
                    <button class="button"><?php echo esc_html__('回复', 'acs'); ?></button>
                </div>
            </div>
        </div>

        <!-- 新增自定义CSS参考区域 -->
        <div class="card" style="margin-bottom: 2rem;">
            <h2><?php echo esc_html__('自定义CSS范例', 'acs'); ?></h2>
            <div class="css-examples">
                <h3><?php echo esc_html__('常用样式模板', 'acs'); ?></h3>
                <pre class="css-code-example">
/* 圆角气泡样式 */
.comment-preview {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid #4CAF50;
}

/* 作者标签样式 */
.comment-author {
    font-weight: bold;
    color: #2196F3;
    padding: 2px 8px;
    background: rgba(33,150,243,0.1);
    border-radius: 4px;
}

/* 悬停动画效果 */
.comment-preview:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}</pre>
                
                <textarea name="acs_comment_custom_css" 
                          class="large-text code" 
                          rows="10" 
                          placeholder="<?php esc_attr_e('在此输入自定义CSS...', 'acs'); ?>"><?php echo esc_textarea(get_option('acs_comment_custom_css')); ?></textarea>
            </div>
        </div>

        <!-- 原有预设样式选择器 -->
        <table class="form-table">
            <tr>
                <th scope="row"><?php echo esc_html__('预设样式', 'acs'); ?></th>
                <td>
                    <div class="acs-style-options">
                        <?php foreach ($presets as $id => $preset): ?>
                            <label class="acs-style-option">
                                <input type="radio" name="acs_comment_style" 
                                       value="<?php echo esc_attr($id); ?>" 
                                       <?php checked($current_style, $id); ?>>
                                <div class="acs-style-preview" style="background: <?php echo esc_attr($preset['preview_color']); ?>">
                                    <span><?php echo esc_html($preset['name']); ?></span>
                                </div>
                            </label>
                        <?php endforeach; ?>
                    </div>
                </td>
            </tr>
        </table>
        
        <?php submit_button(); ?>
    </form>
</div>

<style>
/* 新增的样式增强 */
.css-examples {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.css-code-example {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    margin-bottom: 1.5rem;
}

.acs-style-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.acs-style-option {
    cursor: pointer;
    transition: transform 0.2s;
}

.acs-style-option:hover {
    transform: scale(1.05);
}
</style>
