#!/usr/bin/env python3
import json, sys
data = json.load(open(sys.argv[1]))
OUT = sys.argv[2]

CSS = """*{margin:0;padding:0;box-sizing:border-box}body{font-family:Calibri,Arial,sans-serif;background:#e8f4f8;color:#1F2937;line-height:1.7}.app{max-width:1000px;margin:0 auto;padding:20px}.sticky-bar{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#003366,#1a5276);color:#fff;padding:14px 24px;border-radius:0 0 12px 12px;box-shadow:0 4px 15px rgba(0,0,0,.25);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.sticky-bar h2{font-size:15px}.progress-track{flex:1;max-width:300px;height:8px;background:rgba(255,255,255,.25);border-radius:4px;margin-left:20px}.progress-fill{height:100%;background:linear-gradient(90deg,#f39c12,#27ae60);border-radius:4px;transition:width .4s}.card{background:#fff;border-radius:12px;padding:32px;margin:20px 0;box-shadow:0 4px 20px rgba(0,0,0,.08)}.card h2{color:#003366;border-bottom:3px solid #f39c12;padding-bottom:10px;margin-bottom:18px;font-size:22px}.card p{margin-bottom:12px;text-align:justify}.btn{display:inline-block;padding:12px 28px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s;font-weight:600;margin:6px}.btn-primary{background:linear-gradient(135deg,#003366,#1a5276);color:#fff}.btn-accent{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff}.btn-success{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}.hidden{display:none}.welcome{text-align:center;padding:60px 32px}.welcome h1{font-size:34px;color:#003366;margin-bottom:12px}.tip-box{background:linear-gradient(135deg,#fef9e7,#fdebd0);border-left:4px solid #f39c12;border-radius:8px;padding:18px;margin:16px 0}.practice-box{background:linear-gradient(135deg,#eaf2f8,#d4e6f1);border-left:4px solid #1a5276;border-radius:8px;padding:18px;margin:16px 0}.quiz-opt{display:block;width:100%;text-align:left;padding:14px 20px;margin:8px 0;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:15px;transition:all .3s;font-family:inherit}.quiz-opt:hover{border-color:#003366;background:#f0f7ff}.quiz-opt.correct{border-color:#27ae60;background:#e8f8f0;color:#27ae60}.quiz-opt.wrong{border-color:#e74c3c;background:#fde8e8;color:#e74c3c}.feedback{padding:14px;border-radius:8px;margin:12px 0;font-weight:600}.feedback.good{background:#e8f8f0;color:#27ae60;border:1px solid #27ae60}.feedback.bad{background:#fde8e8;color:#e74c3c;border:1px solid #e74c3c}.certificate{text-align:center;padding:50px;background:linear-gradient(135deg,#fff,#f0f7ff);border:3px solid #003366;border-radius:16px}.certificate h1{color:#003366;font-size:28px}.cert-input{padding:10px;font-size:18px;border:2px solid #003366;border-radius:6px;width:300px;text-align:center}.nav-btns{display:flex;justify-content:space-between;margin-top:24px;flex-wrap:wrap;gap:8px}.collapsible{cursor:pointer;padding:12px 16px;background:#003366;color:#fff;border-radius:8px;margin:12px 0 0;border:none;font-size:15px;width:100%;text-align:left}.collapsible:hover{background:#1a5276}.coll-content{max-height:0;overflow:hidden;transition:max-height .4s;background:#f9f9f9;border-radius:0 0 8px 8px}.coll-content.open{max-height:600px;padding:16px}.footer{text-align:center;padding:20px;color:#888;font-size:13px}"""

title = data["title"]
subtitle = data["subtitle"]
modules = data["modules"]
quiz = data["quiz"]

total_steps = len(modules) + 2  # modules + quiz + cert

