{# Recipe Diagnostics Modal — include at the bottom of your admin moderation template #}
{# Usage: {% include 'admin/_recipe_diagnostics_modal.html' %}                        #}
{# Then add a button per recipe row: onclick="openRecipeDiagnostics(recipeId)"         #}

<div id="diagModal" class="diag-overlay" style="display:none;" onclick="if(event.target===this)closeRecipeDiagnostics()">
  <div class="diag-modal" role="dialog" aria-labelledby="diagTitle">
    <div class="diag-header">
      <div class="diag-header-left">
        <span class="diag-icon">🔬</span>
        <div>
          <h2 id="diagTitle" class="diag-title">Recipe Diagnostics</h2>
          <p id="diagSubtitle" class="diag-subtitle"></p>
        </div>
      </div>
      <button class="diag-close" onclick="closeRecipeDiagnostics()" aria-label="Close">&times;</button>
    </div>

    <div id="diagLoading" class="diag-loading">
      <div class="diag-spinner"></div>
      <p>Loading diagnostics…</p>
    </div>

    <div id="diagError" class="diag-error" style="display:none;"></div>

    <div id="diagBody" class="diag-body" style="display:none;">

      {# ── Actions Bar ── #}
      <div id="diagActions" class="diag-actions"></div>

      {# ── Stats Cards ── #}
      <div id="diagStats" class="diag-stats-grid"></div>

      {# ── Quality Warnings ── #}
      <div id="diagWarnings" class="diag-section" style="display:none;"></div>

      {# ── Flag Details ── #}
      <div id="diagFlags" class="diag-section" style="display:none;"></div>

      {# ── Ingredient Mapping ── #}
      <div class="diag-section">
        <h3 class="diag-section-title">
          <span class="diag-section-icon">🧬</span> Ingredient Mapping Pipeline
        </h3>
        <div id="diagIngredients" class="diag-ingredients"></div>
      </div>

      {# ── Department Summary ── #}
      <div class="diag-section">
        <h3 class="diag-section-title">
          <span class="diag-section-icon">🏪</span> Department Distribution
        </h3>
        <div id="diagDepts" class="diag-depts"></div>
      </div>

      {# ── Description / Instructions Preview ── #}
      <div id="diagPreview" class="diag-section" style="display:none;">
        <h3 class="diag-section-title">
          <span class="diag-section-icon">📝</span> Content Preview
        </h3>
        <div id="diagPreviewContent"></div>
      </div>

    </div>
  </div>
</div>

<script>
/* ═══════════════════════════════════════════════════
   RECIPE DIAGNOSTICS MODAL — self-contained script
   ═══════════════════════════════════════════════════ */
(function() {
  'use strict';

  let _currentData = null;
  let _deleteTimer = null;

  window.openRecipeDiagnostics = function(recipeId) {
    const modal = document.getElementById('diagModal');
    const loading = document.getElementById('diagLoading');
    const body = document.getElementById('diagBody');
    const errorEl = document.getElementById('diagError');

    modal.style.display = 'flex';
    loading.style.display = 'block';
    body.style.display = 'none';
    errorEl.style.display = 'none';
    _currentData = null;
    document.body.style.overflow = 'hidden';

    fetch(`/admin/api/admin/recipe/${recipeId}/diagnostics`, {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    })
    .then(data => {
      _currentData = data;
      loading.style.display = 'none';
      body.style.display = 'block';
      renderDiagnostics(data);
    })
    .catch(err => {
      loading.style.display = 'none';
      errorEl.textContent = `Failed to load diagnostics: ${err.message}`;
      errorEl.style.display = 'block';
    });
  };

  window.closeRecipeDiagnostics = function() {
    document.getElementById('diagModal').style.display = 'none';
    document.body.style.overflow = '';
    if (_deleteTimer) { clearTimeout(_deleteTimer); _deleteTimer = null; }
  };

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && document.getElementById('diagModal').style.display === 'flex') {
      closeRecipeDiagnostics();
    }
  });

  /* ── Main Renderer ── */
  function renderDiagnostics(data) {
    const r = data.recipe;
    const s = data.stats;

    // Header
    document.getElementById('diagTitle').textContent = `Diagnostics: ${r.title}`;
    let sub = `ID ${r.id}`;
    sub += ` · <span class="diag-badge diag-badge-source">${esc(r.source)}</span>`;
    if (r.is_flagged) sub += ` <span class="diag-badge diag-badge-flagged">⚠ Flagged</span>`;
    if (r.is_quarantined) sub += ` <span class="diag-badge diag-badge-quarantined">🚫 Quarantined</span>`;
    sub += ` · by <strong>${esc(r.user.username)}</strong> · ${esc(r.created_at)}`;
    document.getElementById('diagSubtitle').innerHTML = sub;

    // Actions
    renderActions(r);

    // Stats
    renderStats(r, s);

    // Quality warnings
    renderWarnings(data.quality_warnings || []);

    // Flags
    renderFlags(data.flag_data, r.is_flagged);

    // Ingredients
    renderIngredients(data.ingredients);

    // Departments
    renderDepartments(data.department_summary);

    // Preview
    renderPreview(r);
  }

  /* ── Actions ── */
  function renderActions(r) {
    const el = document.getElementById('diagActions');
    let html = '';
    html += `<a href="/recipe/${r.id}" class="diag-btn diag-btn-primary" target="_blank">👁 View Recipe</a>`;
    html += `<a href="/recipe/edit/${r.id}" class="diag-btn" target="_blank">✏️ Edit</a>`;

    if (r.is_flagged) {
      html += `<a href="/recipe/edit/${r.id}?return_to=flagged" class="diag-btn diag-btn-success">✅ Edit & Resolve Flag</a>`;
    }

    if (r.pdf_filename) {
      html += `<a href="/static/uploads/${esc(r.pdf_filename)}" class="diag-btn" target="_blank">📄 View PDF</a>`;
    }

    html += `<button class="diag-btn diag-btn-danger" id="diagDeleteBtn" onclick="diagConfirmDelete(${r.id})">🗑 Delete</button>`;
    html += `<button class="diag-btn" onclick="diagCopyJson()" title="Copy raw diagnostic JSON">📋 Copy JSON</button>`;

    el.innerHTML = html;
  }

  window.diagConfirmDelete = function(recipeId) {
    const btn = document.getElementById('diagDeleteBtn');
    if (btn.classList.contains('confirming')) {
      // Actually delete
      fetch(`/recipe/${recipeId}/delete`, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          closeRecipeDiagnostics();
          if (data.redirect) window.location.href = data.redirect;
          else window.location.reload();
        } else {
          btn.textContent = '🗑 Delete';
          btn.classList.remove('confirming');
          alert(data.error || 'Delete failed');
        }
      })
      .catch(() => {
        btn.textContent = '🗑 Delete';
        btn.classList.remove('confirming');
      });
      return;
    }

    btn.innerHTML = '⚠ Click again to confirm delete';
    btn.classList.add('confirming');
    _deleteTimer = setTimeout(() => {
      btn.innerHTML = '🗑 Delete';
      btn.classList.remove('confirming');
      _deleteTimer = null;
    }, 4000);
  };

  window.diagCopyJson = function() {
    if (_currentData) {
      navigator.clipboard.writeText(JSON.stringify(_currentData, null, 2))
        .then(() => {
          const btns = document.querySelectorAll('.diag-actions .diag-btn');
          const copyBtn = btns[btns.length - 1];
          const orig = copyBtn.innerHTML;
          copyBtn.innerHTML = '✓ Copied!';
          setTimeout(() => { copyBtn.innerHTML = orig; }, 1500);
        })
        .catch(() => {});
    }
  };

  /* ── Stats ── */
  function renderStats(r, s) {
    const el = document.getElementById('diagStats');
    const cards = [
      { v: r.servings || '—', l: 'Servings' },
      { v: r.prep_time ? r.prep_time + 'm' : '—', l: 'Prep Time' },
      { v: r.cook_time ? r.cook_time + 'm' : '—', l: 'Cook Time' },
      { v: r.total_time ? r.total_time + 'm' : '—', l: 'Total Time' },
      { v: s.rating_avg ? `★ ${s.rating_avg}` : '—', l: `${s.rating_count} Rating${s.rating_count !== 1 ? 's' : ''}` },
      { v: s.photo_count, l: 'Photos' },
      { v: s.ingredient_count, l: 'Ingredients' },
      { v: s.total_modifiers_applied, l: 'Modifiers Applied' },
      { v: s.modifier_coverage + '/' + s.ingredient_count, l: 'w/ Modifiers' },
      { v: s.distinct_product_count, l: 'Distinct Products' },
      { v: s.pending_ingredient_count, l: 'Pending', cls: s.pending_ingredient_count > 0 ? 'diag-stat-warn' : '' },
      { v: s.has_legacy_text ? 'Yes' : 'No', l: 'Legacy Text', cls: s.has_legacy_text ? 'diag-stat-danger' : '' },
    ];

    el.innerHTML = cards.map(c =>
      `<div class="diag-stat ${c.cls || ''}">
        <div class="diag-stat-value">${c.v}</div>
        <div class="diag-stat-label">${c.l}</div>
      </div>`
    ).join('');
  }

  /* ── Warnings ── */
  function renderWarnings(warnings) {
    const el = document.getElementById('diagWarnings');
    if (!warnings.length) { el.style.display = 'none'; return; }
    el.style.display = 'block';
    el.innerHTML = `<div class="diag-warning-box">
      <h4>⚠ Data Quality Warnings (${warnings.length})</h4>
      <ul class="diag-warning-list">${warnings.map(w => `<li>${esc(w)}</li>`).join('')}</ul>
    </div>`;
  }

  /* ── Flags ── */
  function renderFlags(flagData, isFlagged) {
    const el = document.getElementById('diagFlags');
    if (!isFlagged || !flagData) { el.style.display = 'none'; return; }
    el.style.display = 'block';
    let html = `<div class="diag-flag-box"><h4>🚩 Flag Details</h4>`;

    if (flagData.message) {
      html += `<p style="font-size:13px;color:#991b1b;margin:0 0 10px">${esc(flagData.message)}</p>`;
    }

    if (flagData.unmatched_ingredients && flagData.unmatched_ingredients.length) {
      html += `<p style="font-weight:600;margin:8px 0 4px;font-size:13px">Unmatched Ingredients:</p><ul class="diag-warning-list">`;
      flagData.unmatched_ingredients.forEach(u => {
        html += `<li><strong>${esc(u.raw_name)}</strong>`;
        if (u.quantity) html += ` — qty: ${esc(u.quantity)}`;
        if (u.raw_unit) html += ` ${esc(u.raw_unit)}`;
        if (u.pending_ingredient_id) html += ` <span class="diag-badge diag-badge-pending">pending #${u.pending_ingredient_id}</span>`;
        html += `</li>`;
      });
      html += `</ul>`;
    }

    if (flagData.unmatched_modifiers && flagData.unmatched_modifiers.length) {
      html += `<p style="font-weight:600;margin:8px 0 4px;font-size:13px">Unmatched Modifiers:</p><ul class="diag-warning-list">`;
      flagData.unmatched_modifiers.forEach(um => {
        html += `<li><strong>${esc(um.ingredient)}</strong>: ${um.modifiers.map(m => esc(m)).join(', ')}</li>`;
      });
      html += `</ul>`;
    }

    if (flagData.unit_warnings && flagData.unit_warnings.length) {
      html += `<p style="font-weight:600;margin:8px 0 4px;font-size:13px">Unit Warnings:</p><ul class="diag-warning-list">`;
      flagData.unit_warnings.forEach(w => { html += `<li>${esc(w)}</li>`; });
      html += `</ul>`;
    }

    html += `</div>`;
    el.innerHTML = html;
  }

  /* ── Ingredients ── */
  function renderIngredients(ingredients) {
    const el = document.getElementById('diagIngredients');
    if (!ingredients.length) {
      el.innerHTML = '<p style="color:var(--diag-muted);font-style:italic">No ingredients linked to this recipe.</p>';
      return;
    }

    el.innerHTML = ingredients.map((d, idx) => {
      if (d.error) {
        return `<div class="diag-ing-card has-error">
          <div class="diag-ing-header">
            <div class="diag-ing-num" style="background:var(--diag-danger)">${d.order ?? '?'}</div>
            <div><span class="diag-ing-name" style="color:var(--diag-danger)">⛔ ${esc(d.error)}</span></div>
            <div></div>
          </div>
        </div>`;
      }

      const ing = d.ingredient;
      const hasIssue = ing.status === 'pending' || d.legacy_modifiers_text || (d.missing_defaults && d.missing_defaults.length > 0);

      // Quantity display
      let qtyDisplay = '';
      if (d.quantity) qtyDisplay += d.quantity;
      if (d.unit_abbrev) qtyDisplay += ' ' + d.unit_abbrev;
      if (d.unit_name && d.unit_name !== d.unit_abbrev) qtyDisplay += ` (${d.unit_name})`;
      if (d.package_size) qtyDisplay += ` [${d.package_size}]`;
      if (!qtyDisplay) qtyDisplay = '—';

      // Modifier summary for collapsed view
      const modSummary = d.applied_modifiers.map(m => m.name).join(', ') || 'none';

      return `<div class="diag-ing-card ${hasIssue ? 'has-issue' : ''}" id="dingCard${idx}">
        <div class="diag-ing-header" onclick="diagToggleIng(${idx})">
          <div class="diag-ing-num">${(d.order ?? idx) + 1}</div>
          <div>
            <span class="diag-ing-name">${esc(ing.name)}</span>
            ${ing.status === 'pending' ? '<span class="diag-badge diag-badge-pending">pending</span>' : ''}
            ${ing.is_distinct_product ? '<span class="diag-badge diag-badge-distinct">distinct</span>' : ''}
            <span style="color:var(--diag-muted);font-size:12px;margin-left:6px">${esc(modSummary)}</span>
          </div>
          <div style="display:flex;align-items:center;gap:10px">
            <span class="diag-ing-qty">${esc(qtyDisplay.trim())}</span>
            <span class="diag-ing-arrow">▼</span>
          </div>
        </div>
        <div class="diag-ing-detail">
          <div class="diag-ing-grid">
            <div class="diag-ing-field">
              <div class="diag-ing-label">Ingredient ID</div>
              <div class="diag-ing-value">#${ing.id}</div>
            </div>
            <div class="diag-ing-field">
              <div class="diag-ing-label">Status</div>
              <div class="diag-ing-value">
                <span class="diag-badge ${ing.status === 'approved' ? 'diag-badge-ok' : 'diag-badge-pending'}">${esc(ing.status)}</span>
              </div>
            </div>
            <div class="diag-ing-field">
              <div class="diag-ing-label">Category (raw)</div>
              <div class="diag-ing-value">${esc(ing.category) || '<em>empty</em>'}</div>
            </div>
            <div class="diag-ing-field">
              <div class="diag-ing-label">Taxonomy</div>
              <div class="diag-ing-value">${esc(ing.department)}${ing.section ? ' › ' + esc(ing.section) : ''}${ing.subsection ? ' › ' + esc(ing.subsection) : ''}</div>
            </div>
            <div class="diag-ing-field">
              <div class="diag-ing-label">Aliases</div>
              <div class="diag-ing-value">${esc(ing.aliases) || '<em>none</em>'}</div>
            </div>
            <div class="diag-ing-field">
              <div class="diag-ing-label">Default Storage</div>
              <div class="diag-ing-value">${esc(ing.default_storage) || '<em>not set</em>'}</div>
            </div>
          </div>

          <div style="margin-top:12px">
            <div class="diag-ing-label">Applied Modifiers (${d.applied_modifiers.length})</div>
            <div class="diag-ing-mods">
              ${d.applied_modifiers.length
                ? d.applied_modifiers.map(m =>
                    `<span class="diag-badge diag-badge-mod" title="Category: ${esc(m.category)}">${esc(m.category)}:${esc(m.name)}</span>`
                  ).join('')
                : '<span style="color:var(--diag-muted);font-size:12px">No modifiers applied</span>'}
            </div>
          </div>

          ${d.missing_defaults && d.missing_defaults.length ? `
          <div style="margin-top:8px">
            <div class="diag-ing-label" style="color:var(--diag-warning)">Missing Default Modifiers</div>
            <div class="diag-ing-mods">
              ${d.missing_defaults.map(m =>
                `<span class="diag-badge diag-badge-legacy" title="Default modifier not applied">${esc(m.category)}:${esc(m.name)}</span>`
              ).join('')}
            </div>
          </div>` : ''}

          <div style="margin-top:8px">
            <div class="diag-ing-label">Available Modifiers by Category</div>
            <div style="font-size:12px;color:var(--diag-muted);margin-top:2px">
              ${Object.keys(d.available_modifiers_by_category || {}).length
                ? Object.entries(d.available_modifiers_by_category).map(([cat, mods]) =>
                    `<span class="diag-badge diag-badge-cat">${esc(cat)} (${mods.length})</span>`
                  ).join(' ')
                : '<em>No modifier mappings exist for this ingredient</em>'}
            </div>
          </div>

          ${d.legacy_modifiers_text ? `
          <div style="margin-top:8px">
            <div class="diag-ing-label" style="color:var(--diag-danger)">⚠ Legacy Text Modifiers</div>
            <div style="font-size:13px;color:var(--diag-danger);background:#fef2f2;padding:4px 8px;border-radius:4px;margin-top:2px">"${esc(d.legacy_modifiers_text)}"</div>
          </div>` : ''}

          <div class="diag-ing-route">
            <strong>Resolved Route:</strong>
            ${esc(ing.department || 'Ingredient dept')}
            <span class="diag-ing-route-arrow">→</span>
            <strong>${esc(d.resolved_route.department)}</strong>
            ${d.resolved_route.sub_category ? ` › ${esc(d.resolved_route.sub_category)}` : ''}
            <span style="color:var(--diag-muted);margin-left:12px">📦 ${esc(d.resolved_route.storage)}</span>
          </div>
        </div>
      </div>`;
    }).join('');
  }

  window.diagToggleIng = function(idx) {
    const card = document.getElementById('dingCard' + idx);
    if (card) card.classList.toggle('expanded');
  };

  /* ── Departments ── */
  function renderDepartments(deptSummary) {
    const el = document.getElementById('diagDepts');
    const entries = Object.entries(deptSummary);
    if (!entries.length) {
      el.innerHTML = '<p style="color:var(--diag-muted);font-style:italic">No department data.</p>';
      return;
    }
    const maxVal = Math.max(...entries.map(e => e[1]));

    el.innerHTML = entries.map(([dept, count]) => {
      const pct = Math.max(8, (count / maxVal) * 100);
      return `<div class="diag-dept-row">
        <div class="diag-dept-name">${esc(dept)}</div>
        <div class="diag-dept-bar-bg">
          <div class="diag-dept-bar" style="width:${pct}%">${count}</div>
        </div>
      </div>`;
    }).join('');
  }

  /* ── Preview ── */
  function renderPreview(r) {
    const el = document.getElementById('diagPreview');
    const content = document.getElementById('diagPreviewContent');
    if (!r.description && !r.instructions_preview) { el.style.display = 'none'; return; }
    el.style.display = 'block';
    let html = '';
    if (r.description) {
      html += `<div class="diag-ing-label" style="margin-bottom:4px">Description</div>
        <div class="diag-preview-text" style="margin-bottom:12px">${esc(r.description)}</div>`;
    }
    if (r.instructions_preview) {
      html += `<div class="diag-ing-label" style="margin-bottom:4px">Instructions (${r.instructions_length} chars)</div>
        <div class="diag-preview-text">${esc(r.instructions_preview)}</div>`;
    }
    content.innerHTML = html;
  }

  /* ── Utilities ── */
  function esc(s) {
    if (s == null) return '';
    const d = document.createElement('div');
    d.textContent = String(s);
    return d.innerHTML;
  }

})();
</script>