{% extends "_base.html" %}
{% block title %}Bugs · Cauldron{% endblock %}
{% block content %}

<div class="page-head">
  <div class="crumb">// bugs · feedback to the witch</div>
  <h1>the <span class="accent">complaints</span> ledger</h1>
  <div class="lede">
    something broken? something missing? leave it on the cauldron's ledger
    and it'll find its way to whoever can fix it. reports here go straight
    to <a href="https://bugs.sulkta.com" target="_blank" rel="noopener">bugs.sulkta.com</a>
    — the central tracker for every sulkta service.
  </div>
</div>

{% if not bugs_configured %}
<section class="panel">
  <p>🪄 the bug tracker isn't wired up on this deploy. ask the operator to set
  <code>BUGS_API_KEY</code> in cauldron's env and restart.</p>
</section>
{% else %}

<section class="panel purple">
  <div class="panel-head">
    <h2>file a new one</h2>
  </div>
  <form id="bug-form" style="display: flex; flex-direction: column; gap: 12px;">
    <label style="display:flex; flex-direction:column; gap:4px;">
      <span class="muted" style="font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;">subject</span>
      <input id="bf-subject" type="text" maxlength="240" required
        placeholder="meal plan generate spins forever"
        style="padding:8px 10px; background:var(--bg-1); color:var(--bone); border:1px solid var(--line); border-radius:6px; font-family:var(--serif);">
    </label>

    <label style="display:flex; flex-direction:column; gap:4px;">
      <span class="muted" style="font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;">what happened</span>
      <textarea id="bf-message" rows="6" maxlength="8000" required
        placeholder="hit generate, button shows 'thinking' for 2 minutes, never returns..."
        style="padding:8px 10px; background:var(--bg-1); color:var(--bone); border:1px solid var(--line); border-radius:6px; font-family:var(--mono); resize:vertical;"></textarea>
    </label>

    <div style="display:flex; gap:14px; flex-wrap:wrap;">
      <label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px;">
        <span class="muted" style="font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;">kind</span>
        <select id="bf-category" style="padding:8px 10px; background:var(--bg-1); color:var(--bone); border:1px solid var(--line); border-radius:6px; font-family:var(--mono);">
          <option value="bug" selected>🐞 bug</option>
          <option value="feature">✨ feature</option>
          <option value="feedback">💬 feedback</option>
          <option value="other">🌀 other</option>
        </select>
      </label>

      <label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px;">
        <span class="muted" style="font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;">severity</span>
        <select id="bf-severity" style="padding:8px 10px; background:var(--bg-1); color:var(--bone); border:1px solid var(--line); border-radius:6px; font-family:var(--mono);">
          <option value="">—</option>
          <option value="low">low</option>
          <option value="medium" selected>medium</option>
          <option value="high">high</option>
          <option value="critical">critical</option>
        </select>
      </label>
    </div>

    <div style="display:flex; gap:10px; align-items:center;">
      <button class="btn btn-purple" type="submit" id="bf-submit">🔮 send to the ledger</button>
      <span id="bf-status" class="muted" style="font-family:var(--mono); font-size:12px;"></span>
    </div>
  </form>
</section>

<section class="panel green">
  <div class="panel-head">
    <h2 id="my-bugs-title">your reports</h2>
    {% if is_admin %}
      <span class="ctx">
        <button class="btn" type="button" id="toggle-all" style="font-size:11px; padding:.3em .8em;">show all cauldron bugs</button>
      </span>
    {% endif %}
  </div>
  <div id="bug-list" class="muted"
       style="display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:12px;">
    loading...
  </div>
</section>

<script>
const _esc = (s) => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
const _ago = (iso) => {
  if (!iso) return '';
  const d = new Date(iso);
  if (isNaN(d.getTime())) return iso;
  const s = Math.floor((Date.now() - d.getTime()) / 1000);
  if (s < 60) return s + 's ago';
  if (s < 3600) return Math.floor(s/60) + 'm ago';
  if (s < 86400) return Math.floor(s/3600) + 'h ago';
  return Math.floor(s/86400) + 'd ago';
};

