{% extends "base.html" %}
{% block title %}AI/ML Model Canvas — AIMC{% endblock %}
{% block extra_css %}
<style>
.aimc-header { background: linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#1e3a5f 100%); padding:28px 32px 24px; border-radius:12px; margin-bottom:28px; }
.aimc-header h1 { margin:0; font-size:1.6rem; font-weight:700; color:#e0e7ff; letter-spacing:.3px; }
.aimc-header p  { margin:6px 0 0; color:#a5b4fc; font-size:.9rem; }
.aimc-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:.72rem; font-weight:600; letter-spacing:.5px; }
.badge-il2  { background:#d1fae5; color:#065f46; }
.badge-il4  { background:#fef3c7; color:#92400e; }
.badge-il5  { background:#fed7aa; color:#7c2d12; }
.badge-il6  { background:#fee2e2; color:#7f1d1d; }
.badge-prompt   { background:#dbeafe; color:#1e40af; }
.badge-rag      { background:#e0f2fe; color:#0c4a6e; }
.badge-finetune { background:#fef9c3; color:#713f12; }
.badge-hybrid   { background:#f3e8ff; color:#6b21a8; }
.design-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:20px; transition:border-color .15s,box-shadow .15s; }
.design-card:hover { border-color:#6366f1; box-shadow:0 4px 16px rgba(99,102,241,.2); }
.design-card h3 { margin:0 0 6px; font-size:1rem; color:#e2e8f0; }
.design-card .meta { font-size:.78rem; color:#64748b; }
.design-card .actions { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.btn-sm { padding:5px 12px; border-radius:6px; font-size:.78rem; font-weight:600; cursor:pointer; border:none; text-decoration:none; }
.btn-primary  { background:#6366f1; color:#fff; }
.btn-secondary{ background:#334155; color:#94a3b8; }
.btn-danger   { background:#7f1d1d; color:#fca5a5; }
.btn-primary:hover   { background:#4f46e5; }
.btn-secondary:hover { background:#475569; }
.stat-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:20px 24px; text-align:center; }
.stat-card .val  { font-size:2rem; font-weight:700; color:#e0e7ff; }
.stat-card .lbl  { font-size:.78rem; color:#64748b; margin-top:2px; }
.empty-state { text-align:center; padding:80px 24px; color:#475569; }
.empty-state h3  { color:#64748b; margin-bottom:8px; }
.score-ring { width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.score-high   { background:rgba(34,197,94,.15); border:2px solid #22c55e; color:#22c55e; }
.score-medium { background:rgba(251,191,36,.15); border:2px solid #fbbf24; color:#fbbf24; }
.score-low    { background:rgba(239,68,68,.15);  border:2px solid #ef4444;  color:#ef4444; }
</style>
{% endblock %}
{% block content %}
{% from "includes/classification_macros.html" import design_classification_badge %}
<div class="aimc-header">
  <div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;">
    <div>
      <h1>&#x1F9E0; AI/ML Model Canvas <span style="font-size:.7rem;color:#818cf8;font-weight:400;letter-spacing:.5px;margin-left:8px;">AIMC</span></h1>
      <p>Foundation model lifecycle design — select, adapt, evaluate, govern, and deploy AI models with IL suitability and compliance built in.</p>
    </div>
    <div style="display:flex;gap:10px;align-items:center;">
      <a href="/ai-ml/model-catalog" class="btn-sm btn-secondary" style="text-decoration:none;">&#x1F4DA; Model Catalog</a>
      <a href="/ai-ml/templates"     class="btn-sm btn-secondary" style="text-decoration:none;">&#x1F4CB; Templates</a>
      <a href="/ai-ml/canvas/new"    class="btn-sm btn-primary"   style="text-decoration:none;">+ New Design</a>
      {% set wf_canvas_id = 'aimc' %}
      {% set wf_context_label = 'AI/ML Model Canvas' %}
      {% set wf_design_id = '' %}
      {% include 'includes/workflow_trigger_btn.html' %}
    </div>
  </div>
</div>

{# Stats row #}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:28px;">
  <div class="stat-card">
    <div class="val">{{ stats.total_designs }}</div>
    <div class="lbl">Total Designs</div>
  </div>
  <div class="stat-card">
    <div class="val">{{ stats.assessed_designs }}</div>
    <div class="lbl">Assessed</div>
  </div>
  <div class="stat-card">
    <div class="val" style="color:{% if stats.avg_compliance_score >= 80 %}#22c55e{% elif stats.avg_compliance_score >= 60 %}#fbbf24{% else %}#ef4444{% endif %};">
      {{ stats.avg_compliance_score }}%
    </div>
    <div class="lbl">Avg Compliance</div>
  </div>
  <div class="stat-card">
    <div class="val">{{ stats.total_artifacts }}</div>
    <div class="lbl">Artifacts Generated</div>
  </div>
  {% for strategy, cnt in stats.by_strategy.items() %}
  <div class="stat-card">
    <div class="val">{{ cnt }}</div>
    <div class="lbl">{{ strategy | capitalize }} Designs</div>
  </div>
  {% endfor %}
</div>

{# Design list #}
{% if designs %}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;">
  {% for d in designs %}
  <div class="design-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:8px;">
      <h3>{{ d.name }}</h3>
      <span class="aimc-badge badge-{{ d.il_level | lower | replace('/','') }}">{{ d.il_level }}</span>
    </div>
    {% if d.description %}<p style="margin:4px 0 8px;font-size:.82rem;color:#94a3b8;">{{ d.description[:100] }}{% if d.description|length > 100 %}…{% endif %}</p>{% endif %}
    <div class="meta" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
      <span class="aimc-badge badge-{{ d.adaptation_strategy | lower }}">{{ d.adaptation_strategy }}</span>
      {{ design_classification_badge(d) }}
      <span style="color:#475569;">{{ d.updated_at[:10] }}</span>
    </div>
    <div class="actions">
      <a href="/ai-ml/canvas/{{ d.id }}" class="btn-sm btn-primary">Open Canvas</a>
      <button class="btn-sm btn-secondary" onclick="assessDesign('{{ d.id }}', this)">&#x26A1; Assess</button>
      <button class="btn-sm btn-danger"    onclick="deleteDesign('{{ d.id }}', this)">Delete</button>
    </div>
    <div id="assess-{{ d.id }}" style="display:none;margin-top:8px;font-size:.78rem;"></div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <div style="font-size:3rem;">&#x1F9E0;</div>
  <h3>No AI/ML designs yet</h3>
  <p>Start with a template or create a blank canvas to design your foundation model pipeline.</p>
  <div style="display:flex;gap:12px;justify-content:center;margin-top:20px;">
    <a href="/ai-ml/templates"  class="btn-sm btn-secondary" style="text-decoration:none;">Browse Templates</a>
    <a href="/ai-ml/canvas/new" class="btn-sm btn-primary"   style="text-decoration:none;">+ New Design</a>
  </div>
</div>
{% endif %}

<script>
function assessDesign(id, btn) {
  btn.disabled = true; btn.textContent = '…';
  fetch('/ai-ml/api/designs/' + id + '/assess', {method:'POST'})
    .then(r => r.json()).then(d => {
      var el = document.getElementById('assess-' + id);
      el.style.display = 'block';
      var cls = d.score >= 80 ? '#22c55e' : d.score >= 60 ? '#fbbf24' : '#ef4444';
      el.innerHTML = '<span style="color:' + cls + ';font-weight:600;">' + d.score + '% compliance</span> — ' + d.summary.passed + '/' + d.summary.total + ' checks passed';
      btn.textContent = '✓ Done'; btn.disabled = false;
    }).catch(() => { btn.textContent = '⚡ Assess'; btn.disabled = false; });
}
function deleteDesign(id, btn) {
  if (!confirm('Delete this design?')) return;
  fetch('/ai-ml/api/designs/' + id, {method:'DELETE'})
    .then(() => location.reload());
}
</script>

<!-- IQE Query Widget -->
{% set iqe_canvas = "aimc" %}
{% set iqe_api_route = "/ai-ml/api/iqe-query" %}
{% set iqe_title = "IQE Query — AI/ML Model Canvas" %}
{% set iqe_examples = [
  {"label": "All designs", "query": "foreach d in aimc.designs select d.name, d.il_level, d.adaptation_strategy, d.classification"},
  {"label": "Foundation model nodes", "query": "foreach n in aimc.nodes where n.node_type == \"foundation-model\" select n.design_id, n.label, n.classification"},
  {"label": "Passing assessments", "query": "foreach a in aimc.assessments where a.passed == 1 select a.design_name, a.framework_name, a.score"},
  {"label": "All artifacts", "query": "foreach a in aimc.artifacts select a.design_id, a.artifact_type, a.title, a.created_at"}
] %}
{% include "includes/iqe_query_widget.html" %}

{% endblock %}