// RESEARCH PLATFORM — Citator (Shepard-style treatment analysis)
const T3 = window.ArbiterTokens;

function ResearchCitator({ data }) {
  const rs = window.__rs;
  const c = data.citator;
  const total = Object.values(c.focal.treatments).reduce((a, b) => a + b, 0);

  const overallStyle = c.focal.overallSignal === 'positive' ? rs.signalPositive
    : c.focal.overallSignal === 'caution' ? rs.signalCaution
    : c.focal.overallSignal === 'negative' ? rs.signalNegative
    : rs.signalNeutral;

  const treatmentColor = (t) => {
    const map = {
      'followed': { bg: 'rgba(27,122,74,0.1)', color: '#1B7A4A' },
      'clarified': { bg: rs.indigoBg, color: rs.indigo },
      'distinguished': { bg: rs.amberBg, color: rs.amber },
      'limited': { bg: rs.amberBg, color: rs.amber },
      'partially abrogated': { bg: 'rgba(194,48,48,0.12)', color: '#C23030' },
      'overruled': { bg: rs.violetBg, color: rs.violet },
      'criticized': { bg: 'rgba(194,48,48,0.1)', color: '#C23030' },
    };
    return map[t] || rs.signalNeutral;
  };

  const severityColor = (s) => s === 'negative' ? '#C23030' : s === 'positive' ? '#1B7A4A' : '#6E7D9E';

  return (
    <div>
      {/* Focal case summary card */}
      <div style={{ ...rs.card, padding: 0 }}>
        <div style={{ padding: '16px 20px', display: 'flex', gap: '24px', alignItems: 'center', borderBottom: `1px solid ${T3.color.border.light}` }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em', color: T3.color.text.tertiary, marginBottom: '4px' }}>Focal authority</div>
            <div style={{ fontSize: '16px', fontWeight: 700, color: T3.color.text.primary, marginBottom: '4px' }}>{c.focal.cite}</div>
            <div style={{ fontSize: '12px', color: T3.color.text.secondary, lineHeight: 1.55, maxWidth: '720px' }}>{c.focal.summary}</div>
          </div>
          <div style={{ textAlign: 'center', minWidth: '140px' }}>
            <div style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em', color: T3.color.text.tertiary, marginBottom: '6px' }}>Overall signal</div>
            <div style={{ ...rs.pill, ...overallStyle, fontSize: '14px', fontWeight: 700, padding: '6px 16px' }}>{c.focal.overallSignal.toUpperCase()}</div>
            <div style={{ fontSize: '11px', color: T3.color.text.tertiary, marginTop: '6px', fontFamily: T3.font.mono }}>{total.toLocaleString()} treatments</div>
          </div>
        </div>

        {/* Treatment bar chart */}
        <div style={{ padding: '20px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px' }}>
          {[
            { label: 'Positive', key: 'positive', color: '#1B7A4A', bg: 'rgba(27,122,74,0.08)' },
            { label: 'Distinguished', key: 'distinguished', color: rs.amber, bg: rs.amberBg },
            { label: 'Negative', key: 'negative', color: '#C23030', bg: 'rgba(194,48,48,0.08)' },
            { label: 'Overruled in part', key: 'overruledInPart', color: rs.violet, bg: rs.violetBg },
            { label: 'Superseded', key: 'supersededByStatute', color: '#6E7D9E', bg: 'rgba(110,125,158,0.08)' },
          ].map(t => {
            const count = c.focal.treatments[t.key] || 0;
            const pct = total === 0 ? 0 : (count / total) * 100;
            return (
              <div key={t.key} style={{ padding: '14px', borderRadius: '8px', background: t.bg, border: `1px solid ${t.color}25` }}>
                <div style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em', color: t.color, fontWeight: 700 }}>{t.label}</div>
                <div style={{ fontSize: '24px', fontWeight: 700, color: t.color, marginTop: '4px', fontFamily: T3.font.mono }}>{count.toLocaleString()}</div>
                <div style={{ height: '3px', background: 'rgba(0,0,0,0.06)', borderRadius: '2px', marginTop: '6px', overflow: 'hidden' }}>
                  <div style={{ width: `${pct}%`, height: '100%', background: t.color }} />
                </div>
                <div style={{ fontSize: '10px', color: t.color, marginTop: '4px', fontFamily: T3.font.mono }}>{pct.toFixed(1)}%</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: '16px' }}>
        {/* Treatments table */}
        <div style={rs.card}>
          <div style={rs.cardH}>Citing references — {c.treatments.length} shown (most significant first)</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={rs.th}>Citing case</th>
                <th style={rs.th}>Court · Year</th>
                <th style={rs.th}>Weight</th>
                <th style={rs.th}>Treatment</th>
                <th style={rs.th}></th>
              </tr>
            </thead>
            <tbody>
              {c.treatments.map(t => {
                const tc = treatmentColor(t.treatment);
                return (
                  <tr key={t.id} style={t.flagged ? { background: 'rgba(194,48,48,0.03)' } : undefined}>
                    <td style={{ ...rs.td, maxWidth: '340px' }}>
                      <div style={{ fontSize: '12px', fontWeight: 600, color: T3.color.text.primary }}>{t.citingCase}</div>
                      <div style={{ fontSize: '11px', color: T3.color.text.secondary, marginTop: '4px', lineHeight: 1.5 }}>{t.note}</div>
                    </td>
                    <td style={{ ...rs.td, color: T3.color.text.secondary }}>{t.court} · {t.year}</td>
                    <td style={rs.td}>
                      <span style={{ ...rs.tag, background: t.weight === 'binding' ? rs.tealBg : T3.color.bg.secondary, color: t.weight === 'binding' ? rs.teal : T3.color.text.secondary }}>{t.weight}</span>
                    </td>
                    <td style={rs.td}><span style={{ ...rs.tag, background: tc.bg, color: tc.color }}>{t.treatment}</span></td>
                    <td style={rs.td}>
                      {t.flagged && <span style={{ ...rs.tag, ...rs.signalNegative }}><Icons.Alert size={11}/></span>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {/* Timeline history */}
        <div style={rs.card}>
          <div style={rs.cardH}>Treatment timeline</div>
          <div style={{ padding: '12px 16px' }}>
            {c.history.map((h, i) => (
              <div key={i} style={{ display: 'flex', gap: '12px', padding: '8px 0', borderBottom: i < c.history.length - 1 ? `1px solid ${T3.color.border.light}` : 'none' }}>
                <div style={{ position: 'relative', minWidth: '12px' }}>
                  <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: severityColor(h.severity), marginTop: '4px' }} />
                  {i < c.history.length - 1 && (
                    <span style={{ position: 'absolute', top: '16px', left: '3px', width: '2px', height: 'calc(100% + 4px)', background: T3.color.border.light }} />
                  )}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '10px', fontFamily: T3.font.mono, color: T3.color.text.tertiary, letterSpacing: '0.05em' }}>{h.date}</div>
                  <div style={{ fontSize: '12px', color: T3.color.text.primary, marginTop: '2px' }}>{h.event}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.ResearchCitator = ResearchCitator;