{% extends "network/base.html" %}
{% block title %}{{ project.name }} — Project{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ project.name }}</h1>
    <p class="page-subtitle">{{ project.description or 'No description' }} — <span class="badge badge-{% if project.status == 'approved' or project.status == 'deployed' %}public{% elif project.status == 'in_review' %}warning{% else %}info{% endif %}">{{ project.status }}</span></p>
  </div>
  <div class="page-actions">
    <button class="btn btn-secondary" onclick="document.getElementById('link-modal').style.display='flex'">+ Link Topology</button>
    <button class="btn btn-secondary" onclick="updateStatus()">Change Status</button>
    <button class="btn btn-secondary" onclick="cloneProject()">Clone Project</button>
    <a href="/network/projects/{{ project.id }}/presentation" class="btn btn-secondary">Presentation</a>
    <a href="/network/?project={{ project.id }}" class="btn btn-secondary">Filter Dashboard</a>
    <a href="/network/projects" class="btn btn-secondary">All Projects</a>
  </div>
</div>

<!-- Stats Bar -->
<div class="stats-bar">
  <div class="stat-card"><div class="stat-value">{{ topologies|length }}</div><div class="stat-label">Topologies</div></div>
  <div class="stat-card"><div class="stat-value">{{ circuits|length }}</div><div class="stat-label">Circuits</div></div>
  <div class="stat-card">
    <div class="stat-value {% if agg_compliance_pct is not none %}{% if agg_compliance_pct >= 80 %}text-success{% elif agg_compliance_pct >= 50 %}text-warning{% else %}text-danger{% endif %}{% endif %}">
      {{ agg_compliance_pct if agg_compliance_pct is not none else '—' }}{% if agg_compliance_pct is not none %}%{% endif %}
    </div>
    <div class="stat-label">Compliance Score</div>
  </div>
  <div class="stat-card">
    <div class="stat-value {% if total_open_findings > 0 %}text-danger{% endif %}">{{ total_open_findings }}</div>
    <div class="stat-label">Open Findings</div>
  </div>
  <div class="stat-card"><div class="stat-value">${{ total_capex|round(0)|int }}</div><div class="stat-label">Est. CapEx</div></div>
  <div class="stat-card"><div class="stat-value">${{ total_circuit_cost|round(0)|int }}/mo</div><div class="stat-label">Circuit OpEx</div></div>
  <div class="stat-card"><div class="stat-value">{{ project.owner or '—' }}</div><div class="stat-label">Owner</div></div>
</div>

