{% extends "setup/base.html" %}

{% block content %}
<h2>配置数据库</h2>

{% if error %}
<div class="alert alert-error">{{ error }}</div>
{% endif %}

<form method="post">
    {% csrf_token %}

    <div class="form-group">
        <label>数据库类型</label>
        <div class="db-options">
            <label class="db-option {% if not form.engine or form.engine == 'mysql' %}selected{% endif %}">
                <input type="radio" name="engine" value="mysql"
                    {% if not form.engine or form.engine == 'mysql' %}checked{% endif %}>
                <div>
                    <strong>MySQL</strong>
                    <span>最流行的开源数据库</span>
                </div>
            </label>
            <label class="db-option {% if form.engine == 'postgresql' %}selected{% endif %}">
                <input type="radio" name="engine" value="postgresql"
                    {% if form.engine == 'postgresql' %}checked{% endif %}>
                <div>
                    <strong>PostgreSQL</strong>
                    <span>功能最强大的数据库</span>
                </div>
            </label>
            <label class="db-option {% if form.engine == 'sqlite' %}selected{% endif %}">
                <input type="radio" name="engine" value="sqlite"
                    {% if form.engine == 'sqlite' %}checked{% endif %}>
                <div>
                    <strong>SQLite</strong>
                    <span>轻量级，无需安装服务</span>
                </div>
            </label>
        </div>
    </div>

    <div id="server-fields">
        <div class="form-row">
            <div class="form-group" style="flex:2">
                <label>主机地址</label>
                <input type="text" name="db_host" id="db_host"
                       value="{{ form.db_host|default:'127.0.0.1' }}">
            </div>
            <div class="form-group" style="flex:1">
                <label>端口</label>
                <input type="text" name="db_port" id="db_port"
                       value="{{ form.db_port|default:'3306' }}">
            </div>
        </div>
        <div class="form-group">
            <label>数据库名</label>
            <input type="text" name="db_name" id="db_name"
                   value="{{ form.db_name|default:'djangoblog' }}">
            <div class="hint">如果数据库不存在，安装时会自动创建</div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="db_user" id="db_user"
                       value="{{ form.db_user|default:'root' }}">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="db_password"
                       value="{{ form.db_password|default:'' }}">
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-block" style="margin-top: 10px;">
        测试连接并继续
    </button>
</form>

<style>
    .db-options { display: flex; flex-direction: column; gap: 8px; }
    .db-option {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px; border: 2px solid #e5e7eb;
        border-radius: 10px; cursor: pointer; transition: all 0.2s;
    }
    .db-option:hover { border-color: #c7d2fe; background: #fafbff; }
    .db-option.selected { border-color: #667eea; background: #f5f3ff; }
    .db-option input[type="radio"] { width: auto; margin: 0; }
    .db-option div { display: flex; flex-direction: column; }
    .db-option strong { font-size: 0.95rem; color: #111; }
    .db-option span { font-size: 0.8rem; color: #6b7280; }
</style>

<script>
(function() {
    var defaults = {
        mysql:      { host: '127.0.0.1', port: '3306', user: 'root' },
        postgresql: { host: '127.0.0.1', port: '5432', user: 'postgres' },
    };

    var radios = document.querySelectorAll('input[name="engine"]');
    var serverFields = document.getElementById('server-fields');
    var hostInput = document.getElementById('db_host');
    var portInput = document.getElementById('db_port');
    var userInput = document.getElementById('db_user');

    // 追踪用户是否手动修改过值
    var userModified = {host: false, port: false, user: false};
    hostInput.addEventListener('input', function() { userModified.host = true; });
    portInput.addEventListener('input', function() { userModified.port = true; });
    userInput.addEventListener('input', function() { userModified.user = true; });

    function switchEngine() {
        var engine = document.querySelector('input[name="engine"]:checked').value;

        // 更新选中样式
        document.querySelectorAll('.db-option').forEach(function(el) {
            el.classList.remove('selected');
        });
        document.querySelector('input[name="engine"]:checked')
                .closest('.db-option').classList.add('selected');

        // SQLite 隐藏服务器字段
        if (engine === 'sqlite') {
            serverFields.style.display = 'none';
        } else {
            serverFields.style.display = 'block';
            var d = defaults[engine];
            if (d) {
                if (!userModified.host) hostInput.value = d.host;
                if (!userModified.port) portInput.value = d.port;
                if (!userModified.user) userInput.value = d.user;
            }
        }
    }

    radios.forEach(function(r) { r.addEventListener('change', switchEngine); });

    // 初始化
    switchEngine();
})();
</script>
{% endblock %}