@extends('admin.layouts.admin')

@section('title', '配置管理')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">配置管理</h5>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#configModal" onclick="openCreateModal()">
                <i class="fas fa-plus"></i> 添加配置
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>键名</th>
                            <th>值</th>
                            <th>描述</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="configTableBody">
                        <tr>
                            <td colspan="6" class="text-center">
                                <div class="d-flex justify-content-center">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 配置模态框 -->
<div class="modal fade" id="configModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="configModalTitle">添加配置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="configForm">
                    <div class="mb-3">
                        <label for="configKey" class="form-label">键名 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="configKey" name="key" required>
                        <div class="form-text">配置项的唯一键名</div>
                    </div>
                    <div class="mb-3">
                        <label for="configValue" class="form-label">值 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="configValue" name="value" rows="5" required></textarea>
                        <div class="form-text">支持JSON格式，例如: {"tabBrandCampaignId": "campaign123"}</div>
                    </div>
                    <div class="mb-3">
                        <label for="configDescription" class="form-label">描述</label>
                        <input type="text" class="form-control" id="configDescription" name="description">
                        <div class="form-text">配置项的说明</div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="configIsActive" name="is_active" checked>
                        <label class="form-check-label" for="configIsActive">启用状态</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveConfig()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>您确定要删除这个配置项吗？此操作不可恢复。</p>
                <div class="alert alert-warning">
                    <strong>键名：</strong> <span id="deleteConfigKey"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let editingConfigId = null;
let deletingConfigId = null;

// 页面加载时获取数据
$(document).ready(function() {
    loadConfigs();
});

// 加载配置列表
function loadConfigs() {
    $.get('/admin/config/data')
        .done(function(response) {
            if (response.success) {
                renderConfigTable(response.data);
            } else {
                showAlert('获取配置数据失败', 'danger');
            }
        })
        .fail(function() {
            showAlert('请求失败，请检查网络连接', 'danger');
        });
}

// 渲染配置表格
function renderConfigTable(configs) {
    const tbody = $('#configTableBody');
    tbody.empty();

    if (configs.length === 0) {
        tbody.append(`
            <tr>
                <td colspan="6" class="text-center text-muted">暂无配置数据</td>
            </tr>
        `);
        return;
    }

    configs.forEach(config => {
        const statusBadge = config.is_active
            ? '<span class="badge bg-success">启用</span>'
            : '<span class="badge bg-secondary">禁用</span>';

        const valueDisplay = typeof config.value === 'object'
            ? JSON.stringify(config.value, null, 2)
            : config.value;

        const row = `
            <tr>
                <td><code>${escapeHtml(config.key)}</code></td>
                <td>
                    <pre class="mb-0" style="max-width: 300px; white-space: pre-wrap; font-size: 0.85em;">${escapeHtml(valueDisplay)}</pre>
                </td>
                <td>${config.description || '<em class="text-muted">无描述</em>'}</td>
                <td>${statusBadge}</td>
                <td>${formatDate(config.created_at)}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary" onclick="editConfig(${config.id})" title="编辑">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-outline-warning" onclick="toggleConfigStatus(${config.id})" title="${config.is_active ? '禁用' : '启用'}">
                            <i class="fas fa-${config.is_active ? 'toggle-off' : 'toggle-on'}"></i>
                        </button>
                        <button class="btn btn-outline-danger" onclick="deleteConfig(${config.id}, '${config.key}')" title="删除">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `;
        tbody.append(row);
    });
}

// 打开创建模态框
function openCreateModal() {
    editingConfigId = null;
    $('#configModalTitle').text('添加配置');
    $('#configForm')[0].reset();
    $('#configIsActive').prop('checked', true);
}

// 编辑配置
function editConfig(id) {
    const config = getCurrentConfigs().find(c => c.id === id);
    if (!config) return;

    editingConfigId = id;
    $('#configModalTitle').text('编辑配置');
    $('#configKey').val(config.key);
    $('#configValue').val(typeof config.value === 'object' ? JSON.stringify(config.value, null, 2) : config.value);
    $('#configDescription').val(config.description || '');
    $('#configIsActive').prop('checked', config.is_active);

    $('#configModal').modal('show');
}

