import type {
  CinemaConsoleAsset,
  CinemaConsoleCandidate,
  CinemaConsoleModel,
  CinemaConsoleQcFinding,
  CinemaConsoleQueueRow,
  CinemaConsoleReviewDecision,
  CinemaConsoleShot,
} from './cinema-console-types.js';
import type { CinemaCandidateReviewLane } from './cinema-candidate-review.js';

function esc(value: unknown): string {
  return String(value ?? '')
    .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;').replaceAll("'", '&#39;');
}

function json(value: unknown): string {
  return JSON.stringify(value).replaceAll('<', '\\u003c').replaceAll('>', '\\u003e').replaceAll('&', '\\u0026');
}

function badge(value: string): string {
  const normalized = value.toLowerCase();
  const tone = ['succeeded', 'pass', 'locked', 'ready', 'approved', 'dry-run-complete', 'covered'].includes(normalized)
    ? 'good' : ['failed', 'dead-letter', 'blocker', 'rejected', 'missing'].includes(normalized)
      ? 'bad' : ['blocked', 'warning', 'reconciling', 'external-approval', 'awaiting-approval'].includes(normalized) ? 'warn' : 'neutral';
  return `<span class="badge ${tone}">${esc(value.replaceAll('-', ' '))}</span>`;
}

function queueRow(row: CinemaConsoleQueueRow): string {
  const dependencies = row.dependencies.length ? row.dependencies.map((id) => `<code>${esc(id)}</code>`).join(' ') : '<span class="muted">none</span>';
  const lane = row.laneId ? `<code>${esc(row.laneId)}</code><small>position ${row.lanePosition ?? '—'} · ETA ${row.laneEtaSeconds ?? '—'}s</small>` : '<span class="muted">none</span>';
  const execution = row.providerJobId ? `<code>${esc(row.providerJobId)}</code><small>${esc(row.providerStatus ?? 'pending')}</small>` : `<span class="muted">${esc(row.providerStatus ?? '—')}</span>`;
  const lease = row.leaseWorkerId ? `<code>${esc(row.leaseWorkerId)}</code><small>until ${esc(row.leaseExpiresAt)}</small>` : '<span class="muted">none</span>';
  const failure = row.failure ? `<strong>${esc(row.failure.code)}</strong><small>${esc(row.failure.message)} · retryable ${row.failure.retryable}</small>` : '<span class="muted">—</span>';
  return `<tr data-task-id="${esc(row.taskId)}"><td><strong>${esc(row.taskId)}</strong><small>${esc(row.kind)}</small></td><td>${badge(row.status)}</td><td><code>${esc(row.routeId)}</code><small>${esc(row.authorizationRequirement)}${row.spendAuthorizationId ? ` · ${esc(row.spendAuthorizationId)}` : ''}</small>${row.reconciliationRequired ? `<em class="reconcile">reconcile first · ${row.reconciliationAttempts} attempt(s)</em>` : ''}</td><td>${dependencies}</td><td>${lane}</td><td>${lease}</td><td>${execution}</td><td>${failure}</td><td class="money">${esc(row.currency)} ${row.estimatedCost.toFixed(2)}<small>actual ${row.actualCost.toFixed(2)}</small></td></tr>`;
}

function media(asset: { path: string | null; mediaExists: boolean }, label: string, kind: 'image' | 'video'): string {
  if (!asset.path || !asset.mediaExists) {
    return `<div class="missing-media" role="status" data-missing-media="true"><span>MEDIA OFFLINE</span><strong>${esc(label)}</strong><code>${esc(asset.path ?? 'no path recorded')}</code><p>Contract data remains reviewable. Generate or attach media to enable playback.</p></div>`;
  }
  return kind === 'video'
    ? `<video controls preload="metadata" src="${esc(asset.path)}"><p>Video playback is unavailable.</p></video>`
    : `<img loading="lazy" src="${esc(asset.path)}" alt="${esc(label)}">`;
}

function assetCard(asset: CinemaConsoleAsset): string {
  const mask = asset.maskArtifactId
    ? `<p><span class="muted">mask </span><code>${esc(asset.maskArtifactId)}</code></p>`
    : '<p class="muted">mask not required</p>';
  return `<article class="asset-card" data-asset-id="${esc(asset.assetId)}"><div class="asset-media">${media(asset, asset.label, 'image')}</div><div class="asset-copy"><div class="eyebrow">${esc(asset.role)}</div><h3>${esc(asset.label)}</h3><div class="metric-row"><span>faces <b>${asset.faceCount}</b></span><span>fragments <b>${asset.faceFragmentCount}</b></span>${badge(asset.lockStatus)}</div>${mask}<code class="hash">${esc(asset.contentHash)}</code></div></article>`;
}

function shotCard(shot: CinemaConsoleShot): string {
  const continuity = shot.continuity.length ? shot.continuity.map((item) => `<li>${esc(item)}</li>`).join('') : '<li>no conflicting visible state</li>';
  return `<article class="shot-card" id="shot-${esc(shot.shotId)}" data-shot-id="${esc(shot.shotId)}"><header><span class="shot-number">${String(shot.ordinal).padStart(2, '0')}</span><div><div class="eyebrow">${esc(shot.shotId)} · ${shot.durationSeconds}s · ${shot.referenceCount} refs</div><h3>${esc(shot.purpose)}</h3></div></header><div class="shot-grid"><div class="viewer">${media({ path: shot.videoPath, mediaExists: shot.mediaExists }, `${shot.shotId} clip`, 'video')}</div><div class="shot-contract"><dl><dt>Expected change</dt><dd>${esc(shot.expectedChange)}</dd><dt>Camera</dt><dd>${esc(shot.camera)}</dd><dt>Action</dt><dd>${esc(shot.action)}</dd></dl><details><summary>Compiled provider prompt</summary><pre>${esc(shot.prompt)}</pre><code class="hash">${esc(shot.promptHash)}</code></details><details><summary>Continuity carry</summary><ul>${continuity}</ul></details></div></div></article>`;
}