<!-- ═══════════════ REVIEW BOARD PIPELINE ═══════════════ -->
<section class="panel panel-wide" id="pipeline-section" style="margin-bottom:20px;">
  <div class="panel-header">
    <h2 class="panel-title">Review Board Pipeline</h2>
    <div style="display:flex;gap:6px;">
      {% if not project_phases %}<button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="initPhases()">Initialize Phases</button>{% endif %}
      <button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="document.getElementById('review-modal').style.display='flex'">+ Submit Review</button>
      <button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="document.getElementById('roi-modal').style.display='flex'">ROI Calculator</button>
      <button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="runImpactAnalysis()">Impact Analysis</button>
      <button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="decomposeSafe()">SAFe Decompose</button>
    </div>
  </div>

  <!-- Phase Progress Bar -->
  {% if project_phases %}
  <div class="phase-progress">
    {% for ph in project_phases %}
    <div class="phase-step phase-{{ ph.status }}">
      <div class="phase-num">{{ ph.phase_num }}</div>
      <div class="phase-name">{{ ph.phase_name }}</div>
    </div>
    {% if not loop.last %}<div class="phase-arrow">&#x25B6;</div>{% endif %}
    {% endfor %}
  </div>
  {% endif %}

  <!-- Board Review Status -->
  <div class="board-pipeline" id="board-pipeline">
    {% for board in review_boards %}
    <div class="board-card">
      <div class="board-header">
        <span class="board-short">{{ board.short_name }}</span>
        <span class="board-name">{{ board.name }}</span>
        {% if board.is_optional %}<span class="health-pill pill-blue" style="font-size:9px;">Optional</span>{% endif %}
      </div>
      {% set ns = namespace(found=false) %}
      {% for br in board_reviews if br.board_id == board.id %}
        {% set ns.found = true %}
        <div class="board-review-item br-{{ br.status }}">
          <div class="br-phase">Phase {{ br.phase }}</div>
          <div class="br-status">
            <span class="health-pill {% if br.status == 'approved' %}pill-green{% elif br.status == 'rejected' %}pill-red{% elif br.status == 'deferred' or br.status == 'conditional' %}pill-yellow{% else %}pill-blue{% endif %}">{{ br.status }}</span>
          </div>
          {% if br.decision_notes %}<div class="br-notes">{{ br.decision_notes[:60] }}</div>{% endif %}
          {% if br.status == 'pending' %}
          <div class="br-actions">
            <button class="btn btn-secondary" style="font-size:10px;padding:2px 6px;" onclick="reviewDecide('{{ br.id }}','approved')">Approve</button>
            <button class="btn btn-secondary" style="font-size:10px;padding:2px 6px;" onclick="reviewDecide('{{ br.id }}','rejected')">Reject</button>
            <button class="btn btn-secondary" style="font-size:10px;padding:2px 6px;" onclick="reviewDecide('{{ br.id }}','deferred')">Defer</button>
          </div>
          {% endif %}
        </div>
      {% endfor %}
      {% if not ns.found %}
        <div class="board-empty">No reviews submitted</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <!-- ROI Summary (if exists) -->
  {% if safe_bridge and safe_bridge.roi %}
  <div class="roi-summary" id="roi-summary">
    <div class="roi-item"><span class="roi-label">CapEx:</span> ${{ (safe_bridge.roi.capex or 0)|round(0)|int }}</div>
    <div class="roi-item"><span class="roi-label">Annual OpEx:</span> ${{ (safe_bridge.roi.opex_annual or 0)|round(0)|int }}</div>
    <div class="roi-item"><span class="roi-label">Annual Savings:</span> ${{ (safe_bridge.roi.savings_annual or 0)|round(0)|int }}</div>
    <div class="roi-item"><span class="roi-label">Payback:</span> {{ safe_bridge.roi.payback_months or 0 }} months</div>
    <div class="roi-item"><span class="roi-label">5-Year NPV:</span> <span class="{% if (safe_bridge.roi.npv_5yr or 0) > 0 %}text-success{% else %}text-danger{% endif %}">${{ (safe_bridge.roi.npv_5yr or 0)|round(0)|int }}</span></div>
    {% if safe_bridge.justification %}<div class="roi-item" style="grid-column:span 5;"><span class="roi-label">Justification:</span> {{ safe_bridge.justification[:200] }}</div>{% endif %}
  </div>
  {% endif %}

  <!-- Impact Analysis Results (populated by JS) -->
  <div id="impact-results" style="display:none;padding:10px 16px;border-top:1px solid var(--border);"></div>
</section>

<!-- Submit Review Modal -->
<div id="review-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Submit for Board Review</h3>
    <form onsubmit="return submitReview(event)">
      <div class="form-grid">
        <label>Board <select name="board_id">{% for b in review_boards %}<option value="{{ b.id }}">{{ b.short_name }} — {{ b.name }}</option>{% endfor %}</select></label>
        <label>Phase <select name="phase"><option value="1">1 - Concept</option><option value="2">2 - Design</option><option value="3">3 - Approval</option><option value="4">4 - Post-Deploy</option></select></label>
        <label>Scheduled Date <input name="scheduled_date" type="date"></label>
        <label>Reviewers <input name="reviewers" placeholder="Names (comma-separated)"></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>

