function createHumanGates(options = {}) {
  const storage = options.storage || window.localStorage;
  const getLogin = options.getLogin || (() => '');
  const getAccountKey = options.getAccountKey || getLogin;
  const isOnline = options.isOnline || (() => navigator.onLine);
  const location = options.location || window.location;
  const fetchJson = options.fetchJson;
  const nodes = options.nodes || {};
  let queue = { pending_count: 0, items: [] };
  let reviewSnapshot = [];
  let reviewIndex = -1;
  const decisionKeys = new Map();

  const escape = value => String(value ?? '').replace(/[&<>"']/g, character => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
  })[character]);
  const cacheKey = () => 'stackchain.human-gates.v1:' + String(getAccountKey() || '').trim().toLowerCase();
  const setText = (node, value) => { if (node) node.textContent = value; };
  const setHtml = (node, value) => { if (node) node.innerHTML = value; };

  function validSnapshot(value) {
    return value && Number.isInteger(value.pending_count) && Array.isArray(value.items) ? value : null;
  }

  function restore() {
    if (!getLogin()) return null;
    try { return validSnapshot(JSON.parse(storage.getItem(cacheKey()) || 'null')); } catch (_) { return null; }
  }

  function save(value) {
    if (!getLogin()) return;
    try { storage.setItem(cacheKey(), JSON.stringify(value)); } catch (_) {}
  }

  function render() {
    setText(nodes.count, String(queue.pending_count));
    if (!queue.pending_count) {
      setHtml(nodes.list, '<div class="human-gates-zero"><strong>Inbox zero</strong><span>No release candidates need your decision.</span></div>');
      setText(nodes.status, 'Human Gates inbox zero.');
      return;
    }
    setText(nodes.status, queue.pending_count + (queue.pending_count === 1 ? ' gate pending.' : ' gates pending.'));
    setHtml(nodes.list, queue.items.map(item =>
      '<button class="human-gate-card" type="button" data-human-gate-id="' + escape(item.id) + '">' +
      '<strong>' + escape(item.title) + '</strong><code>' + escape(item.candidate_hash) + '</code>' +
      '<span>Priority ' + escape(item.priority ?? 0) + '</span></button>'
    ).join(''));
  }

  function renderDetail(item) {
    if (!item) {
      setHtml(nodes.detail, '<div class="human-gates-zero"><strong>Inbox zero</strong><span>Fixed review snapshot complete.</span></div>');
      return;
    }
    const checks = (item.checks || []).map(check =>
      '<li class="gate-check gate-check-' + escape(check.state) + '"><strong>' + escape(check.name) + '</strong> · ' + escape(check.state) + (check.required ? ' · required' : '') + '</li>'
    ).join('');
    const artifacts = (item.artifacts || []).map(artifact => '<li><a href="' + escape(artifact.url) + '" rel="noreferrer">' + escape(artifact.name) + '</a></li>').join('');
    const links = (item.links || []).map(link => '<li><a href="' + escape(link.url) + '" rel="noreferrer">' + escape(link.label) + '</a></li>').join('');
    const provenance = Object.entries(item.provenance || {}).map(([key, value]) => '<li><strong>' + escape(key) + '</strong> · ' + escape(value) + '</li>').join('');
    const history = (item.history || []).map(event => '<li><strong>' + escape(event.action) + '</strong> · ' + escape(event.at) + '</li>').join('');
    setHtml(nodes.detail,
      '<article class="human-gate-detail"><h3>' + escape(item.title) + '</h3>' +
      '<p>Project <strong>' + escape(item.project) + '</strong></p>' +
      '<p>Exact candidate <code>' + escape(item.candidate_hash) + '</code></p>' +
      '<p>Score ' + escape(item.score?.value ?? 'not supplied') + ' · ' + escape(item.score?.provenance || '') + '</p>' +
      '<h4>Artifacts</h4><ul>' + artifacts + '</ul><h4>Links</h4><ul>' + links + '</ul>' +
      '<h4>Checks</h4><ul>' + checks + '</ul><h4>Provenance</h4><ul>' + provenance + '</ul>' +
      '<h4>History</h4><ul>' + history + '</ul>' +
      '<label><input type="checkbox" data-gate-checklist="exact_hash"> Exact hash reviewed</label>' +
      '<label><input type="checkbox" data-gate-checklist="artifacts_reviewed"> Artifacts reviewed</label>' +
      '<label><input type="checkbox" data-gate-checklist="provenance_reviewed"> Provenance reviewed</label>' +
      '<label>Hold reason<textarea data-gate-reason></textarea></label>' +
      '<label>Override reason<textarea data-gate-override></textarea></label>' +
      '<div><button type="button" data-gate-decision="release">Release &amp; next</button>' +
      '<button type="button" data-gate-decision="hold">Hold &amp; next</button></div></article>'
    );
  }

  async function load() {
    const cached = restore();
    if (cached) { queue = cached; render(); }
    try {
      const live = validSnapshot(await fetchJson('api/v1/human-gates'));
      if (!live) throw new Error('Human Gates response is invalid.');
      queue = { pending_count: live.pending_count, items: live.items.slice() };
      save(queue);
      render();
      return queue;
    } catch (error) {
      if (!cached) throw error;
      setText(nodes.status, 'Offline cached gate list · reconnect before deciding.');
      return queue;
    }
  }

  function reviewNext() {
    if (reviewIndex < 0) {
      reviewSnapshot = queue.items.slice();
      reviewIndex = 0;
    }
    const item = reviewSnapshot[reviewIndex] || null;
    renderDetail(item);
    if (item) {
      const index = reviewIndex;
      fetchJson('api/v1/human-gates/' + encodeURIComponent(item.id)).then(detail => {
        if (!detail || detail.id !== item.id) throw new Error('Gate detail is invalid.');
        if (reviewIndex !== index || reviewSnapshot[index]?.id !== item.id) return;
        reviewSnapshot[index] = detail;
        renderDetail(detail);
      }).catch(() => { setText(nodes.status, 'Gate detail is unavailable. Retry while online.'); });
    }
    return item;
  }

  function select(gateId) {
    if (reviewIndex < 0) reviewSnapshot = queue.items.slice();
    const index = reviewSnapshot.findIndex(item => item.id === gateId);
    if (index < 0) throw new Error('Gate is not in the current review snapshot.');
    reviewIndex = index;
    return reviewNext();
  }

  function current() { return reviewIndex < 0 ? null : (reviewSnapshot[reviewIndex] || null); }
  function idempotencyKey(item, decision, payload) {
    const operation = item.id + ':' + item.revision + ':' + decision + ':' + JSON.stringify(payload);
    if (decisionKeys.has(operation)) return { operation, key: decisionKeys.get(operation) };
    const nonce = globalThis.crypto?.randomUUID?.() || (Date.now().toString(36) + '-' + Math.random().toString(36).slice(2));
    const key = 'human-gate:' + item.id + ':' + item.revision + ':' + decision + ':' + nonce;
    decisionKeys.set(operation, key);
    return { operation, key };
  }

  async function decideAndNext(decision, values = {}) {
    const item = current();
    if (!item) throw new Error('No gate is selected.');
    if (!isOnline()) throw new Error('Human Gate decisions require an online connection.');
    if (!String(getLogin() || '').trim()) throw new Error('Authenticated account identity is required.');
    const checklist = values.checklist || {};
    const complete = ['exact_hash', 'artifacts_reviewed', 'provenance_reviewed'].every(key => checklist[key] === true);
    if (decision === 'release' && !complete) throw new Error('Complete the release checklist before deciding.');
    const unmet = (item.checks || []).filter(check => check.required && check.state !== 'success');
    if (decision === 'release' && unmet.length && !String(values.override_reason || '').trim()) {
      throw new Error('An explicit override reason is required for unmet required checks.');
    }
    if (decision === 'hold' && !String(values.reason || '').trim()) throw new Error('A hold reason is required.');
    const payload = {
      expected_revision: item.revision, decision,
      reason: String(values.reason || '').trim(),
      override_reason: String(values.override_reason || '').trim(), checklist,
    };
    const decisionKey = idempotencyKey(item, decision, payload);
    const receipt = await fetchJson('api/v1/human-gates/' + encodeURIComponent(item.id) + '/decision', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Idempotency-Key': decisionKey.key },
      body: JSON.stringify(payload),
    });
    decisionKeys.delete(decisionKey.operation);
    queue.items = queue.items.filter(candidate => candidate.id !== item.id);
    queue.pending_count = Math.max(0, queue.pending_count - 1);
    save(queue); render();
    reviewIndex += 1;
    const next = current();
    if (next) reviewNext(); else renderDetail(null);
    setText(nodes.status, next ? (decision === 'release' ? 'Released. Reviewing next gate.' : 'Held. Reviewing next gate.') : 'Decision saved. Human Gates review snapshot complete.');
    return { receipt, next };
  }

  function open() {
    location.hash = '#/my-work/human-gates';
    if (nodes.panel) nodes.panel.hidden = false;
    return load().then(() => reviewNext());
  }

  return {
    load, open, reviewNext, select, decideAndNext, current,
    restoreCached: restore,
    snapshot: () => JSON.parse(JSON.stringify(queue)),
    route: () => location.hash,
  };
}

if (typeof module !== 'undefined') module.exports = createHumanGates;
if (typeof window !== 'undefined') window.createHumanGates = createHumanGates;