function candidateRow(candidate: CinemaConsoleCandidate, selected: boolean): string {
  return `<button class="candidate-row${selected ? ' selected' : ''}" type="button" data-candidate="${esc(candidate.attemptId)}" aria-pressed="${selected}"><span><strong>${esc(candidate.attemptId)}</strong><small>${esc(candidate.shotId)} · ${esc(candidate.routeId)}</small></span>${badge(candidate.promoted ? 'promoted' : candidate.status)}<span class="candidate-change">changed: ${esc(candidate.changedVariables.join(', ') || 'baseline')} · parent: ${esc(candidate.parentAttemptId ?? 'none')} · evidence: ${candidate.evidenceIds.length} · ${esc(candidate.currency)} ${candidate.actualCost.toFixed(2)}</span></button>`;
}

function comparisonPanel(candidate: CinemaConsoleCandidate | undefined, slot: 'A' | 'B'): string {
  const hasMedia = Boolean(candidate?.videoPath && candidate.mediaExists);
  const hasFilmstrip = Boolean(candidate?.filmstripPath && candidate.filmstripExists);
  return `<article class="comparison-panel" data-comparison-slot="${slot}"><div class="comparison-label">Candidate ${slot}</div><div class="viewer"><video data-sync-video="${slot}" controls preload="metadata"${hasMedia ? ` src="${esc(candidate?.videoPath)}"` : ' hidden'}><p>Video playback is unavailable.</p></video><div class="missing-media" data-comparison-missing="${slot}" data-missing-media="true"${hasMedia ? ' hidden' : ''}><span>MEDIA OFFLINE</span><strong data-comparison-label>${esc(candidate?.attemptId ?? `Candidate ${slot}`)}</strong><p>Attach candidate media to enable synchronized playback.</p></div></div><figure class="filmstrip" data-filmstrip="${slot}"${hasFilmstrip ? '' : ' hidden'}><img loading="lazy"${hasFilmstrip ? ` src="${esc(candidate?.filmstripPath)}"` : ''} alt="${esc(candidate?.attemptId ?? `Candidate ${slot}`)} full-clip QC filmstrip"><figcaption>Full-clip QC filmstrip · advisory human review</figcaption></figure><dl><dt>Attempt</dt><dd data-candidate-field="attemptId">${esc(candidate?.attemptId ?? 'unassigned')}</dd><dt>Shot</dt><dd data-candidate-field="shotId">${esc(candidate?.shotId ?? '—')}</dd><dt>Route</dt><dd data-candidate-field="routeId">${esc(candidate?.routeId ?? '—')}</dd></dl><details><summary>Exact compiled prompt</summary><pre data-candidate-field="prompt">${esc(candidate?.prompt ?? '')}</pre></details><details><summary>Provider parameters</summary><pre data-candidate-field="providerParameters">${esc(candidate ? JSON.stringify(candidate.providerParameters, null, 2) : '')}</pre></details></article>`;
}

function comparisonDiff(candidate: CinemaConsoleCandidate | undefined): string {
  const fields: Array<[string, string]> = [
    ['routeId', candidate?.routeId ?? '—'],
    ['promptHash', candidate?.promptHash ?? '—'],
    ['providerParametersHash', candidate?.providerParametersHash ?? '—'],
    ['referenceAssetIds', candidate?.referenceAssetIds.join(', ') ?? '—'],
    ['changedVariables', candidate?.changedVariables.join(', ') || 'baseline'],
  ];
  return fields.map(([field, value]) => `<tr data-diff-row="${field}"><th>${esc(field)}</th><td data-diff-slot="A">${esc(value)}</td><td data-diff-slot="B">${esc(value)}</td></tr>`).join('');
}

function qcFinding(finding: CinemaConsoleQcFinding): string {
  return `<li class="qc-row ${esc(finding.severity)}" data-qc-lane="${esc(finding.lane)}"><span class="qc-time">${finding.timeSeconds === null ? '—' : `${finding.timeSeconds.toFixed(1)}s`}</span><span><b>${esc(finding.lane)}</b><strong>${esc(finding.summary)}</strong><small>${esc(finding.shotId)} · ${finding.evidenceIds.length} evidence item(s)</small></span>${badge(finding.severity)}</li>`;
}

function reviewDecision(decision: CinemaConsoleReviewDecision): string {
  const changed = decision.changedVariable ? `<small>controlled change: ${esc(decision.changedVariable)}</small>` : '';
  return `<li class="qc-row" data-review-decision="${esc(decision.decisionId)}"><span class="qc-time">${decision.timeSeconds === null ? '—' : `${decision.timeSeconds.toFixed(1)}s`}</span><span><b>${esc(decision.reviewerId)}</b><strong>${esc(decision.reason)}</strong><small>${esc(decision.shotId)} · ${esc(decision.attemptId)} · ${decision.evidenceIds.length} evidence</small>${changed}<code class="hash">${esc(decision.contentHash)}</code></span>${badge(decision.kind)}</li>`;
}

