{% extends "base.html" %}
{% block title %}AI Strategy Wizard — ICDEV™{% endblock %}
{% block content %}
<div class="page-header">
  <h1>AI Strategy Wizard</h1>
  <p class="subtitle">Answer 5 questions to get a personalized AI adoption roadmap with recommended goals, skills, and a phased sprint plan.</p>
</div>

<div id="wizard-container" class="card" style="max-width:680px;margin:0 auto;">
  <form id="wizard-form">
    <div class="form-group">
      <label for="use_case">What are you building?</label>
      <select id="use_case" name="use_case" class="form-control" required>
        <option value="web_app">Web Application</option>
        <option value="dashboard">Dashboard / Analytics</option>
        <option value="compliance">Compliance / ATO</option>
        <option value="ato">ATO Acceleration</option>
        <option value="security">Security Engineering</option>
        <option value="devops">DevSecOps / CI/CD</option>
        <option value="research">Research / Intelligence</option>
        <option value="modernize">Modernization</option>
        <option value="monitor">Monitoring / Observability</option>
        <option value="saas">SaaS Platform</option>
        <option value="ai">AI / Multi-Agent System</option>
        <option value="govcon">GovCon / Proposals</option>
      </select>
    </div>

    <div class="form-group">
      <label for="compliance_level">Compliance level?</label>
      <select id="compliance_level" name="compliance_level" class="form-control" required>
        <option value="IL2">IL2 — Public / Unclassified</option>
        <option value="IL4" selected>IL4 — CUI / GovCloud</option>
        <option value="IL5">IL5 — CUI / Dedicated</option>
        <option value="FedRAMP">FedRAMP</option>
        <option value="CMMC">CMMC</option>
      </select>
    </div>

    <div class="form-group">
      <label for="tech_stack">Primary tech stack?</label>
      <select id="tech_stack" name="tech_stack" class="form-control" required>
        <option value="python" selected>Python</option>
        <option value="typescript">TypeScript</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="go">Go</option>
        <option value="rust">Rust</option>
        <option value="csharp">C# / .NET</option>
      </select>
    </div>

    <div class="form-group">
      <label for="ai_maturity">AI maturity level?</label>
      <select id="ai_maturity" name="ai_maturity" class="form-control" required>
        <option value="none" selected>None — Starting fresh</option>
        <option value="pilot">Pilot — Exploring AI tools</option>
        <option value="scaling">Scaling — AI in production</option>
      </select>
    </div>

    <div class="form-group">
      <label for="cloud_provider">Cloud target?</label>
      <select id="cloud_provider" name="cloud_provider" class="form-control" required>
        <option value="local" selected>Local / On-prem dev</option>
        <option value="aws">AWS Commercial</option>
        <option value="aws_govcloud">AWS GovCloud</option>
        <option value="azure">Azure</option>
        <option value="azure_government">Azure Government</option>
        <option value="gcp">GCP</option>
        <option value="on_prem">On-Premises</option>
      </select>
    </div>

    <button type="submit" class="btn btn-primary" id="submit-btn">Generate My Roadmap</button>
  </form>

  <div id="wizard-result" style="display:none;margin-top:2rem;">
    <h2>Your AI Roadmap</h2>
    <div id="result-goals"></div>
    <div id="result-skills"></div>
    <div id="result-tasks"></div>
  </div>

  <div id="wizard-error" class="alert alert-danger" style="display:none;margin-top:1rem;"></div>
</div>

<script>
document.getElementById('wizard-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.textContent = 'Generating…';
  document.getElementById('wizard-error').style.display = 'none';

  const payload = {
    use_case: document.getElementById('use_case').value,
    compliance_level: document.getElementById('compliance_level').value,
    tech_stack: document.getElementById('tech_stack').value,
    ai_maturity: document.getElementById('ai_maturity').value,
    cloud_provider: document.getElementById('cloud_provider').value,
  };

  try {
    const resp = await fetch('/api/ai-wizard/submit', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload),
    });
    if (!resp.ok) throw new Error('Server error: ' + resp.status);
    const data = await resp.json();

    document.getElementById('result-goals').innerHTML =
      '<h3>Recommended Goals</h3><ul>' +
      data.recommended_goals.map(g => '<li>' + g + '</li>').join('') +
      '</ul>';

    document.getElementById('result-skills').innerHTML =
      '<h3>Recommended Skills</h3><ul>' +
      data.recommended_skills.map(s => '<li>' + s + '</li>').join('') +
      '</ul>';

    const taskRows = data.sprint_plan_tasks.map(t =>
      '<tr><td>P' + t.phase + '</td><td>' + t.title + '</td><td>' + t.type + '</td><td>' + t.estimated_hours + 'h</td></tr>'
    ).join('');
    document.getElementById('result-tasks').innerHTML =
      '<h3>Sprint Plan</h3><table class="table"><thead><tr><th>Phase</th><th>Task</th><th>Type</th><th>Hours</th></tr></thead><tbody>' +
      taskRows + '</tbody></table>';

    document.getElementById('wizard-result').style.display = 'block';
  } catch (err) {
    document.getElementById('wizard-error').textContent = err.message;
    document.getElementById('wizard-error').style.display = 'block';
  } finally {
    btn.disabled = false;
    btn.textContent = 'Generate My Roadmap';
  }
});
</script>
{% endblock %}