#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""P3：试点上手一页图（自包含 HTML，品牌注入）。

给 Q8 试点用的「入口变了、功能没少」一页说明。零外链、无真实客户名。
"""
import io
import os
import sys

sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
import brand_kit as BK  # noqa: E402

ROOT = '/Users/liuxinyuan/Desktop/Hermes输出-工作类'
OUT = os.path.join(ROOT, '工作台改版上手一页图.html')

MOVED = [
    ('我的活动', '已下线', '它和「拜访与活动」的列表是同一件事，看一眼就重复了'),
    ('活动录入', '📈 拜访与活动 › ✍️ 录', '现在「记一次」和「看回记录」在同一个页面，不用来回切 Tab'),
    ('拜访视图', '📈 拜访与活动 › 👀 看', '多了 12 个月趋势、客户筛选、每个客户的「去前准备」'),
    ('历史成交价', '📦 订单与业绩 › 💰 历史成交价', '和「订单管理」合成一个 Tab 的两个视角：查单 / 查价'),
    ('客诉', '🔴 经营管理 › 客诉', '客诉是经营质量指标，挪到经营域；客户档案里照样能看该客户的客诉'),
    ('目标基础数据', '🎯 经营管理 › 目标基础数据', '归位（仍是管理员可见）'),
    ('数据管理', '📤 经营管理 › 数据管理', '归位（仍是管理员可见）'),
]

STEPS = [
    ('记一次拜访', '📈 拜访与活动 → 右上「＋ 记一次拜访/跟进」→ 填完提交',
     '活动形式（线下拜访/线上跟进）<b>必填</b>；提交前会生成待办清单，<b>勾了确认的才进待办</b>。'),
    ('看这个月的账', '📈 拜访与活动 → 选月份 → 👤我的 / 👥全队',
     '管理者可切「全队」，销售默认只看自己；点客户展开活动明细，点「看详情」出可复制的飞书描述。'),
    ('拜访卡也能用', '客户页的拜访卡 →「新建拜访纪要」',
     '现在会直接落到同一个录入页（以前那个老页面只生成文本、不记账，所以记了拜访统计一直是 0）。'),
]


def esc(s):
    return (str(s if s is not None else '').replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;'))


def main():
    rows = ''.join(
        '<tr><td class="c old">%s</td><td class="c new">%s</td><td>%s</td></tr>'
        % (esc(a), esc(b), c) for a, b, c in MOVED)

    steps = ''.join(
        '<div class="step"><div class="sn">%d</div><div><div class="st">%s</div>'
        '<div class="sp">%s</div><div class="sd">%s</div></div></div>'
        % (i + 1, esc(a), esc(b), c) for i, (a, b, c) in enumerate(STEPS))

    html = '''<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>工作台改版 · 上手一页图</title>
<style>
:root{--pri:#1F4E9C;--ikb:#002FA7;--ink:#1f2328;--sub:#5f6368;--line:#e5e7eb;--bg:#f6f8fb}
*{box-sizing:border-box}
body{margin:0;font:15px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:1020px;margin:0 auto;padding:22px}
.hero{background:linear-gradient(120deg,#1F4E9C,#002FA7);color:#fff;border-radius:14px;padding:26px 28px;margin-bottom:18px}
.hero h1{margin:0 0 8px;font-size:25px}
.hero p{margin:6px 0;opacity:.95}
.big{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.big h2{font-size:17px;margin:0 0 12px;padding-left:10px;border-left:4px solid var(--pri)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
th{background:#f2f5fa;font-size:12.5px;color:var(--sub)}
td.c{white-space:nowrap}
td.old{color:#9aa0a6;text-decoration:line-through}
td.new{color:var(--ikb);font-weight:800}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:none}
.sn{flex:none;width:32px;height:32px;border-radius:50%;background:var(--pri);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.st{font-weight:800;font-size:15.5px;color:var(--pri)}
.sp{font-size:14px;margin:3px 0}
.sd{font-size:13px;color:var(--sub);background:#f8fafc;border-left:3px solid #cbd5e1;padding:6px 10px;border-radius:0 6px 6px 0}
.figw{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px;overflow-x:auto}
.figw svg{display:block;margin:0 auto;min-width:680px}
.ok{background:#f2fbf5;border:1px solid #cdebd9;border-radius:10px;padding:13px 15px;font-size:14px}
.ask{background:#fff8f2;border:1px solid #ffe0c2;border-radius:10px;padding:13px 15px;font-size:14px}
</style></head><body>
<div class="wrap">

<div class="hero">
  <h1>工作台改版 · 上手一页图</h1>
  <p>这次只做两件事：把<b>「记拜访」和「看拜访」合成一页</b>；把导航按<b>经营管理 / 客户管理</b>重分。</p>
  <p><b>功能一个没少</b>，只是换了位置。下面三分钟看完。</p>
</div>

<div class="figw">__FIG__</div>

<div class="big">
  <h2>你原来在哪里 → 现在在哪里</h2>
  <table><thead><tr><th class="c" style="width:150px">原来的入口</th><th class="c" style="width:230px">现在的位置</th><th>说明</th></tr></thead>
  <tbody>__ROWS__</tbody></table>
</div>

<div class="big">
  <h2>三步上手</h2>
  __STEPS__
</div>

<div class="big">
  <h2>侧栏新样子</h2>
  <div class="figw" style="margin:0">__FIGNAV__</div>
</div>

<div class="ok">
  <b>找不到入口怎么办？</b> 现在是试点期，<b>直接在群里说「我要做 XXX 找不到」</b>就行——不用自己翻。3 天试点就是为了把这类反馈一次收齐。
</div>
<div class="ask" style="margin-top:12px">
  <b>这次为什么值得改：</b>以前拜访卡记的拜访走的是老页面（只生成一段文字让你复制到飞书，<b>不进工作台</b>），
  所以「拜访视图」的计数一直是 0 —— 你记了、系统不知道。现在所有入口都落到同一个录入页，<b>记一次就真的记上一次</b>。
</div>

</div>
</body></html>'''

    fig = '''<svg viewBox="0 0 1000 210" width="100%" height="210" role="img" aria-label="改版前后对照">
  <defs><marker id="a2" markerWidth="9" markerHeight="9" refX="8" refY="3" orient="auto"><path d="M0,0 L0,6 L8,3 z" fill="#1F4E9C"/></marker></defs>
  <rect x="14" y="26" width="300" height="158" rx="10" fill="#fff" stroke="#cbd5e1"/>
  <text x="164" y="50" font-size="13" font-weight="800" fill="#5f6368" text-anchor="middle">改版前</text>
  <rect x="30" y="62" width="268" height="26" rx="6" fill="#f1f3f4"/><text x="40" y="80" font-size="11.5" fill="#5f6368">📊 经营 · 拜访视图（只看）</text>
  <rect x="30" y="94" width="268" height="26" rx="6" fill="#f1f3f4"/><text x="40" y="112" font-size="11.5" fill="#5f6368">🧑‍💼 我的 · 活动录入（只录）</text>
  <rect x="30" y="126" width="268" height="26" rx="6" fill="#f1f3f4"/><text x="40" y="144" font-size="11.5" fill="#5f6368">🧑‍💼 我的 · 我的活动（重复）</text>
  <text x="164" y="172" font-size="11" fill="#d93025" text-anchor="middle">同一件事被拆成 3 个入口</text>

  <path d="M322 105 L392 105" stroke="#1F4E9C" stroke-width="2.5" marker-end="url(#a2)"/>

  <rect x="400" y="26" width="300" height="158" rx="10" fill="#eef3fb" stroke="#1F4E9C" stroke-width="1.5"/>
  <text x="550" y="50" font-size="13" font-weight="800" fill="#0F3A8A" text-anchor="middle">改版后</text>
  <rect x="416" y="62" width="268" height="26" rx="6" fill="#fff" stroke="#c7d7ee"/><text x="426" y="80" font-size="11.5" fill="#1F4E9C">📈 拜访与活动 › 👀 看</text>
  <rect x="416" y="94" width="268" height="26" rx="6" fill="#fff" stroke="#c7d7ee"/><text x="426" y="112" font-size="11.5" fill="#1F4E9C">📈 拜访与活动 › ✍️ 录</text>
  <rect x="416" y="126" width="268" height="26" rx="6" fill="#f2fbf5" stroke="#cdebd9"/><text x="426" y="144" font-size="11.5" fill="#0b6b3a">✅ 下一步计划 → 待办（已打通）</text>
  <text x="550" y="172" font-size="11" fill="#0d904f" text-anchor="middle">一个页面，一进一出</text>

  <path d="M708 105 L778 105" stroke="#1F4E9C" stroke-width="2.5" marker-end="url(#a2)"/>
  <rect x="786" y="52" width="200" height="106" rx="10" fill="#fff" stroke="#cbd5e1" stroke-dasharray="5 4"/>
  <text x="886" y="78" font-size="12.5" font-weight="700" fill="#5f6368" text-anchor="middle">导航按「管什么」分</text>
  <text x="886" y="100" font-size="11.5" fill="#5f6368" text-anchor="middle">📊 经营管理</text>
  <text x="886" y="118" font-size="11.5" fill="#5f6368" text-anchor="middle">👥 客户管理</text>
  <text x="886" y="136" font-size="11.5" fill="#5f6368" text-anchor="middle">🧑‍💼 我的 · 🤖 智能</text>
</svg>'''

    fignav = '''<svg viewBox="0 0 1000 176" width="100%" height="176" role="img" aria-label="侧栏新结构">
  <rect x="20" y="10" width="228" height="156" rx="10" fill="#0f172a"/>
  <text x="36" y="32" font-size="10.5" font-weight="800" fill="#64748b">📊 经营管理</text>
  <text x="36" y="52" font-size="12" fill="#cbd5e1">📊 看板</text>
  <text x="36" y="72" font-size="12" fill="#fff" font-weight="700">📈 拜访与活动</text>
  <text x="36" y="92" font-size="12" fill="#cbd5e1">📦 订单与业绩</text>
  <text x="36" y="112" font-size="12" fill="#cbd5e1">🔴 客诉</text>
  <text x="36" y="132" font-size="12" fill="#cbd5e1">🎯 目标基础数据</text>
  <text x="36" y="152" font-size="12" fill="#cbd5e1">📤 数据管理</text>

  <rect x="266" y="10" width="228" height="156" rx="10" fill="#0f172a"/>
  <text x="282" y="32" font-size="10.5" font-weight="800" fill="#64748b">👥 客户管理</text>
  <text x="282" y="52" font-size="12" fill="#cbd5e1">📋 客户</text>
  <text x="282" y="72" font-size="12" fill="#cbd5e1">🔬 课题组</text>
  <text x="282" y="92" font-size="12" fill="#cbd5e1">🎯 商机沙盘</text>
  <text x="282" y="112" font-size="12" fill="#cbd5e1">📝 访前准备</text>
  <text x="282" y="132" font-size="12" fill="#cbd5e1">⭐ 特殊要求</text>

  <rect x="512" y="10" width="200" height="156" rx="10" fill="#0f172a"/>
  <text x="528" y="32" font-size="10.5" font-weight="800" fill="#64748b">🧑‍💼 我的</text>
  <text x="528" y="52" font-size="12" fill="#cbd5e1">✅ 待办</text>
  <text x="528" y="72" font-size="12" fill="#cbd5e1">🧾 报销</text>
  <text x="528" y="104" font-size="10.5" font-weight="800" fill="#64748b">🤖 智能</text>
  <text x="528" y="124" font-size="12" fill="#cbd5e1">🤖 AI 助手</text>
  <text x="528" y="150" font-size="10.5" fill="#64748b">（只放个人事务）</text>

  <rect x="738" y="10" width="248" height="156" rx="10" fill="#fff" stroke="#cbd5e1"/>
  <text x="862" y="34" font-size="12.5" font-weight="800" fill="#1F4E9C" text-anchor="middle">手机底栏固定 4 项</text>
  <text x="862" y="60" font-size="12" fill="#3c4043" text-anchor="middle">📈 拜访与活动 ｜ 📋 客户</text>
  <text x="862" y="82" font-size="12" fill="#3c4043" text-anchor="middle">✅ 待办 ｜ 🤖 AI 助手</text>
  <text x="862" y="108" font-size="11" fill="#5f6368" text-anchor="middle">一线最高频的是「记拜访」，</text>
  <text x="862" y="126" font-size="11" fill="#5f6368" text-anchor="middle">看板是管理动作，不再占底栏</text>
</svg>'''

    html = (html.replace('__ROWS__', rows).replace('__STEPS__', steps)
            .replace('__FIG__', fig).replace('__FIGNAV__', fignav))
    html = BK.inject(html, theme='light', tag='营销中心')
    io.open(OUT, 'w', encoding='utf-8').write(html)
    vr = BK.verify(html)
    bad = [k for k, v in vr.items() if not v]
    print('✅ 生成 %s (%.1f KB)' % (OUT, len(html.encode('utf-8')) / 1024))
    print('   brand_kit verify:', '✅ 通过' if not bad else '❌ 缺 ' + ', '.join(bad))
    print('   迁移对照 %d 条 ｜ 上手步骤 %d 步 ｜ 图 %d 张' % (len(MOVED), len(STEPS), 2))


main()
