{% extends "base.html" %}
{% block title %}AADC Quick Start — ICDEV™{% endblock %}
{% block content %}
<div class="cui-banner" style="background:#1a1a2e;border:1px solid #e94560;padding:4px 12px;font-size:11px;color:#e94560;text-align:center;margin-bottom:12px;">CUI // SP-CTI</div>

<div style="max-width:680px;margin:0 auto;padding:0 16px;">

  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;">
    <div>
      <h2 style="margin:0;color:#eaeaea;">⚡ Quick Start Wizard</h2>
      <p style="color:#7a8cb0;font-size:13px;margin:4px 0 0;">Answer 3 questions — we'll route you to the right solution pack.</p>
    </div>
    <a href="/agentic-ai/solutions" style="background:#0f3460;color:#7ab3f0;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">← Solution Packs</a>
  </div>

  <!-- Progress bar -->
  <div style="background:#1e293b;border-radius:4px;height:4px;margin-bottom:32px;overflow:hidden;">
    <div id="progress-bar" style="background:#6366f1;height:100%;width:0%;transition:width 0.4s ease;"></div>
  </div>

  <!-- Step 1: Domain -->
  <div id="step-1" class="wizard-step active">
    <div style="color:#7a8cb0;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Step 1 of 3</div>
    <h3 style="color:#eaeaea;font-size:18px;margin:0 0 24px;">What domain or industry are you in?</h3>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
      {% set domains = [
        ('government', '🏛️', 'Government / Defense', 'Federal agencies, DoD, IC, state/local'),
        ('healthcare', '🏥', 'Healthcare', 'Clinical, admin, payers, life sciences'),
        ('technology', '💻', 'Technology', 'Software, SaaS, IT operations'),
        ('financial',  '📈', 'Financial Services', 'Banking, insurance, fintech'),
        ('general',    '🏢', 'General Enterprise', 'Any other industry or cross-domain'),
      ] %}
      {% for slug, icon, label, sub in domains %}
      <button onclick="selectOption('domain', '{{ slug }}', this)"
        class="wizard-option" data-group="domain" data-val="{{ slug }}"
        style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:16px;text-align:left;cursor:pointer;transition:all 0.2s;">
        <div style="font-size:22px;margin-bottom:6px;">{{ icon }}</div>
        <div style="color:#eaeaea;font-size:14px;font-weight:600;">{{ label }}</div>
        <div style="color:#7a8cb0;font-size:11px;margin-top:2px;">{{ sub }}</div>
      </button>
      {% endfor %}
    </div>
    <div style="margin-top:24px;text-align:right;">
      <button onclick="nextStep(2)" id="next-1" disabled
        style="background:#6366f1;color:#fff;padding:10px 28px;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:600;opacity:0.4;transition:opacity 0.2s;">
        Next →
      </button>
    </div>
  </div>

  <!-- Step 2: Goal -->
  <div id="step-2" class="wizard-step">
    <div style="color:#7a8cb0;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Step 2 of 3</div>
    <h3 style="color:#eaeaea;font-size:18px;margin:0 0 24px;">What's your primary use case?</h3>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
      {% set goals = [
        ('customers',  '💬', 'Customer Engagement', 'Support, chat, intake, service desk'),
        ('automation', '⚙️', 'Autonomous Automation', 'Code generation, workflows, RPA'),
        ('research',   '🔬', 'Research & Analysis', 'Knowledge work, reports, insights'),
        ('security',   '🛡️', 'Security & Monitoring', 'SOC, anomaly detection, compliance'),
        ('documents',  '📄', 'Document Processing', 'Contracts, procurement, records'),
      ] %}
      {% for slug, icon, label, sub in goals %}
      <button onclick="selectOption('goal', '{{ slug }}', this)"
        class="wizard-option" data-group="goal" data-val="{{ slug }}"
        style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:16px;text-align:left;cursor:pointer;transition:all 0.2s;">
        <div style="font-size:22px;margin-bottom:6px;">{{ icon }}</div>
        <div style="color:#eaeaea;font-size:14px;font-weight:600;">{{ label }}</div>
        <div style="color:#7a8cb0;font-size:11px;margin-top:2px;">{{ sub }}</div>
      </button>
      {% endfor %}
    </div>
    <div style="margin-top:24px;display:flex;justify-content:space-between;">
      <button onclick="prevStep(1)" style="background:#1e3a6e;color:#7ab3f0;padding:10px 20px;border:1px solid #2d4d8a;border-radius:5px;cursor:pointer;font-size:13px;">← Back</button>
      <button onclick="nextStep(3)" id="next-2" disabled
        style="background:#6366f1;color:#fff;padding:10px 28px;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:600;opacity:0.4;transition:opacity 0.2s;">
        Next →
      </button>
    </div>
  </div>

  <!-- Step 3: Autonomy -->
  <div id="step-3" class="wizard-step">
    <div style="color:#7a8cb0;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Step 3 of 3</div>
    <h3 style="color:#eaeaea;font-size:18px;margin:0 0 24px;">What level of AI autonomy are you comfortable with?</h3>
    <div style="display:flex;flex-direction:column;gap:12px;">
      {% set autonomy_opts = [
        ('human',      '🧑‍💼', 'Full Human Control (L0–L1)', 'AI assists; humans approve every output. Best for regulated, safety-critical workflows.'),
        ('supervised', '👁️',  'Supervised Automation (L2–L3)', 'AI acts autonomously but humans monitor and can intervene. Most common enterprise pattern.'),
        ('autonomous', '🤖', 'Fully Autonomous (L4)', 'AI operates end-to-end with minimal human touchpoints. Fastest, highest risk. Requires strong safety guardrails.'),
      ] %}
      {% for slug, icon, label, sub in autonomy_opts %}
      <button onclick="selectOption('autonomy', '{{ slug }}', this)"
        class="wizard-option" data-group="autonomy" data-val="{{ slug }}"
        style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:18px 20px;text-align:left;cursor:pointer;transition:all 0.2s;display:flex;gap:16px;align-items:center;">
        <span style="font-size:28px;flex-shrink:0;">{{ icon }}</span>
        <div>
          <div style="color:#eaeaea;font-size:14px;font-weight:600;">{{ label }}</div>
          <div style="color:#7a8cb0;font-size:12px;margin-top:3px;">{{ sub }}</div>
        </div>
      </button>
      {% endfor %}
    </div>
    <div style="margin-top:24px;display:flex;justify-content:space-between;">
      <button onclick="prevStep(2)" style="background:#1e3a6e;color:#7ab3f0;padding:10px 20px;border:1px solid #2d4d8a;border-radius:5px;cursor:pointer;font-size:13px;">← Back</button>
      <button onclick="getRecommendation()" id="next-3" disabled
        style="background:#6366f1;color:#fff;padding:10px 28px;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:600;opacity:0.4;transition:opacity 0.2s;">
        Find My Pack →
      </button>
    </div>
  </div>

  <!-- Step 4: Result -->
  <div id="step-4" class="wizard-step">
    <div style="color:#7a8cb0;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Your Recommendation</div>
    <h3 style="color:#eaeaea;font-size:18px;margin:0 0 24px;">We found the right pack for you</h3>
    <div id="recommendation-card" style="background:#0d2137;border:2px solid #6366f1;border-radius:10px;padding:24px;margin-bottom:24px;"></div>
    <div style="display:flex;gap:10px;flex-wrap:wrap;">
      <button id="apply-recommended-btn"
        style="background:#6366f1;color:#fff;padding:12px 28px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:600;">
        Apply This Pack →
      </button>
      <a href="/agentic-ai/solutions" style="background:#1e3a6e;color:#7ab3f0;padding:12px 20px;border:1px solid #2d4d8a;border-radius:5px;text-decoration:none;font-size:13px;">
        Browse All Packs
      </a>
      <button onclick="restartWizard()" style="background:none;border:1px solid #334155;color:#64748b;padding:12px 20px;border-radius:5px;cursor:pointer;font-size:13px;">
        Start Over
      </button>
    </div>
  </div>

