function RdCopyButton(props) {
  var _copied = React.useState(false);
  var copied = _copied[0], setCopied = _copied[1];

  function handleCopy() {
    navigator.clipboard.writeText(props.text).then(function () {
      setCopied(true);
      setTimeout(function () { setCopied(false); }, 1500);
    });
  }

  return (
    <button className="cs-copy" onClick={handleCopy} title="Copy to clipboard" type="button">
      {copied ? 'copied' : 'copy'}
    </button>
  );
}

/* ───────────────────── Operational Data Renderer ───────────────────── */

function RdOperationalSection(props) {
  var operational = props.operational;

  if (!operational) return null;

  var keys = Object.keys(operational);
  var sections = [];

  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    if (key === 'source') continue;
    var value = operational[key];
    sections.push(renderOpBlock(key, value));
  }

  if (sections.length === 0) return null;

  return (
    <div className="rd-op-wrap">
      {sections}
    </div>
  );
}

function formatOpLabel(key) {
  return key.replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
}

function renderOpBlock(key, value) {
  if (key === 'probe_queries' || key === 'detection_patterns' || key === 'credential_patterns' || key === 'endpoints' || key === 'substitution_strategies') {
    return renderNestedObject(key, value);
  }
  if (key === 'decision_logic') {
    return renderDecisionLogic(key, value);
  }
  if (key === 'steps') {
    return renderSteps(key, value);
  }
  // Fallback: treat as nested object if object, or string list if array
  if (Array.isArray(value)) {
    return renderStringList(key, value);
  }
  if (value && typeof value === 'object') {
    return renderNestedObject(key, value);
  }
  return (
    <div key={key} className="rd-op-section">
      <div className="rd-op-label">{formatOpLabel(key)}</div>
      <div className="cs-code-wrap">
        <pre className="rd-op-pre">{String(value)}</pre>
        <RdCopyButton text={String(value)} />
      </div>
    </div>
  );
}

var COPYABLE_FIELDS = {
  query: 1, direct: 1, bypass: 1, content: 1, content_template: 1,
  template: 1, redirect_content: 1, trigger_query: 1, verification_query: 1, path: 1
};
var SUBLIST_FIELDS = { queries: 1, steps: 1, verification_queries: 1, success_indicators: 1 };

function renderCopyBox(text) {
  return (
    <div className="cs-code-wrap">
      <pre className="rd-op-pre">{text}</pre>
      <RdCopyButton text={text} />
    </div>
  );
}

function renderMetaTag(label, value) {
  var display = (value && typeof value === 'object') ? JSON.stringify(value) : String(value);
  return (
    <div className="rd-op-meta">
      <span className="rd-op-meta-key">{formatOpLabel(label)}:</span>
      <span className="rd-op-meta-val">{display}</span>
    </div>
  );
}

function renderStructuredObject(item, idx) {
  var keys = Object.keys(item);
  var copyable = [];
  var meta = [];
  var sublists = [];

  for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var v = item[k];
    if (SUBLIST_FIELDS[k] && Array.isArray(v)) {
      sublists.push({ key: k, items: v });
    } else if (COPYABLE_FIELDS[k] && typeof v === 'string') {
      copyable.push({ key: k, value: v });
    } else {
      meta.push({ key: k, value: v });
    }
  }

  return (
    <div key={idx} className="rd-op-structured">
      {copyable.map(function (f) {
        return (
          <div key={f.key} className="rd-op-field">
            {copyable.length > 1 && <div className="rd-op-field-label">{formatOpLabel(f.key)}</div>}
            {renderCopyBox(f.value)}
          </div>
        );
      })}
      {meta.length > 0 && (
        <div className="rd-op-meta-row">
          {meta.map(function (m) { return renderMetaTag(m.key, m.value); })}
        </div>
      )}
      {sublists.map(function (sl) {
        return (
          <div key={sl.key} className="rd-op-sublist">
            <div className="rd-op-field-label">{formatOpLabel(sl.key)}</div>
            {sl.items.map(function (si, si2) {
              var txt = (si && typeof si === 'object') ? JSON.stringify(si) : String(si);
              return <div key={si2}>{renderCopyBox(txt)}</div>;
            })}
          </div>
        );
      })}
    </div>
  );
}