function reviewActions(model: CinemaConsoleModel): string {
  if (model.mode !== 'live') {
    return '<div class="read-only" role="note">Read-only export. Open the authenticated live console to pass, reject or request a controlled redesign. Generation approval remains a separate exact-quote authority.</div><div class="actions" style="margin-top:18px"><div class="panel action-box"><h3>Editorial note</h3><textarea disabled placeholder="Time-addressed review note"></textarea><div class="button-row"><button disabled>Pass</button><button disabled>Reject</button><button disabled>Request redesign</button></div></div><div class="panel"><h3>Changed variable</h3><p class="muted">A retry must name one controlled change and retain its parent attempt.</p><select disabled><option>Select in live console</option></select><h3>Authority</h3><p>Review authority is verifier-scoped; <code>generation_batch</code> remains a separate evidence-bearing approval.</p></div></div>';
  }
  const targets = model.candidates.filter((candidate) => candidate.queueTaskId).map((candidate) => `<option value="${esc(candidate.queueTaskId)}">${esc(candidate.shotId)} · ${esc(candidate.attemptId)}</option>`).join('');
  const lanes: CinemaCandidateReviewLane[] = ['technical', 'identity-continuity', 'performance', 'editorial'];
  const laneRows = lanes.map((lane) => `<fieldset data-live-lane="${lane}"><legend>${esc(lane)}</legend><select name="${lane}-verdict"><option value="pass">pass</option><option value="fail">fail</option></select><input name="${lane}-reason" placeholder="Reason" required><input name="${lane}-evidence" placeholder="Project-local evidence path" required></fieldset>`).join('');
  return `<div class="read-only live" role="note">Authenticated live session. Review and promotion are provider-free. This surface has no generation, provider-submit or spend-approval endpoint.</div><div class="actions live-actions" style="margin-top:18px"><form class="panel live-form" id="cinema-live-review"><h3>Four-lane candidate review</h3><label>Candidate<select name="taskId" required>${targets || '<option value="">No ingested candidates</option>'}</select></label><label>Review ID<input name="reviewId" placeholder="review-shot-001-v1" required></label><label>Decision<select name="decision"><option value="pass">pass</option><option value="reject">reject</option><option value="redesign">redesign</option></select></label><label>Controlled change<input name="changedVariable" placeholder="Required for redesign only"></label>${laneRows}<label class="check"><input type="checkbox" name="storyPurposeVerified"> Story purpose verified</label><button type="submit">Record immutable review</button></form><form class="panel live-form" id="cinema-live-promote"><h3>Promote passed candidate</h3><label>Review ID<input name="reviewId" required></label><label>Promotion ID<input name="promotionId" required></label><label>Editorial slot<input name="editorialSlot" required></label><label>Supersedes promotion<input name="supersedesPromotionId" placeholder="Leave empty only for first select"></label><label>Project-local authority evidence<input name="evidence" required></label><button type="submit">Promote selected candidate</button><p class="muted">Director or producer role required. Review authority never authorizes generation spend.</p></form></div><pre class="live-result" id="cinema-live-result" role="status" aria-live="polite">Ready.</pre>`;
}

function liveConsoleScript(model: CinemaConsoleModel): string {
  if (model.mode !== 'live') return '';
  return `<script>(()=>{const project=${json(model.projectSlug)};const result=document.getElementById('cinema-live-result');async function post(path,body){result.textContent='Working…';const response=await fetch(path+'?project='+encodeURIComponent(project),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const text=await response.text();result.textContent=text;if(!response.ok)throw new Error(text);location.reload()}document.getElementById('cinema-live-refresh')?.addEventListener('click',async()=>{result.textContent='Refreshing canonical queue state…';const response=await fetch('/api/review-inventory?project='+encodeURIComponent(project));if(!response.ok){result.textContent=await response.text();return}location.reload()});const review=document.getElementById('cinema-live-review');review?.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(review);const lanes=['technical','identity-continuity','performance','editorial'].map(lane=>({lane,verdict:data.get(lane+'-verdict'),reason:data.get(lane+'-reason'),evidencePaths:[data.get(lane+'-evidence')]}));post('/api/cinema-review',{taskId:data.get('taskId'),reviewId:data.get('reviewId'),decision:data.get('decision'),changedVariable:data.get('changedVariable')||null,storyPurposeVerified:data.get('storyPurposeVerified')==='on',lanes}).catch(()=>{})});const promote=document.getElementById('cinema-live-promote');promote?.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(promote);post('/api/cinema-promote',{reviewId:data.get('reviewId'),promotionId:data.get('promotionId'),editorialSlot:data.get('editorialSlot'),supersedesPromotionId:data.get('supersedesPromotionId')||null,evidencePaths:[data.get('evidence')]}).catch(()=>{})})})();</script>`;
}