def make_module_html(idx, m):
    paras = "\n".join(f'<p>{p}</p>' for p in m["paragraphs"])
    return f"""<div id="mod{idx}" class="card hidden">
<h2>{m["title"]}</h2>
{paras}
<div class="collapsible" onclick="toggleColl(this)">&#128214; Wist je dat?</div>
<div class="coll-content"><p>{m["tip"]}</p></div>
<div class="practice-box">&#127981; <strong>Phoenix Metals Praktijk</strong><br>{m["practice"]}</div>
<h3 style="color:#003366;margin-top:20px">&#10067; Controlevraag</h3>
<p><strong>{m["q"]}</strong></p>
{"".join(f'<button class="quiz-opt" onclick="checkMod(this,{idx},{i},{m["ans"]})">{o}</button>' for i,o in enumerate(m["opts"]))}
<div id="fb_mod{idx}" class="feedback hidden"></div>
<div class="nav-btns">
{'<button class="btn btn-primary" onclick="go(' + str(idx-1) + ')">&#9664; Vorige</button>' if idx > 0 else '<span></span>'}
<button class="btn btn-accent" onclick="go({idx+1})">Volgende &#9654;</button>
</div>
</div>"""

def make_quiz_html():
    qhtml = ""
    for qi, q in enumerate(quiz):
        opts = "".join(f'<button class="quiz-opt" onclick="checkQuiz(this,{qi},{i},{q["ans"]})">{o}</button>' for i,o in enumerate(q["opts"]))
        qhtml += f"""<div style="margin-bottom:24px;padding:20px;background:#f8fafb;border-radius:10px;border:1px solid #e5e7eb">
<p style="font-weight:700;margin-bottom:12px">Vraag {qi+1}/{len(quiz)}: {q["q"]}</p>
{opts}
<div id="fb_q{qi}" class="feedback hidden"></div>
</div>"""
    return qhtml

all_modules = "\n".join(make_module_html(i, m) for i, m in enumerate(modules))

html = f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{title}</title>
<style>{CSS}</style>
</head>
<body>
<div class="app">
<div class="sticky-bar" id="topbar">
<h2 id="topTitle">Welkom</h2>
<div class="progress-track"><div class="progress-fill" id="progBar" style="width:0%"></div></div>
</div>

<div id="welcome" class="card">
<div class="welcome">
<h1>{title}</h1>
<p style="font-size:18px;color:#1a5276;margin:12px 0">{subtitle}</p>
<p style="font-size:14px;color:#666;margin:8px 0">Phoenix Metals B.V. | PlantOne IJmuiden &amp; Rotterdam</p>
<p style="font-size:14px;color:#666;margin:8px 0">MD: Stijn van Zelst | Seveso III inrichting</p>
<p style="font-size:13px;color:#999;margin:16px 0">Versie 1.1 | April 2026 | Alle rechten voorbehouden</p>
<button class="btn btn-primary" onclick="go(0)">Start Training &#9654;</button>
</div>
</div>

{all_modules}

