const { useState, useMemo } = React;
const T = window.ArbiterTokens;

// ── SEARCH ANALYTICS DASHBOARD ──
function EvidenceSearch({ data }) {
  const [query, setQuery] = useState('');
  const [activeQuery, setActiveQuery] = useState(null);
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const [custodianFilter, setCustodianFilter] = useState('All');
  const vault = data.vault;

  const custodians = ['All', ...new Set(vault.map(v => v.custodian.split('(')[0].trim()))];

  const SAVED_SEARCHES = [
    { query: 'Apex Ventures', hits: 6, docs: 4, coverage: '27%' },
    { query: 'revenue shortfall OR projection', hits: 8, docs: 3, coverage: '20%' },
    { query: 'board meeting AND disclosure', hits: 4, docs: 2, coverage: '13%' },
    { query: 'fiduciary duty', hits: 3, docs: 3, coverage: '20%' },
    { query: 'wire transfer', hits: 5, docs: 2, coverage: '13%' },
  ];

  const SEARCH_TERM_REPORT = [
    { term: 'Apex', hits: 847, docs: 234, responsive: 189, precision: 81 },
    { term: 'transfer', hits: 1203, docs: 456, responsive: 312, precision: 68 },
    { term: 'revenue', hits: 634, docs: 187, responsive: 142, precision: 76 },
    { term: 'board', hits: 892, docs: 298, responsive: 201, precision: 67 },
    { term: 'fiduciary', hits: 156, docs: 89, responsive: 78, precision: 88 },
    { term: 'fraud', hits: 423, docs: 156, responsive: 134, precision: 86 },
    { term: 'disclosure', hits: 567, docs: 201, responsive: 145, precision: 72 },
    { term: 'Harrington', hits: 1456, docs: 534, responsive: 423, precision: 79 },
  ];

  const results = useMemo(() => {
    if (!activeQuery) return [];
    const q = activeQuery.toLowerCase();
    return vault.filter(v =>
      v.name.toLowerCase().includes(q) ||
      v.aiTags.some(t => t.toLowerCase().includes(q)) ||
      v.category.toLowerCase().includes(q) ||
      v.custodian.toLowerCase().includes(q)
    );
  }, [activeQuery, vault]);

  const runSearch = () => { if (query.trim()) setActiveQuery(query); };

  return (
    <div>
      {/* Search box */}
      <div style={{ ...ev.card, marginBottom: '16px' }}>
        <div style={{ padding: '16px' }}>
          <div style={{ display: 'flex', gap: '8px', marginBottom: '10px' }}>
            <input style={{ flex: 1, height: '36px', border: `1px solid ${T.color.border.medium}`, borderRadius: T.radius.md, padding: '0 14px', fontSize: '13px', fontFamily: T.font.family, background: T.color.bg.primary, color: T.color.text.primary, outline: 'none' }}
              placeholder="Full-text search across all evidence (supports Boolean: AND, OR, NOT)..."
              value={query} onChange={e => setQuery(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && runSearch()} />
            <button onClick={runSearch} style={{ padding: '0 20px', borderRadius: T.radius.md, background: ev.teal, border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: T.font.family }}>Search</button>
          </div>
          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
            <span style={{ fontSize: '10px', color: T.color.text.tertiary, fontWeight: 500 }}>Filters:</span>
            <select style={{ ...ev.filterBtn, padding: '3px 8px' }} value={custodianFilter} onChange={e => setCustodianFilter(e.target.value)}>
              {custodians.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
            <input type="date" style={{ ...ev.filterBtn, padding: '3px 8px', fontSize: '10px' }} value={dateFrom} onChange={e => setDateFrom(e.target.value)} />
            <span style={{ fontSize: '10px', color: T.color.text.tertiary }}>to</span>
            <input type="date" style={{ ...ev.filterBtn, padding: '3px 8px', fontSize: '10px' }} value={dateTo} onChange={e => setDateTo(e.target.value)} />
          </div>
        </div>
      </div>

      {/* Results or default view */}
      {activeQuery ? (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
            <span style={{ fontSize: '13px', fontWeight: 600, color: T.color.text.primary }}>{results.length} results for "{activeQuery}"</span>
            <button onClick={() => setActiveQuery(null)} style={ev.filterBtn}>Clear Search</button>
          </div>
          <div style={ev.card}>
            {results.map((item, i) => (
              <div key={item.id} style={{ padding: '10px 16px', borderBottom: `1px solid ${T.color.border.light}`, display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
                <div style={{ minWidth: '80px' }}>
                  <div style={{ fontFamily: T.font.mono, fontSize: '9px', color: T.color.text.tertiary }}>{item.bates.length > 14 ? item.bates.slice(0,14)+'…' : item.bates}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '3px', marginTop: '2px' }}>
                    <div style={{ width: '24px', height: '3px', borderRadius: '2px', background: T.color.border.light }}>
                      <div style={{ width: `${item.relevance}%`, height: '100%', borderRadius: '2px', background: item.relevance >= 85 ? T.color.status.active : T.color.status.warning }} />
                    </div>
                    <span style={{ fontSize: '9px', fontFamily: T.font.mono, color: T.color.text.tertiary }}>{item.relevance}</span>
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: '12px', color: T.color.text.primary }}>{item.name}</div>
                  <div style={{ fontSize: '10px', color: T.color.text.tertiary, marginTop: '2px' }}>{item.type} · {item.custodian.split('(')[0].trim()} · {item.pages} pages</div>
                  <div style={{ display: 'flex', gap: '4px', marginTop: '4px', flexWrap: 'wrap' }}>
                    {item.aiTags.filter(t => t.toLowerCase().includes(activeQuery.toLowerCase())).map((tag, j) => (
                      <span key={j} style={{ fontSize: '9px', padding: '1px 6px', borderRadius: '8px', background: 'rgba(245,158,11,0.1)', color: '#B8860B', fontWeight: 600 }}>{tag}</span>
                    ))}
                    {item.aiTags.filter(t => !t.toLowerCase().includes(activeQuery.toLowerCase())).slice(0,2).map((tag, j) => (
                      <span key={j} style={{ fontSize: '9px', padding: '1px 6px', borderRadius: '8px', background: ev.tealBg, color: ev.teal }}>{tag}</span>
                    ))}
                  </div>
                </div>
                {item.hotDoc && <span style={{ fontSize: '10px' }}></span>}
              </div>
            ))}
            {results.length === 0 && (
              window.Arbiter?.EmptyState
                ? React.createElement(window.Arbiter.EmptyState, {
                    title: 'No results',
                    description: `Nothing matched "${activeQuery}". Try broadening the query or clearing filters.`,
                  })
                : <div role="status" style={{ padding: '24px', textAlign: 'center', color: T.color.text.tertiary, fontSize: '12px' }}>No results found for "{activeQuery}"</div>
            )}
          </div>
        </div>
      ) : (
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
            {/* Saved searches */}
            <div style={ev.card}>
              <div style={ev.cardH}><span>Saved Searches</span></div>
              {SAVED_SEARCHES.map((s, i) => (
                <div key={i} style={{ ...ev.row, cursor: 'pointer' }} onClick={() => { setQuery(s.query); setActiveQuery(s.query); }}>
                  <span style={{ flex: 1, fontWeight: 500, color: T.color.text.primary, fontSize: '12px' }}>{s.query}</span>
                  <span style={{ fontSize: '10px', fontFamily: T.font.mono, color: T.color.text.secondary }}>{s.hits} hits</span>
                  <span style={{ fontSize: '10px', fontFamily: T.font.mono, color: T.color.text.tertiary }}>{s.docs} docs</span>
                  <span style={{ fontSize: '9px', padding: '2px 6px', borderRadius: '8px', background: ev.tealBg, color: ev.teal, fontWeight: 600 }}>{s.coverage}</span>
                </div>
              ))}
            </div>

            {/* Search term report */}
            <div style={ev.card}>
              <div style={ev.cardH}><span>Search Term Hit Report</span><span style={{ fontSize: '9px', color: T.color.text.tertiary }}>Defensibility Metrics</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 60px 60px 60px', padding: '6px 16px', background: T.color.bg.secondary, borderBottom: `1px solid ${T.color.border.light}`, fontSize: '9px', fontWeight: 600, color: T.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em', gap: '8px' }}>
                <span>Term</span><span>Hits</span><span>Docs</span><span>Resp.</span><span>Precision</span>
              </div>
              {SEARCH_TERM_REPORT.map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr 60px 60px 60px', padding: '6px 16px', borderBottom: `1px solid ${T.color.border.light}`, fontSize: '11px', alignItems: 'center', gap: '8px' }}>
                  <span style={{ fontWeight: 600, color: ev.teal }}>{r.term}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <div style={{ flex: 1, ...ev.barTrack }}>
                      <div style={{ ...ev.barFill, width: `${(r.hits / 1500) * 100}%`, background: ev.teal }} />
                    </div>
                    <span style={{ fontFamily: T.font.mono, fontSize: '10px', color: T.color.text.secondary, minWidth: '36px' }}>{r.hits.toLocaleString()}</span>
                  </div>
                  <span style={{ fontFamily: T.font.mono, fontSize: '10px', color: T.color.text.secondary }}>{r.docs}</span>
                  <span style={{ fontFamily: T.font.mono, fontSize: '10px', color: T.color.status.active }}>{r.responsive}</span>
                  <span style={{ fontFamily: T.font.mono, fontSize: '10px', fontWeight: 700, color: r.precision >= 80 ? T.color.status.active : r.precision >= 70 ? T.color.status.warning : '#C23030' }}>{r.precision}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── TAR / PREDICTIVE CODING DASHBOARD ──
function EvidenceTAR({ data }) {
  const TAR_DATA = {
    model: 'CAL (Continuous Active Learning)',
    seedSet: 200,
    totalReviewed: 4427,
    totalCollection: 5780,
    richness: 44.2,
    recallTarget: 80,
    currentRecall: 78.4,
    currentPrecision: 81.2,
    elusion: { sampleSize: 500, responsive: 12, rate: 2.4 },
    rounds: [
      { round: 1, reviewed: 200, responsive: 98, precision: 49, recall: 12 },
      { round: 2, reviewed: 600, responsive: 312, precision: 52, recall: 28 },
      { round: 3, reviewed: 1200, responsive: 645, precision: 54, recall: 45 },
      { round: 4, reviewed: 2400, responsive: 1389, precision: 58, recall: 62 },
      { round: 5, reviewed: 3600, responsive: 2012, precision: 56, recall: 71 },
      { round: 6, reviewed: 4427, responsive: 2341, precision: 53, recall: 78 },
    ],
    categories: [
      { name: 'Financial Records', predicted: 1240, reviewed: 980, precision: 84 },
      { name: 'Communications', predicted: 890, reviewed: 720, precision: 78 },
      { name: 'Board / Corporate', predicted: 340, reviewed: 310, precision: 91 },
      { name: 'Expert Materials', predicted: 120, reviewed: 120, precision: 95 },
      { name: 'Pleadings / Filings', predicted: 180, reviewed: 180, precision: 100 },
    ],
  };

  const t = TAR_DATA;
  const maxReviewed = t.totalCollection;

  return (
    <div>
      {/* Key metrics */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={ev.stat}><span style={ev.statLabel}>Model</span><span style={{ fontSize: '13px', fontWeight: 700, color: T.color.text.primary }}>{t.model}</span></div>
        <div style={ev.stat}><span style={ev.statLabel}>Recall</span><span style={{ ...ev.statValue, fontSize: '20px', color: t.currentRecall >= t.recallTarget ? T.color.status.active : T.color.status.warning }}>{t.currentRecall}%</span></div>
        <div style={ev.stat}><span style={ev.statLabel}>Precision</span><span style={{ ...ev.statValue, fontSize: '20px', color: ev.teal }}>{t.currentPrecision}%</span></div>
        <div style={ev.stat}><span style={ev.statLabel}>Richness</span><span style={{ ...ev.statValue, fontSize: '20px', color: T.color.text.primary }}>{t.richness}%</span></div>
        <div style={ev.stat}><span style={ev.statLabel}>Elusion Rate</span><span style={{ ...ev.statValue, fontSize: '20px', color: T.color.status.active }}>{t.elusion.rate}%</span></div>
        <div style={ev.stat}><span style={ev.statLabel}>Reviewed</span><span style={{ ...ev.statValue, fontSize: '20px', color: T.color.text.primary }}>{t.totalReviewed.toLocaleString()}</span></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
        {/* Recall/Precision curve */}
        <div style={ev.card}>
          <div style={ev.cardH}><span>Recall / Precision by Round</span></div>
          <div style={{ padding: '16px' }}>
            {/* Simple bar viz */}
            <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', height: '120px', marginBottom: '8px' }}>
              {t.rounds.map((r, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px', height: '100%', justifyContent: 'flex-end' }}>
                  <span style={{ fontSize: '8px', fontFamily: T.font.mono, color: T.color.status.active }}>{r.recall}%</span>
                  <div style={{ width: '60%', height: `${r.recall * 1.1}px`, background: T.color.status.active, borderRadius: '2px 2px 0 0', opacity: 0.7 }} />
                  <div style={{ width: '60%', height: `${r.precision * 0.6}px`, background: ev.teal, borderRadius: '2px 2px 0 0', opacity: 0.7, marginTop: '-2px' }} />
                  <span style={{ fontSize: '8px', color: T.color.text.tertiary }}>R{r.round}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: '16px', justifyContent: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}><div style={{ width: '8px', height: '8px', borderRadius: '2px', background: T.color.status.active, opacity: 0.7 }} /><span style={{ fontSize: '10px', color: T.color.text.tertiary }}>Recall</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}><div style={{ width: '8px', height: '8px', borderRadius: '2px', background: ev.teal, opacity: 0.7 }} /><span style={{ fontSize: '10px', color: T.color.text.tertiary }}>Precision</span></div>
            </div>
          </div>
        </div>

        {/* Elusion test */}
        <div style={ev.card}>
          <div style={ev.cardH}><span>Elusion Test Results</span></div>
          <div style={{ padding: '16px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px', marginBottom: '16px' }}>
              <div style={{ textAlign: 'center' }}><div style={{ fontSize: '10px', color: T.color.text.tertiary, marginBottom: '2px' }}>Sample Size</div><div style={{ fontSize: '18px', fontWeight: 700 }}>{t.elusion.sampleSize}</div></div>
              <div style={{ textAlign: 'center' }}><div style={{ fontSize: '10px', color: T.color.text.tertiary, marginBottom: '2px' }}>Responsive Found</div><div style={{ fontSize: '18px', fontWeight: 700, color: T.color.status.warning }}>{t.elusion.responsive}</div></div>
              <div style={{ textAlign: 'center' }}><div style={{ fontSize: '10px', color: T.color.text.tertiary, marginBottom: '2px' }}>Elusion Rate</div><div style={{ fontSize: '18px', fontWeight: 700, color: T.color.status.active }}>{t.elusion.rate}%</div></div>
            </div>
            <div style={{ padding: '10px 12px', background: ev.tealBg, borderRadius: '6px', fontSize: '11px', color: T.color.text.secondary, lineHeight: 1.5 }}>
              <span style={{ fontWeight: 600, color: ev.teal }}>◆ Defensibility Assessment: </span>
              Elusion rate of {t.elusion.rate}% is well within accepted thresholds ({'<'}5%). Current recall of {t.currentRecall}% approaches the {t.recallTarget}% target. Recommend one additional training round to exceed target before certifying the review.
            </div>
          </div>
        </div>
      </div>

      {/* Category performance */}
      <div style={ev.card}>
        <div style={ev.cardH}><span>Category-Level Performance</span></div>
        {t.categories.map((c, i) => (
          <div key={i} style={{ padding: '8px 16px', borderBottom: `1px solid ${T.color.border.light}`, display: 'flex', alignItems: 'center', gap: '12px', fontSize: '12px' }}>
            <span style={{ width: '160px', fontWeight: 500, color: T.color.text.primary }}>{c.name}</span>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '8px' }}>
              <div style={{ flex: 1, ...ev.barTrack }}>
                <div style={{ ...ev.barFill, width: `${(c.reviewed / c.predicted) * 100}%`, background: ev.teal }} />
              </div>
              <span style={{ fontSize: '10px', fontFamily: T.font.mono, color: T.color.text.secondary, minWidth: '60px' }}>{c.reviewed}/{c.predicted}</span>
            </div>
            <span style={{ fontSize: '10px', fontFamily: T.font.mono, fontWeight: 700, color: c.precision >= 85 ? T.color.status.active : T.color.status.warning }}>{c.precision}% prec.</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── EVIDENCE TIMELINE VISUALIZATION ──
function EvidenceTimeline({ data }) {
  const [hoveredItem, setHoveredItem] = useState(null);
  const vault = data.vault;

  // Build timeline from doc creation dates
  const timelineItems = useMemo(() => {
    const items = vault.map(v => ({
      ...v,
      sortDate: v.dateCreated.split(':')[0],
      displayDate: v.dateCreated.includes(':') ? v.dateCreated.split(':')[0] + ' – ' + v.dateCreated.split(':')[1] : v.dateCreated,
    })).sort((a, b) => a.sortDate.localeCompare(b.sortDate));
    return items;
  }, [vault]);

  // Key events to overlay
  const KEY_EVENTS = [
    { date: '2021-03', label: 'MSA Executed', type: 'contract' },
    { date: '2022-05', label: 'Apex Ventures Created', type: 'fraud' },
    { date: '2022-06', label: 'First Wire Transfer', type: 'fraud' },
    { date: '2023-09', label: 'CEO Learns of Shortfall', type: 'fraud' },
    { date: '2023-10', label: 'Board Meeting — False Projections', type: 'fraud' },
    { date: '2024-09', label: 'Last Wire Transfer', type: 'fraud' },
    { date: '2026-01', label: 'Complaint Filed', type: 'litigation' },
    { date: '2026-04', label: 'Discovery Ongoing', type: 'litigation' },
  ];

  const typeColors = {
    Contract: '#3B82F6', Financial: '#F59E0B', Corporate: '#A855F7',
    Communications: '#C23030', Testimony: ev.teal, Expert: '#06B6D4',
    Pleading: '#6E7D9E', Discovery: '#4A5A80', Order: '#1B7A4A', Log: '#6E7D9E',
  };

  return (
    <div>
      {/* AI insight */}
      <div style={ev.card}>
        <div style={{ padding: '12px 16px', background: ev.tealBg, fontSize: '12px', color: T.color.text.secondary, lineHeight: 1.5 }}>
          <div style={{ fontSize: '10px', fontWeight: 600, color: ev.teal, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '4px' }}>◆ AI Timeline Analysis</div>
          Critical gap identified: No documentary evidence exists for Q3 2022 (July–September). Apex Ventures was incorporated May 26, 2022 and the first wire transfer occurred June 1 — but the next documented transfer isn't until Q4. This gap may indicate missing or destroyed records. Recommend supplemental production request targeting this period.
        </div>
      </div>

      {/* Key events bar */}
      <div style={ev.card}>
        <div style={ev.cardH}><span>Key Case Events</span></div>
        <div style={{ padding: '12px 16px', display: 'flex', gap: '0', position: 'relative' }}>
          {KEY_EVENTS.map((e, i) => {
            const color = e.type === 'fraud' ? '#C23030' : e.type === 'litigation' ? '#3B82F6' : ev.teal;
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px', position: 'relative' }}>
                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: color, zIndex: 1 }} />
                {i < KEY_EVENTS.length - 1 && <div style={{ position: 'absolute', top: '3px', left: '50%', width: '100%', height: '2px', background: T.color.border.light }} />}
                <span style={{ fontSize: '8px', fontFamily: T.font.mono, color: T.color.text.tertiary }}>{e.date}</span>
                <span style={{ fontSize: '9px', fontWeight: 600, color: color, textAlign: 'center', lineHeight: 1.2 }}>{e.label}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* Timeline items */}
      <div style={ev.card}>
        <div style={ev.cardH}><span>Evidence by Date Created</span><span style={{ fontSize: '10px', color: T.color.text.tertiary }}>{timelineItems.length} items</span></div>
        {timelineItems.map((item, i) => {
          const color = typeColors[item.type] || T.color.text.tertiary;
          const isHovered = hoveredItem === i;
          return (
            <div key={item.id} style={{ padding: '8px 16px', borderBottom: `1px solid ${T.color.border.light}`, display: 'flex', gap: '12px', alignItems: 'flex-start', background: isHovered ? T.color.bg.hover : 'transparent', cursor: 'pointer' }}
              onMouseEnter={() => setHoveredItem(i)} onMouseLeave={() => setHoveredItem(null)}>
              {/* Date */}
              <div style={{ minWidth: '90px' }}>
                <div style={{ fontSize: '10px', fontFamily: T.font.mono, fontWeight: 600, color: T.color.text.tertiary }}>{item.displayDate}</div>
                <div style={{ fontSize: '9px', color: T.color.text.muted || T.color.text.tertiary, marginTop: '1px' }}>Collected {item.dateCollected}</div>
              </div>
              {/* Type indicator */}
              <div style={{ width: '3px', minHeight: '32px', borderRadius: '2px', background: color, flexShrink: 0 }} />
              {/* Content */}
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '2px' }}>
                  {item.hotDoc && <span style={{ fontSize: '10px' }}></span>}
                  <span style={{ fontWeight: 600, fontSize: '12px', color: T.color.text.primary }}>{item.name}</span>
                </div>
                <div style={{ display: 'flex', gap: '8px', fontSize: '10px', color: T.color.text.tertiary }}>
                  <span style={{ color }}>{item.type}</span>
                  <span>{item.custodian.split('(')[0].trim()}</span>
                  <span>{item.pages} pp</span>
                  <span style={{ fontFamily: T.font.mono }}>{item.bates.length > 14 ? item.bates.slice(0,14)+'…' : item.bates}</span>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                <div style={{ width: '28px', height: '4px', borderRadius: '2px', background: T.color.border.light }}>
                  <div style={{ width: `${item.relevance}%`, height: '100%', borderRadius: '2px', background: item.relevance >= 85 ? T.color.status.active : T.color.status.warning }} />
                </div>
                <span style={{ fontSize: '9px', fontFamily: T.font.mono, color: T.color.text.tertiary }}>{item.relevance}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { EvidenceSearch, EvidenceTAR, EvidenceTimeline });