function evidenceBoard(model: CinemaConsoleModel): string {
  const evidence = model.evidence;
  if (!evidence) return '';
  const sheets = evidence.characterSheets.map((sheet) => `<li class="qc-row" data-sheet-evidence="${esc(sheet.characterVersionId)}"><span class="qc-time">sheet</span><span><b>${esc(sheet.characterVersionId)}</b><strong>${esc(sheet.reviewerId ?? 'No authority decision')}</strong><small>${sheet.evidenceIds.length} evidence item(s)</small><code class="hash">${esc(sheet.sheetHash ?? 'not stored')}</code></span>${badge(sheet.status)}</li>`).join('');
  const recognition = evidence.recognition.map((condition) => `<tr data-recognition-condition="${esc(condition.conditionId)}"><td><strong>${esc(condition.conditionId)}</strong><small>${esc(condition.category)}</small></td><td>${esc(condition.description)}</td><td>${esc(condition.reviewerId ?? '—')}</td><td>${condition.evidenceIds.length}</td><td>${badge(condition.status)}</td></tr>`).join('');
  const rights = evidence.rights.map((record) => `<li class="qc-row" data-rights-evidence="${esc(record.assetId)}"><span class="qc-time">rights</span><span><b>${esc(record.assetId)}</b><strong>${esc(record.owner ?? 'Owner pending')}</strong><small>${esc(record.permittedScope ?? 'Permitted scope pending')} · ${record.evidenceIds.length} evidence</small></span>${badge(record.status)}</li>`).join('');
  const voices = evidence.voices.map((voice) => `<li class="qc-row" data-voice-evidence="${esc(voice.characterId)}"><span class="qc-time">voice</span><span><b>${esc(voice.characterId)}</b><strong>${esc(voice.voiceId ?? (voice.speaking ? 'Voice pending' : 'No voice required'))}</strong><small>lock ${esc(voice.lockStatus)} · release ${esc(voice.releaseStatus)} · ${voice.auditionEvidenceIds.length + voice.releaseEvidenceIds.length} evidence</small></span>${badge(voice.lockStatus)}</li>`).join('');
  const contracts = evidence.productionContracts;
  return `<div class="evidence-board" data-evidence-board="true"><div class="section-head evidence-head"><div><div class="eyebrow">Authority + production contracts</div><h3>Evidence board</h3></div><p>Every lock is tied to persisted evidence; pending means pending. Contract hashes shown here are the exact versions bound into the shot manifests.</p></div><div class="evidence-grid"><div><h3>Character sheet decisions</h3><ul class="qc-list">${sheets || '<li class="qc-row"><span><strong>No character sheet stored</strong></span></li>'}</ul></div><div data-production-contracts="true"><h3>Production contract bindings</h3><div class="panel"><p>${badge(contracts.boundToEveryManifest ? 'locked' : 'blocked')} bound to every manifest</p><p><b>Continuity</b> · ${contracts.continuityRecords} records</p><code class="hash">${esc(contracts.continuityHash ?? 'not compiled')}</code><p><b>Timed audio</b> · ${contracts.timedAudioShots} shots</p><code class="hash">${esc(contracts.timedAudioHash ?? 'not compiled')}</code><p><b>Planning</b></p><code class="hash">${esc(evidence.planningReceiptHash)}</code><p><b>Evidence ledger</b></p><code class="hash">${esc(evidence.evidenceLedgerHash ?? 'not created')}</code><p><b>Preflight</b></p><code class="hash">${esc(evidence.preflightHash)}</code></div></div></div><h3>Ten-condition recognition board</h3><div class="table-wrap"><table class="evidence-table"><thead><tr><th>Condition</th><th>Risk proof</th><th>Reviewer</th><th>Evidence</th><th>Status</th></tr></thead><tbody>${recognition}</tbody></table></div><div class="evidence-grid"><div><h3>Rights</h3><ul class="qc-list">${rights}</ul></div><div><h3>Voice and release</h3><ul class="qc-list">${voices}</ul></div></div></div>`;
}

