// MOTIONS PLATFORM — Oral Arguments + Analytics
const Tmno = window.ArbiterTokens;

function MotionsOralArgs({ data }) {
  const mn = window.__mn;
  const oa = data.oralArgs;
  const ready = oa.filter(x => x.readiness === 'ready').length;
  const onTrack = oa.filter(x => x.readiness === 'on-track').length;

  const readinessColor = (r) => ({
    ready:      { bg: mn.emeraldBg, color: mn.emerald },
    'on-track': { bg: mn.plumBg, color: mn.plum },
    'at-risk':  { bg: mn.amberBg, color: mn.amber },
  }[r] || { bg: Tmno.color.bg.secondary, color: Tmno.color.text.secondary });

  return (
    <div>
      <div style={mn.stripKpi}>
        <div style={mn.stat}><span style={mn.statLabel}>Upcoming oral args</span><span style={mn.statValue}>{oa.length}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Ready</span><span style={{ ...mn.statValue, color: mn.emerald }}>{ready}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>On track</span><span style={{ ...mn.statValue, color: mn.plum }}>{onTrack}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Moots scheduled</span><span style={mn.statValue}>{oa.reduce((s, x) => s + x.mootsScheduled, 0)}</span><span style={{ ...mn.statDelta, color: Tmno.color.text.tertiary }}>{oa.reduce((s, x) => s + x.mootsCompleted, 0)} completed</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Avg prep completeness</span><span style={mn.statValue}>{Math.round(oa.reduce((s, x) => s + x.preparationPct, 0) / oa.length)}%</span></div>
      </div>

      <div style={mn.cardGrid(400)}>
        {oa.map(a => {
          const rc = readinessColor(a.readiness);
          return (
            <div key={a.id} style={{ ...mn.card, marginBottom: 0 }}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${Tmno.color.border.light}`, background: `linear-gradient(135deg, ${rc.bg} 0%, transparent 100%)` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                  <span style={{ ...mn.tag, background: mn.plumBg, color: mn.plum, fontSize: '10px', padding: '3px 10px', fontFamily: Tmno.font.mono }}>{a.motionId}</span>
                  <span style={{ ...mn.tag, background: rc.bg, color: rc.color }}>{a.readiness}</span>
                </div>
                <div style={{ fontSize: '13px', fontWeight: 700, color: Tmno.color.text.primary }}>{a.caption}</div>
                <div style={{ fontSize: '11px', color: Tmno.color.text.tertiary, marginTop: '2px' }}>Hearing {a.date} · argued by {a.argueBy}</div>
              </div>
              <div style={{ padding: '14px' }}>
                <div style={{ marginBottom: '10px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '10px', color: Tmno.color.text.tertiary, marginBottom: '4px' }}>
                    <span style={{ textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Prep completeness</span>
                    <span style={{ fontFamily: Tmno.font.mono, color: rc.color, fontWeight: 700 }}>{a.preparationPct}%</span>
                  </div>
                  <div style={{ height: '8px', background: Tmno.color.border.light, borderRadius: '4px', overflow: 'hidden' }}>
                    <div style={{ width: `${a.preparationPct}%`, height: '100%', background: rc.color }} />
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(74px, 100%), 1fr))', gap: '8px', paddingTop: '10px', borderTop: `1px solid ${Tmno.color.border.light}` }}>
                  <div>
                    <div style={{ fontSize: '9px', color: Tmno.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Moots</div>
                    <div style={{ fontSize: '14px', fontWeight: 700, color: mn.plum, fontFamily: Tmno.font.mono }}>{a.mootsCompleted}/{a.mootsScheduled}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: '9px', color: Tmno.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Notes</div>
                    <div style={{ fontSize: '14px', fontWeight: 700, color: Tmno.color.text.primary, fontFamily: Tmno.font.mono }}>{a.notesCount}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: '9px', color: Tmno.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Witnesses</div>
                    <div style={{ fontSize: '14px', fontWeight: 700, color: Tmno.color.text.primary, fontFamily: Tmno.font.mono }}>{a.witnessesConfirmed}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: '9px', color: Tmno.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Hearing</div>
                    <div style={{ fontSize: '11px', fontWeight: 700, color: mn.amber, fontFamily: Tmno.font.mono }}>{a.date}</div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MotionsAnalytics({ data }) {
  const mn = window.__mn;
  const a = data.analytics;
  const maxFiled = Math.max(...a.monthlyTrend.map(x => x.filed));

  return (
    <div>
      <div style={mn.stripAuto(200)}>
        <div style={mn.stat}><span style={mn.statLabel}>Firm YTD win rate</span><span style={{ ...mn.statValue, color: mn.winColor(data.kpis.avgWinRate) }}>{data.kpis.avgWinRate}%</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Filed YTD</span><span style={mn.statValue}>{a.monthlyTrend.reduce((s, x) => s + x.filed, 0)}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Granted YTD</span><span style={{ ...mn.statValue, color: mn.emerald }}>{a.monthlyTrend.reduce((s, x) => s + x.granted, 0)}</span></div>
        <div style={mn.stat}><span style={mn.statLabel}>Attorneys tracked</span><span style={mn.statValue}>{a.winRateByAttorney.length}</span></div>
      </div>

      {/* Monthly trend */}
      <div style={mn.card}>
        <div style={mn.cardH}>
          <span>12-month filings &amp; rulings</span>
          <div style={{ display: 'flex', gap: '12px', fontSize: '10px' }}>
            <span style={{ color: mn.slate }}>■ Filed</span>
            <span style={{ color: mn.plum }}>■ Granted</span>
          </div>
        </div>
        <div style={{ padding: '18px 16px 14px', display: 'flex', gap: '8px', alignItems: 'flex-end', height: '180px' }}>
          {a.monthlyTrend.map((t, i) => {
            const isLast = i === a.monthlyTrend.length - 1;
            return (
              <div key={t.m} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                <div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '140px', width: '100%', justifyContent: 'center' }}>
                  <div style={{ width: '40%', height: `${(t.filed / maxFiled) * 100}%`, background: mn.slate, opacity: 0.6, borderRadius: '2px 2px 0 0' }} title={`Filed: ${t.filed}`} />
                  <div style={{ width: '40%', height: `${(t.granted / maxFiled) * 100}%`, background: mn.plum, borderRadius: '2px 2px 0 0', opacity: isLast ? 1 : 0.85 }} title={`Granted: ${t.granted}`} />
                </div>
                <span style={{ fontSize: '9px', color: Tmno.color.text.tertiary, fontFamily: Tmno.font.mono }}>{t.m}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div style={mn.split(360)}>
        {/* Win rate by type */}
        <div style={mn.card}>
          <div style={mn.cardH}>Win rate by motion type</div>
          <div style={mn.tableWrap}>
          <table style={{ ...mn.tableFixed, minWidth: '520px' }}>
            <thead>
              <tr>
                <th style={mn.th}>Type</th>
                <th style={{ ...mn.th, textAlign: 'right' }}>Filed</th>
                <th style={mn.th}>Win rate</th>
              </tr>
            </thead>
            <tbody>
              {a.winRateByType.map(r => {
                const ts = mn.typeStyle(r.type);
                return (
                  <tr key={r.type}>
                    <td style={mn.td}><span style={{ ...mn.tag, background: ts.bg, color: ts.color }}>{ts.icon} {r.type}</span></td>
                    <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmno.font.mono, fontWeight: 700 }}>{r.filed}</td>
                    <td style={mn.td}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <div style={{ flex: 1, height: '5px', background: Tmno.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                          <div style={{ width: `${r.winRate}%`, height: '100%', background: mn.winColor(r.winRate) }} />
                        </div>
                        <span style={{ fontFamily: Tmno.font.mono, color: mn.winColor(r.winRate), fontWeight: 700, minWidth: '42px', textAlign: 'right' }}>{r.winRate}%</span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          </div>
        </div>

        {/* Win rate by attorney */}
        <div style={mn.card}>
          <div style={mn.cardH}>Win rate by attorney</div>
          <div style={mn.tableWrap}>
          <table style={{ ...mn.tableFixed, minWidth: '520px' }}>
            <thead>
              <tr>
                <th style={mn.th}>Attorney</th>
                <th style={{ ...mn.th, textAlign: 'right' }}>Motions</th>
                <th style={{ ...mn.th, textAlign: 'right' }}>G/P/D</th>
                <th style={mn.th}>Win rate</th>
              </tr>
            </thead>
            <tbody>
              {a.winRateByAttorney.map(r => (
                <tr key={r.attorney}>
                  <td style={{ ...mn.td, fontWeight: 600, color: Tmno.color.text.primary }}>{r.attorney}</td>
                  <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmno.font.mono, fontWeight: 700 }}>{r.motions}</td>
                  <td style={{ ...mn.td, textAlign: 'right', fontFamily: Tmno.font.mono, fontSize: '11px' }}>
                    <span style={{ color: mn.emerald }}>{r.granted}</span> / <span style={{ color: mn.teal }}>{r.partial}</span> / <span style={{ color: mn.crimson }}>{r.denied}</span>
                  </td>
                  <td style={mn.td}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                      <div style={{ flex: 1, height: '5px', background: Tmno.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                        <div style={{ width: `${r.winRate}%`, height: '100%', background: mn.winColor(r.winRate) }} />
                      </div>
                      <span style={{ fontFamily: Tmno.font.mono, color: mn.winColor(r.winRate), fontWeight: 700, minWidth: '42px', textAlign: 'right' }}>{r.winRate}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MotionsOralArgs = MotionsOralArgs;
window.MotionsAnalytics = MotionsAnalytics;