<!-- ROI Calculator Modal -->
<div id="roi-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>ROI Calculator</h3>
    <form onsubmit="return submitRoi(event)">
      <div class="form-grid">
        <label>Total CapEx ($) <input name="capex" type="number" value="{{ (safe_bridge.roi.capex or 0) if safe_bridge and safe_bridge.roi else 0 }}"></label>
        <label>Annual OpEx ($) <input name="opex_annual" type="number" value="{{ (safe_bridge.roi.opex_annual or 0) if safe_bridge and safe_bridge.roi else 0 }}"></label>
        <label>Annual Savings ($) <input name="savings_annual" type="number" value="{{ (safe_bridge.roi.savings_annual or 0) if safe_bridge and safe_bridge.roi else 0 }}"></label>
        <label style="grid-column:span 2">Justification <input name="justification" value="{{ safe_bridge.justification or '' if safe_bridge else '' }}" placeholder="Business case"></label>
        <label style="grid-column:span 2">Alternatives Considered <input name="alternatives" value="{{ safe_bridge.alternatives or '' if safe_bridge else '' }}" placeholder="What else was evaluated"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Calculate & Save</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div class="dashboard-grid">
  <!-- Left Column: Main Content -->
  <div>
    <!-- ═══════════════ COMPLIANCE ROLLUP ═══════════════ -->
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Compliance Rollup</h2></div>
      {% if topo_compliance %}
      <table class="data-table" id="compliance-table">
        <thead><tr>
          <th>Topology</th><th>Score</th><th>Passed</th><th>Failed</th>
          <th>CAT1</th><th>CAT2</th><th>CAT3</th><th>Open</th><th>Last Audit</th>
        </tr></thead>
        <tbody>
        {% for tc in topo_compliance %}
          <tr>
            <td><a href="/network/compliance/{{ tc.id }}" class="table-link">{{ tc.name }}</a></td>
            <td>
              {% if tc.pct is not none %}
              <span class="health-pill {% if tc.pct >= 80 %}pill-green{% elif tc.pct >= 50 %}pill-yellow{% else %}pill-red{% endif %}">{{ tc.pct }}%</span>
              {% else %}—{% endif %}
            </td>
            <td>{{ tc.passed }}</td>
            <td>{{ tc.failed }}</td>
            <td>{% if tc.cat1 > 0 %}<span class="health-pill pill-red">{{ tc.cat1 }}</span>{% else %}0{% endif %}</td>
            <td>{% if tc.cat2 > 0 %}<span class="health-pill pill-yellow">{{ tc.cat2 }}</span>{% else %}0{% endif %}</td>
            <td>{{ tc.cat3 }}</td>
            <td>{% if tc.open_findings > 0 %}<span class="health-pill pill-red">{{ tc.open_findings }}</span>{% else %}0{% endif %}</td>
            <td class="ts">{{ (tc.last_audit or '')[:16] }}</td>
          </tr>
        {% endfor %}
        </tbody>
        <tfoot>
          <tr style="font-weight:700;border-top:2px solid var(--border);">
            <td>AGGREGATE</td>
            <td>
              {% if agg_compliance_pct is not none %}
              <span class="health-pill {% if agg_compliance_pct >= 80 %}pill-green{% elif agg_compliance_pct >= 50 %}pill-yellow{% else %}pill-red{% endif %}">{{ agg_compliance_pct }}%</span>
              {% else %}—{% endif %}
            </td>
            <td>{{ topo_compliance|sum(attribute='passed') }}</td>
            <td>{{ topo_compliance|sum(attribute='failed') }}</td>
            <td>{{ topo_compliance|sum(attribute='cat1') }}</td>
            <td>{{ topo_compliance|sum(attribute='cat2') }}</td>
            <td>{{ topo_compliance|sum(attribute='cat3') }}</td>
            <td>{{ total_open_findings }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
      {% else %}<p style="padding:1rem;color:var(--text-dim);">No compliance audits run yet. Open a topology and run a compliance audit.</p>{% endif %}
    </section>

    <!-- ═══════════════ TOPOLOGIES ═══════════════ -->
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Topologies</h2></div>
      {% if topologies %}
      <table class="data-table">
        <thead><tr><th>Name</th><th>Nodes</th><th>Links</th><th>Assignee</th><th>Updated</th><th>Actions</th></tr></thead>
        <tbody>
        {% for t in topologies %}
          <tr>
            <td><a href="/network/canvas/{{ t.id }}" class="table-link">{{ t.name }}</a></td>
            <td>{{ t.node_count }}</td><td>{{ t.edge_count }}</td>
            <td><span class="assignee-cell" onclick="setAssignee('{{ t.id }}')">{{ topo_assignees.get(t.id, '—') }}</span></td>
            <td class="ts">{{ (t.updated_at or '')[:16] }}</td>
            <td class="actions">
              <a href="/network/canvas/{{ t.id }}" class="action-btn">&#x270F;</a>
              <a href="/network/compliance/{{ t.id }}" class="action-btn" title="Compliance" style="color:#f39c12;">C</a>
              <a href="/network/versions/{{ t.id }}" class="action-btn" title="Versions">V</a>
              <button class="action-btn danger" onclick="unlinkTopo('{{ t.id }}')">&#x2715;</button>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
      {% else %}<p style="padding:1rem;color:var(--text-dim);">No topologies linked. Click "+ Link Topology" to add one.</p>{% endif %}
    </section>

    <!-- ═══════════════ BOM COST ROLLUP ═══════════════ -->
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Cost Rollup</h2></div>
      <table class="data-table" id="cost-table">
        <thead><tr>
          <th>Topology</th><th>Devices</th><th>Unique Types</th><th>Est. CapEx</th>
        </tr></thead>
        <tbody>
        {% for tb in topo_bom %}
          <tr>
            <td><a href="/network/canvas/{{ tb.id }}" class="table-link">{{ tb.name }}</a></td>
            <td>{{ tb.devices }}</td>
            <td>{{ tb.unique_types }}</td>
            <td>${{ tb.capex|round(0)|int }}</td>
          </tr>
        {% endfor %}
        </tbody>
        <tfoot>
          <tr style="font-weight:700;border-top:2px solid var(--border);">
            <td colspan="3">TOTAL</td>
            <td>${{ total_capex|round(0)|int }}</td>
          </tr>
          <tr style="color:var(--text-dim);">
            <td colspan="3">Circuit OpEx (monthly)</td>
            <td>${{ total_circuit_cost|round(0)|int }}/mo</td>
          </tr>
        </tfoot>
      </table>
    </section>

    <!-- ═══════════════ CIRCUITS ═══════════════ -->
    {% if circuits %}
    <section class="panel panel-wide">
      <div class="panel-header"><h2 class="panel-title">Circuits</h2></div>
      <table class="data-table">
        <thead><tr><th>Circuit ID</th><th>Carrier</th><th>Type</th><th>BW</th><th>Status</th><th>Cost/mo</th></tr></thead>
        <tbody>
        {% for c in circuits %}
          <tr><td>{{ c.circuit_id }}</td><td>{{ c.carrier }}</td><td>{{ c.circuit_type }}</td><td>{{ c.bandwidth }}</td>
          <td><span class="badge">{{ c.install_status }}</span></td><td>${{ (c.monthly_cost_usd or 0)|round(0)|int }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </section>
    {% endif %}

    <!-- ═══════════════ MILESTONES ═══════════════ -->
    <section class="panel panel-wide" id="milestones-section">
      <div class="panel-header">
        <h2 class="panel-title">Milestones</h2>
        <button class="btn btn-secondary" style="font-size:0.75rem;padding:3px 10px;" onclick="addMilestone()">+ Add</button>
      </div>
      <div id="milestones-list">
      {% if milestones %}
        {% for m in milestones %}
        <div class="milestone-item" data-id="{{ m.id }}">
          <div class="ms-status ms-{{ m.status }}"></div>
          <div class="ms-body">
            <div class="ms-title">{{ m.title }}</div>
            {% if m.due_date %}<div class="ms-due">Due: {{ m.due_date }}</div>{% endif %}
            {% if m.notes %}<div class="ms-notes">{{ m.notes }}</div>{% endif %}
          </div>
          <div class="ms-actions">
            <select onchange="updateMilestone('{{ m.id }}',this.value)" style="font-size:11px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:3px;">
              <option {% if m.status == 'pending' %}selected{% endif %}>pending</option>
              <option {% if m.status == 'in_progress' %}selected{% endif %}>in_progress</option>
              <option {% if m.status == 'completed' %}selected{% endif %}>completed</option>
              <option {% if m.status == 'missed' %}selected{% endif %}>missed</option>
            </select>
            <button class="action-btn danger" onclick="deleteMilestone('{{ m.id }}')">&#x2715;</button>
          </div>
        </div>
        {% endfor %}
      {% else %}
        <p style="padding:8px 12px;color:var(--text-dim);font-size:13px;">No milestones. Click "+ Add" to track deadlines.</p>
      {% endif %}
      </div>
      <!-- Gantt Timeline -->
      {% if milestones %}
      <div class="gantt-timeline" id="gantt-timeline">
        {% for m in milestones if m.due_date %}
        <div class="gantt-bar gantt-{{ m.status }}" title="{{ m.title }} — {{ m.due_date }}">
          <span class="gantt-label">{{ m.title[:20] }}</span>
          <span class="gantt-date">{{ m.due_date }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </section>
  </div>

  <!-- Right Column -->
  <div class="panel-stack">

    <!-- ═══════════════ TAGS ═══════════════ -->
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Tags</h2></div>
      <div class="tags-container" id="tags-container">
        {% for tag in project_tags %}
        <span class="tag-pill">{{ tag }} <button class="tag-remove" onclick="removeTag('{{ tag }}')">&times;</button></span>
        {% endfor %}
        <input class="tag-input" id="tag-input" placeholder="Add tag..." onkeydown="if(event.key==='Enter'){event.preventDefault();addTag();}">
      </div>
    </section>

    <!-- ═══════════════ GATE STATUS ═══════════════ -->
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Status Gates</h2></div>
      <div style="padding:8px 12px;">
        <div style="margin-bottom:8px;font-size:12px;color:var(--text-dim);">Check readiness before changing status:</div>
        <button class="btn btn-secondary" style="font-size:12px;margin:2px;" onclick="checkGate('in_review')">In Review</button>
        <button class="btn btn-secondary" style="font-size:12px;margin:2px;" onclick="checkGate('approved')">Approved</button>
        <button class="btn btn-secondary" style="font-size:12px;margin:2px;" onclick="checkGate('deployed')">Deployed</button>
        <div id="gate-result" style="margin-top:8px;"></div>
      </div>
    </section>

    <!-- ═══════════════ NOTES ═══════════════ -->
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Notes</h2></div>
      <div id="notes-container" style="padding:8px 12px;">
        <div style="margin-bottom:8px;">
          <textarea id="note-input" rows="2" placeholder="Add a note..." style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-size:12px;resize:vertical;"></textarea>
          <button class="btn btn-secondary" style="font-size:11px;margin-top:4px;" onclick="addNote()">Post Note</button>
        </div>
        {% for n in notes %}
        <div class="note-item">
          <div class="note-meta">{{ n.author or 'Anonymous' }} &middot; {{ (n.created_at or '')[:16] }}</div>
          <div class="note-body">{{ n.body }}</div>
          <button class="action-btn danger" style="font-size:10px;" onclick="deleteNote('{{ n.id }}')">&#x2715;</button>
        </div>
        {% endfor %}
      </div>
    </section>
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Activity Feed</h2></div>
      {% if activity %}
      <div class="activity-feed" id="activity-feed">
        {% for a in activity %}
        <div class="activity-item">
          <div class="activity-action">
            <span class="activity-badge ab-{{ a.action|lower }}">{{ a.action }}</span>
            <span class="activity-entity">{{ a.entity_type }}</span>
          </div>
          {% if a.details %}<div class="activity-detail">{{ a.details[:80] }}</div>{% endif %}
          <div class="activity-meta">
            {% if a.user_id %}<span>{{ a.user_id[:20] }}</span>{% endif %}
            <span class="activity-ts">{{ (a.ts or '')[:16] }}</span>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p style="padding:1rem;color:var(--text-dim);">No activity recorded yet.</p>
      {% endif %}
    </section>
  </div>
</div>

<!-- Link Topology Modal -->
<div id="link-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Link Topology to Project</h3>
    <form onsubmit="return linkTopo(event)">
      <label>Topology <select name="topology_id">{% for t in all_topos %}<option value="{{ t.id }}">{{ t.name }}</option>{% endfor %}</select></label>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Link</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 PID='{{ project.id }}';
function linkTopo(e){e.preventDefault();const tid=e.target.topology_id.value;
  fetch(NC_BASE+`/api/projects/${PID}/topologies`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({topology_id:tid})}).then(()=>location.reload());return false;}
function unlinkTopo(tid){if(!confirm('Unlink this topology?'))return;
  fetch(NC_BASE+`/api/projects/${PID}/topologies/${tid}`,{method:'DELETE'}).then(()=>location.reload());}
function updateStatus(){const s=prompt('New status (draft, in_review, approved, deployed, archived):');if(!s)return;
  fetch(NC_BASE+`/api/projects/${PID}`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:s})}).then(()=>location.reload());}