// 保存配置
function saveConfig() {
    const form = $('#configForm');
    const formData = {
        key: $('#configKey').val().trim(),
        value: $('#configValue').val().trim(),
        description: $('#configDescription').val().trim(),
        is_active: $('#configIsActive').prop('checked') ? 1 : 0
    };

    if (!formData.key || !formData.value) {
        showAlert('请填写必填项', 'warning');
        return;
    }

    // 验证JSON格式
    try {
        JSON.parse(formData.value);
    } catch (e) {
        // 如果不是有效的JSON，保持原始字符串
    }

    const url = editingConfigId ? `/admin/config/${editingConfigId}` : '/admin/config';
    const method = editingConfigId ? 'PUT' : 'POST';

    $.ajax({
        url: url,
        method: method,
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
    .done(function(response) {
        if (response.success) {
            $('#configModal').modal('hide');
            showAlert(response.message, 'success');
            loadConfigs();
        } else {
            showAlert(response.message, 'danger');
        }
    })
    .fail(function(xhr) {
        const response = xhr.responseJSON;
        if (response && response.errors) {
            const errors = Object.values(response.errors).flat();
            showAlert('验证失败：' + errors.join(', '), 'danger');
        } else {
            showAlert('保存失败，请重试', 'danger');
        }
    });
}

// 切换配置状态
function toggleConfigStatus(id) {
    $.ajax({
        url: `/admin/config/${id}/toggle-status`,
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
    .done(function(response) {
        if (response.success) {
            showAlert(response.message, 'success');
            loadConfigs();
        } else {
            showAlert(response.message, 'danger');
        }
    })
    .fail(function() {
        showAlert('操作失败，请重试', 'danger');
    });
}

// 删除配置
function deleteConfig(id, key) {
    deletingConfigId = id;
    $('#deleteConfigKey').text(key);
    $('#deleteModal').modal('show');
}

// 确认删除
function confirmDelete() {
    if (!deletingConfigId) return;

    $.ajax({
        url: `/admin/config/${deletingConfigId}`,
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
    .done(function(response) {
        if (response.success) {
            $('#deleteModal').modal('hide');
            showAlert(response.message, 'success');
            loadConfigs();
        } else {
            showAlert(response.message, 'danger');
        }
    })
    .fail(function() {
        showAlert('删除失败，请重试', 'danger');
    });
}

// 获取当前配置数据
function getCurrentConfigs() {
    const configs = [];
    $('#configTableBody tr').each(function() {
        const $row = $(this);
        if ($row.find('td').length > 1) {
            // 这里简化处理，实际应该从数据源获取
        }
    });
    return window.currentConfigs || [];
}

// 工具函数
function escapeHtml(text) {
    if (typeof text !== 'string') return text;
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN');
}

function showAlert(message, type = 'info') {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    // 移除现有的alert
    $('.alert').remove();

    // 添加新的alert到页面顶部
    $('.container-fluid').prepend(alertHtml);

    // 3秒后自动消失
    setTimeout(function() {
        $('.alert').fadeOut();
    }, 3000);
}

// 全局变量存储当前配置
window.currentConfigs = [];

// 修改renderConfigTable函数，保存数据到全局变量
function renderConfigTable(configs) {
    window.currentConfigs = configs;
    // ... 其余代码保持不变
    const tbody = $('#configTableBody');
    tbody.empty();

    if (configs.length === 0) {
        tbody.append(`
            <tr>
                <td colspan="6" class="text-center text-muted">暂无配置数据</td>
            </tr>
        `);
        return;
    }

    configs.forEach(config => {
        const statusBadge = config.is_active
            ? '<span class="badge bg-success">启用</span>'
            : '<span class="badge bg-secondary">禁用</span>';

        const valueDisplay = typeof config.value === 'object'
            ? JSON.stringify(config.value, null, 2)
            : config.value;

        const row = `
            <tr>
                <td><code>${escapeHtml(config.key)}</code></td>
                <td>
                    <pre class="mb-0" style="max-width: 300px; white-space: pre-wrap; font-size: 0.85em;">${escapeHtml(valueDisplay)}</pre>
                </td>
                <td>${config.description || '<em class="text-muted">无描述</em>'}</td>
                <td>${statusBadge}</td>
                <td>${formatDate(config.created_at)}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary" onclick="editConfig(${config.id})" title="编辑">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-outline-warning" onclick="toggleConfigStatus(${config.id})" title="${config.is_active ? '禁用' : '启用'}">
                            <i class="fas fa-${config.is_active ? 'toggle-off' : 'toggle-on'}"></i>
                        </button>
                        <button class="btn btn-outline-danger" onclick="deleteConfig(${config.id}, '${config.key}')" title="删除">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `;
        tbody.append(row);
    });
}

// 修改getCurrentConfigs函数
function getCurrentConfigs() {
    return window.currentConfigs || [];
}
</script>
@endpush