{% extends "base.html" %}
{% block title %}Tickets{% endblock %}
{% block page_title %}Tickets{% endblock %}
{% block topbar_meta %}<span id="ticket-count" class="muted"></span>{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<style>
.ticket-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
  min-width: 0;
}
.filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-sec);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { background: var(--raised); color: var(--fg); opacity: 1; }
.filter-btn.active { background: var(--primary); color: #000; border-color: var(--primary); opacity: 1; }

/* ── Ticket list rows ── */
.ticket-list { display: flex; flex-direction: column; }
.ticket-row {
  padding: 10px 20px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background .1s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: var(--raised); }
.tr-top { display: flex; align-items: baseline; gap: 10px; }
.tr-id { font-family: monospace; font-size: 11px; color: var(--fg-sec); flex-shrink: 0; width: 72px; }
.tr-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg); }
.tr-bottom { display: flex; align-items: center; gap: 8px; padding-left: 82px; font-size: 12px; color: var(--fg-sec); }
.tr-sep { color: var(--border); }
.att-chip { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
.child-toggle {
  font-size: 11px; color: var(--fg-sec); background: none; border: none;
  cursor: pointer; padding: 0 4px; line-height: 1; opacity: .7;
}
.child-toggle:hover { opacity: 1; color: var(--fg); }
.child-count { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
.child-rows { border-left: 2px solid var(--divider); margin-left: 20px; }
.child-rows .ticket-row { padding-left: 14px; }
.child-rows .ticket-row:last-child { border-bottom: none; }
.child-rows .tr-bottom { padding-left: 82px; }

.badge-open      { background: #4f8ef718; color: var(--primary); }
.badge-ongoing   { background: #f59e0b18; color: var(--yellow); }
.badge-completed { background: #22c55e18; color: var(--green); }
.badge-abandoned { background: #ffffff0f; color: var(--fg-sec); }
.badge-feature   { background: #4f8ef718; color: var(--primary); }
.badge-bug       { background: #ef444418; color: var(--red); }
.badge-chore     { background: #a78bfa18; color: var(--purple); }
.badge-project   { background: #10b98118; color: var(--green); }

.effort-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  font-size: 10px; font-weight: 700; font-family: monospace; flex-shrink: 0;
}
.effort-lo { background: #22c55e22; color: var(--green); }
.effort-md { background: #f59e0b22; color: var(--yellow); }
.effort-hi { background: #ef444422; color: var(--red); }

.sort-bar {
  display: flex; gap: 6px; align-items: center; margin-top: 6px;
  font-size: 11px; color: var(--fg-sec);
}
.sort-btn {
  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--fg-sec); font-size: 11px;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.sort-btn:hover { background: var(--raised); color: var(--fg); }
.sort-btn.active { background: var(--raised); color: var(--fg); border-color: var(--fg-sec); }

.parent-link { font-size: 12px; color: var(--fg-sec); }
.parent-link a { color: var(--primary); text-decoration: none; cursor: pointer; }
.parent-link a:hover { text-decoration: underline; }
.children-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.child-link { font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: none; }
.child-link:hover { text-decoration: underline; }

.md-body { font-size: 13px; line-height: 1.6; color: var(--fg); }
.md-body h1,.md-body h2,.md-body h3 { margin: 12px 0 6px; font-size: 14px; }
.md-body p { margin: 6px 0; }
.md-body code { background: var(--raised); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
.md-body pre { background: var(--raised); padding: 10px; border-radius: 4px; overflow-x: auto; }
.md-body pre code { background: none; padding: 0; }
.md-body ul, .md-body ol { padding-left: 18px; margin: 4px 0; }
.md-body a { color: var(--primary); }

/* ── Detail panel (fixed right drawer) ── */
.detail-panel {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 50;
  padding: 24px;
}
.detail-panel.open { transform: translateX(0); }
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.detail-header h2 { font-size: 16px; font-weight: 700; flex: 1; }
.detail-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 12px; color: var(--fg-sec); }
.detail-meta span b { color: var(--fg); }
.detail-description { border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 4px; }
.detail-actions { display: flex; gap: 8px; align-items: center; }

.modal-fields { display: flex; flex-direction: column; gap: 14px; }
textarea.desc-input {
  min-height: 140px;
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
}

/* ── Attachments in detail pane ── */
.att-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 16px; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-sec);
}
.att-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--divider);
}
.att-item:last-child { border-bottom: none; }
.att-item-info { flex: 1; min-width: 0; }
.att-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-item-meta { font-size: 11px; color: var(--fg-sec); margin-top: 1px; }
.att-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Attachment view modal ── */
.att-view-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.att-view-header {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.att-view-header h3 { flex: 1; font-size: 15px; font-weight: 700; }
.att-view-meta { font-size: 11px; color: var(--fg-sec); white-space: nowrap; }

@media (max-width: 600px) {
  .tr-bottom { padding-left: 0; }
  .d-guid-wrap { display: none; }
  .detail-panel { width: 100vw; top: 48px; }
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap input[type="search"] {
  width: 200px;
  padding: 5px 10px 5px 30px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  transition: width .2s, border-color .15s;
}
.search-wrap input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
  width: 260px;
}
.search-wrap::before {
  content: '⌕';
  position: absolute;
  left: 9px;
  font-size: 14px;
  color: var(--fg-sec);
  pointer-events: none;
}
.search-match { background: #4f8ef733; border-radius: 2px; }

/* ── Environment selector ── */
.env-selector { position: relative; display: inline-block; }
.env-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--primary); background: #4f8ef710;
  color: var(--primary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.env-pill:hover { background: #4f8ef720; opacity: 1; }
.env-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 4px 16px #0006;
  min-width: 210px; z-index: 200; overflow: hidden;
}
.env-dropdown.open { display: block; }
.env-dd-item {
  padding: 8px 14px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: background .1s;
}
.env-dd-item:hover { background: var(--raised); }
.env-dd-item.active { color: var(--primary); font-weight: 600; }
.env-dd-divider { border-top: 1px solid var(--divider); margin: 2px 0; }
.env-prefix-badge {
  font-family: monospace; font-size: 10px; background: var(--raised);
  padding: 1px 5px; border-radius: 3px; color: var(--fg-sec); flex-shrink: 0;
}
</style>
{% endblock %}

{% block content %}

<!-- Environment selector -->
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
  <div class="env-selector" id="env-selector">
    <button class="env-pill" id="env-pill" onclick="toggleEnvDropdown(); event.stopPropagation()">
      <span id="env-pill-name">…</span>
      <span style="font-size:9px;opacity:.7">▾</span>
    </button>
    <div class="env-dropdown" id="env-dropdown"></div>
  </div>
  <button class="btn btn-subtle btn-sm" onclick="openEnvCreate(); event.stopPropagation()">+ Env</button>
</div>

<!-- Toolbar -->
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;">
  <div style="display:flex; flex-direction:column; gap:6px;">
    <div class="ticket-filters">
      <button class="filter-btn active" data-filter="status" data-value="open">Open</button>
      <button class="filter-btn active" data-filter="status" data-value="ongoing">Ongoing</button>
      <button class="filter-btn" data-filter="status" data-value="completed">Completed</button>
      <button class="filter-btn" data-filter="status" data-value="abandoned">Abandoned</button>
    </div>
    <div class="ticket-filters">
      <button class="filter-btn" data-filter="type" data-value="feature">Feature</button>
      <button class="filter-btn" data-filter="type" data-value="bug">Bug</button>
      <button class="filter-btn" data-filter="type" data-value="chore">Chore</button>
      <button class="filter-btn" data-filter="type" data-value="project">Project</button>
    </div>
    <div class="sort-bar">
      <span>Sort:</span>
      <button class="sort-btn active" data-sort="newest">Newest</button>
      <button class="sort-btn" data-sort="oldest">Oldest</button>
      <button class="sort-btn" data-sort="effort-asc">Effort ↑</button>
      <button class="sort-btn" data-sort="effort-desc">Effort ↓</button>
    </div>
  </div>
  <div style="display:flex;gap:8px;align-items:center">
    <div class="search-wrap">
      <input type="search" id="search-input" placeholder="Search tickets…" autocomplete="off" title="Search title & description (/)">
    </div>
    <button class="btn btn-subtle btn-sm" onclick="exportTickets(); event.stopPropagation()">Export</button>
    <label class="btn btn-subtle btn-sm" style="cursor:pointer" title="Import tickets from JSON">
      Import
      <input type="file" accept=".json,application/json" onchange="importTickets(event)" style="display:none">
    </label>
    <button class="btn btn-primary btn-sm" onclick="openCreate(); event.stopPropagation()">+ New Ticket</button>
  </div>
</div>

<!-- Ticket list -->
<div class="section">
  <div class="ticket-list" id="ticket-list">
    <div class="empty">Loading…</div>
  </div>
</div>

<!-- Detail panel (fixed right drawer) -->
<div class="detail-panel" id="detail-panel">
  <div class="detail-header">
    <div style="flex:1;min-width:0">
      <div class="tr-id" id="d-human-id" style="margin-bottom:4px"></div>
      <h2 id="d-title" style="word-break:break-word"></h2>
    </div>
    <div class="detail-actions" style="flex-shrink:0">
      <button class="btn btn-subtle btn-sm" onclick="openEdit()">Edit</button>
      <button class="btn btn-danger btn-sm" onclick="deleteTicket()">Delete</button>
      <button class="btn btn-subtle btn-sm" onclick="closeDetail()">✕</button>
    </div>
  </div>
  <div class="detail-meta">
    <span>Status: <b id="d-status-label"></b></span>
    <span>Type: <b id="d-type-label"></b></span>
    <span>Effort: <b id="d-effort-label"></b></span>
    <span>By: <b id="d-user"></b></span>
    <span>Submitted: <b id="d-submitted"></b></span>
    <span id="d-parent-wrap" style="display:none">Parent: <span class="parent-link"><a id="d-parent-link" onclick="navToParent()"></a></span></span>
    <span id="d-children-wrap" style="display:none">Children: <div class="children-list" id="d-children-list"></div></span>
    <span class="d-guid-wrap">GUID: <b id="d-guid" class="mono" style="font-size:11px"></b></span>
  </div>
  <div class="detail-description">
    <div class="md-body" id="d-description"></div>
  </div>
  <div id="d-startup-wrap" style="display:none">
    <div class="att-section-hdr">
      <span>Startup Script</span>
      <button class="btn btn-subtle btn-sm" id="copy-script-btn" onclick="copyStartupScript(); event.stopPropagation()">Copy</button>
    </div>
    <pre id="d-startup-script" style="font-size:11px;background:var(--raised);padding:10px;border-radius:4px;overflow-x:auto;white-space:pre;margin:0;line-height:1.5"></pre>
  </div>
  <div class="att-section-hdr">
    <span>Attachments <span id="att-count-label" class="muted" style="font-weight:400;text-transform:none;letter-spacing:0"></span></span>
    <button class="btn btn-subtle btn-sm" onclick="openAttachCreate(); event.stopPropagation()">+ Add</button>
  </div>
  <div id="att-list"></div>
</div>

<!-- Attachment view overlay -->
<div class="overlay" id="att-view-overlay">
  <div class="modal att-view-modal" onclick="event.stopPropagation()">
    <div class="att-view-header">
      <h3 id="av-title"></h3>
      <span class="att-view-meta" id="av-meta"></span>
      <button class="btn btn-subtle btn-sm" onclick="openAttachEditFromView()">Edit</button>
      <button class="btn btn-subtle btn-sm" onclick="closeAttachView()">✕</button>
    </div>
    <div class="md-body" id="av-content"></div>
  </div>
</div>

<!-- Attachment create/edit overlay -->
<div class="overlay" id="att-edit-overlay">
  <div class="modal" style="min-width:560px" onclick="event.stopPropagation()">
    <h3 id="ae-overlay-title">New Attachment</h3>
    <div class="modal-fields">
      <div class="field">
        <label>Title</label>
        <input type="text" id="ae-title" placeholder="e.g. Implementation Proposal v1" autocomplete="off">
      </div>
      <div class="field">
        <label>Content (Markdown)</label>
        <textarea class="desc-input" id="ae-content" style="min-height:260px" placeholder="# Title&#10;&#10;Your markdown here…"></textarea>
      </div>
      <div class="field" id="ae-user-field">
        <label>Author</label>
        <select id="ae-user">
          <option value="kevin">kevin</option>
          <option value="claude">claude</option>
        </select>
      </div>
    </div>
    <div class="actions">
      <button class="btn btn-subtle" onclick="closeAttachEdit()">Cancel</button>
      <button class="btn btn-primary" onclick="submitAttach()">Save</button>
    </div>
  </div>
</div>

<!-- Create modal -->
<div class="overlay" id="create-overlay">
  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
    <h3>New Ticket</h3>
    <div class="modal-fields">
      <div class="field">
        <label>Title</label>
        <input type="text" id="c-title" placeholder="Short summary…" autocomplete="off">
      </div>
      <div class="field">
        <label>Description (Markdown)</label>
        <textarea class="desc-input" id="c-desc" placeholder="Details, context, links…"></textarea>
      </div>
      <div style="display:flex;gap:12px">
        <div class="field" style="flex:1">
          <label>Type</label>
          <select id="c-type">
            <option value="feature">Feature</option>
            <option value="bug">Bug</option>
            <option value="chore">Chore</option>
            <option value="project">Project</option>
          </select>
        </div>
        <div class="field" style="flex:1">
          <label>Status</label>
          <select id="c-status">
            <option value="open">Open</option>
            <option value="ongoing">Ongoing</option>
            <option value="completed">Completed</option>
            <option value="abandoned">Abandoned</option>
          </select>
        </div>
        <div class="field" style="flex:1">
          <label>Submitted by</label>
          <select id="c-user">
            <option value="kevin">kevin</option>
            <option value="claude">claude</option>
          </select>
        </div>
      </div>
      <div style="display:flex;gap:12px">
        <div class="field" style="flex:1">
          <label>Parent ticket</label>
          <select id="c-parent"><option value="">— none —</option></select>
        </div>
        <div class="field" style="width:100px;flex-shrink:0">
          <label>Effort (1–10)</label>
          <input type="number" id="c-effort" min="1" max="10" placeholder="—" autocomplete="off">
        </div>
      </div>
    </div>
    <div class="actions">
      <button class="btn btn-subtle" onclick="closeCreate()">Cancel</button>
      <button class="btn btn-primary" onclick="submitCreate()">Create</button>
    </div>
  </div>
</div>

<!-- New Environment modal -->
<div class="overlay" id="env-create-overlay">
  <div class="modal" style="min-width:400px" onclick="event.stopPropagation()">
    <h3>New Environment</h3>
    <div class="modal-fields">
      <div class="field">
        <label>Prefix <span class="muted" style="font-weight:400;font-size:11px">(e.g. PROJ, LAB — max 16 chars)</span></label>
        <input type="text" id="env-prefix" placeholder="HOME" autocomplete="off" style="text-transform:uppercase" maxlength="16">
      </div>
      <div class="field">
        <label>Name</label>
        <input type="text" id="env-name" placeholder="My Project" autocomplete="off">
      </div>
      <div class="field">
        <label>Description <span class="muted" style="font-weight:400;font-size:11px">(optional)</span></label>
        <input type="text" id="env-desc" placeholder="Short description…" autocomplete="off">
      </div>
    </div>
    <div class="actions">
      <button class="btn btn-subtle" onclick="closeEnvCreate()">Cancel</button>
      <button class="btn btn-primary" onclick="submitEnvCreate()">Create</button>
    </div>
  </div>
</div>

<!-- Edit modal -->
<div class="overlay" id="edit-overlay">
  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
    <h3>Edit Ticket <span id="e-human-id" class="muted" style="font-weight:400;font-size:13px"></span></h3>
    <div class="modal-fields">
      <div class="field">
        <label>Title</label>
        <input type="text" id="e-title" autocomplete="off">
      </div>
      <div class="field">
        <label>Description (Markdown)</label>
        <textarea class="desc-input" id="e-desc"></textarea>
      </div>
      <div style="display:flex;gap:12px">
        <div class="field" style="flex:1">
          <label>Type</label>
          <select id="e-type">
            <option value="feature">Feature</option>
            <option value="bug">Bug</option>
            <option value="chore">Chore</option>
            <option value="project">Project</option>
          </select>
        </div>
        <div class="field" style="flex:1">
          <label>Status</label>
          <select id="e-status">
            <option value="open">Open</option>
            <option value="ongoing">Ongoing</option>
            <option value="completed">Completed</option>
            <option value="abandoned">Abandoned</option>
          </select>
        </div>
        <div class="field" style="flex:1">
          <label>By</label>
          <select id="e-user">
            <option value="kevin">kevin</option>
            <option value="claude">claude</option>
          </select>
        </div>
      </div>
      <div style="display:flex;gap:12px">
        <div class="field" style="flex:1">
          <label>Parent ticket</label>
          <select id="e-parent"><option value="">— none —</option></select>
        </div>
        <div class="field" style="width:100px;flex-shrink:0">
          <label>Effort (1–10)</label>
          <input type="number" id="e-effort" min="1" max="10" placeholder="—" autocomplete="off">
        </div>
      </div>
    </div>
    <div class="actions">
      <button class="btn btn-subtle" onclick="closeEdit()">Cancel</button>
      <button class="btn btn-primary" onclick="submitEdit()">Save</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
let activeFilters = new Set(['open', 'ongoing']);
let activeTypeFilters = new Set();
let currentSort = 'newest';
let searchQuery = '';
let currentTicket = null;
let expandedParents = new Set();
let currentAttach = null;
let tickets = [];
let extraTickets = {};
let attachments = [];
let environments = [];
let currentEnvironmentId = null;

const STATUS_COLORS = {
  open:      'badge-open',
  ongoing:   'badge-ongoing',
  completed: 'badge-completed',
  abandoned: 'badge-abandoned',
};
const TYPE_COLORS = {
  feature: 'badge-feature',
  bug:     'badge-bug',
  chore:   'badge-chore',
  project: 'badge-project',
};

function statusBadge(s) {
  return `<span class="badge ${STATUS_COLORS[s] || ''}">${s}</span>`;
}
function typeBadge(t) {
  return `<span class="badge ${TYPE_COLORS[t] || ''}">${t}</span>`;
}
function effortPip(e) {
  if (!e) return '';
  const cls = e <= 3 ? 'effort-lo' : e <= 6 ? 'effort-md' : 'effort-hi';
  return `<span class="effort-pip ${cls}" title="Effort ${e}/10">${e}</span>`;
}

function sortTickets(arr) {
  const copy = [...arr];
  if (currentSort === 'newest') {
    copy.sort((a, b) => new Date(b.submitted_at) - new Date(a.submitted_at));
  } else if (currentSort === 'oldest') {
    copy.sort((a, b) => new Date(a.submitted_at) - new Date(b.submitted_at));
  } else if (currentSort === 'effort-asc') {
    copy.sort((a, b) => {
      if (a.effort == null && b.effort == null) return 0;
      if (a.effort == null) return 1;
      if (b.effort == null) return -1;
      return a.effort - b.effort;
    });
  } else if (currentSort === 'effort-desc') {
    copy.sort((a, b) => {
      if (a.effort == null && b.effort == null) return 0;
      if (a.effort == null) return 1;
      if (b.effort == null) return -1;
      return b.effort - a.effort;
    });
  }
  return copy;
}

function fmt_date(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('en-IE', {year:'numeric',month:'short',day:'numeric'});
}

// ── Environment selector ─────────────────────────────────────────────────────

async function loadEnvironments() {
  try {
    environments = await api('/api/environments');
    if (!environments.length) { await loadTickets(); return; }
    if (currentEnvironmentId === null || !environments.find(e => e.id === currentEnvironmentId)) {
      currentEnvironmentId = environments[0].id;
    }
    renderEnvPill();
    renderEnvDropdown();
    await loadTickets();
  } catch(err) {
    toast(err.message, true);
  }
}

function renderEnvPill() {
  const env = environments.find(e => e.id === currentEnvironmentId);
  document.getElementById('env-pill-name').textContent = env
    ? `${env.prefix} · ${env.name}` : '…';
}

function renderEnvDropdown() {
  const dd = document.getElementById('env-dropdown');
  dd.innerHTML = environments.map(e => `
    <div class="env-dd-item${e.id === currentEnvironmentId ? ' active' : ''}"
         onclick="selectEnvironment(${e.id}); event.stopPropagation()">
      <span class="env-prefix-badge">${escHtml(e.prefix)}</span>
      <span style="flex:1">${escHtml(e.name)}</span>
    </div>
  `).join('') + `
    <div class="env-dd-divider"></div>
    <div class="env-dd-item" onclick="openEnvCreate(); closeEnvDropdown(); event.stopPropagation()">
      <span style="color:var(--primary);font-weight:600">+ New environment</span>
    </div>
  `;
}

function toggleEnvDropdown() {
  document.getElementById('env-dropdown').classList.toggle('open');
}

function closeEnvDropdown() {
  document.getElementById('env-dropdown').classList.remove('open');
}

function selectEnvironment(id) {
  currentEnvironmentId = id;
  closeDetail();
  closeEnvDropdown();
  renderEnvPill();
  renderEnvDropdown();
  loadTickets();
}

function openEnvCreate() {
  document.getElementById('env-prefix').value = '';
  document.getElementById('env-name').value = '';
  document.getElementById('env-desc').value = '';
  document.getElementById('env-create-overlay').classList.add('active');
  document.getElementById('env-prefix').focus();
}

function closeEnvCreate() {
  document.getElementById('env-create-overlay').classList.remove('active');
}

async function submitEnvCreate() {
  const prefix = document.getElementById('env-prefix').value.trim().toUpperCase();
  const name   = document.getElementById('env-name').value.trim();
  if (!prefix) { toast('Prefix is required', true); return; }
  if (!name)   { toast('Name is required', true); return; }
  try {
    const created = await api('/api/environments', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ prefix, name, description: document.getElementById('env-desc').value.trim() || null }),
    });
    environments.push(created);
    currentEnvironmentId = created.id;
    renderEnvPill();
    renderEnvDropdown();
    closeEnvCreate();
    await loadTickets();
    toast('Environment created');
  } catch(err) {
    toast(err.message, true);
  }
}

async function loadTickets() {
  try {
    const parts = [
      ...[...activeFilters].map(s => `status=${encodeURIComponent(s)}`),
      ...[...activeTypeFilters].map(t => `type=${encodeURIComponent(t)}`),
    ];
    if (currentEnvironmentId !== null) parts.push(`environment_id=${currentEnvironmentId}`);
    const url = parts.length ? `/api/tickets?${parts.join('&')}` : '/api/tickets';
    tickets = await api(url);
    renderList();
    const ticketIds = new Set(tickets.map(t => t.id));
    const rootCount = tickets.filter(t => !t.parent_id || !ticketIds.has(t.parent_id)).length;
    const total = tickets.length;
    document.getElementById('ticket-count').textContent =
      rootCount === total
        ? `${total} ticket${total !== 1 ? 's' : ''}`
        : `${rootCount} ticket${rootCount !== 1 ? 's' : ''} (${total} total)`;
  } catch(e) {
    toast(e.message, true);
  }
}

function getTicketById(id) {
  return tickets.find(t => t.id === id) || extraTickets[id] || null;
}

function renderTicketRow(t) {
  const totalChildCount = (t.child_ids || []).length;
  const knownChildIds = (t.child_ids || []).filter(cid => getTicketById(cid));
  const expanded = expandedParents.has(t.id);
  return `
    <div class="ticket-row" onclick="showDetail(${t.id}); event.stopPropagation()">
      <div class="tr-top">
        <span class="tr-id">${t.human_id}</span>
        <span class="tr-title">${escHtml(t.title)}</span>
        ${totalChildCount ? `<button class="child-toggle" onclick="toggleChildren(${t.id}); event.stopPropagation()" title="${expanded ? 'Collapse' : 'Expand'} child tickets">${expanded ? '▾' : '▸'}</button><span class="child-count">${totalChildCount}</span>` : ''}
      </div>
      <div class="tr-bottom">
        ${typeBadge(t.type)}
        ${statusBadge(t.status)}
        ${t.effort != null ? effortPip(t.effort) : ''}
        <span class="tr-sep">·</span>
        <span>${escHtml(t.user)}</span>
        <span class="tr-sep">·</span>
        <span>${fmt_date(t.submitted_at)}</span>
        ${t.attachment_count ? `<span class="tr-sep">·</span><span class="att-chip">${t.attachment_count} file${t.attachment_count !== 1 ? 's' : ''}</span>` : ''}
      </div>
    </div>
    ${knownChildIds.length && expanded ? `<div class="child-rows">${knownChildIds.map(cid => renderTicketRow(getTicketById(cid))).join('')}</div>` : ''}
  `;
}

function toggleChildren(id) {
  if (expandedParents.has(id)) expandedParents.delete(id);
  else expandedParents.add(id);
  renderList();
}

function matchesSearch(t) {
  if (!searchQuery) return true;
  const q = searchQuery.toLowerCase();
  return t.title.toLowerCase().includes(q)
    || (t.description || '').toLowerCase().includes(q)
    || t.human_id.toLowerCase().includes(q);
}

function renderList() {
  const list = document.getElementById('ticket-list');
  const filtered = tickets.filter(matchesSearch);
  if (!filtered.length) {
    list.innerHTML = `<div class="empty">${searchQuery ? 'No tickets match your search.' : 'No tickets'}</div>`;
    return;
  }
  const ticketIds = new Set(filtered.map(t => t.id));
  const sorted = sortTickets(filtered);
  const roots = sorted.filter(t => !t.parent_id || !ticketIds.has(t.parent_id));
  list.innerHTML = roots.map(renderTicketRow).join('');
}

async function showDetail(id) {
  currentTicket = getTicketById(id);
  if (!currentTicket) {
    try {
      currentTicket = await api(`/api/tickets/${id}`);
      extraTickets[id] = currentTicket;
    } catch(e) { return; }
  }
  const t = currentTicket;
  document.getElementById('d-human-id').textContent = t.human_id;
  document.getElementById('d-title').textContent = t.title;
  document.getElementById('d-status-label').innerHTML = statusBadge(t.status);
  document.getElementById('d-type-label').innerHTML = typeBadge(t.type);
  document.getElementById('d-effort-label').innerHTML = t.effort != null ? effortPip(t.effort) + ` <span style="font-size:11px;color:var(--fg-sec)">/10</span>` : '<span class="muted">—</span>';
  document.getElementById('d-user').textContent = t.user;
  document.getElementById('d-submitted').textContent = fmt_date(t.submitted_at);
  document.getElementById('d-guid').textContent = t.guid;

  // Parent link
  const parentWrap = document.getElementById('d-parent-wrap');
  if (t.parent_id) {
    const parent = tickets.find(p => p.id === t.parent_id);
    const label = parent ? `${parent.human_id} ${parent.title}` : `#${t.parent_id}`;
    document.getElementById('d-parent-link').textContent = label;
    parentWrap.style.display = '';
  } else {
    parentWrap.style.display = 'none';
  }

  // Children list
  const childWrap = document.getElementById('d-children-wrap');
  if (t.child_ids && t.child_ids.length) {
    const childList = document.getElementById('d-children-list');
    childList.innerHTML = t.child_ids.map(cid => {
      const child = getTicketById(cid);
      const label = child ? `${child.human_id} ${escHtml(child.title)}` : `#${cid}`;
      return `<a class="child-link" id="child-ref-${cid}" onclick="showDetail(${cid}); event.stopPropagation()">${label}</a>`;
    }).join('');
    childWrap.style.display = '';
    // Fetch any children not in the local ticket list and cache them
    t.child_ids.forEach(async cid => {
      if (!getTicketById(cid)) {
        try {
          const child = await api(`/api/tickets/${cid}`);
          extraTickets[child.id] = child;
          const el = document.getElementById(`child-ref-${cid}`);
          if (el) el.textContent = `${child.human_id} ${child.title}`;
        } catch(e) { /* keep fallback label */ }
      }
    });
  } else {
    childWrap.style.display = 'none';
  }

  const descEl = document.getElementById('d-description');
  if (t.description) {
    descEl.innerHTML = DOMPurify.sanitize(marked.parse(t.description));
  } else {
    descEl.innerHTML = '<span class="muted">No description.</span>';
  }
  const scriptWrap = document.getElementById('d-startup-wrap');
  const scriptEl = document.getElementById('d-startup-script');
  if (t.startup_script) {
    scriptEl.textContent = t.startup_script;
    scriptWrap.style.display = '';
  } else {
    scriptWrap.style.display = 'none';
  }

  document.getElementById('detail-panel').classList.add('open');
  loadAttachments(t.id);
}

function copyStartupScript() {
  const script = currentTicket?.startup_script;
  if (!script) return;
  navigator.clipboard.writeText(script).then(() => {
    const btn = document.getElementById('copy-script-btn');
    btn.textContent = 'Copied!';
    setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
  }).catch(() => toast('Failed to copy', true));
}

function navToParent() {
  if (currentTicket?.parent_id) showDetail(currentTicket.parent_id);
}

function closeDetail() {
  document.getElementById('detail-panel').classList.remove('open');
  currentTicket = null;
  attachments = [];
}

// ── Create ────────────────────────────────────────────────────────────────────

function _populateParentSelect(selectId, excludeId = null) {
  const sel = document.getElementById(selectId);
  sel.innerHTML = '<option value="">— none —</option>';
  tickets
    .filter(t => t.id !== excludeId)
    .forEach(t => {
      const opt = document.createElement('option');
      opt.value = t.id;
      opt.textContent = `${t.human_id} ${t.title}`;
      sel.appendChild(opt);
    });
}

function openCreate() {
  document.getElementById('c-title').value = '';
  document.getElementById('c-desc').value = '';
  document.getElementById('c-type').value = 'feature';
  document.getElementById('c-status').value = 'open';
  document.getElementById('c-user').value = 'kevin';
  document.getElementById('c-effort').value = '';
  _populateParentSelect('c-parent');
  document.getElementById('c-parent').value = '';
  document.getElementById('create-overlay').classList.add('active');
  document.getElementById('c-title').focus();
}

function closeCreate() {
  document.getElementById('create-overlay').classList.remove('active');
}

async function submitCreate() {
  const title = document.getElementById('c-title').value.trim();
  if (!title) { toast('Title is required', true); return; }
  try {
    const parentVal = document.getElementById('c-parent').value;
    const effortVal = document.getElementById('c-effort').value;
    await api('/api/tickets', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        title,
        description: document.getElementById('c-desc').value || null,
        type: document.getElementById('c-type').value,
        status: document.getElementById('c-status').value,
        user: document.getElementById('c-user').value,
        parent_id: parentVal ? parseInt(parentVal) : null,
        effort: effortVal ? parseInt(effortVal) : null,
        environment_id: currentEnvironmentId,
      }),
    });
    closeCreate();
    await loadTickets();
    toast('Ticket created');
  } catch(e) {
    toast(e.message, true);
  }
}

// ── Edit ──────────────────────────────────────────────────────────────────────

function openEdit() {
  if (!currentTicket) return;
  const t = currentTicket;
  document.getElementById('e-human-id').textContent = t.human_id;
  document.getElementById('e-title').value = t.title;
  document.getElementById('e-desc').value = t.description || '';
  document.getElementById('e-type').value = t.type;
  document.getElementById('e-status').value = t.status;
  document.getElementById('e-user').value = t.user;
  document.getElementById('e-effort').value = t.effort != null ? t.effort : '';
  _populateParentSelect('e-parent', t.id);
  document.getElementById('e-parent').value = t.parent_id || '';
  document.getElementById('edit-overlay').classList.add('active');
  document.getElementById('e-title').focus();
}

function closeEdit() {
  document.getElementById('edit-overlay').classList.remove('active');
}

async function submitEdit() {
  if (!currentTicket) return;
  const title = document.getElementById('e-title').value.trim();
  if (!title) { toast('Title is required', true); return; }
  try {
    const parentVal = document.getElementById('e-parent').value;
    const effortVal = document.getElementById('e-effort').value;
    const updated = await api(`/api/tickets/${currentTicket.id}`, {
      method: 'PATCH',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        title,
        description: document.getElementById('e-desc').value || null,
        type: document.getElementById('e-type').value,
        status: document.getElementById('e-status').value,
        user: document.getElementById('e-user').value,
        parent_id: parentVal ? parseInt(parentVal) : null,
        effort: effortVal ? parseInt(effortVal) : null,
      }),
    });
    closeEdit();
    const idx = tickets.findIndex(t => t.id === currentTicket.id);
    if (idx >= 0) tickets[idx] = updated;
    currentTicket = updated;
    renderList();
    showDetail(updated.id);
    toast('Ticket updated');
  } catch(e) {
    toast(e.message, true);
  }
}

// ── Delete ────────────────────────────────────────────────────────────────────

async function deleteTicket() {
  if (!currentTicket) return;
  if (!confirm(`Delete ${currentTicket.human_id}? This cannot be undone.`)) return;
  try {
    await api(`/api/tickets/${currentTicket.id}`, {method: 'DELETE'});
    closeDetail();
    await loadTickets();
    toast('Ticket deleted');
  } catch(e) {
    toast(e.message, true);
  }
}

// ── Attachments ───────────────────────────────────────────────────────────────

async function loadAttachments(ticketId) {
  document.getElementById('att-list').innerHTML = '';
  document.getElementById('att-count-label').textContent = '';
  try {
    attachments = await api(`/api/tickets/${ticketId}/attachments`);
    renderAttachments();
  } catch(e) {
    toast(e.message, true);
  }
}

function renderAttachments() {
  const list = document.getElementById('att-list');
  const label = document.getElementById('att-count-label');
  label.textContent = attachments.length ? `(${attachments.length})` : '';
  if (!attachments.length) {
    list.innerHTML = '<div style="font-size:12px;color:var(--fg-sec);padding:8px 0">None yet</div>';
    return;
  }
  list.innerHTML = attachments.map(a => `
    <div class="att-item">
      <div class="att-item-info">
        <div class="att-item-title">${escHtml(a.title)}</div>
        <div class="att-item-meta">${escHtml(a.created_by)} · ${fmt_date(a.created_at)}</div>
      </div>
      <div class="att-item-actions">
        <button class="btn btn-subtle btn-sm" onclick="openAttachView(${a.id}); event.stopPropagation()">View</button>
        <button class="btn btn-subtle btn-sm" onclick="openAttachEdit(${a.id}); event.stopPropagation()">Edit</button>
        <button class="btn btn-danger btn-sm" onclick="deleteAttach(${a.id}); event.stopPropagation()">✕</button>
      </div>
    </div>
  `).join('');
}

function _syncAttachCountInList() {
  const t = tickets.find(t => t.id === currentTicket?.id);
  if (t) { t.attachment_count = attachments.length; renderList(); }
}

function openAttachView(id) {
  currentAttach = attachments.find(a => a.id === id);
  if (!currentAttach) return;
  document.getElementById('av-title').textContent = currentAttach.title;
  document.getElementById('av-meta').textContent =
    `${currentAttach.created_by} · ${fmt_date(currentAttach.created_at)}`;
  document.getElementById('av-content').innerHTML =
    DOMPurify.sanitize(marked.parse(currentAttach.content));
  document.getElementById('att-view-overlay').classList.add('active');
}
function closeAttachView() {
  document.getElementById('att-view-overlay').classList.remove('active');
}
function openAttachEditFromView() {
  const id = currentAttach?.id;
  closeAttachView();
  if (id != null) openAttachEdit(id);
}

function openAttachCreate() {
  currentAttach = null;
  document.getElementById('ae-overlay-title').textContent = 'New Attachment';
  document.getElementById('ae-title').value = '';
  document.getElementById('ae-content').value = '';
  document.getElementById('ae-user').value = 'kevin';
  document.getElementById('ae-user-field').style.display = '';
  document.getElementById('att-edit-overlay').classList.add('active');
  document.getElementById('ae-title').focus();
}
function openAttachEdit(id) {
  currentAttach = attachments.find(a => a.id === id);
  if (!currentAttach) return;
  document.getElementById('ae-overlay-title').textContent = 'Edit Attachment';
  document.getElementById('ae-title').value = currentAttach.title;
  document.getElementById('ae-content').value = currentAttach.content;
  document.getElementById('ae-user-field').style.display = 'none';
  document.getElementById('att-edit-overlay').classList.add('active');
  document.getElementById('ae-title').focus();
}
function closeAttachEdit() {
  document.getElementById('att-edit-overlay').classList.remove('active');
}

async function submitAttach() {
  const title = document.getElementById('ae-title').value.trim();
  const content = document.getElementById('ae-content').value.trim();
  if (!title)   { toast('Title is required', true); return; }
  if (!content) { toast('Content is required', true); return; }
  try {
    if (currentAttach) {
      const updated = await api(
        `/api/tickets/${currentTicket.id}/attachments/${currentAttach.id}`,
        { method: 'PATCH', headers: {'Content-Type':'application/json'},
          body: JSON.stringify({ title, content }) }
      );
      const idx = attachments.findIndex(a => a.id === currentAttach.id);
      if (idx >= 0) attachments[idx] = updated;
      toast('Attachment updated');
    } else {
      const created = await api(
        `/api/tickets/${currentTicket.id}/attachments`,
        { method: 'POST', headers: {'Content-Type':'application/json'},
          body: JSON.stringify({ title, content, created_by: document.getElementById('ae-user').value }) }
      );
      attachments.push(created);
      toast('Attachment added');
    }
    closeAttachEdit();
    renderAttachments();
    _syncAttachCountInList();
  } catch(e) { toast(e.message, true); }
}

async function deleteAttach(id) {
  if (!confirm('Delete this attachment? This cannot be undone.')) return;
  try {
    await api(`/api/tickets/${currentTicket.id}/attachments/${id}`, { method: 'DELETE' });
    attachments = attachments.filter(a => a.id !== id);
    renderAttachments();
    _syncAttachCountInList();
    toast('Attachment deleted');
  } catch(e) { toast(e.message, true); }
}

// ── Filters ───────────────────────────────────────────────────────────────────

document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', e => {
    e.stopPropagation();
    const { filter, value } = btn.dataset;
    const set = filter === 'type' ? activeTypeFilters : activeFilters;
    if (set.has(value)) { set.delete(value); btn.classList.remove('active'); }
    else                { set.add(value);    btn.classList.add('active'); }
    closeDetail();
    loadTickets();
  });
});

