{% extends "network/base.html" %}
{% block title %}Innovation Hub — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Innovation Hub</h1>
    <p class="page-subtitle">Ideas, Tech Radar, and Lessons Learned — everyone contributes</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('idea-modal').style.display='flex'">+ Submit Idea</button>
    <button class="btn btn-secondary" onclick="document.getElementById('radar-modal').style.display='flex'">+ Tech Radar</button>
    <button class="btn btn-secondary" onclick="document.getElementById('lesson-modal').style.display='flex'">+ Lesson Learned</button>
  </div>
</div>

<div id="innov-loading" style="color:var(--text-dim);padding:20px;">Loading...</div>
<div id="innov-content" style="display:none;">

  <!-- Ideas Section -->
  <section class="panel panel-wide" id="ideas-section">
    <div class="panel-header"><h2 class="panel-title">Ideas</h2></div>
    <div id="ideas-list" style="padding:8px;"></div>
  </section>

  <div class="dashboard-grid" style="margin-top:16px;">
    <!-- Tech Radar -->
    <section class="panel panel-wide" id="radar-section">
      <div class="panel-header"><h2 class="panel-title">Tech Radar</h2></div>
      <div id="radar-rings" style="padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;"></div>
    </section>

    <!-- Lessons Learned -->
    <div class="panel-stack">
      <section class="panel" id="lessons-section">
        <div class="panel-header"><h2 class="panel-title">Lessons Learned</h2></div>
        <div id="lessons-list" style="padding:8px;max-height:400px;overflow-y:auto;"></div>
      </section>
    </div>
  </div>
</div>

<!-- Submit Idea Modal -->
<div id="idea-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Submit Innovation Idea</h3>
    <form onsubmit="return submitIdea(event)">
      <div class="form-grid">
        <label style="grid-column:span 2">Title <input name="title" required placeholder="e.g., Replace MPLS with SD-WAN to cut WAN cost 30%"></label>
        <label style="grid-column:span 2">Description <textarea name="description" rows="3" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-size:12px;" placeholder="Describe the idea, expected benefits, and approach"></textarea></label>
        <label>Category <select name="category"><option value="improvement">Improvement</option><option value="cost_reduction">Cost Reduction</option><option value="security">Security</option><option value="automation">Automation</option><option value="new_capability">New Capability</option></select></label>
        <label>Your Name <input name="submitted_by" placeholder="Name or team"></label>
        <label>Impact (1-10) <input name="impact_score" type="number" min="1" max="10" value="5"></label>
        <label>Feasibility (1-10) <input name="feasibility_score" type="number" min="1" max="10" value="5"></label>
        <label>Cost Efficiency (1-10) <input name="cost_score" type="number" min="1" max="10" value="5"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

<!-- Tech Radar Modal -->
<div id="radar-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add to Tech Radar</h3>
    <form onsubmit="return submitRadar(event)">
      <div class="form-grid">
        <label>Technology <input name="technology" required placeholder="e.g., SD-WAN, SASE, WiFi 7, SR-MPLS"></label>
        <label>Ring <select name="ring"><option value="assess">Assess</option><option value="trial">Trial</option><option value="adopt">Adopt</option><option value="hold">Hold</option></select></label>
        <label>Category <select name="category"><option value="networking">Networking</option><option value="security">Security</option><option value="cloud">Cloud</option><option value="automation">Automation</option><option value="observability">Observability</option></select></label>
        <label style="grid-column:span 2">Description <input name="description" placeholder="Why this technology matters"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Add</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

<!-- Lesson Learned Modal -->
<div id="lesson-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add Lesson Learned</h3>
    <form onsubmit="return submitLesson(event)">
      <div class="form-grid">
        <label style="grid-column:span 2">Title <input name="title" required placeholder="e.g., OSPF area 0 split caused 30-min outage"></label>
        <label>Category <select name="category"><option value="technical">Technical</option><option value="process">Process</option><option value="communication">Communication</option><option value="tooling">Tooling</option></select></label>
        <label>Your Name <input name="submitted_by" placeholder="Name"></label>
        <label style="grid-column:span 2">What Happened <textarea name="what_happened" rows="2" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-size:12px;"></textarea></label>
        <label style="grid-column:span 2">Root Cause <input name="root_cause" placeholder="Why did this happen?"></label>
        <label style="grid-column:span 2">Lesson <input name="lesson" placeholder="What did we learn?"></label>
        <label style="grid-column:span 2">Recommendation <input name="recommendation" placeholder="What should we do differently?"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const RING_COLORS = {adopt:'#27ae60', trial:'#3498db', assess:'#f39c12', hold:'#e74c3c'};
const CAT_ICONS = {improvement:'&#x1F4A1;', cost_reduction:'&#x1F4B0;', security:'&#x1F6E1;', automation:'&#x2699;', new_capability:'&#x1F680;'};

