from pathlib import Path
import hashlib
import html
from markdown_it import MarkdownIt

ROOT=Path('/workspace/contextra-analytics-runtime-lifecycle-refactor')
OUT=Path('/workspace/architecture_docs/current/contextra_metadata_web/metadata-web-guide.ko.html')
source=ROOT/'docs/integration/metadata-web-review.ko.md'
md=MarkdownIt('commonmark', {'html':False}).enable('table')
tokens=md.parse(source.read_text())
toc=[]
counter=0
for i,t in enumerate(tokens):
    if t.type=='heading_open':
        counter+=1
        ident='section-'+str(counter)
        t.attrSet('id',ident)
        if t.tag=='h2':toc.append((ident,tokens[i+1].content))
body=md.renderer.render(tokens,md.options,{})
body=body.replace('href="metadata-example.json"','href="#sample-json"').replace('href="metadata_reader_example.py"','href="#sample-python"')
body=body.replace('<table>','<div class="table-scroll" tabindex="0" role="region" aria-label="필드 설명 표"><table>').replace('</table>','</table></div>')
examples=''
for name,title,file in [('json','비식별 Frame JSON','metadata-example.json'),('python','Python 읽기 예제','metadata_reader_example.py')]:
    text=(ROOT/'docs/integration'/file).read_text()
    examples+=f'<section id="sample-{name}" class="example"><h2>{title}</h2><p>아래 내용은 원본 예제 파일 전체입니다. JSON의 식별자와 시각은 설명용 값입니다. Python은 기존 redis-py 환경에서 사용하는 읽기 전용 예제입니다.</p><details><summary>{title} 전체 보기</summary><pre><code>{html.escape(text)}</code></pre></details></section>'
nav=''.join(f'<a href="#{a}">{html.escape(b)}</a>' for a,b in toc)
styles='''
body,footer{overflow-wrap:anywhere}
:root{color-scheme:light;--ink:#18252b;--muted:#50616a;--line:#cdd9dc;--accent:#086875;--warn:#963e10}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#fff;color:var(--ink);font:16px/1.75 system-ui,-apple-system,"Malgun Gothic",sans-serif;letter-spacing:0}
header{background:#e9f3f1;border-bottom:3px solid var(--accent);padding:32px max(24px,calc((100% - 1300px)/2))}header p{margin:4px 0}.brand{font-size:26px;font-weight:750;color:#12434a}.meta{font-size:13px;color:var(--muted)}
.layout{max-width:1350px;margin:auto;display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;padding:32px 24px}nav{align-self:start;position:sticky;top:24px;border-right:1px solid var(--line);padding-right:20px}nav p{font-weight:700;margin:0 0 14px}nav a{display:block;margin:0 0 12px;text-decoration:none;color:var(--accent);font-size:14px;overflow-wrap:anywhere}a{color:var(--accent);text-underline-offset:3px}a:hover{text-decoration:underline}a:focus-visible,summary:focus-visible,.table-scroll:focus-visible{outline:3px solid #bc650a;outline-offset:3px}
main{min-width:0}h1{font-size:28px;line-height:1.35;margin:0 0 18px}h2{font-size:23px;line-height:1.4;margin:48px 0 18px;border-top:2px solid var(--line);padding-top:22px}h3{font-size:18px;line-height:1.5;margin:28px 0 12px}p{margin:12px 0}li{margin:8px 0}strong{font-weight:750;color:#143f48}code{font-size:13px;font-family:ui-monospace,Consolas,monospace;background:#edf2f3;padding:2px 4px;overflow-wrap:anywhere}pre{background:#f2f5f6;border-left:3px solid #829da4;padding:18px;overflow:auto;max-height:650px;line-height:1.6}pre code{padding:0;background:none;white-space:pre;overflow-wrap:normal}
.table-scroll{overflow-x:auto;margin:18px 0;max-width:100%}table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.65}th,td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;overflow-wrap:anywhere;min-width:100px}th{text-align:left;background:#eaf0f2}tbody tr:nth-child(even){background:#f7f9f9}td:first-child{min-width:145px}table code{font-size:12px}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}summary{cursor:pointer;color:var(--accent);font-weight:700}.example p{font-size:14px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:25px;font-size:13px;color:var(--muted)}
@media(max-width:800px){header{padding:24px 18px}.layout{display:block;padding:24px 18px}nav{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:28px}h1{font-size:24px}h2{font-size:21px}th,td{min-width:125px;padding:9px}ol,ul{padding-left:24px}}
@media print{nav{display:none}.layout{display:block;padding:0}header{padding:12px;background:white}h2{break-after:avoid}pre{max-height:none;white-space:pre-wrap}pre code{white-space:pre-wrap}details>*{display:block!important}.table-scroll{overflow:visible}table{font-size:10px}th,td{min-width:0}a{color:inherit}footer{font-size:10px}}
'''
digest=hashlib.sha256(source.read_bytes()).hexdigest()
page=f'''<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Contextra · Web Metadata 연동 가이드</title><style>{styles}</style></head><body><header><p class="brand">Contextra · Web Metadata</p><p>접속부터 카메라 연결, 화면 표시와 시간정보 해석까지</p><p class="meta">Status: current · 2026-09-15 · Markdown 기반 공유용 표현본 · 실제 Web 동기화는 별도 확인</p></header><div class="layout"><nav aria-label="문서 목차"><p>연동 순서</p>{nav}<a href="#sample-json">예제 JSON</a><a href="#sample-python">예제 Python</a></nav><main>{body}{examples}</main></div><footer>Source docs: docs/integration/metadata-web-review.ko.md · source SHA256: {digest}<br>접속 주소와 인증정보는 별도 전달합니다. 외부 리소스 없이 단일 파일로 열 수 있습니다.</footer></body></html>'''
OUT.parent.mkdir(parents=True,exist_ok=True)
OUT.write_text(page)
print(OUT)