/**
 * GMIIE Victim Action Desk — renders playbook on xxxiii.io/fraud#take-action
 */
(function () {
  var STAGES = [
    { id: 'no-action-yet', label: 'No action yet — evaluating' },
    { id: 'funds-sent', label: 'Already sent funds' },
    { id: 'wallet-connected', label: 'Connected wallet to a site' },
    { id: 'signed-approval', label: 'Signed approval / transaction' },
    { id: 'fake-support', label: 'Fake support contacted me' },
  ];

  function esc(s) {
    return String(s || '')
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function renderLinks(links) {
    if (!links || !links.length) return '';
    return (
      '<div class="vad-links">' +
      links
        .map(function (l) {
          var href = esc(l.url);
          var isMail = href.indexOf('mailto:') === 0;
          return (
            '<a href="' +
            href +
            '"' +
            (isMail ? '' : ' target="_blank" rel="noopener"') +
            '>' +
            esc(l.label || l.url) +
            '</a>'
          );
        })
        .join('') +
      '</div>'
    );
  }

  function renderStep(s) {
    return (
      '<article class="vad-step" data-priority="' +
      esc(s.priority) +
      '">' +
      '<div class="vad-step-hd">' +
      '<span class="vad-priority vad-priority--' +
      esc(s.priority) +
      '">' +
      esc(s.priority) +
      '</span>' +
      '<h4>' +
      esc(s.title) +
      '</h4>' +
      '</div>' +
      '<p>' +
      esc(s.description) +
      '</p>' +
      renderLinks(s.links) +
      '</article>'
    );
  }

  function renderQuickRef(rows) {
    if (!rows || !rows.length) return '';
    return (
      '<table class="pipeline-table vad-ref-table">' +
      '<thead><tr><th>Agency</th><th>Contact</th><th>Purpose</th><th>Priority</th></tr></thead><tbody>' +
      rows
        .map(function (r) {
          var contact = String(r.contact || '');
          var contactCell =
            contact.indexOf('http') === 0
              ? '<a href="' + esc(contact) + '" target="_blank" rel="noopener">' + esc(contact) + '</a>'
              : contact.indexOf('@') >= 0
                ? '<a href="mailto:' + esc(contact) + '">' + esc(contact) + '</a>'
                : esc(contact);
          return (
            '<tr><td>' +
            esc(r.agency) +
            '</td><td>' +
            contactCell +
            '</td><td>' +
            esc(r.purpose) +
            '</td><td><span class="vad-priority vad-priority--' +
            esc(r.priority) +
            '">' +
            esc(r.priority) +
            '</span></td></tr>'
          );
        })
        .join('') +
      '</tbody></table>'
    );
  }

  function renderWalletFlags(flags) {
    if (!flags || !flags.length) return '';
    return (
      '<div class="vad-wallet-grid">' +
      flags
        .map(function (w) {
          return (
            '<div class="case-block">' +
            '<h4>' +
            esc(w.role) +
            ' · ' +
            esc(w.chain) +
            '</h4>' +
            '<p><code>' +
            esc(w.address_truncated) +
            '</code></p>' +
            '<p style="font-size:12px;color:var(--ink2);">' +
            esc(w.note) +
            (w.freezable_usd != null ? ' · ~$' + esc(w.freezable_usd) + ' freezable' : '') +
            '</p></div>'
          );
        })
        .join('') +
      '</div>'
    );
  }

  function renderEmergency(box) {
    if (!box) return '';
    return (
      '<div class="vad-emergency" id="vad-emergency">' +
      '<div class="vad-emergency-flag">Emergency</div>' +
      '<h3>' +
      esc(box.title) +
      '</h3>' +
      '<ul>' +
      (box.bullets || []).map(function (b) {
        return '<li>' + esc(b) + '</li>';
      }).join('') +
      '</ul></div>'
    );
  }

  function renderPlatformOffer(offer) {
    if (!offer) return '';
    return (
      '<div class="case-study" style="margin-top:20px;border-color:var(--gold);">' +
      '<div class="case-flag" style="background:var(--gold);color:#1a1a1a;">' +
      esc(offer.name) +
      '</div>' +
      '<h3 class="case-hl" style="font-size:20px;">' +
      esc(offer.tagline) +
      '</h3>' +
      '<p class="case-body">' +
      esc(offer.description) +
      '</p>' +
      '<p style="font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:12px;">' +
      'API: <code>' +
      esc(offer.api_endpoint) +
      '?stage=funds-sent&amp;typology=advance-fee&amp;score=85</code><br/>' +
      'Embed: <a href="' +
      esc(offer.embed_url) +
      '" style="color:var(--fraud);">' +
      esc(offer.embed_url) +
      '</a></p></div>'
    );
  }

  function setActiveTab(tier) {
    document.querySelectorAll('.vad-tab').forEach(function (btn) {
      btn.classList.toggle('active', btn.dataset.tier === tier);
    });
    document.querySelectorAll('.vad-tier-panel').forEach(function (panel) {
      panel.classList.toggle('visible', panel.dataset.tier === tier);
    });
  }

  function renderDesk(data) {
    var root = document.getElementById('victim-action-desk');
    if (!root || !data) return;

    var stage = (document.getElementById('vad-stage') || {}).value || 'no-action-yet';
    var emergency = renderEmergency(data.emergency_box);
    var tiers = data.steps_by_tier || {};
    var tierKeys = ['today', 'week', 'long_term'];

    var tabs =
      '<div class="vad-tabs" role="tablist">' +
      tierKeys
        .map(function (k, i) {
          var t = (data.tiers && data.tiers[k]) || {};
          var count = (tiers[k] || []).length;
          return (
            '<button type="button" class="vad-tab' +
            (i === 0 ? ' active' : '') +
            '" role="tab" data-tier="' +
            k +
            '" aria-selected="' +
            (i === 0) +
            '">' +
            esc(t.label || k) +
            ' <span class="vad-tab-count">(' +
            count +
            ')</span></button>'
          );
        })
        .join('') +
      '</div>';

    var panels = tierKeys
      .map(function (k, i) {
        var t = (data.tiers && data.tiers[k]) || {};
        var steps = tiers[k] || [];
        return (
          '<div class="vad-tier-panel' +
          (i === 0 ? ' visible' : '') +
          '" data-tier="' +
          k +
          '" role="tabpanel">' +
          '<p class="vad-tier-summary">' +
          esc(t.summary || '') +
          ' · <span style="font-family:var(--mono);font-size:9px;">' +
          esc(t.horizon || '') +
          '</span></p>' +
          (steps.length ? steps.map(renderStep).join('') : '<p class="vad-empty">No steps for this stage in this horizon.</p>') +
          '</div>'
        );
      })
      .join('');

    var caseEx = data.case_example;
    var caseBlock = caseEx
      ? '<div class="case-block" style="margin:16px 0;">' +
        '<h4>Documented pattern · ' +
        esc(caseEx.case_id) +
        '</h4>' +
        '<p style="font-size:12px;line-height:1.65;color:var(--ink2);">' +
        esc(caseEx.summary) +
        '</p>' +
        '<p style="font-family:var(--mono);font-size:8px;color:var(--ink3);margin-top:8px;">Confirmed loss: $' +
        esc(caseEx.confirmed_loss_usd) +
        ' · Freezable trace (editorial): ~$' +
        esc(caseEx.freezable_usdt_usd) +
        ' USDT</p></div>'
      : '';

    root.innerHTML =
      emergency +
      '<p style="font-size:13px;color:var(--ink2);margin:12px 0 16px;">Stage: <strong>' +
      esc(data.meta && data.meta.stage_label) +
      '</strong> · ' +
      (data.meta && data.meta.step_count) +
      ' steps</p>' +
      tabs +
      '<div class="vad-panels">' +
      panels +
      '</div>' +
      '<div class="sec-hd" style="margin-top:28px;"><div class="sec-title" style="font-size:18px;">Quick Reference</div></div>' +
      renderQuickRef(data.quick_reference) +
      '<div class="sec-hd" style="margin-top:24px;"><div class="sec-title" style="font-size:18px;">Example Wallet Flags (redacted)</div></div>' +
      renderWalletFlags(data.wallet_flags) +
      caseBlock +
      renderPlatformOffer(data.platform_offer);

    root.querySelectorAll('.vad-tab').forEach(function (btn) {
      btn.addEventListener('click', function () {
        setActiveTab(btn.dataset.tier);
      });
    });
  }

  function fetchPlaybook(stage, typology, score) {
    var q = new URLSearchParams();
    q.set('stage', stage || 'no-action-yet');
    if (typology) q.set('typology', typology);
    if (score != null) q.set('score', String(score));
    var laneInput = document.querySelector('#fraud-check-form [name=incident_stage]');
    if (laneInput && laneInput.value) q.set('stage', laneInput.value);
    return fetch('/api/gmiie/action-playbook?' + q.toString()).then(function (r) {
      if (!r.ok) throw new Error('playbook ' + r.status);
      return r.json();
    });
  }

  function initStageSelector() {
    var sel = document.getElementById('vad-stage');
    if (!sel) return;
    sel.innerHTML = '';
    STAGES.forEach(function (s) {
      var opt = document.createElement('option');
      opt.value = s.id;
      opt.textContent = s.label;
      sel.appendChild(opt);
    });
    sel.addEventListener('change', function () {
      var hidden = document.querySelector('#fraud-check-form [name=incident_stage]');
      if (hidden) hidden.value = sel.value;
      document.querySelectorAll('[name=checker_incident_stage]').forEach(function (r) {
        r.checked = r.value === sel.value;
      });
      loadDesk();
    });
  }

  function loadDesk(typology, score) {
    var stage = (document.getElementById('vad-stage') || {}).value || 'no-action-yet';
    var root = document.getElementById('victim-action-desk');
    if (root) root.innerHTML = '<p style="font-size:13px;color:var(--ink3);">Loading recovery steps…</p>';
    return fetchPlaybook(stage, typology, score)
      .then(renderDesk)
      .catch(function () {
        if (root) {
          root.innerHTML =
            '<p class="check-status err">Recovery playbook unavailable — refresh or visit <a href="https://blockchainfraud.org">blockchainfraud.org</a>.</p>';
        }
      });
  }

  window.GMIIEVictimActionDesk = {
    load: loadDesk,
    fetchPlaybook: fetchPlaybook,
    recoveryCtaHtml: function (score, level, stage) {
      if (!level && score != null) {
        level = score >= 75 ? 'Critical' : score >= 55 ? 'High' : score >= 30 ? 'Medium' : 'Low';
      }
      if (['Critical', 'High'].indexOf(level) < 0) return '';
      var st = stage || 'funds-sent';
      return (
        '<div class="vad-recovery-cta">' +
        '<p><strong>' +
        esc(level) +
        ' risk — take recovery action now.</strong> Preserve evidence and follow stage-specific steps.</p>' +
        '<a class="btn-secondary" href="#take-action" data-vad-scroll="1">View recovery steps for your situation</a>' +
        '</div>'
      );
    },
  };

  document.addEventListener('click', function (e) {
    var t = e.target;
    if (t && t.getAttribute && t.getAttribute('data-vad-scroll') === '1') {
      e.preventDefault();
      var sec = document.getElementById('take-action');
      if (sec) sec.scrollIntoView({ behavior: 'smooth' });
      var hidden = document.querySelector('#fraud-check-form [name=incident_stage]');
      var sel = document.getElementById('vad-stage');
      if (sel && hidden) sel.value = hidden.value;
      loadDesk();
    }
  });

  initStageSelector();
  loadDesk();

  if (location.hash === '#take-action') {
    setTimeout(function () {
      var sec = document.getElementById('take-action');
      if (sec) sec.scrollIntoView({ behavior: 'smooth' });
    }, 400);
  }
})();