<?php
$csrfField = \Helper::csrfField();
?>
<div class="page-header">
    <h1 class="page-title">存储设置</h1>
</div>

<div class="storage-settings">
    <!-- 默认存储选择 -->
    <div class="default-storage-section">
        <h3 class="section-title">默认存储方式</h3>
        <p class="section-desc">选择系统上传文件时使用的存储方式，上传的图片、视频等文件将自动存储到选中的存储空间</p>
        <div class="storage-types">
            <?php foreach ($types as $type => $name): ?>
            <div class="storage-type-card <?php echo $type === $current_type ? 'active' : ''; ?>" data-type="<?php echo $type; ?>" onclick="selectDefaultStorage('<?php echo $type; ?>')">
                <div class="type-icon">
                    <?php if ($type === 'local'): ?>
                    <i class="fa fa-folder"></i>
                    <?php elseif ($type === 'qiniu'): ?>
                    <i class="fa fa-cloud"></i>
                    <?php elseif ($type === 'aliyun'): ?>
                    <i class="fa fa-server"></i>
                    <?php elseif ($type === 'tencent'): ?>
                    <i class="fa fa-database"></i>
                    <?php endif; ?>
                </div>
                <div class="type-info">
                    <div class="type-name"><?php echo $name; ?></div>
                    <?php if ($type === $current_type): ?>
                    <span class="current-badge">当前使用</span>
                    <?php endif; ?>
                </div>
                <div class="type-radio">
                    <input type="radio" name="default_storage" value="<?php echo $type; ?>" <?php echo $type === $current_type ? 'checked' : ''; ?>>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="section-divider"></div>

    <!-- 配置表单 -->
    <div class="config-panels">
        <?php foreach ($types as $type => $name): ?>
        <div class="config-panel <?php echo $type === $current_type ? 'active' : ''; ?>" id="panel-<?php echo $type; ?>">
            <div class="panel-header">
                <h3><?php echo $name; ?> 配置</h3>
            </div>
            
            <form class="config-form" id="config-form-<?php echo $type; ?>">
                <?php echo $csrfField; ?>
                <input type="hidden" name="type" value="<?php echo $type; ?>">
                <input type="hidden" name="is_default" value="<?php echo $type === $current_type ? '1' : '0'; ?>">
                
                <div class="form-grid">
                    <?php foreach ($configs[$type]['config_form']['fields'] as $field): ?>
                    <div class="form-group <?php echo ($field['type'] ?? '') === 'textarea' ? 'full-width' : ''; ?>">
                        <label><?php echo $field['label']; ?></label>
                        <?php if (($field['type'] ?? 'text') === 'select'): ?>
                        <select name="<?php echo $field['name']; ?>" class="form-select">
                            <?php foreach ($field['options'] as $value => $label): ?>
                            <option value="<?php echo $value; ?>" <?php echo ($configs[$type]['config_values'][str_replace($type . '_', '', $field['name'])] ?? $field['default'] ?? '') === $value ? 'selected' : ''; ?>>
                                <?php echo $label; ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                        <?php elseif (($field['type'] ?? 'text') === 'textarea'): ?>
                        <textarea name="<?php echo $field['name']; ?>" class="form-textarea" rows="3" placeholder="<?php echo $field['placeholder'] ?? ''; ?>"><?php echo $configs[$type]['config_values'][str_replace($type . '_', '', $field['name'])] ?? ''; ?></textarea>
                        <?php elseif (($field['type'] ?? 'text') === 'checkbox'): ?>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="<?php echo $field['name']; ?>" value="1" <?php echo ($configs[$type]['config_values'][str_replace($type . '_', '', $field['name'])] ?? '') === '1' ? 'checked' : ''; ?>>
                            <span><?php echo $field['placeholder'] ?? ''; ?></span>
                        </label>
                        <?php else: ?>
                        <input type="<?php echo $field['type'] ?? 'text'; ?>" name="<?php echo $field['name']; ?>" class="form-input" 
                            value="<?php echo $configs[$type]['config_values'][str_replace($type . '_', '', $field['name'])] ?? ''; ?>" 
                            placeholder="<?php echo $field['placeholder'] ?? ''; ?>">
                        <?php endif; ?>
                        <?php if (isset($field['help'])): ?>
                        <div class="form-help"><?php echo $field['help']; ?></div>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> 保存配置
                    </button>
                    <?php if ($type !== 'local'): ?>
                    <button type="button" class="btn btn-default" onclick="testConnection('<?php echo $type; ?>')">
                        <i class="fa fa-plug"></i> 测试连接
                    </button>
                    <?php endif; ?>
                </div>
            </form>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<style>