export function renderCinemaConsoleHtml(model: CinemaConsoleModel): string {
  const completeTasks = model.queue.filter((task) => task.status === 'succeeded').length;
  const gateItems = model.gates.map((gate) => `<li><span>${esc(gate.label)}</span>${badge(gate.status)}<small>${gate.evidenceIds.length} evidence</small></li>`).join('');
  const blockers = model.summary.blockers.map((item) => `<li>${esc(item)}</li>`).join('');
  const assumptions = model.summary.assumptions.map((item) => `<li>${esc(item)}</li>`).join('');
  const reviewHistory = model.reviews.length ? model.reviews.map(reviewDecision).join('') : '<li class="qc-row"><span class="qc-time">—</span><span><strong>No review decisions recorded</strong><small>Static evidence remains unchanged.</small></span></li>';
  const queueRows = model.queue.map(queueRow).join('');
  const candidates = model.candidates.map((candidate, index) => candidateRow(candidate, index === 0)).join('');
  const baselineCandidate = model.candidates[0];
  const editRail = model.edit.shotOrder.map((shotId, index) => {
    const shot = model.shots.find((item) => item.shotId === shotId);
    return `<li><span>${String(index + 1).padStart(2, '0')}</span><strong>${esc(shotId)}</strong><small>${shot?.durationSeconds ?? 0}s · ${esc(shot?.purpose ?? '')}</small></li>`;
  }).join('');
  const storyCoverage = model.edit.storyCoverage.length ? model.edit.storyCoverage.map((beat) => `<li class="qc-row" data-story-beat="${esc(beat.beatId)}"><span class="qc-time">${esc(beat.act)}</span><span><b>${esc(beat.beatId)}</b><strong>${esc(beat.purpose)}</strong><small>change: ${esc(beat.change)}</small><small>scenes: ${esc(beat.sceneIds.join(', ') || 'none')} · shots: ${esc(beat.shotIds.join(', ') || 'none')}</small><small>setups: ${esc(beat.setupIds.join(', ') || 'none')} · payoffs: ${esc(beat.payoffIds.join(', ') || 'none')}</small></span>${badge(beat.covered ? 'covered' : 'missing')}</li>`).join('') : '<li class="qc-row"><span class="qc-time">—</span><span><strong>Story coverage not attached</strong><small>Attach a Cinema story blueprint and coverage artifact.</small></span></li>';
  const qualification = model.qualification ? `<div class="delivery-slot" data-scope-verdict="${esc(model.qualification.verdict)}"><div class="eyebrow">Scope qualification</div><h3>${esc(model.qualification.currentScope)} → ${esc(model.qualification.proposedScope ?? 'terminal')}</h3>${badge(model.qualification.verdict)}<p class="muted">${esc(model.qualification.blockers.join(' · ') || `${model.qualification.passedChecks.length} checks passed`)}</p><code class="hash">${esc(model.qualification.contentHash)}</code></div>` : '<div class="delivery-slot"><div class="eyebrow">Scope qualification</div><h3>Not evaluated</h3></div>';
  return `<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark"><title>${esc(model.title)} · VideoClaw Cinema</title>
<style>body{overflow-x:hidden}.rail{min-width:0}h1{overflow-wrap:anywhere}.compare-stage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.comparison-panel{min-width:0;background:#080a0c}.comparison-panel>.viewer{min-height:300px}.comparison-panel video{width:100%;height:100%;max-height:520px}.filmstrip{margin:0;padding:10px 12px;border-top:1px solid var(--line);background:#0e1115}.filmstrip img{display:block;width:100%;height:auto}.filmstrip figcaption{margin-top:7px;color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}.comparison-panel dl{display:grid;grid-template-columns:75px minmax(0,1fr);gap:6px 10px;padding:14px 18px;margin:0}.comparison-panel dt{color:var(--muted)}.comparison-panel dd{margin:0;overflow:hidden;text-overflow:ellipsis}.comparison-panel details{padding:10px 18px;border-top:1px solid var(--line)}.comparison-panel pre{white-space:pre-wrap;max-height:180px;overflow:auto;font-size:10px}.comparison-label{padding:8px 12px;background:#15191e;color:var(--amber);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}.diff-table td.same{color:var(--muted)}.diff-table tr.different td{color:var(--amber)}.evidence-board{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}.evidence-head{align-items:start}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 28px}.evidence-table{min-width:760px}.evidence-table td:nth-child(4){text-align:center}@media(max-width:980px){.evidence-grid{grid-template-columns:1fr}}@media(max-width:600px){.compare-stage{grid-template-columns:1fr}}</style>
<style>.live-form{display:flex;flex-direction:column;gap:12px}.live-form label,.live-form fieldset{display:grid;gap:6px;color:var(--muted)}.live-form fieldset{grid-template-columns:110px 1fr 1fr;border:1px solid var(--line);padding:10px}.live-form legend{color:var(--text)}.live-form input,.live-form select{min-width:0;background:#0b0d10;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:9px}.live-form button{border:1px solid #785d31;background:#2a2112;color:var(--amber);padding:11px 14px;border-radius:7px;cursor:pointer}.live-form .check{display:flex;align-items:center}.live-result{white-space:pre-wrap;max-height:240px;overflow:auto;background:#080a0c;border:1px solid var(--line);padding:14px;border-radius:8px}@media(max-width:980px){.live-form fieldset{grid-template-columns:1fr}}</style>
<style>
:root{--bg:#090b0d;--panel:#111419;--panel2:#171b20;--line:#2a3038;--text:#f4f1ea;--muted:#929aa5;--amber:#e7a94b;--green:#61d095;--red:#ef6a74;--blue:#6aa8ff;--r:12px;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% -10%,#22201b 0,transparent 38%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}a{color:inherit}button{font:inherit}code,pre{font-family:var(--mono)}:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.rail{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:24px 16px;background:rgba(9,11,13,.92);backdrop-filter:blur(18px);z-index:5}.brand{display:flex;gap:11px;align-items:center;margin:0 8px 30px}.brand-mark{width:28px;height:28px;border:1px solid var(--amber);display:grid;place-items:center;transform:rotate(45deg)}.brand-mark:after{content:"";width:8px;height:8px;background:var(--amber)}.brand strong{display:block;letter-spacing:.15em;font-size:12px}.brand small{color:var(--muted)}nav a{display:flex;gap:10px;align-items:center;padding:9px 10px;margin:2px 0;border-radius:8px;text-decoration:none;color:#bac1ca}nav a:hover{background:var(--panel2);color:#fff}nav b{font:10px var(--mono);color:#68717e}.rail-foot{position:absolute;bottom:20px;left:24px;right:24px;color:var(--muted);font-size:11px}.main{min-width:0}.mast{padding:54px clamp(24px,5vw,76px) 42px;border-bottom:1px solid var(--line)}.kicker,.eyebrow{font:10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}h1{font-size:clamp(36px,6vw,74px);line-height:.94;letter-spacing:-.055em;max-width:1000px;margin:18px 0 24px}h2{font-size:28px;letter-spacing:-.03em;margin:0}h3{margin:6px 0 10px;font-size:18px}.mast-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted)}.mast-meta b{color:var(--text)}.section{padding:52px clamp(24px,5vw,76px);border-bottom:1px solid var(--line);scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:25px}.section-head p{max-width:610px;color:var(--muted);margin:0}.overview{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.panel{background:linear-gradient(145deg,rgba(24,28,33,.92),rgba(14,17,21,.95));border:1px solid var(--line);border-radius:var(--r);padding:20px}.score{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.score>div{background:var(--panel);padding:18px}.score strong{display:block;font-size:28px}.score small,.muted,small{color:var(--muted)}.gate-list,.plain-list{list-style:none;padding:0;margin:0}.gate-list li{display:grid;grid-template-columns:1fr auto;gap:5px;padding:12px 0;border-bottom:1px solid var(--line)}.gate-list small{grid-column:1}.badge{display:inline-flex;align-items:center;border:1px solid #3a424d;border-radius:999px;padding:3px 8px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.badge.good{border-color:#2c7150;color:var(--green);background:#10271e}.badge.bad{border-color:#71343a;color:var(--red);background:#2b1417}.badge.warn{border-color:#785d31;color:var(--amber);background:#2a2112}.badge.neutral{color:#aab2bd}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r)}table{width:100%;border-collapse:collapse;min-width:960px;background:var(--panel)}th{text-align:left;color:var(--muted);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;background:#0e1115;position:sticky;top:0}td{padding:14px;border-top:1px solid var(--line);vertical-align:top}td small,td strong{display:block}td code{font-size:11px}.money{text-align:right}.reconcile{display:block;color:var(--amber);font-size:11px}.asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.asset-card{display:grid;grid-template-columns:minmax(170px,.8fr) 1.2fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}.asset-media{min-height:230px;background:#07090b}.asset-copy{padding:20px;min-width:0}.metric-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}.metric-row span{color:var(--muted)}.metric-row b{color:var(--text)}.hash{display:block;overflow:hidden;text-overflow:ellipsis;color:#737d89;font-size:10px}.missing-media{height:100%;min-height:210px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;background:repeating-linear-gradient(135deg,#0b0e11,#0b0e11 10px,#0e1115 10px,#0e1115 20px);color:var(--muted)}.missing-media span{font:10px var(--mono);letter-spacing:.17em;color:var(--amber)}.missing-media strong{color:var(--text);margin:8px}.missing-media code{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.missing-media p{max-width:310px;font-size:12px}.shot-card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin:0 0 22px;overflow:hidden}.shot-card>header{display:flex;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.shot-number{font:30px var(--mono);color:#5c6570}.shot-grid{display:grid;grid-template-columns:minmax(360px,1.15fr) 1fr}.viewer{min-height:360px;background:#060709}.viewer video{width:100%;height:100%;max-height:620px}.shot-contract{padding:22px}.shot-contract dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px}.shot-contract dt{color:var(--muted)}.shot-contract dd{margin:0}.shot-contract details{border-top:1px solid var(--line);padding:13px 0}.shot-contract summary{cursor:pointer;color:#d8dbe0}.shot-contract pre{white-space:pre-wrap;max-height:300px;overflow:auto;background:#0a0c0f;padding:14px;border-radius:8px;color:#bbc2cb;font-size:11px}.candidate-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px}.candidate-layout>*,.compare-stage,.table-wrap{min-width:0}.candidate-list{display:flex;flex-direction:column;gap:8px}.candidate-row{width:100%;display:grid;grid-template-columns:1fr auto;text-align:left;gap:5px;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);cursor:pointer}.candidate-row.selected{border-color:var(--amber);box-shadow:inset 3px 0 var(--amber)}.candidate-row small,.candidate-row strong{display:block}.candidate-change{grid-column:1/-1;color:var(--muted);font-size:11px}.compare-stage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);min-height:400px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.compare-stage>div{background:#080a0c}.qc-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.qc-row{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:15px;background:var(--panel);border-top:1px solid var(--line)}.qc-row:first-child{border-top:0}.qc-row span:nth-child(2){display:flex;flex-direction:column}.qc-time{font:12px var(--mono);color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:18px}.action-box textarea{width:100%;min-height:110px;background:#0b0d10;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px;resize:vertical}.button-row{display:flex;gap:8px;margin-top:12px}.button-row button{border:1px solid var(--line);background:#1a1e23;color:#bfc5cd;padding:10px 14px;border-radius:7px}.button-row button[disabled]{opacity:.48;cursor:not-allowed}.read-only{border-left:3px solid var(--amber);padding:12px 14px;background:#261e12;color:#d8b87b}.edit-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}.edit-rail{list-style:none;padding:0;margin:0}.edit-rail li{display:grid;grid-template-columns:45px 1fr;gap:5px;padding:13px;border-bottom:1px solid var(--line)}.edit-rail span{grid-row:1/3;font:20px var(--mono);color:#68717d}.edit-rail small{grid-column:2}.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.delivery-slot{min-height:150px;border:1px dashed #39414b;border-radius:var(--r);padding:18px}.footer{padding:30px clamp(24px,5vw,76px);color:var(--muted);display:flex;justify-content:space-between;font-size:11px}@media(max-width:980px){.shell{grid-template-columns:1fr}.rail{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px 18px}.brand{margin:0 0 12px}.rail nav{display:flex;overflow:auto;gap:3px}.rail nav a{white-space:nowrap}.rail-foot{display:none}.overview,.candidate-layout,.edit-layout{grid-template-columns:1fr}.asset-grid{grid-template-columns:1fr}.shot-grid{grid-template-columns:1fr}.viewer{min-height:300px}.delivery-grid{grid-template-columns:1fr}}@media(max-width:600px){.mast{padding-top:34px}h1{font-size:40px}.section{padding-top:38px;padding-bottom:38px}.section-head{display:block}.section-head p{margin-top:8px}.score{grid-template-columns:1fr}.asset-card{grid-template-columns:1fr}.compare-stage{grid-template-columns:1fr}.shot-contract dl{grid-template-columns:1fr}.qc-row{grid-template-columns:48px 1fr}.qc-row>.badge{grid-column:2}.actions{grid-template-columns:1fr}.footer{display:block}}
</style></head><body><div class="shell"><aside class="rail"><div class="brand"><span class="brand-mark" aria-hidden="true"></span><span><strong>VIDEOCLAW</strong><small>Cinema control room</small></span></div><nav aria-label="Cinema rooms"><a href="#overview"><b>01</b>Overview</a><a href="#queue"><b>02</b>Queue</a><a href="#assets"><b>03</b>Assets</a><a href="#shots"><b>04</b>Shots</a><a href="#candidates"><b>05</b>Candidates</a><a href="#qc"><b>06</b>QC timeline</a><a href="#review"><b>07</b>Review</a><a href="#edit"><b>08</b>Edit</a><a href="#delivery"><b>09</b>Delivery</a></nav><div class="rail-foot">${model.mode === 'live' ? 'Authenticated live console' : 'Static evidence package'}<br>${esc(model.generatedAt)}</div></aside><main class="main"><header class="mast"><div class="kicker">${esc(model.scope)} / ${esc(model.projectSlug)}</div><h1>${esc(model.title)}</h1><div class="mast-meta"><span>readiness <b>${esc(model.summary.readiness)}</b></span><span>queue <b>${completeTasks}/${model.queue.length}</b></span><span>runtime <b>${model.edit.totalDurationSeconds}s</b></span><span>spend <b>${esc(model.summary.currency)} ${model.summary.actualCost.toFixed(2)}</b></span>${badge(model.mode)}</div></header>
<section class="section" id="overview"><div class="section-head"><div><div class="eyebrow">01 / production state</div><h2>Overview</h2></div><p>The decision surface: scope, ordered gates, explicit blockers and cost evidence in one place.</p></div><div class="score"><div><small>Queue complete</small><strong>${completeTasks}/${model.queue.length}</strong></div><div><small>Approved assets</small><strong>${model.assets.filter((item) => item.lockStatus !== 'pending').length}</strong></div><div><small>Actual spend</small><strong>${model.summary.currency} ${model.summary.actualCost.toFixed(2)}</strong></div></div><div class="overview" style="margin-top:18px"><div class="panel"><h3>Ordered gates</h3><ul class="gate-list">${gateItems}</ul></div><div class="panel"><h3>Blockers</h3><ul>${blockers}</ul><h3>Assumptions</h3><ul>${assumptions}</ul></div></div></section>
<section class="section" id="queue"><div class="section-head"><div><div class="eyebrow">02 / durable scheduler</div><h2>Production queue</h2></div><p>Dependencies, route and approval gate, lane position, leases, provider progress, retries/dead letters and estimated-versus-actual economics.</p></div>${model.mode === 'live' ? '<div class="button-row"><button type="button" id="cinema-live-refresh">Refresh canonical queue state</button></div>' : ''}<div class="table-wrap" style="margin-top:12px"><table><thead><tr><th>Task</th><th>State</th><th>Route + gate</th><th>Dependencies</th><th>Lane</th><th>Lease</th><th>Provider progress</th><th>Failure / retry</th><th>Cost</th></tr></thead><tbody>${queueRows}</tbody></table></div></section>
<section class="section" id="assets"><div class="section-head"><div><div class="eyebrow">03 / identity system</div><h2>Asset room</h2></div><p>Exactly one locked identity portrait. Garment-safe front and back plates remain headless, independently hashed and reviewable.</p></div><div class="asset-grid">${model.assets.map(assetCard).join('')}</div>${evidenceBoard(model)}</section>
<section class="section" id="shots"><div class="section-head"><div><div class="eyebrow">04 / story + continuity</div><h2>Storyboard & shot contracts</h2></div><p>Editorial purpose stays beside camera, timed action, active reference budget, continuity carry and the exact compiled prompt.</p></div>${model.shots.map(shotCard).join('')}</section>
<section class="section" id="candidates"><div class="section-head"><div><div class="eyebrow">05 / attempt lineage</div><h2>Candidate viewer</h2></div><p>Candidate A remains the baseline; choosing a row assigns Candidate B. Playback, seeking and playback rate stay synchronized while exact prompt, parameter, reference and changed-variable differences remain visible.</p></div><div class="candidate-layout"><div class="candidate-list" role="listbox" aria-label="Candidates">${candidates}</div><div><div class="compare-stage" data-test="ab-viewer">${comparisonPanel(baselineCandidate, 'A')}${comparisonPanel(baselineCandidate, 'B')}</div><div class="table-wrap" style="margin-top:12px"><table class="diff-table"><thead><tr><th>Canonical field</th><th>Candidate A</th><th>Candidate B</th></tr></thead><tbody>${comparisonDiff(baselineCandidate)}</tbody></table></div></div></div></section>
<section class="section" id="qc"><div class="section-head"><div><div class="eyebrow">06 / time-addressed evidence</div><h2>QC timeline</h2></div><p>Technical, identity, continuity, performance and editorial lanes stay independent. A visual pass cannot hide a story failure.</p></div><ul class="qc-list">${model.qc.map(qcFinding).join('')}</ul></section>
<section class="section" id="review"><div class="section-head"><div><div class="eyebrow">07 / authority-aware decisions</div><h2>Review actions</h2></div><p>Live commands use authenticated, role-scoped canonical APIs. Static exports expose the resulting audit history but cannot submit commands or authorize spend.</p></div>${reviewActions(model)}<h3 style="margin-top:24px">Immutable decision history</h3><ul class="qc-list">${reviewHistory}</ul></section>
<section class="section" id="edit"><div class="section-head"><div><div class="eyebrow">08 / rough cut</div><h2>Edit room</h2></div><p>Shot order, timing, act/arc/beat/setup/payoff coverage, missing coverage and sound layers remain visible before picture lock.</p></div><div class="edit-layout"><div class="panel"><ol class="edit-rail">${editRail}</ol></div><div class="panel"><div class="viewer">${media({ path: model.edit.roughCutPath, mediaExists: Boolean(model.edit.roughCutPath) }, 'Rough cut', 'video')}</div><p><b>Audio:</b> ${esc(model.edit.audioLayers.join(' · '))}</p><p><b>Missing coverage:</b> ${esc(model.edit.missingCoverage.join(', ') || 'none in attached coverage')}</p></div></div><h3 style="margin-top:24px">Story coverage through rough cut</h3><ul class="qc-list">${storyCoverage}</ul></section>
<section class="section" id="delivery"><div class="section-head"><div><div class="eyebrow">09 / archive + handoff</div><h2>Delivery room</h2></div><p>Masters, captions, archive hashes and measured scope progression remain blocked until picture, sound and colour are locked and final verification passes.</p></div><div class="delivery-grid"><div class="delivery-slot"><div class="eyebrow">Master</div><h3>${esc(model.delivery.masterPath ?? 'Not rendered')}</h3>${badge(model.delivery.status)}</div><div class="delivery-slot"><div class="eyebrow">Captions</div><h3>${esc(model.delivery.captionsPath ?? 'Not authored')}</h3></div><div class="delivery-slot"><div class="eyebrow">Archive hash</div><h3><code>${esc(model.delivery.archiveHash ?? 'pending')}</code></h3></div>${qualification}</div></section>
${liveConsoleScript(model)}
<footer class="footer"><span>VideoClaw Cinema · ${model.mode === 'live' ? 'authenticated live console' : 'canonical static review export'}</span><span>Keyboard: ↑/↓ assign Candidate B · Space play/pause focused video</span></footer></main></div><script id="cinema-console-data" type="application/json">${json(model)}</script><script>(()=>{const model=JSON.parse(document.getElementById('cinema-console-data').textContent);const rows=[...document.querySelectorAll('.candidate-row')];const panels=[...document.querySelectorAll('.comparison-panel')];let i=Math.max(0,rows.findIndex(r=>r.classList.contains('selected')));const values=(candidate)=>({routeId:candidate.routeId,promptHash:candidate.promptHash,providerParametersHash:candidate.providerParametersHash,referenceAssetIds:candidate.referenceAssetIds.join(', '),changedVariables:candidate.changedVariables.join(', ')||'baseline'});function assignB(candidate){const panel=panels.find(item=>item.dataset.comparisonSlot==='B');if(!panel||!candidate)return;for(const field of ['attemptId','shotId','routeId','prompt']){const node=panel.querySelector('[data-candidate-field="'+field+'"]');if(node)node.textContent=candidate[field]}const parameters=panel.querySelector('[data-candidate-field="providerParameters"]');if(parameters)parameters.textContent=JSON.stringify(candidate.providerParameters,null,2);const video=panel.querySelector('video');const missing=panel.querySelector('[data-comparison-missing]');if(candidate.videoPath&&candidate.mediaExists){video.src=candidate.videoPath;video.hidden=false;missing.hidden=true}else{video.pause();video.removeAttribute('src');video.load();video.hidden=true;missing.hidden=false;missing.querySelector('[data-comparison-label]').textContent=candidate.attemptId}const filmstrip=panel.querySelector('[data-filmstrip="B"]');const image=filmstrip.querySelector('img');if(candidate.filmstripPath&&candidate.filmstripExists){image.src=candidate.filmstripPath;image.alt=candidate.attemptId+' full-clip QC filmstrip';filmstrip.hidden=false}else{image.removeAttribute('src');filmstrip.hidden=true}const a=values(model.candidates[0]);const b=values(candidate);for(const field of Object.keys(a)){const row=document.querySelector('[data-diff-row="'+field+'"]');if(!row)continue;row.querySelector('[data-diff-slot="B"]').textContent=b[field];row.classList.toggle('different',a[field]!==b[field]);row.classList.toggle('same',a[field]===b[field])}}function pick(n){if(!rows.length)return;i=(n+rows.length)%rows.length;rows.forEach((r,x)=>{r.classList.toggle('selected',x===i);r.setAttribute('aria-pressed',String(x===i))});assignB(model.candidates[i]);rows[i].focus()}rows.forEach((r,x)=>r.addEventListener('click',()=>pick(x)));const videos=[...document.querySelectorAll('[data-sync-video]')];let syncing=false;function mirror(source){if(syncing)return;syncing=true;for(const target of videos){if(target===source)continue;if(Math.abs(target.currentTime-source.currentTime)>.08)target.currentTime=source.currentTime;if(target.playbackRate!==source.playbackRate)target.playbackRate=source.playbackRate;if(source.paused){if(!target.paused)target.pause()}else if(target.paused){target.play().catch(()=>{})}}syncing=false}for(const video of videos){for(const event of ['play','pause','seeking','ratechange'])video.addEventListener(event,()=>mirror(video));video.addEventListener('timeupdate',()=>{if(!video.paused)mirror(video)})}document.addEventListener('keydown',e=>{if(['TEXTAREA','INPUT','SELECT'].includes(document.activeElement?.tagName))return;if(e.key==='ArrowDown'){e.preventDefault();pick(i+1)}if(e.key==='ArrowUp'){e.preventDefault();pick(i-1)}if(e.key===' '){const v=document.activeElement?.closest('.viewer')?.querySelector('video')||videos.find(video=>!video.hidden);if(v){e.preventDefault();v.paused?v.play():v.pause()}}})})();</script></body></html>`;
}