"""替换 board-coach.html 中的助教卡片区域为新版本"""
import re

from _env_paths import ensure_repo_root
ensure_repo_root()

filepath = "docs/h5_ui/pages/board-coach.html"

with open(filepath, "r", encoding="utf-8") as f:
    content = f.read()

# 定位旧的助教列表区域
old_start = "    <!-- 助教列表 -->"
old_end_marker = "    <!-- 悬浮助手按钮 -->"

start_idx = content.index(old_start)
end_idx = content.index(old_end_marker)

new_coach_section = '''    <!-- 助教列表 — 默认展示"定档业绩最高"视图 -->
    <div class="p-4 space-y-3" id="coachList">

        <!-- ====== 助教卡片 1 — 小燕 ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <!-- 第一行：头像 + 信息 + 右侧数据 -->
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">小</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">小燕</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
                        <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
                    </div>
                    <!-- 定档业绩：到下一档进度（本月时展示） -->
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>星级 → 王牌</span>
                            <span class="text-primary font-medium">86.2h / 100h</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-primary to-blue-400 h-1.5 rounded-full" style="width:86%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第二行：客户 + 业绩时长 -->
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">86.2h</b></span>
                    <span class="text-gray-5">|</span>
                    <span>折前 <b class="text-gray-10">92.0h</b></span>
                </div>
            </div>
        </a>

        <!-- ====== 助教卡片 2 — 泡芙 ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">泡</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">泡芙</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-purple-400 to-violet-400 text-white text-xs rounded flex-shrink-0">高级</span>
                        <span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
                    </div>
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>高级 → 星级</span>
                            <span class="text-primary font-medium">72.5h / 80h</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-primary to-blue-400 h-1.5 rounded-full" style="width:90%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💖 陈先生</span><span>💛 刘女士</span><span>💛 黄总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">72.5h</b></span>
                    <span class="text-gray-5">|</span>
                    <span>折前 <b class="text-gray-10">78.0h</b></span>
                </div>
            </div>
        </a>

        <!-- ====== 助教卡片 3 — Amy ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">A</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">Amy</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded flex-shrink-0">星级</span>
                        <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
                        <span class="px-1.5 py-0.5 bg-success/10 text-success text-xs rounded flex-shrink-0">斯诺克</span>
                    </div>
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>星级 → 王牌</span>
                            <span class="text-primary font-medium">68.0h / 100h</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-primary to-blue-400 h-1.5 rounded-full" style="width:68%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💖 张先生</span><span>💛 周女士</span><span>💛 吴总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">68.0h</b></span>
                    <span class="text-gray-5">|</span>
                    <span>折前 <b class="text-gray-10">72.5h</b></span>
                </div>
            </div>
        </a>

        <!-- ====== 助教卡片 4 — Mia ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">M</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">Mia</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
                        <span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded flex-shrink-0">麻将</span>
                    </div>
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>中级 → 高级</span>
                            <span class="text-primary font-medium">55.0h / 60h</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-primary to-blue-400 h-1.5 rounded-full" style="width:92%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💛 赵先生</span><span>💛 吴女士</span><span>💛 孙总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">55.0h</b></span>
                </div>
            </div>
        </a>

        <!-- ====== 助教卡片 5 — 糖糖 ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-purple-400 to-violet-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">糖</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">糖糖</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-gray-400 to-gray-500 text-white text-xs rounded flex-shrink-0">初级</span>
                        <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded flex-shrink-0">中🎱</span>
                    </div>
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>初级 → 中级</span>
                            <span class="text-primary font-medium">42.0h / 40h ✅</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-success to-emerald-400 h-1.5 rounded-full" style="width:100%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💛 钱先生</span><span>💛 孙女士</span><span>💛 周总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">42.0h</b></span>
                    <span class="text-gray-5">|</span>
                    <span>折前 <b class="text-gray-10">45.0h</b></span>
                </div>
            </div>
        </a>

        <!-- ====== 助教卡片 6 — 露露 ====== -->
        <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
            <div class="flex items-start gap-3 mb-2.5">
                <div class="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-teal-500 flex items-center justify-center flex-shrink-0">
                    <span class="text-white font-semibold text-base">露</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <span class="text-base font-semibold text-gray-13">露露</span>
                        <span class="px-1.5 py-0.5 bg-gradient-to-r from-blue-400 to-indigo-400 text-white text-xs rounded flex-shrink-0">中级</span>
                        <span class="px-1.5 py-0.5 bg-error/10 text-error text-xs rounded flex-shrink-0">团建</span>
                    </div>
                    <div class="mt-1.5">
                        <div class="flex items-center justify-between text-xs text-gray-7 mb-1">
                            <span>中级 → 高级</span>
                            <span class="text-primary font-medium">38.0h / 60h</span>
                        </div>
                        <div class="w-full bg-gray-2 rounded-full h-1.5">
                            <div class="bg-gradient-to-r from-primary to-blue-400 h-1.5 rounded-full" style="width:63%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                <div class="flex items-center gap-2 text-gray-6 truncate">
                    <span>💛 郑先生</span><span>💛 冯女士</span><span>💛 陈总</span>
                </div>
                <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                    <span>定档 <b class="text-gray-10">38.0h</b></span>
                </div>
            </div>
        </a>
    </div>

    <!-- ====== 其他分类视图样式参考（隐藏，仅供原型演示切换参考） ====== -->
    <div id="styleExamples" class="hidden">

        <!-- === 工资最高/最低 视图 — 单卡示例 === -->
        <div class="p-4" data-category="salary">
            <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
                <div class="flex items-start gap-3 mb-2.5">
                    <div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
                        <span class="text-white font-semibold text-base">小</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5 flex-wrap">
                            <span class="text-base font-semibold text-gray-13">小燕</span>
                            <span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
                            <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
                        </div>
                        <!-- 工资合计（含"预估"标签） -->
                        <div class="mt-1.5 flex items-center gap-2">
                            <span class="text-lg font-semibold text-gray-13">¥12,680</span>
                            <span class="px-1.5 py-0.5 bg-warning/10 text-warning text-xs rounded">预估</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                    <div class="flex items-center gap-2 text-gray-6 truncate">
                        <span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
                    </div>
                    <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                        <span>定档 <b class="text-gray-10">86.2h</b></span>
                        <span class="text-gray-5">|</span>
                        <span>折前 <b class="text-gray-10">92.0h</b></span>
                    </div>
                </div>
            </a>
        </div>

        <!-- === 客源储值最高 视图 — 单卡示例 === -->
        <div class="p-4" data-category="stored-value">
            <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
                <div class="flex items-start gap-3 mb-2.5">
                    <div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
                        <span class="text-white font-semibold text-base">小</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5 flex-wrap">
                            <span class="text-base font-semibold text-gray-13">小燕</span>
                            <span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
                            <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
                        </div>
                        <!-- 客户会员卡余额 -->
                        <div class="mt-1.5">
                            <span class="text-lg font-semibold text-gray-13">¥45,200</span>
                            <span class="text-xs text-gray-6 ml-1">客户储值余额</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                    <div class="flex items-center gap-2 text-gray-6 truncate">
                        <span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
                    </div>
                    <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                        <span>周期消耗 <b class="text-gray-10">¥8,600</b></span>
                    </div>
                </div>
            </a>
        </div>

        <!-- === 任务完成最多 视图 — 单卡示例 === -->
        <div class="p-4" data-category="tasks">
            <a href="coach-detail.html" class="block bg-white rounded-2xl p-4 shadow-sm coach-card">
                <div class="flex items-start gap-3 mb-2.5">
                    <div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center flex-shrink-0">
                        <span class="text-white font-semibold text-base">小</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5 flex-wrap">
                            <span class="text-base font-semibold text-gray-13">小燕</span>
                            <span class="px-1.5 py-0.5 bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs rounded">星级</span>
                            <span class="px-1.5 py-0.5 bg-primary/10 text-primary text-xs rounded">中🎱</span>
                        </div>
                        <!-- 任务数 + 客户数 -->
                        <div class="mt-1.5 flex items-center gap-3">
                            <div>
                                <span class="text-lg font-semibold text-primary">32</span>
                                <span class="text-xs text-gray-6 ml-0.5">个任务</span>
                            </div>
                            <div class="w-px h-4 bg-gray-3"></div>
                            <div>
                                <span class="text-lg font-semibold text-gray-13">18</span>
                                <span class="text-xs text-gray-6 ml-0.5">位客户</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100">
                    <div class="flex items-center gap-2 text-gray-6 truncate">
                        <span>💖 王先生</span><span>💖 李女士</span><span>💛 赵总</span>
                    </div>
                    <div class="flex items-center gap-2 text-gray-7 flex-shrink-0">
                        <span>定档 <b class="text-gray-10">86.2h</b></span>
                        <span class="text-gray-5">|</span>
                        <span>折前 <b class="text-gray-10">92.0h</b></span>
                    </div>
                </div>
            </a>
        </div>
    </div>

'''

content = content[:start_idx] + new_coach_section + content[end_idx:]

with open(filepath, "w", encoding="utf-8") as f:
    f.write(content)

print("OK — coach cards replaced successfully")