const STATUS_GLYPH = {
  'open': '📂',
  'in_progress': '🔨',
  'resolved': '✅',
  'wontfix': '⛔',
  'duplicate': '🌀',
  'invalid': '✗',
};

let showAll = false;

async function loadBugs() {
  const list = document.getElementById('bug-list');
  list.textContent = 'loading...';
  const url = '/api/bugs' + (showAll ? '?all=1' : '');
  try {
    const r = await fetch(url);
    const d = await r.json();
    if (!r.ok || !d.ok) {
      list.textContent = 'couldn\'t load bugs: ' + (d.error || r.status);
      return;
    }
    const reports = d.reports || [];
    const title = document.getElementById('my-bugs-title');
    title.textContent = showAll ? 'all cauldron bugs' : 'your reports';
    if (!reports.length) {
      list.innerHTML = showAll
        ? '<em>no bugs filed yet against cauldron. impressive or suspicious.</em>'
        : '<em>you haven\'t filed anything yet. nothing to see here.</em>';
      return;
    }
    list.innerHTML = reports.map(r => {
      const glyph = STATUS_GLYPH[r.status] || '·';
      const sev = r.severity ? ' · <span style="color:var(--purple-bright)">' + _esc(r.severity) + '</span>' : '';
      const cat = r.category ? ' · ' + _esc(r.category) : '';
      const id = r.id;
      const subject = _esc(r.subject || '(untitled)');
      const status = _esc(r.status || 'open');
      const when = _ago(r.created_at);
      const who = showAll && r.user_email ? ' · <span style="color:var(--green-bright)">' + _esc(r.user_email) + '</span>' : '';
      return `<div data-id="${id}" style="padding:8px 10px; border:1px solid var(--line-soft); border-radius:6px; background:var(--bg-1);">
        <div style="display:flex; justify-content:space-between; gap:10px;">
          <span><strong style="color:var(--bone); font-family:var(--serif); font-size:13px;">${glyph} ${subject}</strong></span>
          <span class="muted">#${id} · ${when}</span>
        </div>
        <div style="margin-top:4px; color:var(--muted);">
          ${status}${sev}${cat}${who}
        </div>
      </div>`;
    }).join('');
  } catch (e) {
    list.textContent = 'request failed: ' + e;
  }
}

document.getElementById('bug-form').addEventListener('submit', async (ev) => {
  ev.preventDefault();
  const status = document.getElementById('bf-status');
  const submit = document.getElementById('bf-submit');
  const subject = document.getElementById('bf-subject').value.trim();
  const message = document.getElementById('bf-message').value.trim();
  const category = document.getElementById('bf-category').value;
  const severity = document.getElementById('bf-severity').value;
  if (!subject || !message) {
    status.textContent = 'subject + what-happened are both required.';
    return;
  }
  submit.disabled = true;
  status.textContent = 'sending...';
  try {
    const r = await fetch('/api/bugs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        subject, message, category,
        severity: severity || null,
        page_url: document.referrer || window.location.href,
      }),
    });
    const d = await r.json();
    if (!r.ok || !d.ok) {
      status.textContent = 'failed: ' + (d.detail || d.error || r.status);
    } else {
      status.textContent = '✓ filed as #' + d.report.id;
      document.getElementById('bf-subject').value = '';
      document.getElementById('bf-message').value = '';
      loadBugs();
    }
  } catch (e) {
    status.textContent = 'request failed: ' + e;
  } finally {
    submit.disabled = false;
  }
});

const toggleBtn = document.getElementById('toggle-all');
if (toggleBtn) {
  toggleBtn.addEventListener('click', () => {
    showAll = !showAll;
    toggleBtn.textContent = showAll ? 'show only mine' : 'show all cauldron bugs';
    loadBugs();
  });
}

loadBugs();
</script>

{% endif %}
{% endblock %}