function renderEndpointObject(item, idx) {
  var label = item.path + ':' + item.port;
  var tags = [];
  if (item.db) tags.push(item.db);
  if (item.type) tags.push(item.type);
  return (
    <div key={idx} className="rd-op-endpoint">
      {renderCopyBox(item.path)}
      <div className="rd-op-meta-row">
        <span className="rd-op-meta-val rd-op-endpoint-info">port {item.port}</span>
        {tags.map(function (tg, ti) {
          return <span key={ti} className="rd-op-meta-val rd-op-endpoint-tag">{tg}</span>;
        })}
      </div>
    </div>
  );
}

function renderSubstitutionDict(key, dictObj) {
  var entries = Object.keys(dictObj);
  return (
    <div key={key} className="rd-op-group">
      <div className="rd-op-group-label">{formatOpLabel(key)}</div>
      <div className="rd-op-dict">
        {entries.map(function (ek) {
          var val = dictObj[ek];
          var display;
          if (Array.isArray(val)) {
            display = val.join(', ');
          } else if (val && typeof val === 'object') {
            var parts = Object.keys(val).map(function (ok) { return ok + ': ' + val[ok]; });
            display = parts.join(' | ');
          } else {
            display = String(val);
          }
          return (
            <div key={ek} className="rd-op-dict-row">
              <span className="rd-op-dict-from">{ek}</span>
              <span className="rd-op-dict-arrow">&rarr;</span>
              <span className="rd-op-dict-to">{display}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function renderArrayItems(items, isEndpoints) {
  if (!items || items.length === 0) return null;
  if (typeof items[0] === 'string' || typeof items[0] === 'number') {
    return items.map(function (item, idx) {
      return <div key={idx} className="rd-op-item">{renderCopyBox(String(item))}</div>;
    });
  }
  if (isEndpoints && items[0].path !== undefined) {
    return items.map(function (item, idx) { return renderEndpointObject(item, idx); });
  }
  return items.map(function (item, idx) { return renderStructuredObject(item, idx); });
}

function renderNestedObject(key, obj) {
  if (!obj || typeof obj !== 'object') return null;
  var isEndpoints = (key === 'endpoints');

  if (Array.isArray(obj)) {
    return (
      <div key={key} className="rd-op-section">
        <div className="rd-op-label">{formatOpLabel(key)}</div>
        {renderArrayItems(obj, isEndpoints)}
      </div>
    );
  }

  if (key === 'substitution_strategies') {
    var stratKeys = Object.keys(obj);
    return (
      <div key={key} className="rd-op-section">
        <div className="rd-op-label">{formatOpLabel(key)}</div>
        {stratKeys.map(function (sk) { return renderSubstitutionDict(sk, obj[sk]); })}
      </div>
    );
  }

  var subKeys = Object.keys(obj);
  return (
    <div key={key} className="rd-op-section">
      <div className="rd-op-label">{formatOpLabel(key)}</div>
      {subKeys.map(function (sk) {
        var items = obj[sk];
        if (Array.isArray(items)) {
          return (
            <div key={sk} className="rd-op-group">
              <div className="rd-op-group-label">{formatOpLabel(sk)}</div>
              {renderArrayItems(items, isEndpoints)}
            </div>
          );
        }
        if (items && typeof items === 'string') {
          return (
            <div key={sk} className="rd-op-group">
              <div className="rd-op-group-label">{formatOpLabel(sk)}</div>
              <div className="rd-op-item">{renderCopyBox(items)}</div>
            </div>
          );
        }
        if (items && typeof items === 'object') {
          return renderSubstitutionDict(sk, items);
        }
        return (
          <div key={sk} className="rd-op-group">
            <div className="rd-op-group-label">{formatOpLabel(sk)}</div>
            <div className="rd-op-item">{renderCopyBox(String(items))}</div>
          </div>
        );
      })}
    </div>
  );
}

function renderDecisionLogic(key, items) {
  if (!Array.isArray(items)) return null;
  return (
    <div key={key} className="rd-op-section">
      <div className="rd-op-label">{formatOpLabel(key)}</div>
      {items.map(function (item, idx) {
        return (
          <div key={idx} className="rd-op-decision">
            <div className="rd-op-decision-row">
              <span className="rd-op-decision-key">Condition:</span>
              <span className="rd-op-decision-val">{item.condition}</span>
            </div>
            <div className="rd-op-decision-row">
              <span className="rd-op-decision-key">Result:</span>
              <span className="rd-op-decision-val">{item.result}</span>
            </div>
            {item.rationale && (
              <div className="rd-op-decision-row">
                <span className="rd-op-decision-key">Rationale:</span>
                <span className="rd-op-decision-val">{item.rationale}</span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function renderSteps(key, items) {
  if (!Array.isArray(items)) return null;
  return (
    <div key={key} className="rd-op-section">
      <div className="rd-op-label">{formatOpLabel(key)}</div>
      <ol className="rd-op-steps">
        {items.map(function (step, idx) {
          return (
            <li key={idx} className="rd-op-step">
              {renderCopyBox(String(step))}
            </li>
          );
        })}
      </ol>
    </div>
  );
}

function renderStringList(key, items) {
  return (
    <div key={key} className="rd-op-section">
      <div className="rd-op-label">{formatOpLabel(key)}</div>
      {renderArrayItems(items, false)}
    </div>
  );
}

/* ───────────────────── RagdragTemplateDetail ───────────────────── */

function RagdragTemplateDetail(props) {
  var templateId = props.id;
  var navigate = props.navigate;

  var templates = window.RAGDRAG_TEMPLATES || [];
  var techniques = window.RAGDRAG_TECHNIQUES || [];

  var template = null;
  for (var i = 0; i < templates.length; i++) {
    if (templates[i].id === templateId) {
      template = templates[i];
      break;
    }
  }

  if (!template) {
    return (
      <div className="rd-content">
        <div className="rd-breadcrumb">
          <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Matrix</a>
          <span className="rd-breadcrumb-sep">/</span>
          <a href="/ragdrag/templates" onClick={function (e) { e.preventDefault(); navigate('ragdrag/templates'); }}>Templates</a>
          <span className="rd-breadcrumb-sep">/</span>
          <span>Not Found</span>
        </div>
        <h1>Template Not Found</h1>
        <p>No template found with ID "{templateId}". <a href="/ragdrag/templates" onClick={function (e) { e.preventDefault(); navigate('ragdrag/templates'); }}>Return to templates</a>.</p>
      </div>
    );
  }

  var linkedTechnique = null;
  if (template.technique_id) {
    for (var j = 0; j < techniques.length; j++) {
      if (techniques[j].id === template.technique_id) {
        linkedTechnique = techniques[j];
        break;
      }
    }
  }

  return (
    <div className="rd-content">
      <div className="rd-breadcrumb">
        <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Matrix</a>
        <span className="rd-breadcrumb-sep">/</span>
        <a href="/ragdrag/templates" onClick={function (e) { e.preventDefault(); navigate('ragdrag/templates'); }}>Templates</a>
        <span className="rd-breadcrumb-sep">/</span>
        <span>{template.name}</span>
      </div>

      <div className="rd-detail-head">
        <h1 className="rd-detail-name">{template.name}</h1>
        {template.technique_id && (
          <a
            href={'/ragdrag/technique/' + template.technique_id}
            className="rd-template-tech-link"
            onClick={function (e) { e.preventDefault(); navigate('ragdrag/technique/' + template.technique_id); }}
          >
            {template.technique_id}
          </a>
        )}
      </div>

      <div className="rd-section">
        <div className="rd-section-label">Description</div>
        <div className="rd-section-text">{template.description}</div>
      </div>

      {linkedTechnique && (
        <div className="rd-section">
          <div className="rd-section-label">Linked Technique</div>
          <div className="rd-section-text">
            <a
              href={'/ragdrag/technique/' + linkedTechnique.id}
              onClick={function (e) { e.preventDefault(); navigate('ragdrag/technique/' + linkedTechnique.id); }}
            >
              {linkedTechnique.id}: {linkedTechnique.name}
            </a>
          </div>
        </div>
      )}

      {template.queries && template.queries.length > 0 && (
        <div className="rd-section">
          <div className="rd-section-label">Queries <span style={{opacity: 0.5}}>{template.queries.length}</span></div>
          <div className="rd-template-queries">
            {template.queries.map(function (q, idx) {
              return (
                <div key={q.id || idx} className="rd-template-query">
                  <div className="rd-template-query-head">
                    <span className="rd-template-query-id">{q.id}</span>
                    {q.category && <span className="rd-template-query-cat">{q.category}</span>}
                  </div>
                  <div className="cs-code-wrap">
                    <pre className="rd-op-pre">{q.query}</pre>
                    <RdCopyButton text={q.query} />
                  </div>
                  {q.expected_behavior && (
                    <div className="rd-template-query-expected">
                      <span className="rd-template-query-expected-label">Expected:</span> {q.expected_behavior}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="rd-section">
        <div className="rd-section-label">Terminal</div>
        <div className="cs-code-wrap">
          <div className="rd-curl">curl "https://itsbroken.ai/api/ragdrag?action=template&id={template.id}"</div>
          <RdCopyButton text={'curl "https://itsbroken.ai/api/ragdrag?action=template&id=' + template.id + '"'} />
        </div>
      </div>
    </div>
  );
}

/* ───────────────────── RagdragTemplates ───────────────────── */

function RagdragTemplates(props) {
  var navigate = props.navigate;
  var templates = window.RAGDRAG_TEMPLATES || [];
  var techniques = window.RAGDRAG_TECHNIQUES || [];

  function getTechniqueName(techId) {
    for (var i = 0; i < techniques.length; i++) {
      if (techniques[i].id === techId) return techniques[i].name;
    }
    return techId;
  }

  return (
    <div className="rd-content">
      <div className="rd-breadcrumb">
        <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Matrix</a>
        <span className="rd-breadcrumb-sep">/</span>
        <span>Templates</span>
      </div>

      <h1>Payload Templates</h1>
      <p className="rd-templates-intro">Pre-built query sets for testing RAG system security posture against specific techniques.</p>

      <div className="rd-template-cards">
        {templates.map(function (t) {
          var queryCount = t.queries ? t.queries.length : 0;
          return (
            <div
              key={t.id}
              className="rd-template-card"
              onClick={function () { navigate('ragdrag/template/' + t.id); }}
            >
              <div className="rd-template-card-name">{t.name}</div>
              <div className="rd-template-card-desc">{t.description}</div>
              <div className="rd-template-card-meta">
                <a
                  href={'/ragdrag/technique/' + t.technique_id}
                  className="rd-template-card-tech"
                  onClick={function (e) { e.stopPropagation(); e.preventDefault(); navigate('ragdrag/technique/' + t.technique_id); }}
                >
                  {t.technique_id}
                </a>
                <span className="rd-template-card-count">{queryCount} queries</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ───────────────────── RagdragTechniqueDetail ───────────────────── */

function RagdragTechniqueDetail(props) {
  var id = props.id;
  var navigate = props.navigate;

  var techniques = window.RAGDRAG_TECHNIQUES || [];
  var phases = window.RAGDRAG_PHASES || [];
  var templates = window.RAGDRAG_TEMPLATES || [];

  var technique = null;
  for (var i = 0; i < techniques.length; i++) {
    if (techniques[i].id.toLowerCase() === id.toLowerCase()) {
      technique = techniques[i];
      break;
    }
  }

  if (!technique) {
    return (
      <div className="rd-content">
        <div className="rd-breadcrumb">
          <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Matrix</a>
          <span className="rd-breadcrumb-sep">/</span>
          <span>Not Found</span>
        </div>
        <h1>Technique Not Found</h1>
        <p>No technique found with ID "{id}". <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Return to the matrix</a>.</p>
      </div>
    );
  }

  var phase = null;
  for (var j = 0; j < phases.length; j++) {
    if (phases[j].id === technique.phase_id) {
      phase = phases[j];
      break;
    }
  }
  if (!phase) { phase = { id: '', name: 'Unknown', color: '#888' }; }

  var relatedTemplates = templates.filter(function (t) {
    return t.technique_id === technique.id;
  });

  return (
    <div className="rd-detail">
      <div className="rd-breadcrumb">
        <a href="/ragdrag" onClick={function (e) { e.preventDefault(); navigate('ragdrag'); }}>Matrix</a>
        <span className="rd-breadcrumb-sep">/</span>
        <a
          href={'/ragdrag?phase=' + phase.id}
          onClick={function (e) { e.preventDefault(); navigate('ragdrag?phase=' + phase.id); }}
          style={{color: phase.color}}
        >{phase.name}</a>
        <span className="rd-breadcrumb-sep">/</span>
        <span>{technique.id}</span>
      </div>

      <div className="rd-detail-head">
        <div className="rd-detail-id" style={{color: phase.color}}>{technique.id}</div>
        <h1 className="rd-detail-name">{technique.name}</h1>
        <span className="rd-detail-phase-badge" style={{color: phase.color, borderColor: phase.color}}>{phase.name}</span>
        {technique.implemented && <span className="rd-detail-impl-badge">implemented</span>}
      </div>

      <div className="rd-section">
        <div className="rd-section-label">Description</div>
        <div className="rd-section-text">{technique.description}</div>
      </div>

      {technique.methodology && (
        <div className="rd-section">
          <div className="rd-section-label">Methodology</div>
          <div className="rd-section-text">{technique.methodology}</div>
        </div>
      )}

      {technique.operational && (
        <div className="rd-section">
          <div className="rd-section-label">Operational Data</div>
          <RdOperationalSection operational={technique.operational} />
        </div>
      )}

      {technique.indicators && technique.indicators.length > 0 && (
        <div className="rd-section">
          <div className="rd-section-label">Indicators</div>
          <ul className="rd-indicator-list">
            {technique.indicators.map(function (ind, idx) {
              return <li key={idx} className="rd-indicator-item"><span className="rd-indicator-icon">!</span>{ind}</li>;
            })}
          </ul>
        </div>
      )}

      {technique.mitigations && technique.mitigations.length > 0 && (
        <div className="rd-section">
          <div className="rd-section-label">Mitigations</div>
          <ul className="rd-indicator-list">
            {technique.mitigations.map(function (m, idx) {
              return <li key={idx} className="rd-indicator-item"><span className="rd-indicator-icon" style={{color: '#3ABF7C'}}>+</span>{m}</li>;
            })}
          </ul>
        </div>
      )}

      {technique.atlas_mapping && (
        <div className="rd-section">
          <div className="rd-section-label">ATLAS Mapping</div>
          <div className="rd-section-text">{technique.atlas_mapping}</div>
        </div>
      )}

      {technique.tags && technique.tags.length > 0 && (
        <div className="rd-section">
          <div className="rd-section-label">Tags</div>
          <div className="rd-tags">
            {technique.tags.map(function (tag, idx) {
              return <span key={idx} className="rd-tag">{tag}</span>;
            })}
          </div>
        </div>
      )}

      {relatedTemplates.length > 0 && (
        <div className="rd-section">
          <div className="rd-section-label">Payload Templates</div>
          <div className="rd-related-templates">
            {relatedTemplates.map(function (t) {
              return (
                <a
                  key={t.id}
                  href={'/ragdrag/template/' + t.id}
                  className="rd-related-template-pill"
                  onClick={function (e) { e.preventDefault(); navigate('ragdrag/template/' + t.id); }}
                >
                  {t.name}
                </a>
              );
            })}
          </div>
        </div>
      )}

      <div className="rd-section">
        <div className="rd-section-label">Terminal</div>
        <div className="cs-code-wrap">
          <div className="rd-curl">curl "https://itsbroken.ai/api/ragdrag?action=technique&id={technique.id}"</div>
          <RdCopyButton text={'curl "https://itsbroken.ai/api/ragdrag?action=technique&id=' + technique.id + '"'} />
        </div>
      </div>
    </div>
  );
}

/* ───────────────────── RagdragMatrix ───────────────────── */

function RagdragMatrix(props) {
  var navigate = props.navigate;
  var initialPhase = props.initialPhase;

  var framework = window.RAGDRAG_FRAMEWORK || { name: 'RAGdrag', version: '0.5.0' };
  var phases = window.RAGDRAG_PHASES || [];
  var techniques = window.RAGDRAG_TECHNIQUES || [];

  var _search = React.useState('');
  var search = _search[0], setSearch = _search[1];

  var savedLayout = null;
  try { savedLayout = localStorage.getItem('ragdrag-layout'); } catch (e) {}
  var _layout = React.useState(savedLayout === 'flat' ? 'flat' : 'side');
  var layout = _layout[0], setLayout = _layout[1];

  var _selectedPhases = React.useState(function () {
    var s = {};
    if (initialPhase) { s[initialPhase] = true; }
    return s;
  });
  var selectedPhases = _selectedPhases[0], setSelectedPhases = _selectedPhases[1];

  var _showApi = React.useState(false);
  var showApi = _showApi[0], setShowApi = _showApi[1];

  var searchRef = React.useRef(null);

  var API_REF = '# List all phases\ncurl https://itsbroken.ai/api/ragdrag?action=phases\n\n# List techniques (optionally filter by phase)\ncurl https://itsbroken.ai/api/ragdrag?action=techniques&phase_id=R1\n\n# Get a specific technique\ncurl https://itsbroken.ai/api/ragdrag?action=technique&id=RD-0101\n\n# Search techniques\ncurl https://itsbroken.ai/api/ragdrag?action=search&q=credential\n\n# Get a payload template\ncurl https://itsbroken.ai/api/ragdrag?action=template&id=enterprise-chatbot';

  React.useEffect(function () {
    function handleKey(e) {
      if (e.key === '/' && document.activeElement !== searchRef.current && ['INPUT','TEXTAREA','SELECT'].indexOf(document.activeElement.tagName) < 0 && !document.activeElement.isContentEditable) {
        e.preventDefault();
        if (searchRef.current) searchRef.current.focus();
      }
      if (e.key === 'Escape' && document.activeElement === searchRef.current) {
        setSearch('');
        searchRef.current.blur();
      }
    }
    document.addEventListener('keydown', handleKey);
    return function () { document.removeEventListener('keydown', handleKey); };
  }, []);

  function changeLayout(l) {
    setLayout(l);
    try { localStorage.setItem('ragdrag-layout', l); } catch (e) {}
  }

  function hasActiveFilters(obj) {
    for (var k in obj) {
      if (obj[k]) return true;
    }
    return false;
  }

  function selectPhase(phaseId) {
    if (phaseId === null) {
      setSelectedPhases({});
      return;
    }
    setSelectedPhases(function (prev) {
      var next = {};
      for (var k in prev) { next[k] = prev[k]; }
      next[phaseId] = !next[phaseId];
      return next;
    });
  }

  var q = search.trim().toLowerCase();

  function isTechniqueVisible(t) {
    if (!q) return true;
    var haystack = (
      t.id + ' ' + t.name + ' ' + (t.description || '') +
      ' ' + (t.tags || []).join(' ') +
      ' ' + (t.methodology || '') +
      ' ' + (t.indicators || []).join(' ') +
      ' ' + (t.mitigations || []).join(' ') +
      ' ' + (t.atlas_mapping || '')
    ).toLowerCase();
    return haystack.indexOf(q) >= 0;
  }

  var visiblePhases = phases.filter(function (phase) {
    if (hasActiveFilters(selectedPhases) && !selectedPhases[phase.id]) return false;
    var phaseTechs = techniques.filter(function (t) { return t.phase_id === phase.id; });
    if (q) return phaseTechs.some(function (t) { return isTechniqueVisible(t); });
    return true;
  });

  var totalCount = techniques.length;
  var implCount = 0;
  var visibleCount = 0;
  techniques.forEach(function (t) {
    if (t.implemented) implCount++;
    if (hasActiveFilters(selectedPhases) && !selectedPhases[t.phase_id]) return;
    if (isTechniqueVisible(t)) visibleCount++;
  });

  return (
    <div className="rd-wrap">
      <div className="rd-head">
        <div className="rd-titlewrap">
          <div className="rd-eyebrow">itsbroken.ai</div>
          <h2>RAGdrag</h2>
          <div className="rd-subtitle">RAG Security Kill Chain &mdash; v{framework.version}</div>
        </div>
        <div className="rd-head-links">
          <button type="button" className="rd-head-link" onClick={function () { navigate('ragdrag/templates'); }}>Templates</button>
        </div>
        <span className="rd-count">{(search.trim() || hasActiveFilters(selectedPhases)) ? visibleCount + ' / ' + totalCount + ' techniques' : totalCount + ' techniques'}</span>
      </div>

      <div className="rd-legend">
        <span className="rd-legend-item">
          <span className="rd-cell-impl-dot"></span>
          <span className="rd-legend-text">{implCount + ' / ' + totalCount} have automated scanners in the RAGdrag CLI</span>
        </span>
      </div>

      <div className="rd-stripe">
        {phases.map(function (p) {
          return <div key={p.id} className="rd-stripe-seg" style={{background: p.color}} />;
        })}
      </div>

      <div className="cs-api-ref">
        <button className="cs-api-toggle" type="button" onClick={function () { setShowApi(!showApi); }}>
          {showApi ? '- ' : '+ '}API Reference
        </button>
        {showApi && (
          <div className="cs-api-body">
            <p>Query the RAGdrag kill chain programmatically. All endpoints return JSON with CORS enabled.</p>
            <div className="cs-code-wrap">
              <pre>{API_REF}</pre>
              <RdCopyButton text={API_REF} />
            </div>
          </div>
        )}
      </div>

      <div className="rd-toolbar">
        <div className="rd-search-wrap">
          <span className="rd-search-prompt">$</span>
          <input
            className="rd-search"
            ref={searchRef}
            placeholder="search techniques, ids, tags... ( / )"
            value={search}
            onChange={function (e) { setSearch(e.target.value); }}
          />
        </div>
        <div className="rd-phase-pills">
          <button
            className={'rd-phase-pill' + (!hasActiveFilters(selectedPhases) ? ' active' : '')}
            type="button"
            onClick={function () { selectPhase(null); }}
          >all</button>
          {phases.map(function (p) {
            return (
              <button
                key={p.id}
                className={'rd-phase-pill' + (selectedPhases[p.id] ? ' active' : '')}
                type="button"
                onClick={function () { selectPhase(p.id); }}
              >
                <span className="rd-pill-dot" style={{background: p.color}}></span>
                {p.name}
              </button>
            );
          })}
        </div>
        <div className="rd-layout-btns">
          <button
            className={'rd-layout-btn' + (layout === 'side' ? ' active' : '')}
            type="button"
            onClick={function () { changeLayout('side'); }}
          >side</button>
          <button
            className={'rd-layout-btn' + (layout === 'flat' ? ' active' : '')}
            type="button"
            onClick={function () { changeLayout('flat'); }}
          >flat</button>
        </div>
      </div>

      <div className={'rd-matrix' + (layout === 'flat' ? ' rd-matrix--flat' : '')}>
        {visiblePhases.map(function (phase) {
          var phaseTechs = techniques.filter(function (t) {
            return t.phase_id === phase.id && isTechniqueVisible(t);
          });
          return (
            <div key={phase.id} className="rd-col" style={{'--pc': phase.color}}>
              <div className="rd-col-head" onClick={function () { navigate('ragdrag?phase=' + phase.id); }}>
                <div className="rd-col-id">{phase.id}</div>
                <div className="rd-col-name">{phase.name}</div>
                <div className="rd-col-count">{phase.techniqueCount || phaseTechs.length} techniques</div>
                {phase.atlas_tactic && <div className="rd-col-atlas">{phase.atlas_tactic}</div>}
              </div>
              <div className="rd-col-techniques">
                {phaseTechs.map(function (t) {
                  return (
                    <div key={t.id} className="rd-cell" style={{'--pc': phase.color}}>
                      <div className="rd-cell-top" onClick={function () { navigate('ragdrag/technique/' + t.id); }}>
                        <span className="rd-cell-id">{t.id}</span>
                        <span className="rd-cell-name">{t.name}</span>
                      </div>
                      {t.implemented && (
                        <div className="rd-cell-bottom">
                          <span className="rd-cell-impl-dot" title="Implemented"></span>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ───────────────────── Main Ragdrag Component ───────────────────── */

function Ragdrag(props) {
  var navigate = props.navigate;
  var subRoute = props.subRoute;
  var initialPhase = props.initialPhase;

  if (subRoute && subRoute.indexOf('technique/') === 0) {
    var techId = subRoute.replace('technique/', '');
    return React.createElement(RagdragTechniqueDetail, { id: techId, navigate: navigate });
  }

  if (subRoute === 'templates') {
    return React.createElement(RagdragTemplates, { navigate: navigate });
  }

  if (subRoute && subRoute.indexOf('template/') === 0) {
    var tmplId = subRoute.replace('template/', '');
    return React.createElement(RagdragTemplateDetail, { id: tmplId, navigate: navigate });
  }

  return React.createElement(RagdragMatrix, { navigate: navigate, initialPhase: initialPhase });
}

window.Ragdrag = Ragdrag;