async function loadAll() {
  document.getElementById('innov-loading').style.display = 'none';
  document.getElementById('innov-content').style.display = 'block';
  await Promise.all([loadIdeas(), loadRadar(), loadLessons()]);
}

async function loadIdeas() {
  const d = await fetch(NC_BASE + '/api/innovation-ideas').then(r => r.json());
  const el = document.getElementById('ideas-list');
  if (!d.length) { el.innerHTML = '<p style="color:var(--text-dim);font-size:13px;padding:8px;">No ideas yet. Be the first to submit one!</p>'; return; }
  el.innerHTML = d.map(i => `
    <div class="idea-card">
      <div class="idea-header">
        <span class="idea-icon">${CAT_ICONS[i.category] || '&#x1F4A1;'}</span>
        <span class="idea-title">${i.title}</span>
        <span class="health-pill ${i.total_score >= 7 ? 'pill-green' : i.total_score >= 4 ? 'pill-yellow' : 'pill-red'}">${i.total_score}</span>
        <span class="badge badge-${i.status === 'approved' ? 'public' : i.status === 'rejected' ? 'secret' : 'info'}">${i.status}</span>
      </div>
      ${i.description ? '<div class="idea-desc">' + i.description.substring(0, 120) + '</div>' : ''}
      <div class="idea-footer">
        <span>${i.submitted_by || 'Anonymous'}</span>
        <span>Impact:${i.impact_score} Feasibility:${i.feasibility_score} Cost:${i.cost_score}</span>
        <button class="btn btn-secondary" style="font-size:10px;padding:2px 8px;" onclick="voteIdea('${i.id}')">&#x1F44D; ${i.votes}</button>
        <button class="action-btn danger" style="font-size:10px;" onclick="deleteIdea('${i.id}')">&#x2715;</button>
      </div>
    </div>
  `).join('');
}

async function loadRadar() {
  const d = await fetch(NC_BASE + '/api/tech-radar').then(r => r.json());
  const el = document.getElementById('radar-rings');
  ['adopt','trial','assess','hold'].forEach(ring => {
    const items = (d.by_ring || {})[ring] || [];
    el.innerHTML += `
      <div class="radar-ring" style="border-top:3px solid ${RING_COLORS[ring]};">
        <div class="radar-ring-title">${ring.toUpperCase()}</div>
        ${items.length ? items.map(t => `
          <div class="radar-item">
            <span>${t.technology}</span>
            <span style="font-size:10px;color:var(--text-dim);">${t.category}</span>
            ${t.moved_from ? '<span style="font-size:9px;color:var(--warning);">from ' + t.moved_from + '</span>' : ''}
            <button class="action-btn danger" style="font-size:9px;" onclick="deleteRadar('${t.id}')">&#x2715;</button>
          </div>
        `).join('') : '<div style="color:var(--text-dim);font-size:11px;padding:4px;">None</div>'}
      </div>
    `;
  });
}

async function loadLessons() {
  const d = await fetch(NC_BASE + '/api/lessons-learned').then(r => r.json());
  const el = document.getElementById('lessons-list');
  if (!d.length) { el.innerHTML = '<p style="color:var(--text-dim);font-size:13px;padding:8px;">No lessons yet.</p>'; return; }
  el.innerHTML = d.map(l => `
    <div class="lesson-item">
      <div class="lesson-title">${l.title}</div>
      <div class="lesson-meta">${l.category} | ${l.submitted_by || '?'} | ${(l.created_at || '').substring(0, 10)}</div>
      ${l.lesson ? '<div class="lesson-body"><strong>Lesson:</strong> ' + l.lesson + '</div>' : ''}
      ${l.recommendation ? '<div class="lesson-body"><strong>Action:</strong> ' + l.recommendation + '</div>' : ''}
      <button class="action-btn danger" style="font-size:9px;" onclick="deleteLesson('${l.id}')">&#x2715;</button>
    </div>
  `).join('');
}

function submitIdea(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  d.impact_score = parseInt(d.impact_score) || 5; d.feasibility_score = parseInt(d.feasibility_score) || 5; d.cost_score = parseInt(d.cost_score) || 5;
  fetch(NC_BASE + '/api/innovation-ideas', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
function submitRadar(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  fetch(NC_BASE + '/api/tech-radar', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
function submitLesson(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  fetch(NC_BASE + '/api/lessons-learned', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
async function voteIdea(id) { await fetch(NC_BASE + '/api/innovation-ideas/' + id + '/vote', {method:'POST'}); location.reload(); }
async function deleteIdea(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/innovation-ideas/' + id, {method:'DELETE'}); location.reload(); }
async function deleteRadar(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/tech-radar/' + id, {method:'DELETE'}); location.reload(); }
async function deleteLesson(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/lessons-learned/' + id, {method:'DELETE'}); location.reload(); }

loadAll();
</script>
{% endblock %}