</div>

<!-- Loading -->
<div id="qs-loading" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;align-items:center;justify-content:center;">
  <div style="background:#16213e;border:1px solid #6366f1;border-radius:8px;padding:24px 36px;text-align:center;">
    <div style="color:#6366f1;font-size:24px;margin-bottom:8px;">🔍</div>
    <div style="color:#eaeaea;font-size:14px;">Finding your pack…</div>
  </div>
</div>

<style>
.wizard-option:hover { border-color: #6366f1 !important; background: #1e2d52 !important; }
.wizard-option.selected { border-color: #6366f1 !important; background: #1e2d52 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
</style>

<script>
const answers = { domain: null, goal: null, autonomy: null };

function selectOption(group, val, btn) {
  answers[group] = val;
  document.querySelectorAll(`[data-group="${group}"]`).forEach(b => b.classList.remove('selected'));
  btn.classList.add('selected');
  const nextBtn = document.getElementById(group === 'domain' ? 'next-1' : group === 'goal' ? 'next-2' : 'next-3');
  if (nextBtn) { nextBtn.disabled = false; nextBtn.style.opacity = '1'; }
}

function nextStep(n) {
  document.querySelectorAll('.wizard-step').forEach(s => s.classList.remove('active'));
  document.getElementById('step-' + n).classList.add('active');
  const pct = {2: '33%', 3: '66%', 4: '100%'}[n] || '0%';
  document.getElementById('progress-bar').style.width = pct;
  window.scrollTo(0, 0);
}

function prevStep(n) { nextStep(n); }

function getRecommendation() {
  const { domain, goal, autonomy } = answers;
  if (!domain || !goal || !autonomy) return;
  document.getElementById('qs-loading').style.display = 'flex';
  fetch(`/agentic-ai/api/quick-start/recommend?domain=${domain}&goal=${goal}&autonomy=${autonomy}`)
    .then(r => r.json())
    .then(data => {
      document.getElementById('qs-loading').style.display = 'none';
      renderRecommendation(data);
      nextStep(4);
    })
    .catch(() => { document.getElementById('qs-loading').style.display = 'none'; });
}

function renderRecommendation(data) {
  const badges = Object.entries(data.badges || {}).map(([k, v]) => {
    const isGood = v === 'compliant' || (typeof v === 'number' && v >= 80);
    const isMed  = typeof v === 'number' && v >= 60 && v < 80;
    const bg = isGood ? '#052e16' : isMed ? '#431407' : '#1e1b4b';
    const fg = isGood ? '#4ade80' : isMed ? '#fb923c' : '#a5b4fc';
    const vStr = typeof v === 'number' ? v + '%' : v.charAt(0).toUpperCase() + v.slice(1);
    return `<span style="background:${bg};color:${fg};padding:2px 8px;border-radius:3px;font-size:11px;">${k.toUpperCase().replace(/_/g,' ')}: ${vStr}</span>`;
  }).join(' ');

  const autoLabel = ['Human-Operated','Human-Delegated','Human-Supervised','Human-Initiated','Fully Autonomous','Unconstrained'][data.autonomy_max] || 'L' + data.autonomy_max;

  document.getElementById('recommendation-card').innerHTML = `
    <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:12px;">
      <h4 style="margin:0;color:#eaeaea;font-size:18px;">${data.pack_name}</h4>
      <span style="background:#1e1b4b;color:#a5b4fc;padding:3px 10px;border-radius:4px;font-size:11px;">L${data.autonomy_max} — ${autoLabel}</span>
    </div>
    <p style="color:#94a3b8;font-size:13px;margin:0 0 14px;line-height:1.5;">${data.description || ''}</p>
    <div style="display:flex;gap:6px;flex-wrap:wrap;">${badges}</div>
  `;

  if (data.pack_id) {
    document.getElementById('apply-recommended-btn').onclick = () => {
      const designId = 'aadc-' + Math.random().toString(36).substr(2, 10);
      document.getElementById('qs-loading').style.display = 'flex';
      fetch('/agentic-ai/api/solution-packs/' + data.pack_id + '/apply/' + designId, {method:'POST'})
        .then(r => r.json())
        .then(d => {
          document.getElementById('qs-loading').style.display = 'none';
          if (d.status === 'applied') window.location.href = '/agentic-ai/canvas/' + designId;
        })
        .catch(() => { document.getElementById('qs-loading').style.display = 'none'; });
    };
  } else {
    document.getElementById('apply-recommended-btn').textContent = 'Browse Solution Packs';
    document.getElementById('apply-recommended-btn').onclick = () => window.location.href = '/agentic-ai/solutions';
  }
}

function restartWizard() {
  answers.domain = null; answers.goal = null; answers.autonomy = null;
  document.querySelectorAll('.wizard-option').forEach(b => b.classList.remove('selected'));
  ['next-1','next-2','next-3'].forEach(id => {
    const b = document.getElementById(id);
    if (b) { b.disabled = true; b.style.opacity = '0.4'; }
  });
  document.getElementById('progress-bar').style.width = '0%';
  document.querySelectorAll('.wizard-step').forEach(s => s.classList.remove('active'));
  document.getElementById('step-1').classList.add('active');
}
</script>
{% endblock %}