function renderError(msg) {
  return '<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loopuman</title><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#050505;color:#e0e0e0;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.card{background:#0d1117;border:1px solid #1a1f2b;border-radius:16px;padding:40px;max-width:480px;text-align:center}h1{font-size:1.3rem;color:#ff6b6b;margin-bottom:12px}p{color:#8b949e}</style></head><body><div class="card"><h1>' + msg + '</h1><p>This review link may be invalid or expired.</p></div></body></html>';
}
function renderReviewPage(sub, approvalRate, workerPay, token, isReviewed) {
  var e = function(s) { return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); };
  var content = e(sub.content || '(No content)').replace(/\n/g, '<br>');
  var qs = sub.ai_quality_score || null;
  var qColor = qs >= 80 ? '#4ade80' : qs >= 60 ? '#fbbf24' : '#ef4444';
  var qLabel = qs >= 80 ? 'Excellent' : qs >= 60 ? 'Good' : 'Low';
  var arColor = approvalRate >= 80 ? '#4ade80' : approvalRate >= 50 ? '#fbbf24' : '#ef4444';
  var sBadge = isReviewed ? (sub.status === 'approved' ? '<span style="color:#22c55e">APPROVED</span>' : '<span style="color:#ef4444">REJECTED</span>') : '<span style="color:#fbbf24">PENDING</span>';
  var dateStr = new Date(sub.submitted_at || sub.created_at).toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'});
  var qsHtml = qs !== null ? '<div class="st"><div class="sv" style="color:' + qColor + '">' + qs + '/100</div><div class="sl">AI: ' + qLabel + '</div></div>' : '';
  var actHtml = '';
  if (!isReviewed) {
    actHtml = '<div class="act"><div class="ai"><button class="btn ba" onclick="doA()">Approve and Pay ' + workerPay + ' VAE</button><button class="btn br" onclick="showR()">Reject</button></div></div>';
  } else {
    actHtml = '<div class="act"><div class="ai" style="justify-content:center;text-align:center"><p>This submission has been <b>' + sub.status + '</b></p></div></div>';
  }
  var css = '<style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#050505;color:#e8e8e8;min-height:100vh}.hd{background:#0d1117;border-bottom:1px solid #1a1f2b;padding:16px 20px;position:sticky;top:0;z-index:10}.hi{max-width:680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.lo{font-size:1.1rem;font-weight:700;color:#fff}.lo em{color:#22c55e;font-style:normal}.ct{max-width:680px;margin:0 auto;padding:20px 16px 120px}.cd{background:#0d1117;border:1px solid #1a1f2b;border-radius:16px;margin-bottom:16px;overflow:hidden}.ch{padding:16px 20px;border-bottom:1px solid #1a1f2b}.ch h2{font-size:.95rem;font-weight:600;color:#c9d1d9}.cb{padding:20px}.tt{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:8px}.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.st{background:#161b22;border-radius:10px;padding:14px;text-align:center}.sv{font-size:1.3rem;font-weight:700;font-family:monospace}.sl{font-size:.75rem;color:#8b949e;margin-top:4px}.ca{font-size:.95rem;line-height:1.7;color:#d1d5db;white-space:pre-wrap;word-break:break-word;max-height:600px;overflow-y:auto}.act{position:fixed;bottom:0;left:0;right:0;background:#0d1117ee;border-top:1px solid #1a1f2b;padding:16px}.ai{max-width:680px;margin:0 auto;display:flex;gap:12px}.btn{flex:1;padding:14px;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer}.ba{background:#22c55e;color:#000}.br{background:#1a1f2b;color:#ef4444;border:1px solid #ef444440}.btn:disabled{opacity:.5;cursor:not-allowed}.tst{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:12px;font-weight:700;display:none;z-index:100}.tst.ok{background:#22c55e;color:#000}.tst.er{background:#ef4444;color:#fff}.tst.sh{display:block}.rm{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:50;padding:20px;align-items:center;justify-content:center}.rm.sh{display:flex}.rb{background:#0d1117;border:1px solid #1a1f2b;border-radius:16px;padding:24px;max-width:480px;width:100%}.rb h3{margin-bottom:12px}.rb textarea{width:100%;background:#161b22;border:1px solid #1a1f2b;border-radius:8px;color:#e8e8e8;font-size:.9rem;padding:12px;min-height:80px;resize:vertical;margin-bottom:12px}.rb textarea:focus{outline:none;border-color:#58a6ff}.rbb{display:flex;gap:8px}.rbb .btn{padding:10px}</style>';
  var js = '<script>var sid="' + sub.id + '",tk="' + token + '",base="/review/"+sid;function toast(m,err){var t=document.getElementById("tst");t.textContent=m;t.className="tst sh "+(err?"er":"ok");setTimeout(function(){t.className="tst"},3000)}function showR(){document.getElementById("rm").classList.add("sh")}function hideR(){document.getElementById("rm").classList.remove("sh")}async function doA(){document.querySelectorAll(".btn").forEach(function(b){b.disabled=true});try{var r=await fetch(base+"/approve?token="+tk,{method:"POST"});var d=await r.json();if(d.success){toast("Approved!");setTimeout(function(){location.reload()},1500)}else{toast(d.error||"Error",1);document.querySelectorAll(".btn").forEach(function(b){b.disabled=false})}}catch(x){toast("Network error",1);document.querySelectorAll(".btn").forEach(function(b){b.disabled=false})}}async function doR(){var reason=document.getElementById("rr").value;document.querySelectorAll(".btn").forEach(function(b){b.disabled=true});try{var r=await fetch(base+"/reject?token="+encodeURIComponent(tk)+"&reason="+encodeURIComponent(reason),{method:"POST"});var d=await r.json();if(d.success){toast("Rejected.");setTimeout(function(){location.reload()},1500)}else{toast(d.error||"Error",1);document.querySelectorAll(".btn").forEach(function(b){b.disabled=false})}}catch(x){toast("Network error",1);document.querySelectorAll(".btn").forEach(function(b){b.disabled=false})}}</script>';
  return '<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Review - Loopuman</title>' + css + '</head><body>' +
    '<div class="hd"><div class="hi"><div class="lo">LOOP<em>UMAN</em></div><div style="font-size:.8rem;color:#8b949e">Review</div></div></div>' +
    '<div class="ct">' +
    '<div style="display:flex;justify-content:space-between;margin-bottom:16px">' + sBadge + '<span style="font-size:.8rem;color:#8b949e">' + dateStr + '</span></div>' +
    '<div class="cd"><div class="ch"><h2>Task</h2></div><div class="cb"><div class="tt">' + e(sub.task.title) + '</div><p style="color:#8b949e;font-size:.9rem">' + e((sub.task.description||'').slice(0,500)) + '</p><div style="margin-top:12px;font-size:.8rem;color:#8b949e">' + (sub.task.category||'general') + ' | ' + sub.task.budget + ' VAE | Worker pay: ' + workerPay + ' VAE</div></div></div>' +
    '<div class="cd"><div class="ch"><h2>Worker</h2></div><div class="cb"><div class="sg"><div class="st"><div class="sv">' + (sub.worker?.tasks_completed||0) + '</div><div class="sl">Done</div></div><div class="st"><div class="sv" style="color:' + arColor + '">' + approvalRate + '%</div><div class="sl">Approved</div></div>' + qsHtml + '</div></div></div>' +
    '<div class="cd"><div class="ch"><h2>Submitted Work</h2></div><div class="cb"><div class="ca">' + content + '</div></div></div>' +
    '</div>' + actHtml +
    '<div class="rm" id="rm"><div class="rb"><h3>Reject</h3><textarea id="rr" placeholder="Reason (optional)..."></textarea><div class="rbb"><button class="btn br" style="flex:1" onclick="doR()">Confirm</button><button class="btn" style="flex:1;background:#161b22;color:#c9d1d9" onclick="hideR()">Cancel</button></div></div></div>' +
    '<div class="tst" id="tst"></div>' + js + '</body></html>';
}
module.exports = { renderError, renderReviewPage };