.page-header { margin-bottom: 20px; }
.page-title { margin: 0; font-size: 20px; font-weight: 500; }
.storage-settings { background: #fff; border-radius: 8px; padding: 20px; }
.default-storage-section { margin-bottom: 0; }
.section-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 500; }
.section-desc { margin: 0 0 15px 0; font-size: 13px; color: #888; }
.storage-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 0; }
.storage-type-card { display: flex; align-items: center; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s; position: relative; }
.storage-type-card:hover { background: #f0f0f0; }
.storage-type-card.active { border-color: #1890ff; background: #e6f7ff; }
.type-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; margin-right: 12px; font-size: 18px; color: #1890ff; flex-shrink: 0; }
.type-info { flex: 1; min-width: 0; }
.type-name { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.current-badge { display: inline-block; padding: 1px 6px; background: #1890ff; color: #fff; border-radius: 10px; font-size: 11px; }
.type-radio { flex-shrink: 0; margin-left: 10px; }
.type-radio input { width: 18px; height: 18px; accent-color: #1890ff; }
.section-divider { height: 1px; background: #eee; margin: 25px 0; }
.config-panel { display: none; }
.config-panel.active { display: block; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.panel-header h3 { margin: 0; font-size: 16px; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-group { }
.form-group.full-width { grid-column: span 2; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 13px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border-color 0.3s; box-sizing: border-box; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #1890ff; }
.form-textarea { resize: vertical; }
.form-help { margin-top: 5px; font-size: 12px; color: #999; }
.checkbox-inline { display: flex; align-items: center; gap: 8px; }
.form-actions { margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; display: flex; gap: 10px; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s; }
.btn-primary { background: #1890ff; color: #fff; }
.btn-primary:hover { background: #40a9ff; }
.btn-default { background: #f5f5f5; color: #666; }
.btn-default:hover { background: #e8e8e8; }
@media (max-width: 768px) {
    .storage-types { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
}
</style>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 选择默认存储方式
function selectDefaultStorage(type) {
    $('.storage-type-card').removeClass('active');
    $('.storage-type-card[data-type="' + type + '"]').addClass('active');
    $('input[name="default_storage"]').prop('checked', false);
    $('.storage-type-card[data-type="' + type + '"] input[name="default_storage"]').prop('checked', true);
    
    // 更新所有表单的 is_default
    $('input[name="is_default"]').val('0');
    $('#config-form-' + type + ' input[name="is_default"]').val('1');
    
    // 切换配置面板
    $('.config-panel').removeClass('active');
    $('#panel-' + type).addClass('active');
}

$(function() {
    // 保存配置
    $('.config-form').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        
        $.post('<?php echo \Helper::url("storage/saveConfig"); ?>', form.serialize(), function(res) {
            if (res.code === 0) {
                alert('保存成功');
                location.reload();
            } else {
                alert(res.message || '保存失败');
            }
        }, 'json').fail(function(xhr) {
            alert('请求失败: ' + (xhr.responseText || '请重试'));
        });
    });
    
    // 初始化显示当前类型的配置面板
    var currentType = '<?php echo $current_type; ?>';
    if (currentType) {
        $('#panel-' + currentType).addClass('active');
    }
});

// 测试连接
function testConnection(type) {
    var form = $('#config-form-' + type);
    var btn = form.find('button[onclick*="testConnection"]');
    var originalText = btn.html();
    
    btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 测试中...');
    
    $.ajax({
        url: '<?php echo \Helper::url("admin/storage/testConnection"); ?>',
        type: 'POST',
        data: form.serialize(),
        dataType: 'json',
        success: function(res) {
            if (res.code === 0) {
                alert('连接成功！配置有效。');
            } else {
                alert('连接失败：' + (res.message || '请检查配置'));
            }
        },
        error: function() {
            alert('请求失败，请重试');
        },
        complete: function() {
            btn.prop('disabled', false).html(originalText);
        }
    });
}
</script>
