{% extends "base.html" %}
{% from "_hub.html" import hub %}

{% block title %}Email parsers — karyab{% endblock %}

{% block content %}
<h1>Email parsers</h1>

{% if flash %}
{% if flash_error %}
<div class="flash-banner flash-error"
     style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;
            padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% else %}
<div class="flash-banner"
     style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;
            border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% endif %}
{% endif %}

{% call hub(hub_sections) %}

<section>
  <h2 style="font-size:1.1rem;margin:0 0 0.75rem">Active parsers</h2>
  <p style="color:var(--text-muted,#6b7280);font-size:0.875rem;margin:0 0 1rem">
    Built-in parsers (LinkedIn, Indeed) always run first.
    Custom declarative parsers are matched by sender substring; first match wins.
  </p>

  {% if parsers %}
  <form method="post" action="/config/parsers/save" id="parsers-form">
    <input type="hidden" name="parsers_json" id="parsers_json_input">
    <table style="width:100%;border-collapse:collapse;font-size:0.875rem">
      <thead>
        <tr style="border-bottom:2px solid var(--border,#e5e7eb)">
          <th style="text-align:left;padding:0.4rem 0.5rem">Name</th>
          <th style="text-align:left;padding:0.4rem 0.5rem">Kind</th>
          <th style="text-align:left;padding:0.4rem 0.5rem">Sender contains</th>
          <th style="text-align:center;padding:0.4rem 0.5rem">Enabled</th>
          <th style="padding:0.4rem 0.5rem"></th>
        </tr>
      </thead>
      <tbody>
        {% for p in parsers %}
        <tr style="border-bottom:1px solid var(--border,#e5e7eb)">
          <td style="padding:0.4rem 0.5rem">{{ p.name }}</td>
          <td style="padding:0.4rem 0.5rem">
            <span class="badge" style="background:var(--surface-2,#f3f4f6);
                  border-radius:4px;padding:2px 6px;font-size:0.75rem">{{ p.kind }}</span>
          </td>
          <td style="padding:0.4rem 0.5rem">
            {{ (p.match or {}).get('sender_contains', []) | join(', ') }}
          </td>
          <td style="text-align:center;padding:0.4rem 0.5rem">
            {% if p.enabled %}✓{% else %}—{% endif %}
          </td>
          <td style="padding:0.4rem 0.5rem">
            {% if p.kind != 'builtin' %}
            <button type="button" class="btn btn-sm btn-danger"
                    data-pid="{{ p.id }}" onclick="removeParser(this.dataset.pid)">Delete</button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <div style="margin-top:0.75rem">
      <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
  </form>
  {% else %}
  <p style="color:var(--text-muted,#6b7280)">No parsers configured.</p>
  {% endif %}
</section>

<hr style="margin:2rem 0;border:none;border-top:1px solid var(--border,#e5e7eb)">

<section>
  <h2 style="font-size:1.1rem;margin:0 0 0.75rem">Recent parse misses</h2>
  <p style="color:var(--text-muted,#6b7280);font-size:0.875rem;margin:0 0 1rem">
    Emails that matched a parser but yielded no jobs.
    Click "Propose parser" to generate a declarative spec from the email body.
  </p>

  {% if misses %}
  <table style="width:100%;border-collapse:collapse;font-size:0.875rem">
    <thead>
      <tr style="border-bottom:2px solid var(--border,#e5e7eb)">
        <th style="text-align:left;padding:0.4rem 0.5rem">Timestamp</th>
        <th style="text-align:left;padding:0.4rem 0.5rem">Subject</th>
        <th style="text-align:left;padding:0.4rem 0.5rem">Sender</th>
        <th style="text-align:left;padding:0.4rem 0.5rem">Parser</th>
        <th style="text-align:center;padding:0.4rem 0.5rem">LLM recovered</th>
        <th style="padding:0.4rem 0.5rem"></th>
      </tr>
    </thead>
    <tbody>
      {% for miss in misses | reverse %}
      <tr style="border-bottom:1px solid var(--border,#e5e7eb)">
        <td style="padding:0.4rem 0.5rem;white-space:nowrap;font-size:0.8rem">
          {{ miss.get('ts', '')[:19] }}
        </td>
        <td style="padding:0.4rem 0.5rem">{{ miss.get('subject', '') | truncate(60) }}</td>
        <td style="padding:0.4rem 0.5rem;font-size:0.8rem">{{ miss.get('sender', '') | truncate(40) }}</td>
        <td style="padding:0.4rem 0.5rem;font-size:0.8rem">{{ miss.get('matched_parser', '') }}</td>
        <td style="text-align:center;padding:0.4rem 0.5rem">
          {% if miss.get('llm_recovered') %}✓{% else %}—{% endif %}
        </td>
        <td style="padding:0.4rem 0.5rem">
          <div style="display:flex;gap:0.4rem;align-items:center">
            {% if miss.get('body_html') or miss.get('body_text') %}
            <button type="button" class="btn btn-sm btn-action"
                    data-uid="{{ miss.get('uid', '') }}" onclick="toggleMissBody(this.dataset.uid)">View body</button>
            <form method="post" action="/config/parsers/from-miss" style="display:inline">
              <input type="hidden" name="uid" value="{{ miss.get('uid', '') }}">
              <button type="submit" class="btn btn-sm btn-primary">Propose parser</button>
            </form>
            {% endif %}
          </div>
          <div id="miss-body-{{ miss.get('uid', '') }}" style="display:none;margin-top:0.5rem">
            <iframe srcdoc="" id="miss-body-frame-{{ miss.get('uid', '') }}"
                    style="width:100%;height:300px;border:1px solid var(--border,#e5e7eb);
                           border-radius:4px"></iframe>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="color:var(--text-muted,#6b7280)">No parse misses recorded yet.</p>
  {% endif %}
</section>

{% endcall %}

<script>
// Parser list as JSON (for delete operations)
var _parsers = {{ parsers | tojson }};

function removeParser(id) {
  _parsers = _parsers.filter(function(p) { return p.id !== id; });
  document.getElementById('parsers_json_input').value = JSON.stringify(_parsers);
  document.getElementById('parsers-form').submit();
}

document.getElementById('parsers-form').addEventListener('submit', function(e) {
  if (!document.getElementById('parsers_json_input').value) {
    document.getElementById('parsers_json_input').value = JSON.stringify(_parsers);
  }
});

function toggleMissBody(uid) {
  var container = document.getElementById('miss-body-' + uid);
  if (!container) return;
  if (container.style.display === 'none') {
    container.style.display = 'block';
    fetch('/config/parsers/miss-body?uid=' + encodeURIComponent(uid))
      .then(function(r) { return r.text(); })
      .then(function(html) {
        var frame = document.getElementById('miss-body-frame-' + uid);
        if (frame) frame.srcdoc = html;
      });
  } else {
    container.style.display = 'none';
  }
}
</script>
{% endblock %}