{% extends "base.html" %}

{% block title %}添加程序 - Instancer{% endblock %}

{% block page_title %}添加新程序{% endblock %}
{% block page_subtitle %}配置一个新的程序实例管理{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="program-card">
            <div class="program-header">
                <h4 class="mb-0 fw-bold">
                    <i class="bi bi-plus-circle"></i> 程序配置
                </h4>
                <small class="opacity-75">填写程序基本信息</small>
            </div>
            <div class="p-4">
                <form method="POST">
                    <div class="mb-4">
                        <label for="program_id" class="form-label fw-medium">
                            程序ID <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="program_id" name="program_id" 
                               required pattern="[a-zA-Z0-9_-]+" 
                               placeholder="例如: my_app, data_processor"
                               style="border-radius: 8px; border: 2px solid #e5e7eb;">
                        <div class="form-text">
                            <i class="bi bi-info-circle"></i> 程序的唯一标识符，只能包含字母、数字、下划线和连字符
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="name" class="form-label fw-medium">
                            程序名称 <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="name" name="name" 
                               required placeholder="例如: 我的应用程序"
                               style="border-radius: 8px; border: 2px solid #e5e7eb;">
                        <div class="form-text">
                            <i class="bi bi-info-circle"></i> 程序的显示名称，用于在界面中展示
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="description" class="form-label fw-medium">描述</label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="3" placeholder="程序的详细描述（可选）"
                                  style="border-radius: 8px; border: 2px solid #e5e7eb;"></textarea>
                    </div>
                    
                    <div class="mb-4">
                        <label for="max_instances" class="form-label fw-medium">最大实例数</label>
                        <input type="number" class="form-control" id="max_instances" name="max_instances" 
                               value="1" min="0" max="100"
                               style="border-radius: 8px; border: 2px solid #e5e7eb; width: 120px;">
                        <div class="form-text">
                            <i class="bi bi-info-circle"></i> 允许同时运行的最大实例数量，设置为0表示禁止运行
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between pt-3">
                        <a href="{{ url_for('index') }}" class="btn btn-outline-secondary btn-modern">
                            <i class="bi bi-arrow-left"></i> 返回控制台
                        </a>
                        <button type="submit" class="btn btn-primary-modern btn-modern">
                            <i class="bi bi-check-circle"></i> 创建程序
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 使用说明 -->
        <div class="program-card mt-4">
            <div class="program-header">
                <h5 class="mb-0 fw-bold">
                    <i class="bi bi-info-circle"></i> 使用说明
                </h5>
                <small class="opacity-75">如何在代码中使用</small>
            </div>
            <div class="p-4">
                <p class="mb-3">添加程序配置后，您可以在客户端代码中使用装饰器：</p>
                
                <div class="bg-dark text-light p-3 rounded" style="border-radius: 12px;">
                    <pre class="mb-0"><code style="color: #e5e7eb;">from instancer import instance_control

@instance_control(
    program_id="<span style="color: #10b981;">your_program_id</span>",
    server_url="<span style="color: #10b981;">http://localhost:5000</span>"
)
def your_application():
    print("应用程序正在运行...")
    # 您的应用逻辑

if __name__ == "__main__":
    your_application()</code></pre>
                </div>
                
                <div class="mt-3">
                    <h6 class="fw-medium">参数说明：</h6>
                    <ul class="small mb-0">
                        <li><strong>program_id</strong>: 必须与这里配置的程序ID完全一致</li>
                        <li><strong>server_url</strong>: Instancer服务端的地址</li>
                        <li><strong>check_interval</strong>: 状态检查间隔（可选，默认5秒）</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 快速示例 -->
        <div class="program-card mt-4">
            <div class="program-header">
                <h5 class="mb-0 fw-bold">
                    <i class="bi bi-lightning"></i> 快速开始
                </h5>
                <small class="opacity-75">常用配置示例</small>
            </div>
            <div class="p-4">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="metric-card">
                            <h6 class="fw-medium mb-2">单实例应用</h6>
                            <small class="text-muted">适用于只需要一个实例的应用</small>
                            <div class="mt-2">
                                <span class="badge bg-primary">最大实例: 1</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="metric-card">
                            <h6 class="fw-medium mb-2">多实例应用</h6>
                            <small class="text-muted">适用于需要负载均衡的应用</small>
                            <div class="mt-2">
                                <span class="badge bg-success">最大实例: 3-5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 程序ID输入验证
document.getElementById('program_id').addEventListener('input', function(e) {
    const value = e.target.value;
    const isValid = /^[a-zA-Z0-9_-]*$/.test(value);
    
    if (!isValid && value.length > 0) {
        e.target.style.borderColor = '#ef4444';
        e.target.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';
    } else {
        e.target.style.borderColor = '#e5e7eb';
        e.target.style.boxShadow = 'none';
    }
});

// 表单提交前验证
document.querySelector('form').addEventListener('submit', function(e) {
    const programId = document.getElementById('program_id').value;
    const name = document.getElementById('name').value;
    
    if (!programId || !name) {
        e.preventDefault();
        showToast('请填写必填字段', 'error');
        return;
    }
    
    if (!/^[a-zA-Z0-9_-]+$/.test(programId)) {
        e.preventDefault();
        showToast('程序ID只能包含字母、数字、下划线和连字符', 'error');
        return;
    }
    
    // 显示加载状态
    const submitBtn = document.querySelector('button[type="submit"]');
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> 创建中...';
    submitBtn.disabled = true;
});

// 显示提示消息
function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'error' ? 'danger' : 'success'} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; border-radius: 8px;';
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// 输入框焦点效果
document.querySelectorAll('.form-control').forEach(input => {
    input.addEventListener('focus', function() {
        this.style.borderColor = '#4f46e5';
        this.style.boxShadow = '0 0 0 3px rgba(79, 70, 229, 0.1)';
    });
    
    input.addEventListener('blur', function() {
        this.style.borderColor = '#e5e7eb';
        this.style.boxShadow = 'none';
    });
});
</script>
{% endblock %}