// MOTIONS PLATFORM — Judges + Opposing Counsel
const Tmnj = window.ArbiterTokens;

function MotionsJudges({ data }) {
  const mn = window.__mn;
  const j = data.judges;
  const avgGrant = Math.round(j.reduce((s, x) => s + x.grantRate, 0) / j.length);
  const avgDays = Math.round(j.reduce((s, x) => s + x.avgDaysToRuling, 0) / j.length);

  const tendencyStyle = (t) => ({
    'pro-movant':    { bg: mn.emeraldBg, color: mn.emerald },
    'pro-defendant': { bg: mn.cobaltBg, color: mn.cobalt },
    'balanced':      { bg: Tmnj.color.bg.secondary, color: Tmnj.color.text.secondary },
  }[t] || { bg: Tmnj.color.bg.secondary, color: Tmnj.color.text.secondary });

  return (
    <div>
      <div style={{ ...mn.card, borderLeft: `3px solid ${mn.plum}`, background: mn.plumBg }}>
        <div style={{ padding: '12px 16px' }}>
          <div style={{ fontSize: '12px', fontWeight: 700, color: mn.plum, textTransform: 'uppercase', letterSpacing: '0.08em' }}>◆ Judicial Intelligence — {j.length} judges analyzed</div>
          <div style={{ fontSize: '11px', color: Tmnj.color.text.secondary, marginTop: '4px', lineHeight: 1.55 }}>
            Rulings data from <b style={{ fontFamily: Tmnj.font.mono }}>{j.reduce((s, x) => s + x.opinionsAnalyzed, 0).toLocaleString()}</b> opinions across active benches. Firm win rates reflect our cases before each judge.
          </div>
        </div>
      </div>

      <div style={mn.stripKpi}>
        <div style={mn.stat}><span style={mn.statLabel}>Judges analyzed</span><span style={mn.statValue}>{j.length}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Opinions indexed</span><span style={mn.statValue}>{(j.reduce((s, x) => s + x.opinionsAnalyzed, 0) / 1000).toFixed(1)}K</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg grant rate</span><span style={{ ...mn.statValue, color: mn.tendencyColor(avgGrant) }}>{avgGrant}%</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg days to ruling</span><span style={mn.statValue}>{avgDays}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Firm win rate (avg)</span><span style={{ ...mn.statValue, color: mn.emerald }}>{Math.round(j.reduce((s, x) => s + x.firmWinRate, 0) / j.length)}%</span></div>
      </div>

      <div style={mn.cardGrid(420)}>
        {j.map(jdg => {
          const ts = tendencyStyle(jdg.tendency);
          return (
            <div key={jdg.id} style={{ ...mn.card, marginBottom: 0 }}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${Tmnj.color.border.light}`, background: `linear-gradient(135deg, ${ts.bg} 0%, transparent 100%)` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                  <span style={{ fontSize: '13px', fontWeight: 700, color: Tmnj.color.text.primary }}>{jdg.name}</span>
                  <span style={{ ...mn.tag, background: ts.bg, color: ts.color }}>{jdg.tendency}</span>
                </div>
                <div style={{ fontSize: '11px', color: Tmnj.color.text.tertiary }}>{jdg.court} · {jdg.tenure} years · {jdg.opinionsAnalyzed.toLocaleString()} opinions indexed</div>
              </div>
              <div style={{ padding: '14px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(140px, 100%), 1fr))', gap: '10px', marginBottom: '10px' }}>
                  <div style={{ padding: '8px', background: Tmnj.color.bg.secondary, borderRadius: '5px' }}>
                    <div style={{ fontSize: '9px', color: Tmnj.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Overall grant rate</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: mn.tendencyColor(jdg.grantRate), fontFamily: Tmnj.font.mono }}>{jdg.grantRate.toFixed(1)}%</div>
                  </div>
                  <div style={{ padding: '8px', background: Tmnj.color.bg.secondary, borderRadius: '5px' }}>
                    <div style={{ fontSize: '9px', color: Tmnj.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Our win rate</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: mn.winColor(jdg.firmWinRate), fontFamily: Tmnj.font.mono }}>{jdg.firmWinRate}%</div>
                  </div>
                </div>

                <div style={{ fontSize: '9px', fontWeight: 700, color: Tmnj.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '6px' }}>Motion-type grant rates</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(90px, 100%), 1fr))', gap: '6px', marginBottom: '10px' }}>
                  {[
                    { label: 'MSJ',         v: jdg.msjGrantRate },
                    { label: 'Daubert',     v: jdg.daubertGrantRate },
                    { label: 'Discovery',   v: jdg.discoveryMotionGrant },
                  ].map(x => (
                    <div key={x.label} style={{ padding: '6px 8px', background: `${mn.tendencyColor(x.v)}10`, borderRadius: '4px' }}>
                      <div style={{ fontSize: '9px', color: Tmnj.color.text.tertiary }}>{x.label}</div>
                      <div style={{ fontSize: '13px', fontWeight: 700, color: mn.tendencyColor(x.v), fontFamily: Tmnj.font.mono }}>{x.v.toFixed(1)}%</div>
                    </div>
                  ))}
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                  <span style={{ fontSize: '10px', color: Tmnj.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Avg days to ruling</span>
                  <span style={{ fontFamily: Tmnj.font.mono, fontSize: '13px', fontWeight: 700, color: jdg.avgDaysToRuling < 40 ? mn.emerald : jdg.avgDaysToRuling < 55 ? mn.plum : mn.amber }}>{jdg.avgDaysToRuling}</span>
                </div>

                <div style={{ paddingTop: '10px', borderTop: `1px solid ${Tmnj.color.border.light}`, fontSize: '11px', color: Tmnj.color.text.secondary, fontStyle: 'italic', lineHeight: 1.5 }}>“{jdg.notableNotes}”</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MotionsOpposingCounsel({ data }) {
  const mn = window.__mn;
  const oc = data.opposingCounsel;

  return (
    <div>
      <div style={mn.stripKpi}>
        <div style={mn.stat}><span style={mn.statLabel}>Opposing firms tracked</span><span style={mn.statValue}>{oc.length}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Total motions vs us</span><span style={mn.statValue}>{oc.reduce((s, x) => s + x.motionsFiledVsUs, 0)}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg our win rate</span><span style={{ ...mn.statValue, color: mn.emerald }}>{Math.round(oc.reduce((s, x) => s + x.ourWinRate, 0) / oc.length)}%</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg their win rate</span><span style={{ ...mn.statValue, color: mn.crimson }}>{Math.round(oc.reduce((s, x) => s + x.theirWinRate, 0) / oc.length)}%</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg response time</span><span style={mn.statValue}>{Math.round(oc.reduce((s, x) => s + x.avgRespTime, 0) / oc.length)} d</span></div>
      </div>

      <div style={mn.card}>
        <div style={mn.cardH}>Opposing counsel · {oc.length}</div>
        <div style={mn.tableWrap}>
        <table style={{ ...mn.tableFixed, minWidth: '1100px' }}>
          <thead>
            <tr>
              <th style={mn.th}>Firm</th>
              <th style={mn.th}>Practice</th>
              <th style={mn.th}>Typical motions</th>
              <th style={{ ...mn.th, textAlign: 'right' }}>vs Us</th>
              <th style={{ ...mn.th, textAlign: 'right' }}>Our win %</th>
              <th style={{ ...mn.th, textAlign: 'right' }}>Their win %</th>
              <th style={{ ...mn.th, textAlign: 'right' }}>Resp time</th>
              <th style={mn.th}>Notable</th>
            </tr>
          </thead>
          <tbody>
            {oc.map(c => (
              <tr key={c.id}>
                <td style={{ ...mn.td, fontWeight: 600, color: Tmnj.color.text.primary }}>{c.firm}</td>
                <td style={{ ...mn.td, color: Tmnj.color.text.secondary, fontSize: '11px' }}>{c.practice}</td>
                <td style={mn.td}>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
                    {c.typicalMotions.map(t => <span key={t} style={{ ...mn.tag, background: mn.plumBg, color: mn.plum }}>{t}</span>)}
                  </div>
                </td>
                <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmnj.font.mono, fontWeight: 700 }}>{c.motionsFiledVsUs}</td>
                <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmnj.font.mono, color: mn.winColor(c.ourWinRate), fontWeight: 700 }}>{c.ourWinRate}%</td>
                <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmnj.font.mono, color: mn.winColor(c.theirWinRate), fontWeight: 700 }}>{c.theirWinRate}%</td>
                <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmnj.font.mono, color: c.avgRespTime > 40 ? mn.amber : Tmnj.color.text.secondary }}>{c.avgRespTime}d</td>
                <td style={{ ...mn.td, color: Tmnj.color.text.secondary, fontSize: '11px', fontStyle: 'italic', maxWidth: '320px' }}>{c.notable}</td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>
    </div>
  );
}

window.MotionsJudges = MotionsJudges;
window.MotionsOpposingCounsel = MotionsOpposingCounsel;