{% extends "base.html" %}
{% block title %}MAP Assessment — GovLift{% endblock %}
{% block extra_css %}
<style>
.gl-page-header{background:linear-gradient(135deg,#0f172a,#1a3a2a);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.gl-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#d1fae5;}
.gl-page-header p{margin:4px 0 0;color:#6ee7b7;font-size:.85rem;}
.classification-banner{background:#1e3a1a;border:1px solid #166534;color:#86efac;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:6px 12px;border-radius:6px;margin-bottom:18px;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.stat-card .val{font-size:1.8rem;font-weight:700;color:#d1fae5;}
.stat-card .lbl{font-size:.75rem;color:#64748b;margin-top:2px;}
.action-bar{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.action-btn{background:#10b981;border:none;color:#fff;border-radius:6px;padding:7px 18px;font-size:.82rem;font-weight:600;cursor:pointer;}
.action-btn:hover{background:#059669;}
.action-btn.secondary{background:#0f172a;border:1px solid #334155;color:#94a3b8;}
.action-btn.secondary:hover{border-color:#10b981;color:#10b981;}
.action-btn:disabled{opacity:.5;cursor:not-allowed;}
.gl-table{width:100%;border-collapse:collapse;}
.gl-table thead th{background:#0f172a;color:#94a3b8;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid #334155;}
.gl-table tbody tr{border-bottom:1px solid #1e293b;}
.gl-table tbody tr:hover{background:#1a2540;}
.gl-table tbody td{padding:10px 12px;font-size:.83rem;color:#e2e8f0;vertical-align:middle;}
.gl-table-wrap{background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;}
.score-pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:700;}
.score-5{background:#064e3b;color:#34d399;}
.score-4{background:#065f46;color:#6ee7b7;}
.score-3{background:#92400e;color:#fbbf24;}
.score-2{background:#7f1d1d;color:#f87171;}
.score-1{background:#450a0a;color:#fca5a5;}
.back-link{color:#6ee7b7;text-decoration:none;font-size:.85rem;}
.back-link:hover{color:#34d399;}
.wave-preview{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px;margin-top:18px;}
.wave-preview h5{color:#94a3b8;font-size:.9rem;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em;}
.dim-bars{display:flex;gap:3px;align-items:flex-end;height:40px;}
.dim-bar{width:8px;border-radius:3px;}
.dim-bar-5{height:40px;background:#10b981;}
.dim-bar-4{height:32px;background:#34d399;}
.dim-bar-3{height:24px;background:#fbbf24;}
.dim-bar-2{height:16px;background:#f87171;}
.dim-bar-1{height:8px;background:#ef4444;}
.toast{position:fixed;top:20px;right:20px;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:14px 18px;color:#e2e8f0;font-size:.85rem;z-index:9999;opacity:0;transition:opacity .3s;}
.toast.show{opacity:1;}
.toast.success{border-color:#10b981;}
.toast.error{border-color:#ef4444;}
</style>
{% endblock %}
{% block content %}
<div class="classification-banner">{{ classification }}</div>
<a class="back-link" href="/govlift">← GovLift</a>

<div class="gl-page-header mt-2">
  <h1>MAP Readiness Assessment</h1>
  <p>AWS Migration Acceleration Program — 7-dimension scoring + 6R strategy</p>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="val">{{ data.assessment.get('total_workloads', 0) }}</div>
      <div class="lbl">Total Workloads</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="val" style="color:#60a5fa;">{{ data.assessment.get('assessed_count', 0) }}</div>
      <div class="lbl">Assessed</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="val" style="color:#fbbf24;">{{ data.assessment.get('unassessed_count', 0) }}</div>
      <div class="lbl">Unassessed</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="val" style="color:#34d399;">{{ data.assessment.get('average_score', 0) }}</div>
      <div class="lbl">Avg MAP Score</div>
    </div>
  </div>
</div>

<!-- Action Bar -->
<div class="action-bar">
  <button class="action-btn" id="btn-assess-all" onclick="assessAll()">Assess All Discovered</button>
  <button class="action-btn secondary" id="btn-preview" onclick="previewWaves()">Preview Wave Plan</button>
  <button class="action-btn secondary" id="btn-generate" onclick="generateWaves()">Auto-Generate Waves</button>
  <span id="action-status" style="font-size:.8rem;color:#64748b;margin-left:auto;"></span>
</div>

<!-- Wave Preview -->
<div id="wave-preview" class="wave-preview" style="display:none;">
  <h5>Wave Plan Preview</h5>
  <div id="wave-preview-content"></div>
</div>

<!-- Workloads Table -->
<div class="gl-table-wrap">
  <table class="gl-table" id="assess-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>MAP Score</th>
        <th>Strategy</th>
        <th>7 Dimensions</th>
        <th>Risk</th>
        <th>Status</th>
        <th>Assessed</th>
      </tr>
    </thead>
    <tbody id="assess-tbody">
      {% if data.workloads %}
        {% for w in data.workloads %}
        <tr>
          <td style="font-weight:600;">{{ w.get('name', '') }}</td>
          <td>{{ w.get('workload_type', '') }}</td>
          <td>
            {% set ms = w.get('map_score', 0) %}
            {% if ms > 0 %}
              <span class="score-pill score-{{ ms }}">{{ ms }}</span>
            {% else %}
              <span style="color:#64748b;font-size:.78rem;">—</span>
            {% endif %}
          </td>
          <td>
            {% set strat = w.get('map_strategy', '') %}
            {% if strat %}
              <span style="font-size:.78rem;color:#6ee7b7;">{{ strat }}</span>
            {% else %}
              <span style="color:#64748b;font-size:.78rem;">—</span>
            {% endif %}
          </td>
          <td>
            <div class="dim-bars" title="Business, Operational, Platform, Security, People, Process, Data">
              {% for d in ['business','operational','platform','security','people','process','data'] %}
                {% set dv = w.get('dim_' ~ d, 0) %}
                {% if dv > 0 %}
                  <div class="dim-bar dim-bar-{{ dv }}"></div>
                {% else %}
                  <div class="dim-bar" style="height:4px;background:#334155;"></div>
                {% endif %}
              {% endfor %}
            </div>
          </td>
          <td>
            {% set risk = w.get('risk_level', 'low') %}
            {% if risk == 'critical' %}
              <span class="badge bg-danger">{{ risk }}</span>
            {% elif risk == 'high' %}
              <span class="badge bg-warning text-dark">{{ risk }}</span>
            {% elif risk == 'medium' %}
              <span class="badge bg-info">{{ risk }}</span>
            {% else %}
              <span class="badge bg-success">{{ risk }}</span>
            {% endif %}
          </td>
          <td>
            {% set ms_status = w.get('migration_status', 'discovered') %}
            {% if ms_status == 'migrated' %}
              <span class="badge bg-success">{{ ms_status }}</span>
            {% elif ms_status == 'in_migration' %}
              <span class="badge bg-warning text-dark">{{ ms_status }}</span>
            {% elif ms_status == 'failed' %}
              <span class="badge bg-danger">{{ ms_status }}</span>
            {% elif ms_status == 'assessed' %}
              <span class="badge bg-info">{{ ms_status }}</span>
            {% elif ms_status == 'wave_assigned' %}
              <span class="badge bg-primary">{{ ms_status }}</span>
            {% else %}
              <span class="badge bg-secondary">{{ ms_status }}</span>
            {% endif %}
          </td>
          <td style="font-size:.75rem;color:#64748b;">{{ w.get('assessed_at', '—') }}</td>
        </tr>
        {% endfor %}
      {% else %}
        <tr><td colspan="8" style="text-align:center;padding:32px;color:#64748b;">No workloads found.</td></tr>
      {% endif %}
    </tbody>
  </table>
</div>

<div class="toast" id="toast"></div>

{% include "includes/iqe_query_widget.html" %}

<script>
function showToast(msg, type='success') {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.className = 'toast show ' + type;
  setTimeout(() => t.className = 'toast', 3000);
}
function setLoading(id, loading) {
  const btn = document.getElementById(id);
  btn.disabled = loading;
}
function setStatus(txt) {
  document.getElementById('action-status').textContent = txt;
}

async function assessAll() {
  setLoading('btn-assess-all', true);
  setStatus('Assessing all discovered workloads...');
  try {
    const r = await fetch('/api/govlift/workloads/assess-all', {method:'POST'});
    const data = await r.json();
    if (data.error) throw new Error(data.error);
    showToast(`Assessed ${data.assessed} workloads (${data.failed} failed)`);
    setTimeout(() => location.reload(), 1200);
  } catch(e) {
    showToast('Error: ' + e.message, 'error');
    setLoading('btn-assess-all', false);
    setStatus('');
  }
}

async function previewWaves() {
  setLoading('btn-preview', true);
  setStatus('Generating preview...');
  try {
    const r = await fetch('/api/govlift/waves/preview');
    const data = await r.json();
    const container = document.getElementById('wave-preview');
    const content = document.getElementById('wave-preview-content');
    container.style.display = 'block';
    if (!data.waves || !data.waves.length) {
      content.innerHTML = '<p style="color:#64748b;">No unassigned assessed workloads to plan.</p>';
    } else {
      content.innerHTML = data.waves.map((w, i) => `
        <div style="background:#0f172a;border:1px solid #334155;border-radius:8px;padding:14px;margin-bottom:10px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
            <strong style="color:#d1fae5;font-size:.9rem;">${w.name}</strong>
            <span style="font-size:.75rem;color:#64748b;">${w.planned_start} → ${w.planned_end}</span>
          </div>
          <div style="display:flex;gap:16px;font-size:.78rem;color:#94a3b8;margin-bottom:6px;">
            <span>${w.workloads.length} workloads</span>
            <span>${w.total_cpu} vCPU</span>
            <span>${w.total_memory_gb} GB RAM</span>
            <span>${w.total_storage_tb} TB</span>
            <span>Avg MAP: ${w.avg_map_score}</span>
          </div>
          <div style="font-size:.75rem;color:#64748b;">
            Strategies: ${Object.entries(w.strategy_breakdown).map(([k,v]) => k + '=' + v).join(', ')}
          </div>
        </div>
      `).join('');
    }
    setStatus(`Preview: ${data.waves_created} waves, ${data.workloads_assigned} workloads`);
  } catch(e) {
    showToast('Preview error: ' + e.message, 'error');
    setStatus('');
  }
  setLoading('btn-preview', false);
}

async function generateWaves() {
  if (!confirm('This will create new waves and assign unassessed workloads. Continue?')) return;
  setLoading('btn-generate', true);
  setStatus('Generating waves...');
  try {
    const r = await fetch('/api/govlift/waves/auto-generate', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({max_workloads:10, wave_gap_days:14})
    });
    const data = await r.json();
    if (data.error) throw new Error(data.error);
    showToast(`Created ${data.waves_created} waves with ${data.workloads_assigned} workloads`);
    setTimeout(() => location.reload(), 1200);
  } catch(e) {
    showToast('Error: ' + e.message, 'error');
    setLoading('btn-generate', false);
    setStatus('');
  }
}
</script>
{% endblock %}