<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Preview Report — {{FEATURE_SLUG}} | {{APP_NAME}}</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5;color:#333}
  .header{background:linear-gradient(135deg,#1a237e,#0d47a1);color:#fff;padding:24px 32px}
  .header h1{font-size:22px;font-weight:600;margin-bottom:8px}
  .header .meta{font-size:13px;opacity:0.85;display:flex;gap:24px;flex-wrap:wrap}
  .header .meta span{display:flex;align-items:center;gap:6px}
  .content{max-width:1200px;margin:24px auto;padding:0 16px}
  .card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.12);margin-bottom:20px;overflow:hidden}
  .card-header{padding:16px 20px;border-bottom:1px solid #e0e0e0;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
  .card-body{padding:20px}
  .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
  .summary-item{text-align:center;padding:16px;border-radius:8px;background:#f8f9fa}
  .summary-item .count{font-size:28px;font-weight:700}
  .summary-item .label{font-size:12px;text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;opacity:0.7}
  .added .count{color:#2e7d32} .modified .count{color:#e65100} .removed .count{color:#c62828}
  /* CSS Flip Widget */
  .__fc-preview-flip{position:relative;display:inline-block;cursor:pointer;width:100%}
  .__fc-preview-flip img{display:block;max-width:100%;border-radius:8px}
  .__fc-flip-after{display:none}
  .__fc-flip-label{position:absolute;top:12px;left:12px;background:rgba(0,0,0,0.75);color:#fff;padding:4px 12px;border-radius:16px;font:700 12px/1.5 sans-serif;letter-spacing:0.5px;pointer-events:none;transition:all 0.3s}
  .__fc-flip-hint{position:absolute;bottom:8px;right:8px;font:11px/1.4 sans-serif;color:rgba(255,255,255,0.6);background:rgba(0,0,0,0.5);padding:2px 8px;border-radius:8px}
  /* Auto-play crossfade */
  .__fc-preview-flip.auto-play .__fc-flip-before{display:block;transition:opacity 0.5s ease-in-out;opacity:1}
  .__fc-preview-flip.auto-play .__fc-flip-after{position:absolute;top:0;left:0;width:100%;display:block;transition:opacity 0.5s ease-in-out;opacity:0}
  .__fc-preview-flip.auto-play.show-after .__fc-flip-before{opacity:0}
  .__fc-preview-flip.auto-play.show-after .__fc-flip-after{opacity:1}
  /* Change legend */
  .legend{display:flex;gap:16px;margin:12px 0;font-size:13px}
  .legend-item{display:flex;align-items:center;gap:6px}
  .legend-dot{width:14px;height:14px;border-radius:50%}
  .legend-dot.green{background:#4caf50} .legend-dot.yellow{background:#ff9800} .legend-dot.red{background:#f44336}
  /* Iteration history */
  .iteration{border:1px solid #e0e0e0;border-radius:8px;margin:12px 0;overflow:hidden}
  .iteration-header{padding:10px 16px;background:#f8f9fa;font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between}
  .iteration-body{padding:16px;display:none}
  .iteration.open .iteration-body{display:block}
  .iteration img{max-width:100%;border-radius:6px;margin:8px 0}
  .iteration .feedback{background:#fff3e0;padding:8px 12px;border-radius:6px;font-size:13px;margin-bottom:8px}
  /* Changes table */
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;padding:8px 12px;background:#f5f5f5;border-bottom:2px solid #e0e0e0;font-weight:600}
  td{padding:8px 12px;border-bottom:1px solid #eee}
  .mode-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;color:#fff}
  .mode-add{background:#4caf50} .mode-modify{background:#ff9800} .mode-remove{background:#f44336}
  /* Footer */
  .footer{text-align:center;padding:20px;font-size:12px;color:#999;margin-top:20px}
</style>
</head>
<body>

<div class="header">
  <h1>UI Preview Report</h1>
  <div class="meta">
    <span>{{APP_NAME}} — {{ROUTE}}</span>
    <span>Profile: {{PROFILE}}</span>
    <span>{{DATE}}</span>
    <span>{{FEATURE_SLUG}}</span>
    <span>Status: {{APPROVAL_STATUS}}</span>
  </div>
</div>

<div class="content">
  <!-- Summary -->
  <div class="card">
    <div class="card-header">Change Summary</div>
    <div class="card-body">
      <div class="summary-grid">
        <div class="summary-item added"><div class="count">{{ADDED_COUNT}}</div><div class="label">Added</div></div>
        <div class="summary-item modified"><div class="count">{{MODIFIED_COUNT}}</div><div class="label">Modified</div></div>
        <div class="summary-item removed"><div class="count">{{REMOVED_COUNT}}</div><div class="label">Removed</div></div>
        <div class="summary-item"><div class="count">{{ITERATION_COUNT}}</div><div class="label">Iterations</div></div>
      </div>
      <div class="legend" style="margin-top:16px">
        <div class="legend-item"><div class="legend-dot green"></div> Added (green dashed)</div>
        <div class="legend-item"><div class="legend-dot yellow"></div> Modified (yellow solid)</div>
        <div class="legend-item"><div class="legend-dot red"></div> Removed (red + strikethrough)</div>
      </div>
    </div>
  </div>

  <!-- Visual Diff — CSS Flip Widget -->
  <div class="card">
    <div class="card-header">Before / After Comparison</div>
    <div class="card-body">
      <div class="__fc-preview-flip auto-play">
        <img class="__fc-flip-before" src="data:image/png;base64,{{BASELINE_B64}}" alt="Before" />
        <img class="__fc-flip-after" src="data:image/png;base64,{{FINAL_HIGHLIGHTED_B64}}" alt="After (highlighted)" />
        <div class="__fc-flip-label">BEFORE</div>
        <div class="__fc-flip-hint">Click to toggle / Hover to compare</div>
      </div>
    </div>
  </div>

  <!-- Clean Final (no highlights) -->
  <div class="card">
    <div class="card-header">Final Preview (clean — no highlights)</div>
    <div class="card-body">
      <img src="data:image/png;base64,{{FINAL_CLEAN_B64}}" alt="Final clean preview" style="max-width:100%;border-radius:8px" />
    </div>
  </div>

  <!-- Change Manifest -->
  <div class="card">
    <div class="card-header">Change Manifest</div>
    <div class="card-body">
      <table>
        <thead><tr><th>#</th><th>Mode</th><th>Target</th><th>Description</th><th>Selector</th></tr></thead>
        <tbody>
          {{CHANGES_TABLE_ROWS}}
          <!-- Template per row:
          <tr>
            <td>1</td>
            <td><span class="mode-badge mode-add">ADD</span></td>
            <td>Appeasement Card</td>
            <td>fc.card.attribute with 4 fields</td>
            <td><code>.MuiCard-root:nth-of-type(2)</code></td>
          </tr>
          -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- Iteration History (collapsible) -->
  <div class="card">
    <div class="card-header">Iteration History</div>
    <div class="card-body">
      {{ITERATIONS_HTML}}
      <!-- Template per iteration:
      <div class="iteration">
        <div class="iteration-header" onclick="this.parentElement.classList.toggle('open')">
          <span>Iteration N — "user feedback text"</span>
          <span>▸</span>
        </div>
        <div class="iteration-body">
          <div class="feedback">User: "feedback text"</div>
          <p>Change: description of what was modified</p>
          <img src="data:image/png;base64,ITERATION_B64" alt="Iteration N" />
        </div>
      </div>
      -->
    </div>
  </div>

  <!-- Handoff Notes -->
  <div class="card">
    <div class="card-header">Handoff Notes (for /fluent-mystique-builder)</div>
    <div class="card-body">
      {{HANDOFF_NOTES_HTML}}
    </div>
  </div>
</div>

<div class="footer">
  Generated by /fluent-mystique-preview | Fluent AI Skills
</div>

<script>
// CSS Flip Widget — toggle + hover
document.querySelectorAll('.__fc-preview-flip').forEach(function(w){
  var before=w.querySelector('.__fc-flip-before'),after=w.querySelector('.__fc-flip-after'),label=w.querySelector('.__fc-flip-label'),showing='before';
  function show(which){
    if(which==='after'){before.style.display='none';after.style.display='block';label.textContent='AFTER';label.style.background='rgba(76,175,80,0.85)'}
    else{after.style.display='none';before.style.display='block';label.textContent='BEFORE';label.style.background='rgba(0,0,0,0.75)'}
    showing=which;
  }
  w.addEventListener('click',function(){show(showing==='before'?'after':'before')});
  w.addEventListener('mouseenter',function(){show('after')});
  w.addEventListener('mouseleave',function(){show('before')});
});
// Auto-play toggle
document.querySelectorAll('.__fc-preview-flip.auto-play').forEach(function(w){
  var id=setInterval(function(){w.classList.toggle('show-after')},2000);
  w.dataset.autoPlayId=id;
});
</script>
</body>
</html>
