# -*- coding: utf-8 -*-
"""彻底修窄屏被撑宽的问题。

上次修完，统计卡正常了（2x2），但设备行的值还是被右边截断。

原因：
    窄屏下 td 是 display:flex、justify-content:space-between。
    「待发(表/机)」「流量」这些格子里放的是**裸文本**，
    在 flex 容器里会变成一个匿名 flex 项，而匿名项默认
    min-width:auto —— 不会收缩，于是把行撑宽、右边被截。

修法：
    1. 每个值都包一层 <span class=val>，给它 min-width:0 + 可换行
    2. 窄屏下强制 table/tbody/tr/td 都是 width:100% + border-box，
       从根上保证不会有东西超出容器
"""
from __future__ import annotations

import ast
import sys
from pathlib import Path

RELAY = Path(r"C:\Users\shu\Desktop\deepseekagent\LanRemote\relay" r"\relay.py")

# ---------------- 1. 值都包进 span.val ----------------

ROW_OLD = '''                f'<td data-l="配对码"><code>{_esc(device["code"])}</code></td>'
                f'<td data-l="状态">{badge}</td>'
                f'<td data-l="空闲">{device["idleSeconds"]}s</td>'
                f'<td data-l="待发(表/机)">{device["queuedToClient"]} / '
                f'{device["queuedToAgent"]}</td>'
                f'<td class=num data-l="流量(入/出)">'
                f'{_kb(device["bytesIn"])} / {_kb(device["bytesOut"])}</td>' '''

ROW_NEW = '''                f'<td data-l="配对码">'
                f'<span class=val><code>{_esc(device["code"])}</code></span></td>'
                f'<td data-l="状态"><span class=val>{badge}</span></td>'
                f'<td data-l="空闲">'
                f'<span class=val>{device["idleSeconds"]}s</span></td>'
                f'<td data-l="待发(表/机)"><span class=val>'
                f'{device["queuedToClient"]} / {device["queuedToAgent"]}'
                f'</span></td>'
                f'<td class=num data-l="流量(入/出)"><span class=val>'
                f'{_kb(device["bytesIn"])} / {_kb(device["bytesOut"])}'
                f'</span></td>' '''

# ---------------- 2. 窄屏强制宽度 ----------------

MEDIA_ANCHOR = ''' @media (max-width:720px){{
   .wrap{{padding:16px 12px 32px}}'''

MEDIA_NEW = ''' @media (max-width:720px){{
   .wrap{{padding:16px 12px 32px}}
   /* 从根上保证不会有东西超出容器。
      表格在窄屏变成卡片式，这几条必须写死，
      不然 table-layout:fixed 对 display:block 的行不起作用。 */
   table,tbody,tr,td{{display:block;width:100%;max-width:100%;
     box-sizing:border-box}}'''

# 值那一层的样式（放在基础样式里，宽屏窄屏都用）
VAL_ANCHOR = ''' .sub2{{color:var(--muted);font-size:11px;font-weight:400;
   font-family:ui-monospace,Consolas,monospace;margin-top:1px}}'''
VAL_NEW = VAL_ANCHOR + '''
 .val{{min-width:0;overflow-wrap:anywhere;word-break:break-word}}'''

# 窄屏 td 的 flex 里，值要能收缩
TD_OLD = '''   tbody td{{display:flex;justify-content:space-between;align-items:baseline;
     gap:14px;border:none;padding:3px 0;text-align:right;
     min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}}'''
TD_NEW = '''   tbody td{{display:flex;justify-content:space-between;align-items:baseline;
     gap:14px;border:none;padding:3px 0;text-align:right;
     min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}}
   tbody td .val{{flex:1 1 auto;min-width:0;text-align:right}}
   td.name{{display:block}}'''


def main() -> int:
    text = RELAY.read_text(encoding="utf-8")
    ok = True

    for old, new, label in (
            (ROW_OLD, ROW_NEW, "值包进 span.val"),
            (VAL_ANCHOR, VAL_NEW, "加 .val 样式"),
            (MEDIA_ANCHOR, MEDIA_NEW, "窄屏强制 100% 宽度"),
            (TD_OLD, TD_NEW, "窄屏 .val 可收缩")):
        if old in text:
            text = text.replace(old, new, 1)
            print(f"  {label}")
        else:
            print(f"  [失败] {label} —— 锚点没找到")
            ok = False

    RELAY.write_text(text, encoding="utf-8", newline="\n")
    ast.parse(text)
    print("  relay.py 语法 OK")
    return 0 if ok else 1


if __name__ == "__main__":
    sys.exit(main())