<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563EB">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="高报专家">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
    <title>高报专家 - 让志愿填报不再迷茫</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
    <!-- 角色选择页（入口页） -->
    <div id="role-page" class="page active">
        <div class="login-container">
            <div class="logo-section">
                <div class="logo-icon">🎓</div>
                <h1 class="logo-title">高报专家</h1>
                <p class="logo-subtitle">让志愿填报不再迷茫</p>
            </div>

            <div class="role-cards">
                <div class="role-card" onclick="selectRole('personal')">
                    <div class="role-card-icon">👨‍🎓</div>
                    <h3 class="role-card-title">个人用户</h3>
                    <p class="role-card-desc">考生或家长，为自己填报志愿</p>
                    <div class="role-card-features">
                        <span>AI 智能咨询</span>
                        <span>个性化分析报告</span>
                        <span>专业/院校推荐</span>
                    </div>
                </div>

                <div class="role-card" onclick="selectRole('institution')">
                    <div class="role-card-icon">🏢</div>
                    <h3 class="role-card-title">志愿填报机构</h3>
                    <p class="role-card-desc">管理多名考生档案，批量服务</p>
                    <div class="role-card-features">
                        <span>考生档案管理</span>
                        <span>一键切换身份</span>
                        <span>独立对话记录</span>
                    </div>
                </div>
            </div>

            <div class="login-footer">
                <p>选择您的使用身份</p>
            </div>
        </div>
    </div>

    <!-- 首页（含快速信息面板） -->
    <div id="home-page" class="page">
        <div class="home-container">
            <!-- 机构模式：考生切换栏 -->
            <div class="profile-switcher" id="profile-switcher" style="display:none">
                <div class="profile-switcher-header">
                    <span class="profile-switcher-label">📋 考生档案</span>
                    <button class="profile-add-btn" onclick="showProfilesPage()">+ 管理考生</button>
                </div>
                <div class="profile-switcher-body">
                    <select id="profile-select" class="profile-select" onchange="switchProfile(this.value)">
                        <!-- 动态填充 -->
                    </select>
                </div>
            </div>

            <div class="home-header">
                <div class="user-info">
                    <div class="avatar" id="home-avatar">👤</div>
                    <div class="user-text">
                        <span class="greeting" id="greeting-text">Hi，家长/同学</span>
                        <span class="user-status" id="user-status-text">体验版用户</span>
                    </div>
                </div>
                <div class="header-actions">
                    <span class="vip-badge" id="home-vip-badge">免费体验</span>
                </div>
            </div>

            <div class="hero-section">
                <h2>高考志愿填报</h2>
                <h3>AI专家帮你找到方向</h3>
                <p>不是给你答案，而是帮你问出真问题</p>

                <!-- 快速信息填写（原版，正常工作） -->
                <div class="quick-info-panel" id="quick-info-panel">
                    <div class="info-row">
                        <span class="info-label">高考年份 <em class="required">*</em></span>
                        <select id="quick-year" class="info-select">
                            <option value="">请选择年份</option>
                        </select>
                    </div>
                    <div class="info-row">
                        <span class="info-label">考生省份 <em class="required">*</em></span>
                        <select id="quick-province" class="info-select">
                            <option value="">请选择省份</option>
                        </select>
                    </div>
                    <div class="info-row">
                        <span class="info-label">选科组合 <em class="required">*</em></span>
                        <select id="quick-category" class="info-select">
                            <option value="">请先选择省份和年份</option>
                        </select>
                    </div>
                    <div class="info-row">
                        <span class="info-label">高考成绩</span>
                        <input type="number" id="quick-score" class="info-input" placeholder="分数（选填）" min="0" max="750">
                    </div>
                    <div class="info-row">
                        <span class="info-label">省排名</span>
                        <input type="number" id="quick-rank" class="info-input" placeholder="位次（选填，比分数更关键）" min="1">
                    </div>
                    <p class="info-hint">标 <em class="required">*</em> 为必填项<br>不知道位次？先填分数，AI 帮你估算</p>
                </div>

                <button id="start-chat" class="start-btn" onclick="startChat()">开始咨询</button>
            </div>

            <div class="features-section">
                <div class="feature-card">
                    <span class="feature-icon">🎯</span>
                    <h4>深度追问</h4>
                    <p>帮你找到真正想要的</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">📊</span>
                    <h4>专业分析</h4>
                    <p>生成个性化预案</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">📝</span>
                    <h4>Word报告</h4>
                    <p>可下载可分享</p>
                </div>
            </div>

            <div class="stats-section">
                <div class="stat-item">
                    <span class="stat-num" id="stat-total">∞</span>
                    <span class="stat-label">免费对话</span>
                </div>
                <div class="stat-item">
                    <span class="stat-num" id="stat-used">0</span>
                    <span class="stat-label">已使用</span>
                </div>
                <div class="stat-item">
                    <span class="stat-num">0</span>
                    <span class="stat-label">生成报告</span>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home')">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('chat')">
                <span class="nav-icon">💬</span>
                <span>对话</span>
            </div>
            <div class="nav-item" onclick="showPage('report')">
                <span class="nav-icon">📋</span>
                <span>报告</span>
            </div>
            <div class="nav-item" onclick="showPage('member')">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- 对话页 -->
    <div id="chat-page" class="page">
        <div class="chat-container">
            <div class="chat-header">
                <button class="back-btn" onclick="showPage('home')">←</button>
                <div class="chat-title">
                    <span class="expert-avatar">🎓</span>
                    <span>高报专家</span>
                </div>
                <button class="menu-btn" onclick="generateReport()" title="生成报告">📋</button>
            </div>

            <div class="chat-messages" id="messages">
                <div class="message bot">
                    <div class="msg-avatar">🎓</div>
                    <div class="msg-content">
                        <p>你好！我是高报专家 🎓</p>
                        <p>在开始之前，我想先了解一下：</p>
                        <p><strong>你是考生本人，还是家长？</strong></p>
                    </div>
                </div>
                <div class="quick-replies">
                    <button class="quick-btn" onclick="sendQuickReply('我是考生')">我是考生</button>
                    <button class="quick-btn" onclick="sendQuickReply('我是家长')">我是家长</button>
                </div>
            </div>

            <!-- 快捷回复按钮栏 -->
            <div class="quick-actions" id="quick-actions"></div>

            <div class="chat-input">
                <textarea id="user-input" placeholder="输入消息..." rows="1"></textarea>
                <button id="send-btn" onclick="sendMessage()">发送</button>
            </div>
        </div>
    </div>

    <!-- 报告页 -->
    <div id="report-page" class="page">
        <div class="report-container">
            <!-- 顶部栏 -->
            <div class="report-header">
                <button class="back-btn" onclick="showPage('chat')">←</button>
                <span class="report-title">志愿分析报告</span>
                <button class="report-share-btn" id="report-share-btn" onclick="shareReport()">分享</button>
            </div>

            <!-- 报告内容 -->
            <div class="report-body" id="report-body">
                <!-- 空状态 -->
                <div class="report-empty" id="report-empty">
                    <div class="report-empty-icon">📋</div>
                    <h3>还没有生成报告</h3>
                    <p>先去对话中和 AI 专家聊聊你的情况，然后回来生成专属报告</p>
                    <button class="start-btn" onclick="showPage('chat'); generateReport();">去生成报告</button>
                </div>

                <!-- 报告内容（初始隐藏） -->
                <div class="report-content" id="report-content" style="display:none">
                    <!-- 封面 -->
                    <div class="report-cover" id="report-cover">
                        <div class="cover-badge">AI 分析</div>
                        <h2 class="cover-title" id="cover-title">高考志愿分析报告</h2>
                        <div class="cover-meta" id="cover-meta">
                            <span id="cover-province"></span>
                            <span class="meta-divider">|</span>
                            <span id="cover-category"></span>
                            <span class="meta-divider">|</span>
                            <span id="cover-date"></span>
                        </div>
                    </div>

                    <!-- 流式渲染区 -->
                    <div class="report-stream" id="report-stream">
                        <div class="report-status" id="report-status">
                            <span class="status-text">正在生成报告...</span>
                        </div>
                        <div class="report-text md-content" id="report-text" style="display:none"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 考生档案管理页（机构模式） -->
    <div id="profiles-page" class="page">
        <div class="member-container">
            <div class="mbti-header" style="padding:16px 20px;background:var(--white);border-bottom:1px solid var(--border)">
                <button class="back-btn" onclick="showPage('home')">←</button>
                <h3 class="mbti-title">考生档案管理</h3>
                <button class="profile-add-btn" onclick="showAddProfileForm()" style="font-size:14px;padding:6px 14px">+ 新建</button>
            </div>

            <!-- 新建/编辑档案表单（默认隐藏） -->
            <div id="profile-form-panel" style="display:none;padding:20px">
                <h4 id="profile-form-title" style="margin-bottom:16px;font-size:17px;color:var(--text)">新建考生档案</h4>
                <div class="input-group">
                    <span class="input-icon">👤</span>
                    <input type="text" id="pf-name" placeholder="考生姓名（必填）" maxlength="20">
                </div>
                <div class="input-group">
                    <span class="input-icon">📅</span>
                    <select id="pf-year" class="info-select">
                        <option value="">高考年份</option>
                    </select>
                </div>
                <div class="input-group">
                    <span class="input-icon">📍</span>
                    <select id="pf-province" class="info-select">
                        <option value="">考生省份</option>
                    </select>
                </div>
                <div class="input-group">
                    <span class="input-icon">📚</span>
                    <select id="pf-category" class="info-select">
                        <option value="">选科组合</option>
                    </select>
                </div>
                <div class="input-group">
                    <span class="input-icon">📊</span>
                    <input type="number" id="pf-score" placeholder="高考成绩（选填）" min="0" max="750">
                </div>
                <div class="input-group">
                    <span class="input-icon">🏅</span>
                    <input type="number" id="pf-rank" placeholder="省排名（选填）" min="1">
                </div>
                <div class="input-group">
                    <span class="input-icon">📝</span>
                    <input type="text" id="pf-notes" placeholder="备注（如：理科偏好、城市倾向）" maxlength="100">
                </div>
                <div style="display:flex;gap:12px;margin-top:16px">
                    <button class="vip-btn" style="flex:1;background:#94A3B8;color:white;padding:14px;font-size:16px;border-radius:10px" onclick="cancelProfileForm()">取消</button>
                    <button class="login-btn" style="flex:1;padding:14px;font-size:16px" onclick="saveProfile()">保存</button>
                </div>
            </div>

            <!-- 档案列表 -->
            <div id="profiles-list" style="padding:20px">
                <!-- 动态填充 -->
            </div>

            <div id="profiles-empty" style="display:none;text-align:center;padding:60px 20px;color:var(--text-light)">
                <div style="font-size:48px;margin-bottom:16px">📋</div>
                <h3 style="margin-bottom:8px;color:var(--text)">暂无考生档案</h3>
                <p style="margin-bottom:24px">点击上方「+ 新建」添加第一位考生</p>
            </div>
        </div>
    </div>

    <!-- 会员页 -->
    <div id="member-page" class="page">
        <div class="member-container">
            <div class="member-header">
                <div class="member-avatar" id="member-avatar">👤</div>
                <div class="member-info">
                    <span class="member-name" id="member-name-text">体验用户</span>
                    <span class="member-status" id="member-role-text">免费体验版</span>
                </div>
            </div>

            <!-- 机构模式：快捷入口 -->
            <div class="institution-section" id="institution-section" style="display:none">
                <div class="menu-item" onclick="showProfilesPage()">
                    <span>📋 考生档案管理</span>
                    <span id="profile-count-badge" style="background:var(--primary);color:white;border-radius:12px;padding:2px 10px;font-size:12px">0</span>
                </div>
                <div class="menu-item" onclick="showPage('home')">
                    <span>🔄 切换考生</span>
                    <span>→</span>
                </div>
            </div>

            <div class="usage-section">
                <h3>使用情况</h3>
                <div class="usage-bar">
                    <div class="usage-progress" id="usage-progress" style="width: 0%"></div>
                </div>
                <div class="usage-text">
                    <span id="usage-used-text">已使用 0 次</span>
                    <span id="usage-remain-text">不限次数</span>
                </div>
            </div>

            <div class="vip-cards">
                <div class="vip-card">
                    <div class="vip-badge">体验版</div>
                    <div class="vip-price">免费</div>
                    <div class="vip-features">
                        <p>✓ 10次AI对话</p>
                        <p>✗ 不含报告</p>
                    </div>
                    <button class="vip-btn current">当前版本</button>
                </div>
                <div class="vip-card popular">
                    <div class="vip-badge">推荐</div>
                    <div class="vip-price">¥99</div>
                    <div class="vip-name">进阶版</div>
                    <div class="vip-features">
                        <p>✓ 无限对话</p>
                        <p>✓ 1次完整报告</p>
                    </div>
                    <button class="vip-btn">立即购买</button>
                </div>
                <div class="vip-card">
                    <div class="vip-badge">月卡</div>
                    <div class="vip-price">¥299</div>
                    <div class="vip-features">
                        <p>✓ 无限对话</p>
                        <p>✓ 3次报告/月</p>
                    </div>
                    <button class="vip-btn">立即购买</button>
                </div>
            </div>

            <div class="member-menu">
                <div class="menu-item" onclick="clearChat()">
                    <span>🗑️ 清空对话记录</span>
                    <span>→</span>
                </div>
                <div class="menu-item">
                    <span>📄 我的报告</span>
                    <span>→</span>
                </div>
                <div class="menu-item" onclick="resetRole()">
                    <span>🔄 切换身份（个人/机构）</span>
                    <span>→</span>
                </div>
                <div class="menu-item">
                    <span>⚙️ 设置</span>
                    <span>→</span>
                </div>
                <div class="menu-item">
                    <span>📞 联系客服</span>
                    <span>→</span>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('chat')">
                <span class="nav-icon">💬</span>
                <span>对话</span>
            </div>
            <div class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </div>
        </div>
    </div>

    <script src="js/mbti.js"></script>
    <script src="js/app.js?v=20260507-6"></script>
</body>
</html>