function cloneProject(){const name=prompt('New project name:','{{ project.name }} (Copy)');if(!name)return;
  fetch(NC_BASE+`/api/projects/${PID}/clone`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name})})
    .then(r=>r.json()).then(d=>{if(d.id){alert('Cloned! '+d.topologies_cloned+' topologies copied.');window.location.href=NC_BASE+'/projects/'+d.id;}else{alert('Failed: '+(d.error||''));}});}
// P3: Milestones
function addMilestone(){const t=prompt('Milestone title:');if(!t)return;const d=prompt('Due date (YYYY-MM-DD):','');
  fetch(NC_BASE+`/api/projects/${PID}/milestones`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({title:t,due_date:d||null})}).then(()=>location.reload());}
function updateMilestone(mid,status){fetch(NC_BASE+`/api/milestones/${mid}`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:status})});}
function deleteMilestone(mid){if(!confirm('Delete milestone?'))return;fetch(NC_BASE+`/api/milestones/${mid}`,{method:'DELETE'}).then(()=>location.reload());}
// P3: Notes
function addNote(){const body=document.getElementById('note-input').value.trim();if(!body)return;
  fetch(NC_BASE+`/api/projects/${PID}/notes`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({body:body})}).then(()=>location.reload());}
function deleteNote(nid){if(!confirm('Delete note?'))return;fetch(NC_BASE+`/api/notes/${nid}`,{method:'DELETE'}).then(()=>location.reload());}
// P3: Tags
function addTag(){const inp=document.getElementById('tag-input');const tag=inp.value.trim();if(!tag)return;
  fetch(NC_BASE+`/api/tags/project/${PID}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({tag:tag})}).then(()=>location.reload());}
function removeTag(tag){fetch(NC_BASE+`/api/tags/project/${PID}/${encodeURIComponent(tag)}`,{method:'DELETE'}).then(()=>location.reload());}
// P3: Assignee
function setAssignee(tid){const a=prompt('Assignee name:','');if(a===null)return;
  fetch(NC_BASE+`/api/projects/${PID}/topologies/${tid}/assignee`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({assignee:a})}).then(()=>location.reload());}
// P3: Gate check
// SAFe Decompose
function decomposeSafe(){
  fetch(NC_BASE+`/api/projects/${PID}/decompose`,{method:'POST'}).then(r=>r.json()).then(d=>{
    if(d.error){alert(d.error);return;}
    alert(`SAFe Decomposition:\n- 1 Feature (${d.feature.t_shirt_size}, WSJF=${d.feature.wsjf_score})\n- ${d.stories.length} Stories\n- ${d.enablers.length} Enablers\n\nTotal: ${d.total_items} items`);
  });
}
// Phase C: Impact Analysis
function runImpactAnalysis(){
  const el=document.getElementById('impact-results');el.style.display='block';el.innerHTML='Analyzing...';
  fetch(NC_BASE+`/api/projects/${PID}/impact`).then(r=>r.json()).then(d=>{
    if(d.total_affected===0&&d.shared_resources.length===0){
      el.innerHTML='<div style="color:var(--success);font-size:12px;font-weight:600;">No downstream impact detected. This project has no interconnects or shared resources with other projects.</div>';
      return;
    }
    let html='<div style="font-size:12px;font-weight:600;margin-bottom:8px;">Impact Analysis: '+d.total_affected+' affected project(s) ('+d.direct+' direct, '+d.indirect+' indirect)</div>';
    d.affected_projects.forEach(a=>{
      html+=`<div class="impact-item impact-${a.impact}"><span class="health-pill ${a.impact==='direct'?'pill-red':'pill-yellow'}">${a.impact}</span><a href="${NC_BASE}/projects/${a.project_id}">${a.project_name}</a><span style="color:var(--text-dim);">via ${a.via_circuit||'link'} (${a.protocol||'—'}, ${a.bandwidth||'—'})</span></div>`;
    });
    if(d.shared_resources.length){
      html+='<div style="font-size:11px;color:var(--text-dim);margin-top:8px;">Shared resources:</div>';
      d.shared_resources.forEach(s=>{html+=`<div class="impact-item"><span class="health-pill pill-yellow">${s.type}</span>${s.resource} shared with <a href="${NC_BASE}/projects/${s.project_id}">${s.project_name}</a></div>`;});
    }
    el.innerHTML=html;
  });
}
// Phase A: Pipeline
function initPhases(){fetch(NC_BASE+`/api/projects/${PID}/init-phases`,{method:'POST'}).then(r=>r.json()).then(d=>{if(d.ok)location.reload();else alert(d.error||'Failed');});}
function submitReview(e){e.preventDefault();const fd=new FormData(e.target),d={};fd.forEach((v,k)=>d[k]=v);
  d.phase=parseInt(d.phase)||1;d.reviewers=d.reviewers?d.reviewers.split(',').map(s=>s.trim()):[];
  fetch(NC_BASE+`/api/projects/${PID}/reviews`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(()=>location.reload());return false;}
function reviewDecide(rid,decision){const notes=prompt('Decision notes:','');if(notes===null)return;
  fetch(NC_BASE+`/api/reviews/${rid}/decide`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision:decision,notes:notes})}).then(()=>location.reload());}
function submitRoi(e){e.preventDefault();const fd=new FormData(e.target),d={};fd.forEach((v,k)=>d[k]=v);
  d.capex=parseFloat(d.capex)||0;d.opex_annual=parseFloat(d.opex_annual)||0;d.savings_annual=parseFloat(d.savings_annual)||0;
  fetch(NC_BASE+`/api/projects/${PID}/roi`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(()=>location.reload());return false;}
function checkGate(target){fetch(NC_BASE+`/api/projects/${PID}/gate-check`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({target_status:target})})
  .then(r=>r.json()).then(d=>{const el=document.getElementById('gate-result');
    if(d.blocked){el.innerHTML='<div style="color:var(--danger);font-size:12px;"><strong>BLOCKED:</strong> '+d.failures.map(f=>'<div style="margin:2px 0;">- '+f+'</div>').join('')+'</div>';}
    else{el.innerHTML='<div style="color:var(--success);font-size:12px;">READY for '+target+'</div>';}});}
</script>
{% endblock %}