{% extends "network/base.html" %}
{% block title %}New Build Wizard — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">New Network Build Wizard</h1>
    <p class="page-subtitle">Guided workflow: create project + topology + phases + case workflow in one step</p>
  </div>
</div>

<section class="panel panel-wide" style="max-width:700px;">
  <div class="panel-header"><h2 class="panel-title">Step 1: Define Your Build</h2></div>
  <form onsubmit="return runWizard(event)" style="padding:16px;">
    <div class="form-grid">
      <label style="grid-column:span 2">Project Name <input name="name" required placeholder="e.g., DC-East WAN Refresh, Customer-X Peering"></label>
      <label>Owner <input name="owner" placeholder="Your name"></label>
      <label>Classification <select name="classification"><option value="public">Public</option><option value="CUI" selected>CUI</option><option value="SECRET">SECRET</option></select></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="What is this build for? Purpose, scope, expected outcome"></textarea></label>
    </div>
    <div style="margin-top:16px;padding:12px;background:var(--bg3);border-radius:6px;font-size:12px;color:var(--text-dim);">
      <strong style="color:var(--text);">The wizard will automatically create:</strong>
      <ul style="margin:8px 0 0 16px;">
        <li>Project container with all metadata</li>
        <li>Empty topology canvas (ready to design)</li>
        <li>4 project phases (Concept → Design → Approval → Post-Deploy)</li>
        <li>12-state case workflow (concept → operate)</li>
      </ul>
      <p style="margin-top:8px;">After creation, you'll be redirected to the canvas to start designing.</p>
    </div>
    <div class="form-actions" style="margin-top:16px;">
      <button type="submit" class="btn btn-primary" id="wizard-btn">Create &amp; Open Canvas</button>
      <a href="/network/" class="btn btn-secondary">Cancel</a>
    </div>
    <div id="wizard-result" style="margin-top:12px;"></div>
  </form>
</section>
{% endblock %}
{% block scripts %}
<script>
async function runWizard(e) {
  e.preventDefault();
  const btn = document.getElementById('wizard-btn');
  const el = document.getElementById('wizard-result');
  btn.disabled = true; btn.textContent = 'Creating...';
  const fd = new FormData(e.target), d = {};
  fd.forEach((v, k) => d[k] = v);
  d.topology_name = d.name;
  try {
    const r = await fetch(NC_BASE + '/api/wizard/new-build', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(d)
    });
    const result = await r.json();
    if (result.project_id) {
      el.innerHTML = '<div style="color:var(--success);font-size:13px;">Created! Redirecting to canvas...</div>';
      setTimeout(() => {
        window.location.href = result.next_step;
      }, 1000);
    } else {
      el.innerHTML = '<div style="color:var(--danger);">' + (result.error || 'Failed') + '</div>';
      btn.disabled = false; btn.textContent = 'Create & Open Canvas';
    }
  } catch (err) {
    el.innerHTML = '<div style="color:var(--danger);">Error: ' + err.message + '</div>';
    btn.disabled = false; btn.textContent = 'Create & Open Canvas';
  }
  return false;
}
</script>
{% endblock %}