<div id="quizPage" class="card hidden">
<h2>Afsluitende Quiz — {len(quiz)} Vragen</h2>
<p>Beantwoord alle vragen om uw certificaat te behalen. U moet minimaal {len(quiz)*70//100} van de {len(quiz)} vragen correct beantwoorden.</p>
{make_quiz_html()}
<div class="nav-btns">
<button class="btn btn-primary" onclick="go({len(modules)-1})">&#9664; Vorige module</button>
<button class="btn btn-success" id="certBtn" onclick="showCert()">Bekijk Certificaat &#9654;</button>
</div>
</div>

<div id="certPage" class="card hidden">
<div class="certificate">
<h1>&#127942; Certificaat van Voltooiing</h1>
<p style="font-size:20px;margin:20px 0;color:#1a5276">{title}</p>
<p>Dit certificeert dat</p>
<p style="margin:12px 0"><input type="text" class="cert-input" id="certName" placeholder="Uw naam"></p>
<p>de training succesvol heeft afgerond op <span id="certDate"></span>.</p>
<p style="margin:16px 0;font-size:18px">Score: <strong id="certScore"></strong></p>
<p style="color:#666;font-size:14px">Phoenix Metals B.V. | MD Stijn van Zelst</p>
<p style="color:#999;font-size:12px;margin-top:12px">PlantOne IJmuiden &amp; Rotterdam | Seveso III</p>
</div>
<div class="nav-btns" style="justify-content:center;margin-top:20px">
<button class="btn btn-primary" onclick="window.print()">&#128424; Afdrukken</button>
<button class="btn btn-accent" onclick="go(0)">&#128260; Opnieuw</button>
</div>
</div>

<div class="footer">
<p>&copy; 2026 Phoenix Metals B.V. — Alle rechten voorbehouden</p>
<p>PlantOne IJmuiden &amp; Rotterdam | Veiligheid is onze #1 prioriteit</p>
</div>
</div>

<script>
var step=0,modTotal={len(modules)},quizTotal={len(quiz)},modAns={{}},quizAns={{}};
function go(s){{step=s;update();}}
function update(){{
var w=document.getElementById('welcome'),q=document.getElementById('quizPage'),c=document.getElementById('certPage'),t=document.getElementById('topTitle'),p=document.getElementById('progBar');
w.classList.add('hidden');q.classList.add('hidden');c.classList.add('hidden');
for(var i=0;i<modTotal;i++)document.getElementById('mod'+i).classList.add('hidden');
if(step<modTotal){{document.getElementById('mod'+step).classList.remove('hidden');t.textContent=document.getElementById('mod'+step).querySelector('h2').textContent;}}
else if(step===modTotal){{q.classList.remove('hidden');t.textContent='Afsluitende Quiz';}}
else{{c.classList.remove('hidden');t.textContent='Certificaat';var d=new Date();document.getElementById('certDate').textContent=d.toLocaleDateString('nl-NL');var score=Object.values(quizAns).filter(v=>v).length;document.getElementById('certScore').textContent=score+'/'+quizTotal;}}
p.style.width=Math.min(100,Math.round((step+1)/(modTotal+2)*100))+'%';
window.scrollTo(0,0);
}}
function toggleColl(el){{var c=el.nextElementSibling;c.classList.toggle('open');el.textContent=c.classList.contains('open')?'\u2796 Wist je dat?':'\ud83d\udcd6 Wist je dat?';}}
function checkMod(btn,mod,idx,ans){{
var fb=document.getElementById('fb_mod'+mod);
fb.classList.remove('hidden');
if(idx===ans){{btn.classList.add('correct');fb.className='feedback good';fb.textContent='\u2705 '+{json.dumps("ok")};}}
else{{btn.classList.add('wrong');fb.textContent='\u274c '+{json.dumps("nok")};fb.className='feedback bad';}}
var btns=btn.parentElement.querySelectorAll('.quiz-opt');for(var b of btns)b.disabled=true;
modAns[mod]=idx===ans;
}}
function checkQuiz(btn,qi,idx,ans){{
var fb=document.getElementById('fb_q'+qi);fb.classList.remove('hidden');
if(idx===ans){{btn.classList.add('correct');fb.className='feedback good';fb.textContent='\u2705 Correct!';}}
else{{btn.classList.add('wrong');fb.className='feedback bad';fb.textContent='\u274c Onjuist. Het juiste antwoord is: '+quizData[qi].opts[ans];}}
var btns=btn.parentElement.querySelectorAll('.quiz-opt');for(var b of btns)b.disabled=true;
quizAns[qi]=idx===ans;
}}
function showCert(){{step=modTotal+1;update();}}
var quizData={json.dumps(quiz)};
update();
</script>
</body></html>"""

with open(OUT,'w',encoding='utf-8') as f:
    f.write(html)
print(f"Written {os.path.getsize(OUT)} bytes to {OUT}")