"""大型店の店の形を、サイトの試算（public/sim/serving-robot.html）の平面図と同じ描き方で画像にする

- 描き方はサイトの planSvg（店の形を選ぶカードの小さい図）と bigPlanSvg（選んだときの大きい図）を、
  serving-robot.html からそのまま抜き出して使う（見た目をサイトとそろえるため。描き方を写し直さない）
- 元のデータは large_store.py が出す {名前}_plan.json
- 出力：カードの並び（今の標準ファミレスの7枚＋大型店）と、大型店ごとの大きい図の png

使い方: python3 large_plan_images.py [plan.json のフォルダ] [出力フォルダ]
"""
import json
import re
import sys
import tempfile
from pathlib import Path

from playwright.sync_api import sync_playwright

HERE = Path(__file__).resolve().parent
PAGE = HERE.parent.parent / "public" / "sim" / "serving-robot.html"
SHORT = {"p6_large_center": "⑧ 大型・受け渡し口が奥の真ん中", "p6_large_left": "⑧ 大型・受け渡し口が左寄り",
         "p6_large_right": "⑧ 大型・受け渡し口が右寄り", "p7_large_b": "⑨ 大型・厨房が右・入口が角"}


def grab(src, name):
    """serving-robot.html から function name(...) { ... } をそのまま抜き出す"""
    i = src.index(f"function {name}(")
    depth, j = 0, src.index("{", i)
    for k in range(j, len(src)):
        depth += {"{": 1, "}": -1}.get(src[k], 0)
        if depth == 0:
            return src[i:k + 1]


def css(src):
    # ページには <style> が複数ある。平面図のカードの決まりは後ろの方にあるので、全部から拾う
    body = "".join(re.findall(r"<style[^>]*>(.*?)</style>", src, flags=re.S))
    body = re.sub(r"/\*.*?\*/", "", body, flags=re.S)
    rules = re.findall(r"[^{}]*\{[^}]*\}", body)
    keep = [r.strip() for r in rules if re.search(r"\.layouts|\.plan-big|\.noplan", r.split("{")[0])
            and "html.lp" not in r.split("{")[0]]
    return "\n".join(keep)


def main():
    pdir = Path(sys.argv[1]) if len(sys.argv) > 1 else Path(tempfile.gettempdir()) / "variants_large"
    out = Path(sys.argv[2]) if len(sys.argv) > 2 else pdir / "site_images"
    out.mkdir(parents=True, exist_ok=True)
    src = PAGE.read_text(encoding="utf-8")
    m = re.search(r'"plans":(\{.*?\}\}\})', src)
    i = src.index('"plans":') + len('"plans":')
    plans_now, _ = json.JSONDecoder().raw_decode(src[i:])
    j = src.index('"stores":') + len('"stores":')
    stores, _ = json.JSONDecoder().raw_decode(src[j:])
    new = [json.load(open(f, encoding="utf-8")) for f in sorted(pdir.glob("*_plan.json"))]
    # 今の標準ファミレスのカード（① 図面なし ＋ 図面のある店）
    cards = [dict(name="① 図面なし", sub=f"{stores['family']['tables']}卓・{stores['family']['dist_m'][0]}〜{stores['family']['dist_m'][1]}m", plan=None)]
    for k, s in stores.items():
        if s.get("layout") and k in plans_now:
            cards.append(dict(name=s["short"], sub=f"{s['tables']}卓・{s['dist_m'][0]}〜{s['dist_m'][1]}m", plan=plans_now[k]))
    big_cards = [dict(key=n["key"], name=SHORT.get(n["key"], n["name"]),
                      sub=f"{n['tables']}卓・{n['dist_m'][0]}〜{n['dist_m'][1]}m", plan=n["plan"], info=n) for n in new]
    js = grab(src, "planSvg") + "\n" + grab(src, "bigPlanSvg")
    html = f"""<!doctype html><html lang="ja"><head><meta charset="utf-8">
<style>
body {{ margin: 0; background: #fff; font-family: "Noto Sans JP", "Noto Sans CJK JP", sans-serif; color: #242424; }}
.wrap {{ width: 1180px; padding: 20px; }}
{css(src)}
.layouts {{ margin-top: 0; border-radius: 12px; }}
.layouts .lay-grid.big {{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}
.layouts label svg {{ color: inherit; }}
</style></head><body><div class="wrap" id="root"></div>
<script>
{js}
const CARDS = {json.dumps(cards, ensure_ascii=False)};
const NEW = {json.dumps(big_cards, ensure_ascii=False)};
const card = (c, on) => `<input type="radio"${{on ? " checked" : ""}}><label>${{c.plan ? planSvg(c.plan) : '<div class="noplan">距離の幅だけで試算</div>'}}<b>${{c.name}}</b><span>${{c.sub}}</span></label>`;
let h = `<div class="layouts" id="grid-now"><p class="lay-h">店の形を選ぶ（標準ファミレス）。いま公開している7枚</p><div class="lay-grid">${{CARDS.map((c, i) => card(c, i === 0)).join("")}}</div></div>`;
h += `<div style="height:16px"></div><div class="layouts" id="grid-new"><p class="lay-h">店の形を選ぶ（大型店）。試作</p><div class="lay-grid big">${{NEW.map((c, i) => card(c, i === 0)).join("")}}</div></div>`;
for (const c of NEW) {{
  const p = c.plan, seats = p.tables.reduce((n, a) => n + a[4], 0);
  h += `<div class="plan-big" id="big-${{c.key}}"><div class="ph"><b>${{c.name}}</b><span>${{c.info.tables}}卓・${{seats}}席・外形 ${{p.w}}m×${{p.d}}m・厨房（受け渡し口）から卓まで ${{c.info.dist_m[0]}}〜${{c.info.dist_m[1]}}m（平均${{c.info.dist_mean}}m）</span></div>`
    + bigPlanSvg(p)
    + `<p class="pn">白い四角が卓（数字は席数）、黒い帯が料理の受け渡し口、点線がロボットの待機場所、灰色の線が壁・仕切りです。寸法はすべて仮の値です。</p></div>`;
}}
document.getElementById("root").innerHTML = h;
</script></body></html>"""
    (out / "preview.html").write_text(html, encoding="utf-8")
    with sync_playwright() as pw:
        b = pw.chromium.launch()
        pg = b.new_page(viewport=dict(width=1220, height=900), device_scale_factor=2)
        pg.goto((out / "preview.html").as_uri())
        pg.wait_for_timeout(300)
        pg.locator("#grid-now").screenshot(path=str(out / "cards_now.png"))
        pg.locator("#grid-new").screenshot(path=str(out / "cards_large.png"))
        for c in big_cards:
            pg.locator(f"#big-{c['key']}").screenshot(path=str(out / f"{c['key']}_big.png"))
        b.close()
    # サイトの plans にそのまま足せる形でも残す
    json.dump({c["key"]: c["plan"] for c in big_cards}, open(out / "plans_large.json", "w", encoding="utf-8"), ensure_ascii=False)
    print("OK", out)


if __name__ == "__main__":
    main()
