// RESEARCH PLATFORM — Analytics + Activity tabs
const T5 = window.ArbiterTokens;

function ResearchAnalytics({ data }) {
  const rs = window.__rs;
  const a = data.analytics;
  const maxDay = Math.max(...a.volumeByDay);
  const totalVol = a.volumeByDay.reduce((s, v) => s + v, 0);
  const maxTopic = Math.max(...a.topTopics.map(t => t.queries));

  return (
    <div>
      {/* Row 1 — volume chart + practice mix */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.8fr 1fr', gap: '16px', marginBottom: '16px' }}>
        <div style={rs.card}>
          <div style={rs.cardH}>
            <span>Research volume — last 14 days</span>
            <span style={{ fontSize: '10px', color: T5.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{totalVol} queries · avg {Math.round(totalVol / a.volumeByDay.length)}/day</span>
          </div>
          <div style={{ padding: '20px 16px 14px', display: 'flex', gap: '6px', alignItems: 'flex-end', height: '180px' }}>
            {a.volumeByDay.map((v, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                <span style={{ fontSize: '10px', fontFamily: T5.font.mono, color: T5.color.text.tertiary }}>{v}</span>
                <div style={{ width: '100%', height: `${(v / maxDay) * 140}px`, background: `linear-gradient(180deg, ${rs.indigoLight} 0%, ${rs.indigo} 100%)`, borderRadius: '3px 3px 0 0' }} />
                <span style={{ fontSize: '9px', color: T5.color.text.tertiary, fontFamily: T5.font.mono }}>D-{a.volumeByDay.length - 1 - i}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={rs.card}>
          <div style={rs.cardH}>By practice area</div>
          <div style={{ padding: '14px 16px' }}>
            {a.byPractice.map(p => (
              <div key={p.practice} style={{ padding: '8px 0', borderBottom: `1px solid ${T5.color.border.light}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', fontSize: '12px' }}>
                  <span style={{ color: T5.color.text.primary, fontWeight: 500 }}>{p.practice}</span>
                  <span style={{ fontFamily: T5.font.mono, color: T5.color.text.secondary, fontSize: '11px' }}>{p.pct}%</span>
                </div>
                <div style={{ height: '6px', background: T5.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                  <div style={{ width: `${p.pct}%`, height: '100%', background: rs.indigo }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Row 2 — top topics + by attorney */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '16px' }}>
        <div style={rs.card}>
          <div style={rs.cardH}>Top topics — last 30 days</div>
          <div style={{ padding: '8px 16px 14px' }}>
            {a.topTopics.map(t => (
              <div key={t.topic} style={{ padding: '8px 0', borderBottom: `1px solid ${T5.color.border.light}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '4px' }}>
                  <span style={{ fontSize: '12px', color: T5.color.text.primary, fontWeight: 500 }}>{t.topic}</span>
                  <span style={{ display: 'flex', gap: '10px' }}>
                    <span style={{ fontFamily: T5.font.mono, color: T5.color.text.secondary, fontSize: '11px' }}>{t.queries}</span>
                    <span style={{ fontSize: '10px', fontWeight: 700, color: t.change >= 0 ? '#1B7A4A' : '#C23030', minWidth: '34px', textAlign: 'right' }}>{t.change >= 0 ? '↑' : '↓'}{Math.abs(t.change)}%</span>
                  </span>
                </div>
                <div style={{ height: '4px', background: T5.color.border.light, borderRadius: '2px', overflow: 'hidden' }}>
                  <div style={{ width: `${(t.queries / maxTopic) * 100}%`, height: '100%', background: rs.indigo }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={rs.card}>
          <div style={rs.cardH}>By attorney</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={rs.th}>Attorney</th>
                <th style={{ ...rs.th, textAlign: 'right' }}>Hours</th>
                <th style={{ ...rs.th, textAlign: 'right' }}>Queries</th>
                <th style={{ ...rs.th, textAlign: 'right' }}>Saved / hr</th>
                <th style={rs.th}>Load</th>
              </tr>
            </thead>
            <tbody>
              {a.byAttorney.map(at => {
                const maxH = Math.max(...a.byAttorney.map(x => x.hours));
                return (
                  <tr key={at.attorney}>
                    <td style={{ ...rs.td, fontWeight: 600, color: T5.color.text.primary }}>{at.attorney}</td>
                    <td style={{ ...rs.td, textAlign: 'right', fontFamily: T5.font.mono, color: T5.color.text.primary }}>{at.hours}</td>
                    <td style={{ ...rs.td, textAlign: 'right', fontFamily: T5.font.mono, color: T5.color.text.secondary }}>{at.queries}</td>
                    <td style={{ ...rs.td, textAlign: 'right', fontFamily: T5.font.mono, color: T5.color.text.secondary }}>{at.savedPerHr}</td>
                    <td style={rs.td}>
                      <div style={{ width: '120px', height: '4px', background: T5.color.border.light, borderRadius: '2px', overflow: 'hidden' }}>
                        <div style={{ width: `${(at.hours / maxH) * 100}%`, height: '100%', background: rs.indigo }} />
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function ResearchActivity({ data }) {
  const rs = window.__rs;
  const sevStyle = (s) => s === 'warn' ? { bg: rs.amberBg, color: rs.amber, dot: rs.amber }
    : s === 'error' ? { bg: 'rgba(194,48,48,0.08)', color: '#C23030', dot: '#C23030' }
    : { bg: rs.indigoBg, color: rs.indigo, dot: rs.indigo };

  return (
    <div style={rs.card}>
      <div style={rs.cardH}>
        <span>Activity log — {data.activity.length} events</span>
        <div style={{ display: 'flex', gap: '6px' }}>
          <button style={rs.btnSecondary}>Export CSV</button>
          <button style={rs.btnSecondary}>Filter</button>
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th style={rs.th}>Time</th>
            <th style={rs.th}>Actor</th>
            <th style={rs.th}>Action</th>
            <th style={rs.th}>Target</th>
            <th style={rs.th}>Matter</th>
            <th style={rs.th}>Severity</th>
          </tr>
        </thead>
        <tbody>
          {data.activity.map(ev => {
            const ss = sevStyle(ev.severity);
            return (
              <tr key={ev.id}>
                <td style={{ ...rs.td, fontFamily: T5.font.mono, color: T5.color.text.tertiary, fontSize: '11px' }}>{ev.time}</td>
                <td style={{ ...rs.td, color: T5.color.text.primary, fontWeight: 500 }}>
                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: ss.dot, marginRight: '8px' }} />
                  {ev.actor}
                </td>
                <td style={{ ...rs.td, color: T5.color.text.secondary }}>{ev.action}</td>
                <td style={{ ...rs.td, color: T5.color.text.primary, fontWeight: 500 }}>{ev.target}</td>
                <td style={{ ...rs.td, color: T5.color.text.secondary, fontSize: '11px' }}>{ev.matter}</td>
                <td style={rs.td}><span style={{ ...rs.tag, background: ss.bg, color: ss.color }}>{ev.severity}</span></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.ResearchAnalytics = ResearchAnalytics;
window.ResearchActivity = ResearchActivity;