// DISCOVERY PLATFORM — Depositions + Disputes + Protocols + Activity
const Tdds = window.ArbiterTokens;

function DiscoveryDepositions({ data }) {
  const dc = window.__dc;
  const scheduled = data.depositions.filter(d => d.status.startsWith('Scheduled'));
  const taken = data.depositions.filter(d => d.status === 'Taken');
  const totalExhibits = data.depositions.reduce((s, d) => s + d.exhibits, 0);
  const totalPages = taken.reduce((s, d) => s + (d.transcriptPages || 0), 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={dc.stat}><span style={dc.statLabel}>Scheduled</span><span style={{ ...dc.statValue, color: dc.cobalt }}>{scheduled.length}</span><span style={{ ...dc.statDelta, color: Tdds.color.text.tertiary }}>upcoming</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Taken</span><span style={{ ...dc.statValue, color: dc.emerald }}>{taken.length}</span><span style={{ ...dc.statDelta, color: Tdds.color.text.tertiary }}>{totalPages.toLocaleString()} transcript pages</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Exhibits prepared</span><span style={dc.statValue}>{totalExhibits}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>In-person</span><span style={dc.statValue}>{data.depositions.filter(d => d.location.includes('in-person')).length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Cross-border</span><span style={{ ...dc.statValue, color: dc.violet }}>{data.depositions.filter(d => d.location.includes('Singapore') || d.location.includes('virtual')).length}</span></div>
      </div>

      <div style={dc.card}>
        <div style={dc.cardH}>
          <span>Depositions — {data.depositions.length}</span>
          <div style={{ display: 'flex', gap: '6px' }}>
            <button style={dc.btnSecondary}>Deposition kit</button>
            <button style={dc.btnPrimary}>+ Schedule</button>
          </div>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={dc.th}>ID</th>
              <th style={dc.th}>Witness</th>
              <th style={dc.th}>Matter</th>
              <th style={dc.th}>Role / Topic</th>
              <th style={dc.th}>Scheduled</th>
              <th style={dc.th}>Location</th>
              <th style={{ ...dc.th, textAlign: 'right' }}>Exhibits</th>
              <th style={{ ...dc.th, textAlign: 'right' }}>Pages</th>
              <th style={dc.th}>Noticed by</th>
              <th style={dc.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.depositions.map(d => {
              const ss = dc.statusColor(d.status.startsWith('Scheduled') ? 'Active' : d.status === 'Taken' ? 'Complete ok' : d.status);
              return (
                <tr key={d.id}>
                  <td style={{ ...dc.td, fontFamily: Tdds.font.mono, color: dc.cobalt, fontWeight: 700, fontSize: '11px' }}>{d.id}</td>
                  <td style={{ ...dc.td, fontWeight: 600, color: Tdds.color.text.primary, maxWidth: '220px' }}>{d.witness}</td>
                  <td style={{ ...dc.td, color: Tdds.color.text.secondary, fontSize: '11px', maxWidth: '170px' }}>{d.matter}</td>
                  <td style={{ ...dc.td, color: Tdds.color.text.secondary, fontSize: '11px', maxWidth: '220px' }}>{d.role}</td>
                  <td style={{ ...dc.td, fontFamily: Tdds.font.mono, fontSize: '11px', color: Tdds.color.text.secondary }}>{d.scheduled}</td>
                  <td style={{ ...dc.td, fontSize: '11px', color: Tdds.color.text.secondary }}>{d.location}</td>
                  <td style={{ ...dc.td, textAlign: 'right', fontFamily: Tdds.font.mono, color: Tdds.color.text.primary, fontWeight: 600 }}>{d.exhibits}</td>
                  <td style={{ ...dc.td, textAlign: 'right', fontFamily: Tdds.font.mono, color: Tdds.color.text.secondary }}>{d.transcriptPages ? d.transcriptPages.toLocaleString() : '—'}</td>
                  <td style={{ ...dc.td, fontSize: '11px', color: Tdds.color.text.secondary }}>{d.noticedBy}</td>
                  <td style={dc.td}><span style={{ ...dc.tag, background: ss.bg, color: ss.color }}>{d.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function DiscoveryDisputes({ data }) {
  const dc = window.__dc;
  const byExposure = (e) => e.startsWith('High') ? dc.crimson : e.startsWith('Medium') ? dc.amber : dc.slate;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={dc.stat}><span style={dc.statLabel}>Open disputes</span><span style={{ ...dc.statValue, color: dc.crimson }}>{data.disputes.length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Motions to compel</span><span style={{ ...dc.statValue, color: dc.crimson }}>{data.disputes.filter(d => d.type.includes('Compel')).length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Sanctions motions</span><span style={{ ...dc.statValue, color: dc.crimson }}>{data.disputes.filter(d => d.type.includes('Sanctions')).length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>High exposure</span><span style={{ ...dc.statValue, color: dc.crimson }}>{data.disputes.filter(d => d.exposure.startsWith('High')).length}</span></div>
      </div>

      <div style={dc.card}>
        <div style={dc.cardH}>
          <span>Active discovery disputes — {data.disputes.length}</span>
          <button style={dc.btnPrimary}>+ Open dispute</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={dc.th}>Dispute</th>
              <th style={dc.th}>Matter</th>
              <th style={dc.th}>Type</th>
              <th style={dc.th}>Subject</th>
              <th style={dc.th}>Opposing party</th>
              <th style={dc.th}>Filed</th>
              <th style={dc.th}>Hearing</th>
              <th style={dc.th}>Owner</th>
              <th style={dc.th}>Exposure</th>
              <th style={dc.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.disputes.map(d => {
              const expColor = byExposure(d.exposure);
              return (
                <tr key={d.id}>
                  <td style={{ ...dc.td, fontFamily: Tdds.font.mono, color: dc.crimson, fontWeight: 700, fontSize: '11px' }}>{d.id}</td>
                  <td style={{ ...dc.td, color: Tdds.color.text.primary, fontWeight: 500, maxWidth: '170px', fontSize: '11px' }}>{d.matter}</td>
                  <td style={dc.td}><span style={{ ...dc.tag, background: dc.crimsonBg, color: dc.crimson }}>{d.type}</span></td>
                  <td style={{ ...dc.td, color: Tdds.color.text.secondary, fontSize: '11px', maxWidth: '280px' }}>{d.subject}</td>
                  <td style={{ ...dc.td, color: Tdds.color.text.secondary, fontSize: '11px' }}>{d.opposingParty}</td>
                  <td style={{ ...dc.td, fontFamily: Tdds.font.mono, fontSize: '11px', color: Tdds.color.text.tertiary }}>{d.filed}</td>
                  <td style={{ ...dc.td, fontFamily: Tdds.font.mono, fontSize: '11px', color: dc.amber, fontWeight: 600 }}>{d.hearing}</td>
                  <td style={{ ...dc.td, color: Tdds.color.text.secondary }}>{d.ownedBy}</td>
                  <td style={{ ...dc.td, color: expColor, fontWeight: 600, fontSize: '11px' }}>{d.exposure}</td>
                  <td style={dc.td}><span style={{ ...dc.tag, background: dc.amberBg, color: dc.amber }}>{d.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Protocols strip */}
      <div style={dc.card}>
        <div style={dc.cardH}>
          <span>Active ESI protocols — {data.protocols.length}</span>
          <button style={dc.btnSecondary}>+ New protocol</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: '0' }}>
          {data.protocols.map(p => (
            <div key={p.id} style={{ padding: '14px 16px', borderRight: `1px solid ${Tdds.color.border.light}`, borderBottom: `1px solid ${Tdds.color.border.light}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '6px' }}>
                <span style={{ fontSize: '12px', fontFamily: Tdds.font.mono, color: dc.cobalt, fontWeight: 700 }}>{p.id}</span>
                <span style={{ ...dc.tag, background: p.status.includes('court-ordered') ? dc.crimsonBg : dc.emeraldBg, color: p.status.includes('court-ordered') ? dc.crimson : dc.emerald }}>{p.status}</span>
              </div>
              <div style={{ fontSize: '13px', fontWeight: 700, color: Tdds.color.text.primary, marginBottom: '4px' }}>{p.title}</div>
              <div style={{ fontSize: '11px', color: Tdds.color.text.tertiary, marginBottom: '6px' }}>{p.matter} · executed {p.executedDate}</div>
              <div style={{ fontSize: '11px', color: Tdds.color.text.secondary, lineHeight: 1.55 }}>{p.scope}</div>
              <div style={{ fontSize: '10px', color: Tdds.color.text.tertiary, marginTop: '6px' }}>Source: {p.updatedBy}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DiscoveryActivity({ data }) {
  const dc = window.__dc;
  const sev = (s) => s === 'error' ? { bg: dc.crimsonBg, color: dc.crimson }
    : s === 'warn' ? { bg: dc.amberBg, color: dc.amber }
    : { bg: dc.emeraldBg, color: dc.emerald };

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

window.DiscoveryDepositions = DiscoveryDepositions;
window.DiscoveryDisputes = DiscoveryDisputes;
window.DiscoveryActivity = DiscoveryActivity;