<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理咨询师报名 - 个人</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px 15px;
        }
        .container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px 25px;
            text-align: center;
        }
        .header h1 {
            color: white;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        .header p {
            color: rgba(255,255,255,0.9);
            font-size: 14px;
        }
        .header .type-badge {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            margin-top: 8px;
        }
        .steps-container {
            padding: 25px;
        }
        .step {
            display: flex;
            margin-bottom: 20px;
            position: relative;
        }
        .step:last-child {
            margin-bottom: 0;
        }
        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 18px;
            top: 45px;
            width: 2px;
            height: calc(100% - 10px);
            background: #e0e0e0;
        }
        .step.completed:not(:last-child)::after {
            background: #4CAF50;
        }
        .step-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
            z-index: 1;
            font-weight: 600;
            color: #999;
            font-size: 16px;
            transition: all 0.3s;
        }
        .step.completed .step-icon {
            background: #4CAF50;
            color: white;
        }
        .step.locked .step-icon {
            background: #f5f5f5;
            color: #ccc;
        }
        .step-content {
            flex: 1;
            padding-top: 5px;
        }
        .step-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .step.locked .step-title {
            color: #ccc;
        }
        .step-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        .step.locked .step-desc {
            color: #ddd;
        }
        .step-content-box {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .step.locked .step-content-box {
            opacity: 0.5;
            background: #fafafa;
        }
        .step-content-box p {
            font-size: 14px;
            color: #555;
            margin-bottom: 8px;
            line-height: 1.6;
        }
        .step-content-box p:last-child {
            margin-bottom: 0;
        }
        .step-content-box a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }
        .step-content-box .tip-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 10px 12px;
            margin-top: 10px;
            border-radius: 0 6px 6px 0;
        }
        .step-content-box .tip-box p {
            color: #856404;
            font-size: 13px;
            margin: 0;
        }
        .step-content-box .highlight {
            background: #e7f3ff;
            border-radius: 6px;
            padding: 8px 12px;
            margin: 8px 0;
        }
        .step-content-box .highlight code {
            color: #0066cc;
            font-weight: 600;
            font-family: 'Courier New', monospace;
            font-size: 15px;
        }
        .qrcode-container {
            text-align: center;
            margin: 10px 0;
        }
        .qrcode-container img {
            max-width: 180px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .qrcode-container img:hover {
            transform: scale(1.02);
        }
        .qrcode-container .qrcode-label {
            font-size: 12px;
            color: #888;
            margin-top: 6px;
        }
        .step-guide-img {
            text-align: center;
            margin: 10px 0;
        }
        .step-guide-img img {
            max-width: 100%;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .step-guide-img img:hover {
            transform: scale(1.01);
        }
        .complete-btn {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .step.locked .complete-btn {
            background: #e0e0e0;
            cursor: not-allowed;
            color: #999;
        }
        .step.completed .complete-btn {
            background: #4CAF50;
        }
        .complete-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .step.locked .complete-btn:hover {
            transform: none;
            box-shadow: none;
        }
        .lock-icon {
            font-size: 14px;
        }

        /* 图片灯箱效果 */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .lightbox.active {
            display: flex;
        }
        .lightbox img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            transition: background 0.3s;
        }
        .lightbox-close:hover {
            background: rgba(255,255,255,0.3);
        }

        /* 身份登记弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }
        .modal {
            background: white;
            border-radius: 16px;
            padding: 30px;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .modal h2 {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 18px;
        }
        .form-group label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 15px;
            transition: border-color 0.3s;
        }
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        .modal-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        /* 同步状态提示 */
        .sync-status {
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: #888;
        }
        .sync-status.success {
            color: #4CAF50;
        }
        .sync-status.error {
            color: #f44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header" id="header">
            <h1>心理咨询师报名</h1>
            <p>个人报名通道</p>
            <span class="type-badge">个人用户</span>
        </div>
        
        <div class="sync-status" id="syncStatus">准备就绪</div>
        
        <div class="steps-container" id="stepsContainer">
            <!-- 步骤将通过JS动态渲染 -->
        </div>
    </div>

    <!-- 图片灯箱 -->
    <div class="lightbox" id="lightbox" onclick="closeLightbox()">
        <span class="lightbox-close">&times;</span>
        <img id="lightboxImg" src="" alt="放大查看">
    </div>

    <!-- 身份登记弹窗 -->
    <div class="modal-overlay" id="infoModal">
        <div class="modal">
            <h2>📝 请先登记您的信息</h2>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" id="userName" placeholder="请输入您的姓名">
            </div>
            <div class="form-group">
                <label>手机号</label>
                <input type="tel" id="userPhone" placeholder="请输入您的手机号">
            </div>
            <button class="modal-btn" onclick="saveUserInfo()">开始报名流程</button>
        </div>
    </div>

    <script>
        // ==================== 配置区域 ====================
        
        // API基础URL
        const API_BASE_URL = '';
        
        // 飞书配置
        const BASE_TOKEN = 'LOrZbwzqNaB9qWsk3lXcz0k4nNg';
        const TABLE_ID = 'tblL5UO29d52YqRK';
        
        // 用户类型
        const USER_TYPE = 'personal';
        
        // localStorage前缀
        const STORAGE_PREFIX = 'psy_';
        
        // Embedded images (base64) - 图片数据将在运行时替换
        const IMG_GUIDE = 'https://jiangxin-1429604488.cos-website.ap-shanghai.myqcloud.com/guide-register-sm.jpg';
        const IMG_KEFU = 'https://jiangxin-1429604488.cos-website.ap-shanghai.myqcloud.com/qrcode-kefu.png';
        const IMG_PAY = 'https://jiangxin-1429604488.cos-website.ap-shanghai.myqcloud.com/qrcode-pay-sm.jpg';
        
        // ==================== 状态变量 ====================
        
        let userName = '';
        let userPhone = '';
        let currentStep = 0;
        
        // ==================== 步骤配置 ====================
        
        // 个人用户5步流程
        const steps = [
            {
                id: 1,
                title: '填写报名表',
                desc: '完成个人信息采集',
                feishuField: '步骤1-填写报名表',
                content: `
                    <p>🔗 在线填写：<a href="https://my.feishu.cn/share/base/form/shrcnYnqVBosqmIhtyeE1vHyUSg" target="_blank">点击打开报名表</a></p>
                    <p>📋 需准备：学历证书图片</p>
                    <div class="tip-box">
                        <p>💡 提示：请确保信息填写准确无误</p>
                    </div>
                `
            },
            {
                id: 2,
                title: '注册评价系统',
                desc: '实名注册并绑定机构编码',
                feishuField: '步骤4-评价系统注册',
                content: `
                    <p>💡 按照以下步骤完成注册：</p>
                    <div class="step-guide-img">
                        <img src="${IMG_GUIDE}" alt="步骤指引" onclick="openLightbox(this.src)">
                    </div>
                    <div class="highlight">
                        <p>🏢 上海匠馨的机构编码：</p>
                        <code>OR-48TDl9</code>
                    </div>
                    <div class="tip-box">
                        <p>💡 需要填写：毕业院校、专业、毕业时间</p>
                    </div>
                    <div class="tip-box" style="background: #d1ecf1; border-left-color: #17a2b8; margin-top: 10px;">
                        <p>ℹ️ 注册完成后，请告知客服进行机构绑定</p>
                    </div>
                `
            },
            {
                id: 3,
                title: '签署协议',
                desc: '联系客服获取专属签署二维码',
                feishuField: '步骤2-签署协议',
                content: `
                    <p>👆 请扫码联系懂小蜜客服</p>
                    <div class="qrcode-container">
                        <img src="${IMG_KEFU}" alt="客服二维码" onclick="openLightbox(this.src)">
                        <div class="qrcode-label">懂小蜜客服二维码</div>
                    </div>
                    <div class="tip-box">
                        <p>💡 提示：扫码后请告知客服您需要签署报名协议</p>
                    </div>
                `
            },
            {
                id: 4,
                title: '完成付款',
                desc: '支付宝扫码对公支付',
                feishuField: '步骤3-完成付款',
                content: `
                    <p>👆 请扫码支付培训费用</p>
                    <div class="qrcode-container">
                        <img src="${IMG_PAY}" alt="付款二维码" onclick="openLightbox(this.src)">
                        <div class="qrcode-label">支付宝付款码</div>
                    </div>
                    <div class="tip-box">
                        <p>💡 付款时请备注姓名+手机号</p>
                    </div>
                    <div class="tip-box" style="background: #d1ecf1; border-left-color: #17a2b8; margin-top: 10px;">
                        <p>ℹ️ 付款完成后，请告知客服以便开通课程</p>
                    </div>
                `
            },
            {
                id: 5,
                title: '学课平台开通',
                desc: '牧泉心理学习平台账号开通',
                feishuField: '步骤5-学课平台开通',
                content: `
                    <p>📚 报名完成后，客服将为您开通牧泉心理学习平台账号</p>
                    <div class="tip-box">
                        <p>💡 平台开通后，您将收到短信通知</p>
                    </div>
                    <div class="tip-box" style="background: #d1ecf1; border-left-color: #17a2b8; margin-top: 10px;">
                        <p>ℹ️ 如有疑问，请联系懂小蜜客服</p>
                    </div>
                `
            }
        ];
        
        // ==================== 初始化 ====================
        
        function init() {
            loadUserInfo();
            if (!userName || !userPhone) {
                document.getElementById('infoModal').style.display = 'flex';
            } else {
                loadProgress();
            }
            renderSteps();
        }
        
        // ==================== 用户信息 ====================
        
        function saveUserInfo() {
            const name = document.getElementById('userName').value.trim();
            const phone = document.getElementById('userPhone').value.trim();
            
            if (!name || !phone) {
                alert('请填写姓名和手机号');
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号');
                return;
            }
            
            userName = name;
            userPhone = phone;
            
            localStorage.setItem(STORAGE_PREFIX + 'user_name', name);
            localStorage.setItem(STORAGE_PREFIX + 'user_phone', phone);
            localStorage.setItem(STORAGE_PREFIX + 'user_type', USER_TYPE);
            
            document.getElementById('infoModal').style.display = 'none';
            currentStep = 1;
            localStorage.setItem(STORAGE_PREFIX + 'current_step', currentStep);
            renderSteps();
            syncToFeishu();
        }
        
        function loadUserInfo() {
            userName = localStorage.getItem(STORAGE_PREFIX + 'user_name') || '';
            userPhone = localStorage.getItem(STORAGE_PREFIX + 'user_phone') || '';
        }
        
        function loadProgress() {
            const saved = localStorage.getItem(STORAGE_PREFIX + 'current_step');
            currentStep = saved ? parseInt(saved) : 1;
        }
        
        // ==================== 飞书同步 ====================
        
        async function syncToFeishu() {
            updateSyncStatus('正在同步数据...', false);
            
            try {
                const url = `${API_BASE_URL}/api/sync`;
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        base_token: BASE_TOKEN,
                        table_id: TABLE_ID,
                        name: userName,
                        phone: userPhone,
                        type: USER_TYPE,
                        steps: {
                            '步骤1-填写报名表': currentStep >= 1,
                            '步骤2-签署协议': currentStep >= 2,
                            '步骤3-完成付款': currentStep >= 3,
                            '步骤4-评价系统注册': currentStep >= 4,
                            '步骤5-学课平台开通': currentStep >= 5
                        }
                    })
                });
                
                const result = await response.json();
                if (result.success) {
                    updateSyncStatus('数据已同步', true);
                } else {
                    updateSyncStatus('同步失败: ' + (result.message || '未知错误'), false);
                }
            } catch (error) {
                updateSyncStatus('网络错误', false);
                console.error('Sync error:', error);
            }
        }
        
        function updateSyncStatus(message, success) {
            const status = document.getElementById('syncStatus');
            status.textContent = message;
            status.className = 'sync-status ' + (success ? 'success' : '');
        }
        
        // ==================== 步骤操作 ====================
        
        function completeStep(stepNum) {
            if (currentStep < stepNum) {
                return;
            }
            
            if (currentStep >= stepNum + 1) {
                return;
            }
            
            currentStep = stepNum + 1;
            if (currentStep > steps.length) {
                currentStep = steps.length;
            }
            
            localStorage.setItem(STORAGE_PREFIX + 'current_step', currentStep);
            renderSteps();
            syncToFeishu();
        }
        
        function renderSteps() {
            const container = document.getElementById('stepsContainer');
            container.innerHTML = steps.map((step, index) => {
                const stepNum = index + 1;
                const isCompleted = currentStep > stepNum;
                const isLocked = currentStep < stepNum;
                const isCurrent = currentStep === stepNum;

                let iconText = stepNum;
                if (isCompleted) iconText = '✓';

                return `
                    <div class="step ${isCompleted ? 'completed' : ''} ${isLocked ? 'locked' : ''}" data-step="${stepNum}">
                        <div class="step-icon">${iconText}</div>
                        <div class="step-content">
                            <div class="step-title">
                                ${step.title}
                                ${isLocked ? '<span class="lock-icon">🔒</span>' : ''}
                                ${isCurrent ? '<span style="font-size:12px;color:#667eea;">(进行中)</span>' : ''}
                            </div>
                            <div class="step-desc">${step.desc}</div>
                            <div class="step-content-box">${step.content}</div>
                            <button class="complete-btn" onclick="completeStep(${stepNum})">
                                ${isCompleted ? '✓ 已完成' : isLocked ? '🔒 请先完成上一步' : '标记完成'}
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        // ==================== 图片灯箱 ====================
        
        function openLightbox(src) {
            const lightbox = document.getElementById('lightbox');
            const img = document.getElementById('lightboxImg');
            img.src = src;
            lightbox.classList.add('active');
        }
        
        function closeLightbox() {
            const lightbox = document.getElementById('lightbox');
            lightbox.classList.remove('active');
        }
        
        // 页面加载完成后初始化
        init();
    </script>
</body>
</html>
