"""ServiceSim の報告動画を作る。spec.json（スライドの並び）→ 1920x1080 の mp4。
使い方: python3 make_video.py spec.json out.mp4
スライドの種類: title / chart / rows / steps
"""
import json, sys, subprocess, html, pathlib, tempfile
from playwright.sync_api import sync_playwright

W, H = 1920, 1080
INK, QUIET, LINE, BG = "#1d1d1b", "#6b6a64", "#d9d6cc", "#faf9f5"
ACC, GOOD, BAD, SITE = "#2f6fdf", "#1d9e75", "#d85a30", "#9a9890"
E = html.escape

CSS = f"""
*{{margin:0;padding:0;box-sizing:border-box}}
body{{width:{W}px;height:{H}px;background:{BG};font-family:'Noto Sans CJK JP';color:{INK};position:relative;overflow:hidden}}
.top{{position:absolute;left:96px;top:64px;font-size:30px;color:{QUIET}}}
h1{{position:absolute;left:96px;top:120px;right:96px;font-size:60px;font-weight:700;line-height:1.3}}
.main{{position:absolute;left:96px;right:96px;top:260px;bottom:220px}}
.sub{{position:absolute;left:0;right:0;bottom:0;height:180px;background:#1d1d1b;color:#fff;font-size:40px;line-height:1.5;padding:30px 120px;display:flex;align-items:center;justify-content:center;text-align:center}}
.row{{display:flex;align-items:center;gap:28px;font-size:38px;line-height:1.4;margin-bottom:30px}}
.tag{{flex:none;min-width:150px;padding:8px 20px;border-radius:10px;font-size:30px;font-weight:700;text-align:center;color:#fff}}
.note{{font-size:28px;color:{QUIET};margin-top:16px}}
"""

def svg_chart(s):
    xs = s["x"]; series = s["series"]; unit = s.get("unit", "")
    cw, ch = 1728, 500; l, r, t, b = 120, 360, 30, 70
    vals = [v for se in series for v in se["values"] if v is not None]
    vmax = s.get("ymax") or max(vals) * 1.15
    X = lambda i: l + i * (cw - l - r) / (len(xs) - 1)
    Y = lambda v: t + (ch - t - b) * (1 - v / vmax)
    out = [f'<svg width="{cw}" height="{ch}" xmlns="http://www.w3.org/2000/svg" font-family="Noto Sans CJK JP">']
    for k in range(5):
        v = vmax * k / 4; y = Y(v)
        out.append(f'<line x1="{l}" x2="{cw-r}" y1="{y}" y2="{y}" stroke="{LINE}"/>')
        out.append(f'<text x="{l-16}" y="{y+10}" font-size="26" fill="{QUIET}" text-anchor="end">{v:.{s.get("dp",1)}f}</text>')
    for i, x in enumerate(xs):
        out.append(f'<text x="{X(i)}" y="{ch-24}" font-size="28" fill="{QUIET}" text-anchor="middle">{E(x)}</text>')
    for se in series:
        c = {"acc": ACC, "site": SITE, "good": GOOD, "bad": BAD}.get(se.get("color", "acc"), ACC)
        dash = ' stroke-dasharray="12 10"' if se.get("dash") else ""
        pts = [(X(i), Y(v)) for i, v in enumerate(se["values"]) if v is not None]
        out.append(f'<polyline points="{" ".join(f"{a},{b2}" for a, b2 in pts)}" fill="none" stroke="{c}" stroke-width="6"{dash}/>')
        for i, v in enumerate(se["values"]):
            if v is None: continue
            out.append(f'<circle cx="{X(i)}" cy="{Y(v)}" r="10" fill="{c}"/>')
            if se.get("labels", True):
                out.append(f'<text x="{X(i)}" y="{Y(v)+(46 if se.get("below") else -22)}" font-size="30" font-weight="700" fill="{c}" text-anchor="middle">{v:.{s.get("dp",1)}f}</text>')
        lx, ly = pts[-1]
        out.append(f'<text x="{lx+30}" y="{ly+(44 if se.get("below") else -6)}" font-size="32" font-weight="700" fill="{c}">{E(se["name"])}</text>')
    out.append(f'<text x="{l}" y="{t-4}" font-size="26" fill="{QUIET}">{E(unit)}</text></svg>')
    return "".join(out)

def body(s):
    if s["kind"] == "title":
        return f'<h1 style="top:300px;font-size:76px">{E(s["title"])}</h1><div class="main" style="top:520px;font-size:40px;color:{QUIET};line-height:1.6">{"<br>".join(E(x) for x in s.get("lines", []))}</div>'
    h = f'<h1>{E(s["title"])}</h1>'
    if s["kind"] == "chart":
        note = f'<div class="note">{E(s["note"])}</div>' if s.get("note") else ""
        return h + f'<div class="main">{svg_chart(s)}{note}</div>'
    if s["kind"] in ("rows", "steps"):
        cols = {"good": GOOD, "bad": BAD, "acc": ACC, "quiet": SITE}
        rows = "".join(f'<div class="row"><span class="tag" style="background:{cols.get(r.get("c","acc"))}">{E(r["tag"])}</span><span>{E(r["text"])}</span></div>' for r in s["rows"])
        return h + f'<div class="main">{rows}</div>'
    raise ValueError(s["kind"])

def main(spec_path, out):
    spec = json.load(open(spec_path, encoding="utf-8"))
    tmp = pathlib.Path(tempfile.mkdtemp())
    segs = []
    with sync_playwright() as p:
        br = p.chromium.launch(); pg = br.new_page(viewport={"width": W, "height": H})
        for i, s in enumerate(spec["slides"]):
            doc = f'<html><head><meta charset="utf-8"><style>{CSS}</style></head><body><div class="top">{E(spec["header"])}　{i+1}/{len(spec["slides"])}</div>{body(s)}<div class="sub">{E(s["sub"])}</div></body></html>'
            pg.set_content(doc); pg.wait_for_timeout(150)
            png = tmp / f"s{i:02d}.png"; pg.screenshot(path=str(png))
            seg = tmp / f"s{i:02d}.mp4"
            subprocess.run(["ffmpeg", "-y", "-loglevel", "error", "-loop", "1", "-i", str(png), "-t", str(s.get("sec", 10)),
                            "-vf", "fade=in:0:8,format=yuv420p", "-r", "30", "-c:v", "libx264", "-preset", "veryfast", str(seg)], check=True)
            segs.append(seg)
        br.close()
    lst = tmp / "list.txt"; lst.write_text("".join(f"file '{x}'\n" for x in segs))
    subprocess.run(["ffmpeg", "-y", "-loglevel", "error", "-f", "concat", "-safe", "0", "-i", str(lst), "-c", "copy", out], check=True)
    print(out)

if __name__ == "__main__":
    main(sys.argv[1], sys.argv[2])