{% extends "base.html" %}
{% block title %}PRD — {{ session_customer }} | ICDEV™{% endblock %}

{% block content %}
<style>
  .prd-root { max-width: 960px; margin: 0 auto; padding: 32px 24px 72px; }

  .prd-cui-banner {
    background: #1a2a1a; color: #6eff6e; font-weight: 700; letter-spacing: 0.12em;
    font-size: 0.72rem; text-align: center; padding: 6px 0; border-radius: 4px;
    margin-bottom: 24px; text-transform: uppercase;
  }

  .prd-actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; align-items: center; }
  .prd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: opacity 0.15s; }
  .prd-btn:hover { opacity: 0.85; }
  .prd-btn--primary  { background: var(--accent-blue, #3b82f6); color: #fff; }
  .prd-btn--secondary{ background: var(--border-color, #2d3550); color: var(--text-primary, #e2e8f0); }

  /* ── PRD body: render markdown-generated HTML professionally ── */
  .prd-body {
    font-family: var(--font-sans, system-ui, sans-serif);
    color: var(--text-primary, #e2e8f0);
    line-height: 1.7;
  }
  .prd-body h1 { font-size: 1.9rem; font-weight: 800; margin: 0 0 12px; border-bottom: 2px solid var(--accent-blue, #3b82f6); padding-bottom: 10px; }
  .prd-body h2 { font-size: 1.35rem; font-weight: 700; margin: 36px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color, #2d3550); color: var(--accent-blue, #3b82f6); }
  .prd-body h3 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 10px; color: var(--text-primary, #e2e8f0); }
  .prd-body h4 { font-size: 0.92rem; font-weight: 700; margin: 16px 0 8px; color: var(--text-secondary, #a8b2c4); text-transform: uppercase; letter-spacing: 0.06em; }
  .prd-body p  { margin: 0 0 14px; }
  .prd-body blockquote {
    margin: 0 0 14px; padding: 10px 18px;
    border-left: 4px solid var(--accent-blue, #3b82f6);
    background: rgba(59,130,246,0.06); border-radius: 0 6px 6px 0;
    color: var(--text-secondary, #a8b2c4); font-style: italic;
  }
  .prd-body code { font-family: monospace; font-size: 0.85em; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; }
  .prd-body pre  { background: var(--card-bg, #1e2433); border: 1px solid var(--border-color, #2d3550); border-radius: 6px; padding: 14px 18px; overflow-x: auto; margin: 0 0 16px; }
  .prd-body pre code { background: none; padding: 0; }
  .prd-body ul, .prd-body ol { margin: 0 0 14px; padding-left: 22px; }
  .prd-body li { margin-bottom: 5px; }

  /* Tables */
  .prd-body table {
    width: 100%; border-collapse: collapse; margin: 0 0 20px;
    font-size: 0.88rem; background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, #2d3550); border-radius: 6px; overflow: hidden;
  }
  .prd-body th {
    background: rgba(59,130,246,0.12); color: var(--accent-blue, #3b82f6);
    font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
    padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-color, #2d3550);
  }
  .prd-body td { padding: 9px 14px; border-bottom: 1px solid var(--border-color, #2d3550); color: var(--text-primary, #e2e8f0); vertical-align: top; }
  .prd-body tr:last-child td { border-bottom: none; }
  .prd-body tr:hover td { background: rgba(255,255,255,0.02); }

  /* Strong inside td */
  .prd-body td strong { color: var(--text-primary, #e2e8f0); }

  /* Horizontal rule as section separator */
  .prd-body hr { border: none; border-top: 1px solid var(--border-color, #2d3550); margin: 32px 0; }

  /* Error state */
  .prd-error { text-align:center; padding: 64px 0; color: var(--text-muted, #8892a4); }
  .prd-error-icon { font-size: 3rem; margin-bottom: 16px; }
  .prd-error-msg { font-size: 1rem; }

  @media print {
    .prd-actions-bar { display: none; }
    .prd-cui-banner  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .prd-body table  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
</style>

<div class="prd-root">

  <div class="prd-cui-banner">{{ classification_banner }}</div>

  <div class="prd-actions-bar">
    <a class="prd-btn prd-btn--secondary" href="/intake/requirements/{{ session_id }}">&#x2190; Requirements</a>
    <a class="prd-btn prd-btn--secondary" href="/chat/{{ session_id }}">&#x1F4AC; Back to Chat</a>
    <button class="prd-btn prd-btn--secondary" id="download-btn">&#x2B07; Download .md</button>
    <button class="prd-btn prd-btn--secondary" onclick="window.print()">&#x1F5A8; Print / Save PDF</button>
    <button class="prd-btn prd-btn--primary" id="build-app-btn" onclick="buildStandaloneApp()">&#x1F680; Build Standalone App</button>
  </div>

  {% if error %}
  <div class="prd-error">
    <div class="prd-error-icon">&#x26A0;</div>
    <div class="prd-error-msg">{{ error }}</div>
  </div>
  {% else %}
  <div class="prd-body">
    {{ prd_html | safe }}
  </div>
  {% endif %}

  <div style="text-align:center;margin-top:48px;padding-top:20px;border-top:1px solid var(--border-color,#2d3550);font-size:0.72rem;color:var(--text-muted,#8892a4);">
    {{ classification_banner }} &nbsp;&middot;&nbsp; Generated {{ generated_at }} &nbsp;&middot;&nbsp; ICDEV™ Requirements Management
  </div>

</div>

<script>
(function() {
  var raw = {{ prd_markdown_json | safe }};
  document.getElementById('download-btn').addEventListener('click', function() {
    var blob = new Blob([raw], { type: 'text/markdown;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url; a.download = 'PRD-{{ session_id }}.md';
    document.body.appendChild(a); a.click();
    document.body.removeChild(a); URL.revokeObjectURL(url);
  });
})();

async function buildStandaloneApp() {
  var btn = document.getElementById('build-app-btn');
  btn.disabled = true;
  btn.textContent = '⏳ Initializing builder...';
  try {
    var resp = await fetch('/api/studio/app-builder/from-prd/{{ session_id }}', { method: 'POST' });
    var data = await resp.json();
    if (data.status === 'ok') {
      window.location.href = data.preview_url;
    } else {
      btn.disabled = false;
      btn.innerHTML = '&#x1F680; Build Standalone App';
      alert('Builder init failed: ' + (data.error || 'unknown error'));
    }
  } catch (e) {
    btn.disabled = false;
    btn.innerHTML = '&#x1F680; Build Standalone App';
    alert('Network error: ' + e.message);
  }
}
</script>
{% endblock %}