document.querySelectorAll('.sort-btn').forEach(btn => {
  btn.addEventListener('click', e => {
    e.stopPropagation();
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    currentSort = btn.dataset.sort;
    renderList();
  });
});

// ── Click outside to dismiss detail pane ─────────────────────────────────────

document.addEventListener('click', () => {
  if (document.getElementById('detail-panel').classList.contains('open')) {
    closeDetail();
  }
});
document.getElementById('detail-panel').addEventListener('click', e => e.stopPropagation());

// ── Search ────────────────────────────────────────────────────────────────────

document.getElementById('search-input').addEventListener('input', e => {
  searchQuery = e.target.value.trim();
  renderList();
});

// ── Keyboard ──────────────────────────────────────────────────────────────────

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    if (document.getElementById('att-edit-overlay').classList.contains('active')) closeAttachEdit();
    else if (document.getElementById('att-view-overlay').classList.contains('active')) closeAttachView();
    else if (document.getElementById('env-create-overlay').classList.contains('active')) closeEnvCreate();
    else if (document.getElementById('env-dropdown').classList.contains('open')) closeEnvDropdown();
    else if (document.getElementById('edit-overlay').classList.contains('active')) closeEdit();
    else if (document.getElementById('create-overlay').classList.contains('active')) closeCreate();
    else if (searchQuery) {
      searchQuery = '';
      document.getElementById('search-input').value = '';
      renderList();
    } else closeDetail();
    return;
  }
  if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
    e.preventDefault();
    document.getElementById('search-input').focus();
  }
});

document.getElementById('create-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) closeCreate();
});
document.getElementById('edit-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) closeEdit();
});
document.getElementById('att-view-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) closeAttachView();
});
document.getElementById('att-edit-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) closeAttachEdit();
});
document.getElementById('env-create-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) closeEnvCreate();
});

document.addEventListener('click', () => closeEnvDropdown());
document.getElementById('env-selector').addEventListener('click', e => e.stopPropagation());

// ── Export / Import ──────────────────────────────────────────────────────────

async function exportTickets() {
  try {
    const data = await api('/api/tickets/export');
    const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const ts = new Date().toISOString().slice(0, 10);
    a.href = url;
    a.download = `tickets-export-${ts}.json`;
    a.click();
    URL.revokeObjectURL(url);
  } catch(e) {
    toast(e.message, true);
  }
}

async function importTickets(event) {
  const file = event.target.files?.[0];
  if (!file) return;
  event.target.value = '';
  try {
    const text = await file.text();
    const body = JSON.parse(text);
    const result = await api('/api/tickets/import', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    toast(`Imported ${result.imported} ticket(s)`);
    await loadEnvironments();
  } catch(e) {
    toast(e.message || 'Import failed', true);
  }
}

loadEnvironments();
</script>
{% endblock %}