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

{% block title %}Review parser spec — karyab{% endblock %}

{% block content %}
<h1>Review parser spec</h1>

{% call hub(hub_sections) %}

{% if error %}
<div style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;
            padding:0.75rem 1rem;margin-bottom:1.25rem">
  <strong>Error:</strong> {{ error }}
  {% if raw %}
  <details style="margin-top:0.5rem">
    <summary style="cursor:pointer">Show raw LLM output</summary>
    <pre style="font-size:0.75rem;overflow:auto;max-height:200px;margin-top:0.5rem">{{ raw | e }}</pre>
  </details>
  {% endif %}
</div>
{% endif %}

{% if spec_json %}
<p style="color:var(--text-muted,#6b7280);font-size:0.875rem;margin:0 0 1rem">
  Review the proposed spec below. You can edit it before saving.
  Use "Test spec" to verify it against sample email content.
</p>

<form method="post" action="/config/parsers/approve" id="approve-form">
  <input type="hidden" name="uid" value="{{ uid }}">
  <input type="hidden" name="parser_id" value="{{ parser_id | default('') }}">
  <input type="hidden" name="mode" value="{{ mode }}">

  <div style="margin-bottom:1rem">
    <label style="display:block;font-weight:600;margin-bottom:0.3rem">Parser name</label>
    <input type="text" name="name" value="{{ mode }}-parser"
           style="width:100%;max-width:400px;padding:0.4rem 0.6rem;
                  border:1px solid var(--border,#e5e7eb);border-radius:4px">
  </div>

  <div style="margin-bottom:1rem">
    <label style="display:block;font-weight:600;margin-bottom:0.3rem">
      Sender contains (comma-separated)
    </label>
    <input type="text" name="sender_contains" value=""
           placeholder="e.g. linkedin.com, jobs-noreply@example.com"
           style="width:100%;max-width:500px;padding:0.4rem 0.6rem;
                  border:1px solid var(--border,#e5e7eb);border-radius:4px">
  </div>

  <div style="margin-bottom:1rem">
    <label style="display:block;font-weight:600;margin-bottom:0.3rem">
      Subject excludes (comma-separated, optional)
    </label>
    <input type="text" name="subject_excludes" value=""
           placeholder="e.g. are you hiring, application viewed"
           style="width:100%;max-width:500px;padding:0.4rem 0.6rem;
                  border:1px solid var(--border,#e5e7eb);border-radius:4px">
  </div>

  <div style="margin-bottom:1rem">
    <label style="display:block;font-weight:600;margin-bottom:0.3rem">Sender tag</label>
    <input type="text" name="sender_tag" value=""
           placeholder="e.g. linkedin, indeed, custom"
           style="width:100%;max-width:300px;padding:0.4rem 0.6rem;
                  border:1px solid var(--border,#e5e7eb);border-radius:4px">
  </div>

  <div style="margin-bottom:1.25rem">
    <label style="display:block;font-weight:600;margin-bottom:0.3rem">Spec JSON</label>
    <textarea name="spec_json" id="spec_json_ta" rows="20"
              style="width:100%;max-width:700px;font-family:monospace;font-size:0.8rem;
                     padding:0.5rem;border:1px solid var(--border,#e5e7eb);border-radius:4px">{{ spec_json }}</textarea>
  </div>

  <div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap">
    <button type="submit" class="btn btn-primary">Save parser</button>
    <button type="button" class="btn btn-action" onclick="testSpec()">Test spec</button>
    <a href="/config/parsers" class="btn">Cancel</a>
  </div>
</form>

<div id="test-result" style="margin-top:1.5rem;display:none">
  <h3 style="font-size:1rem;margin:0 0 0.5rem">Test result</h3>
  <div id="test-result-inner"></div>
</div>

<div style="margin-top:1.5rem">
  <h3 style="font-size:1rem;margin:0 0 0.5rem">Test against pasted email</h3>
  <div style="margin-bottom:0.75rem">
    <label style="display:block;font-size:0.875rem;font-weight:600;margin-bottom:0.3rem">
      Email text body (paste here to test)
    </label>
    <textarea id="test_body_text" rows="6"
              style="width:100%;max-width:700px;font-family:monospace;font-size:0.8rem;
                     padding:0.5rem;border:1px solid var(--border,#e5e7eb);border-radius:4px"
              placeholder="Paste plain-text email body here..."></textarea>
  </div>
  <div style="margin-bottom:0.75rem">
    <label style="display:block;font-size:0.875rem;font-weight:600;margin-bottom:0.3rem">
      Email HTML body (optional)
    </label>
    <textarea id="test_body_html" rows="4"
              style="width:100%;max-width:700px;font-family:monospace;font-size:0.8rem;
                     padding:0.5rem;border:1px solid var(--border,#e5e7eb);border-radius:4px"
              placeholder="Paste HTML body here (optional)..."></textarea>
  </div>
</div>

{% else %}
<p style="color:var(--text-muted,#6b7280)">
  No spec was generated. <a href="/config/parsers">Back to parsers</a>.
</p>
{% endif %}

{% endcall %}

<script>
function testSpec() {
  var spec_json = document.getElementById('spec_json_ta').value;
  var body_text = document.getElementById('test_body_text').value;
  var body_html = document.getElementById('test_body_html').value;

  var form = new FormData();
  form.append('spec_json', spec_json);
  form.append('body_text', body_text);
  form.append('body_html', body_html);
  form.append('sender_tag', 'test');

  fetch('/config/parsers/test', { method: 'POST', body: form })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var el = document.getElementById('test-result');
      var inner = document.getElementById('test-result-inner');
      el.style.display = 'block';
      if (data.error) {
        inner.innerHTML = '<p style="color:#991b1b"><strong>Error:</strong> '
          + escapeHtml(data.error) + '</p>';
      } else if (!data.jobs || data.jobs.length === 0) {
        inner.innerHTML = '<p style="color:#92400e">No jobs extracted.</p>';
      } else {
        var rows = data.jobs.map(function(j) {
          return '<tr><td style="padding:3px 6px">' + escapeHtml(j.title || '') + '</td>'
            + '<td style="padding:3px 6px">' + escapeHtml(j.company || '') + '</td>'
            + '<td style="padding:3px 6px">' + escapeHtml(j.url || '') + '</td></tr>';
        }).join('');
        inner.innerHTML = '<p style="color:#065f46">' + data.jobs.length + ' job(s) extracted.</p>'
          + '<table style="border-collapse:collapse;font-size:0.8rem"><thead>'
          + '<tr><th style="padding:3px 6px;text-align:left">Title</th>'
          + '<th style="padding:3px 6px;text-align:left">Company</th>'
          + '<th style="padding:3px 6px;text-align:left">URL</th></tr></thead>'
          + '<tbody>' + rows + '</tbody></table>';
      }
    })
    .catch(function(err) {
      document.getElementById('test-result').style.display = 'block';
      document.getElementById('test-result-inner').innerHTML =
        '<p style="color:#991b1b">Request failed: ' + escapeHtml(String(err)) + '</p>';
    });
}

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}
</script>
{% endblock %}