{% extends "base.html" %}
{% block title %}Submit an AI Idea — FORGE IGNITE{% endblock %}

{% block extra_css %}
<style>
:root {
  --ig-gold:   #FFB800;
  --ig-green:  #00FF88;
  --ig-blue:   #4A90E2;
  --ig-red:    #FF4444;
  --ig-bg:     #0a0a14;
  --ig-card:   #12192b;
  --ig-border: rgba(74,144,217,0.25);
}
.ig-intake { max-width: 780px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.ig-hero {
  background: linear-gradient(135deg, #0a0a14 0%, #12192b 60%, #1a1a14 100%);
  border-bottom: 1px solid var(--ig-border);
  padding: 2.5rem 2rem 2rem;
  margin-bottom: 2rem;
}
.ig-hero h1 { font-size: 1.75rem; font-weight: 700; color: var(--ig-gold); margin: 0 0 .4rem; }
.ig-hero p  { color: #8899aa; margin: 0; }
.ig-step {
  background: var(--ig-card);
  border: 1px solid var(--ig-border);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  display: none;
}
.ig-step.active { display: block; }
.ig-step-header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
}
.ig-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ig-gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.ig-step-title { font-size: 1.1rem; font-weight: 600; color: #e0e0e0; }
.ig-step-desc  { font-size: .875rem; color: #8899aa; margin: -.5rem 0 1rem; }
.ig-question { margin-bottom: 1.25rem; }
.ig-question label {
  display: block; font-size: .9rem; color: #ccd; margin-bottom: .4rem; font-weight: 500;
}
.ig-question textarea,
.ig-question input[type="text"],
.ig-question select {
  width: 100%; background: #0a0a14; border: 1px solid rgba(74,144,217,0.3);
  border-radius: 8px; color: #e0e0e0; padding: .6rem .75rem; font-size: .9rem;
  box-sizing: border-box; resize: vertical;
}
.ig-question textarea:focus,
.ig-question input:focus,
.ig-question select:focus {
  outline: none; border-color: var(--ig-gold);
}
.ig-question textarea { min-height: 80px; }
.ig-question select option { background: #12192b; }
.ig-nav {
  display: flex; justify-content: space-between; margin-top: 1.5rem;
}
.ig-btn {
  padding: .6rem 1.5rem; border-radius: 8px; font-size: .9rem;
  font-weight: 600; border: none; cursor: pointer; transition: opacity .2s;
}
.ig-btn:hover { opacity: .85; }
.ig-btn-primary { background: var(--ig-gold); color: #000; }
.ig-btn-secondary { background: rgba(255,255,255,.08); color: #e0e0e0; }
.ig-btn-success { background: var(--ig-green); color: #000; }
.ig-progress {
  display: flex; gap: .5rem; margin-bottom: 2rem;
}
.ig-progress-dot {
  height: 4px; flex: 1; background: rgba(255,255,255,.1); border-radius: 2px;
  transition: background .3s;
}
.ig-progress-dot.done { background: var(--ig-gold); }
.ig-progress-dot.active { background: var(--ig-green); }

/* Brief result */
.ig-brief-card {
  background: var(--ig-card);
  border: 1px solid rgba(0,255,136,.3);
  border-radius: 12px;
  padding: 1.75rem;
  display: none;
}
.ig-brief-card.visible { display: block; }
.ig-brief-card h2 { color: var(--ig-green); margin: 0 0 1rem; font-size: 1.2rem; }
.ig-brief-body { color: #ccd; font-size: .9rem; line-height: 1.7; }
.ig-brief-body h2 { color: var(--ig-gold); font-size: 1rem; margin: 1rem 0 .4rem; }
.ig-brief-body h3 { color: var(--ig-blue); font-size: .9rem; margin: .8rem 0 .3rem; }
.ig-brief-body ul { padding-left: 1.25rem; }
.ig-brief-body table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ig-brief-body th { background: rgba(255,255,255,.05); padding: .4rem .6rem; text-align: left; color: #aab; }
.ig-brief-body td { padding: .35rem .6rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.ig-score-row {
  display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0;
}
.ig-score-chip {
  background: rgba(255,255,255,.05); border-radius: 8px;
  padding: .4rem .75rem; font-size: .8rem; color: #ccd;
  border: 1px solid rgba(255,255,255,.1);
}
.ig-score-chip strong { color: var(--ig-gold); }
.ig-phase-badge {
  display: inline-block; padding: .3rem .8rem; border-radius: 20px;
  font-size: .85rem; font-weight: 700; margin: .5rem 0 1rem;
}
.ig-spinner {
  text-align: center; padding: 2rem; display: none; color: #8899aa;
}
.ig-spinner.visible { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.ig-spin-icon { display: inline-block; animation: spin 1s linear infinite; font-size: 1.5rem; }
</style>
{% endblock %}

{% block content %}
<div class="ig-hero">
  <div style="max-width:780px;margin:0 auto;">
    <div style="font-size:.8rem;color:#FFB800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem;">
      FORGE IGNITE
    </div>
    <h1>Submit an AI Innovation Idea</h1>
    <p>Answer a few questions to help us understand your idea. We'll generate a feasibility brief and score it automatically.</p>
  </div>
</div>

<div class="ig-intake">

  <!-- Progress bar -->
  <div class="ig-progress" id="progressBar">
    <div class="ig-progress-dot active" id="dot-0"></div>
    <div class="ig-progress-dot" id="dot-1"></div>
    <div class="ig-progress-dot" id="dot-2"></div>
    <div class="ig-progress-dot" id="dot-3"></div>
    <div class="ig-progress-dot" id="dot-4"></div>
  </div>

  <form id="intakeForm">

    <!-- Step 0: Basic info -->
    <div class="ig-step active" id="step-0">
      <div class="ig-step-header">
        <div class="ig-step-num">1</div>
        <div class="ig-step-title">Your Idea</div>
      </div>
      <div class="ig-question">
        <label>Give your idea a short title <span style="color:#FF4444">*</span></label>
        <input type="text" id="f_title" name="title" placeholder="e.g. AI-powered STIG triage assistant" required>
      </div>
      <div class="ig-question">
        <label>Your name</label>
        <input type="text" id="f_name" name="submitter_name" placeholder="First Last">
      </div>
      <div class="ig-question">
        <label>Your department or team</label>
        <input type="text" id="f_dept" name="department" placeholder="e.g. Platform Engineering">
      </div>
      <div class="ig-question">
        <label>Your role</label>
        <select id="f_role" name="submitter_role">
          {% for opt in ["Developer","Architect","DevOps / SRE","SecOps","Data / ML Engineer",
                         "Network Engineer","ISSO / ISSM","CISO","Program Manager","Analyst",
                         "Leadership / Executive","Other"] %}
          <option>{{ opt }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="ig-nav">
        <span></span>
        <button type="button" class="ig-btn ig-btn-primary" onclick="nextStep()">Next →</button>
      </div>
    </div>

    <!-- Steps 1-4: Rounds from config -->
    {% for round in rounds %}{% if round.id != 'basic' %}
    <div class="ig-step" id="step-{{ loop.index }}">
      <div class="ig-step-header">
        <div class="ig-step-num">{{ loop.index + 1 }}</div>
        <div class="ig-step-title">{{ round.label }}</div>
      </div>
      {% if round.description %}
      <p class="ig-step-desc">{{ round.description }}</p>
      {% endif %}
      {% for q in round.questions %}
      <div class="ig-question">
        <label>{{ q.label }}{% if q.required is defined and q.required %} <span style="color:#FF4444">*</span>{% endif %}</label>
        {% if q.type == 'textarea' %}
        <textarea id="f_{{ q.id }}" name="{{ q.id }}" rows="3" placeholder="Type your answer..."></textarea>
        {% elif q.type == 'select' %}
        <select id="f_{{ q.id }}" name="{{ q.id }}">
          <option value="">— Select —</option>
          {% for opt in q.options %}<option>{{ opt }}</option>{% endfor %}
        </select>
        {% else %}
        <input type="text" id="f_{{ q.id }}" name="{{ q.id }}" placeholder="Type your answer...">
        {% endif %}
      </div>
      {% endfor %}
      <div class="ig-nav">
        <button type="button" class="ig-btn ig-btn-secondary" onclick="prevStep()">← Back</button>
        {% if not loop.last %}
        <button type="button" class="ig-btn ig-btn-primary" onclick="nextStep()">Next →</button>
        {% else %}
        <button type="button" class="ig-btn ig-btn-success" onclick="submitIntake()">Generate Brief ✦</button>
        {% endif %}
      </div>
    </div>
    {% endif %}{% endfor %}

  </form>

  <!-- Spinner -->
  <div class="ig-spinner" id="spinner">
    <div class="ig-spin-icon">⟳</div>
    <p>Generating your AI Opportunity Brief...</p>
  </div>

  <!-- Brief result -->
  <div class="ig-brief-card" id="briefCard">
    <h2>✦ AI Opportunity Brief Generated</h2>
    <div id="phaseTag"></div>
    <div class="ig-score-row" id="scoreRow"></div>
    <div class="ig-brief-body" id="briefBody"></div>
    <div class="ig-nav" style="margin-top:1.5rem;">
      <a href="/innovation" class="ig-btn ig-btn-secondary">← View Pipeline</a>
      <a href="#" id="viewIdeaBtn" class="ig-btn ig-btn-primary">View Full Scorecard →</a>
    </div>
  </div>

</div>

<script>
let currentStep = 0;
let createdIdeaId = null;
const totalSteps = {{ (rounds | length) }};

function nextStep() {
  if (currentStep === 0) {
    const title = document.getElementById('f_title').value.trim();
    if (!title) { alert('Please enter a title for your idea.'); return; }
  }
  setStep(currentStep + 1);
}
function prevStep() { setStep(currentStep - 1); }

function setStep(n) {
  document.getElementById('step-' + currentStep).classList.remove('active');
  currentStep = n;
  document.getElementById('step-' + currentStep).classList.add('active');
  // Progress bar
  for (let i = 0; i < totalSteps; i++) {
    const dot = document.getElementById('dot-' + i);
    if (!dot) continue;
    dot.classList.remove('active', 'done');
    if (i < currentStep) dot.classList.add('done');
    else if (i === currentStep) dot.classList.add('active');
  }
}

async function submitIntake() {
  const answers = {};
  document.querySelectorAll('#intakeForm [name]').forEach(el => {
    if (el.value) answers[el.name] = el.value;
  });

  // Hide form, show spinner
  document.getElementById('step-' + currentStep).style.display = 'none';
  document.getElementById('progressBar').style.display = 'none';
  document.getElementById('spinner').classList.add('visible');

  try {
    // Step 1: Create idea
    const createResp = await fetch('/api/innovation/ideas', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        title: answers.title || 'Unnamed Idea',
        submitter_name: answers.submitter_name || '',
        submitter_email: '',
        submitter_role: answers.submitter_role || 'unknown',
        department: answers.department || '',
      })
    });
    const createData = await createResp.json();
    createdIdeaId = createData.idea_id;

    // Step 2: Save intake + generate brief + score
    const intakeResp = await fetch('/api/innovation/ideas/' + createdIdeaId + '/intake', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({answers})
    });
    const intakeData = await intakeResp.json();

    document.getElementById('spinner').classList.remove('visible');
    renderBrief(intakeData);
  } catch (err) {
    document.getElementById('spinner').classList.remove('visible');
    alert('Something went wrong. Please try again.');
    console.error(err);
  }
}

function renderBrief(data) {
  const card = document.getElementById('briefCard');
  card.classList.add('visible');

  // Phase badge
  const phaseColors = {phase1:'#00FF88', phase2:'#FFB800', phase3:'#FF4444', deferred:'#888'};
  const color = phaseColors[data.phase_tag] || '#888';
  document.getElementById('phaseTag').innerHTML =
    `<span class="ig-phase-badge" style="background:${color}22;color:${color};border:1px solid ${color}44;">
      ${data.phase_emoji || ''} ${data.phase_label || data.phase_tag}
     </span>`;

  // Score chips
  const dims = data.scores?.dimensions || {};
  const chips = Object.entries(dims).map(([k, v]) =>
    `<div class="ig-score-chip"><strong>${v.score}/10</strong> ${v.label || k}</div>`
  ).join('');
  const total = data.scores?.total || 0;
  document.getElementById('scoreRow').innerHTML =
    `<div class="ig-score-chip"><strong style="color:#00FF88">${total}/100</strong> Total Score</div>${chips}`;

  // Brief body (markdown → basic HTML)
  const md = data.brief || '';
  document.getElementById('briefBody').innerHTML = mdToHtml(md);

  // View idea button
  document.getElementById('viewIdeaBtn').href = '/innovation/' + createdIdeaId;
}

function mdToHtml(md) {
  return md
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/^\- (.+)$/gm, '<li>$1</li>')
    .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
    .replace(/^\|(.+)\|$/gm, (_, row) => {
      const cells = row.split('|').map(c => c.trim());
      return '<tr>' + cells.map(c => /^[-:]+$/.test(c) ? '' : `<td>${c}</td>`).join('') + '</tr>';
    })
    .replace(/(<tr>.*<\/tr>\n?)+/g, '<table>$&</table>')
    .replace(/\n\n/g, '<br><br>');
}
</script>
{% endblock %}