const { useState } = React;

function fmtM(val) {
  if (val >= 1000000) return '$' + (val / 1000000).toFixed(1) + 'M';
  if (val >= 1000) return '$' + Math.round(val / 1000) + 'K';
  return '$' + val;
}

// ── WAR ROOM: Opposition Intelligence ──
function WarOppositionTab({ data }) {
  const o = data.opposition;
  return (
    <div>
      {/* Firm profile header */}
      <div style={{ ...wr.card, borderColor: W.red.base + '20' }}>
        <div style={{ ...wr.cardH, background: W.red.bg }}>
          <span style={{ color: W.red.text }}>◆ Opposing Counsel Profile</span>
        </div>
        <div style={wr.cardBody}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '12px', marginBottom: '16px' }}>
            <div style={wr.stat}>
              <span style={wr.statLabel}>Firm</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: W.text.primary }}>{o.firm}</span>
            </div>
            <div style={wr.stat}>
              <span style={wr.statLabel}>Lead Counsel</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: W.text.primary }}>{o.leadCounsel}</span>
            </div>
            <div style={wr.stat}>
              <span style={wr.statLabel}>Team Size</span>
              <span style={{ ...wr.statValue, color: W.text.primary }}>{o.teamSize}</span>
            </div>
            <div style={wr.stat}>
              <span style={wr.statLabel}>Win Rate</span>
              <span style={{ ...wr.statValue, color: W.amber.text }}>73%</span>
            </div>
          </div>
          <div style={{ fontSize: '12px', color: W.text.secondary, lineHeight: 1.5, padding: '10px 12px', background: W.bg.tertiary, borderRadius: '6px' }}>
            <span style={{ fontWeight: 600, color: W.text.primary }}>Profile: </span>{o.firmProfile}
          </div>
          <div style={{ fontSize: '12px', color: W.text.secondary, lineHeight: 1.5, padding: '10px 12px', background: W.bg.tertiary, borderRadius: '6px', marginTop: '8px', borderLeft: `3px solid ${W.amber.base}` }}>
            <span style={{ fontWeight: 600, color: W.amber.text }}>Anticipated Strategy: </span>{o.strategy}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
        {/* Behavioral patterns */}
        <div style={wr.card}>
          <div style={wr.cardH}><span>Behavioral Patterns</span></div>
          {o.patterns.map((p, i) => {
            const riskC = { low: W.green, medium: W.amber, high: W.red }[p.risk];
            return (
              <div key={i} style={{ ...wr.row, padding: '10px 16px' }}>
                <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: riskC.base, flexShrink: 0 }} />
                <span style={{ flex: 1, fontSize: '12px', color: W.text.secondary, lineHeight: 1.4 }}>{p.pattern}</span>
                <span style={{ ...wr.tag, background: riskC.bg, color: riskC.text }}>{p.risk}</span>
              </div>
            );
          })}
        </div>

        {/* Split: Weaknesses + Threats */}
        <div>
          <div style={{ ...wr.card, borderColor: W.green.base + '15' }}>
            <div style={{ ...wr.cardH, color: W.green.text }}>▼ Their Weaknesses</div>
            {o.weaknesses.map((w2, i) => (
              <div key={i} style={{ padding: '8px 16px', borderBottom: `1px solid ${W.border.subtle}`, fontSize: '12px', color: W.green.text, lineHeight: 1.4, display: 'flex', gap: '8px', alignItems: 'baseline' }}>
                <span style={{ color: W.green.base, fontSize: '10px' }}>●</span>{w2}
              </div>
            ))}
          </div>
          <div style={{ ...wr.card, borderColor: W.red.base + '15' }}>
            <div style={{ ...wr.cardH, color: W.red.text }}>▲ Threats to Monitor</div>
            {o.threats.map((t, i) => (
              <div key={i} style={{ padding: '8px 16px', borderBottom: `1px solid ${W.border.subtle}`, fontSize: '12px', color: W.red.text, lineHeight: 1.4, display: 'flex', gap: '8px', alignItems: 'baseline' }}>
                <span style={{ color: W.red.base, fontSize: '10px' }}>▲</span>{t}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── WAR ROOM: Settlement Decision Engine ──
function WarSettlementTab({ data }) {
  const s = data.settlement;

  return (
    <div>
      {/* Key numbers */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '20px' }}>
        <div style={wr.stat}>
          <span style={wr.statLabel}>Expected Value</span>
          <span style={{ ...wr.statValue, color: W.green.text }}>{fmtM(s.expectedValue)}</span>
        </div>
        <div style={wr.stat}>
          <span style={wr.statLabel}>Their Last Offer</span>
          <span style={{ ...wr.statValue, color: W.red.text }}>{fmtM(s.theirLastOffer)}</span>
        </div>
        <div style={wr.stat}>
          <span style={wr.statLabel}>Trial Cost Est.</span>
          <span style={{ ...wr.statValue, color: W.amber.text }}>{fmtM(s.trialCostEstimate)}</span>
        </div>
        <div style={wr.stat}>
          <span style={wr.statLabel}>Win Probability</span>
          <span style={{ ...wr.statValue, color: W.green.text }}>{s.expectedVerdict.probability}%</span>
        </div>
        <div style={wr.stat}>
          <span style={wr.statLabel}>Walk-Away Floor</span>
          <span style={{ ...wr.statValue, color: W.amber.text }}>{fmtM(s.walkAwayFloor)}</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
        {/* Verdict range visualization */}
        <div style={wr.card}>
          <div style={wr.cardH}><span>Verdict Range Analysis</span></div>
          <div style={{ padding: '16px' }}>
            {/* Range bar */}
            <div style={{ position: 'relative', height: '60px', marginBottom: '24px' }}>
              <div style={{ position: 'absolute', top: '20px', left: '0', right: '0', height: '20px', borderRadius: '10px', background: 'rgba(255,255,255,0.04)' }} />
              {/* Our range */}
              <div style={{ position: 'absolute', top: '20px', left: `${(s.ourRange.low / s.ourRange.high) * 100 * 0.8}%`, right: `${100 - 95}%`, height: '20px', borderRadius: '10px', background: `linear-gradient(90deg, ${W.blue.base}40, ${W.green.base}40)`, border: `1px solid ${W.blue.base}60` }} />
              {/* Their offer marker */}
              <div style={{ position: 'absolute', top: '14px', left: `${(s.theirLastOffer / s.ourRange.high) * 100 * 0.8}%`, transform: 'translateX(-50%)' }}>
                <div style={{ width: '2px', height: '32px', background: W.red.base }} />
                <div style={{ fontSize: '9px', fontWeight: 600, color: W.red.text, textAlign: 'center', marginTop: '2px', whiteSpace: 'nowrap' }}>Their offer<br />{fmtM(s.theirLastOffer)}</div>
              </div>
              {/* Expected marker */}
              <div style={{ position: 'absolute', top: '14px', left: `${(s.expectedVerdict.mid / s.ourRange.high) * 100 * 0.8}%`, transform: 'translateX(-50%)' }}>
                <div style={{ width: '2px', height: '32px', background: W.green.base }} />
                <div style={{ fontSize: '9px', fontWeight: 600, color: W.green.text, textAlign: 'center', marginTop: '2px', whiteSpace: 'nowrap' }}>Expected<br />{fmtM(s.expectedVerdict.mid)}</div>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '10px', color: W.text.tertiary }}>
              <span>Low: {fmtM(s.ourRange.low)}</span>
              <span>Mid: {fmtM(s.ourRange.mid)}</span>
              <span>High: {fmtM(s.ourRange.high)}</span>
            </div>
          </div>
        </div>

        {/* Scenario tree */}
        <div style={wr.card}>
          <div style={wr.cardH}><span>Decision Tree — Scenario Analysis</span></div>
          {s.scenarioTree.map((sc, i) => {
            const pColor = sc.value === 0 ? W.red : sc.probability >= 30 ? W.green : W.amber;
            return (
              <div key={i} style={{ padding: '8px 16px', borderBottom: `1px solid ${W.border.subtle}`, display: 'flex', alignItems: 'center', gap: '10px', fontSize: '12px' }}>
                <div style={{ minWidth: '36px', textAlign: 'right', fontFamily: W.font.mono, fontWeight: 700, color: pColor.text, fontSize: '13px' }}>{sc.probability}%</div>
                <div style={{ ...wr.barTrack, maxWidth: '80px' }}>
                  <div style={{ ...wr.barFill, width: `${sc.probability * 2}%`, background: pColor.base }} />
                </div>
                <span style={{ flex: 1, color: W.text.secondary }}>{sc.scenario}</span>
                <span style={{ fontFamily: W.font.mono, fontWeight: 600, color: sc.value > 0 ? W.green.text : W.red.text }}>{sc.value > 0 ? fmtM(sc.value) : '$0'}</span>
              </div>
            );
          })}
          <div style={{ padding: '10px 16px', background: W.bg.tertiary, display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
            <span style={{ fontWeight: 700, color: W.text.primary }}>Weighted Expected Value</span>
            <span style={{ fontFamily: W.font.mono, fontWeight: 700, color: W.green.text, fontSize: '14px' }}>{fmtM(s.expectedValue)}</span>
          </div>
        </div>
      </div>

      {/* AI Recommendation */}
      <div style={{ ...wr.card, borderColor: W.blue.base + '30' }}>
        <div style={{ ...wr.cardH, background: W.blue.bg }}><span style={{ color: W.blue.text }}>◆ AI Strategic Recommendation</span></div>
        <div style={{ padding: '14px 16px', fontSize: '13px', color: W.text.secondary, lineHeight: 1.6 }}>
          {s.nextMoveRec}
        </div>
      </div>
    </div>
  );
}

// ── WAR ROOM: Trial Day Planner ──
function WarTrialTab({ data }) {
  const [activeDay, setActiveDay] = useState(0);
  const plan = data.trialPlan;

  return (
    <div>
      {/* Day tabs */}
      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        {plan.map((d, i) => (
          <button key={i} onClick={() => setActiveDay(i)} style={{
            ...wr.btn,
            ...(activeDay === i ? { background: W.red.bg, borderColor: W.red.base + '40', color: W.red.text } : {}),
          }}>Day {d.day}</button>
        ))}
      </div>

      {/* Active day */}
      {plan[activeDay] && (
        <div style={wr.card}>
          <div style={{ ...wr.cardH, background: W.red.bg }}>
            <span style={{ color: W.red.text, fontSize: '12px', fontWeight: 700 }}>{plan[activeDay].label}</span>
            <span style={{ fontSize: '10px', color: W.text.tertiary }}>{plan[activeDay].items.length} events</span>
          </div>
          {plan[activeDay].items.map((item, i) => {
            const isOurs = item.who !== 'Defense';
            return (
              <div key={i} style={{ padding: '12px 16px', borderBottom: `1px solid ${W.border.subtle}`, display: 'flex', gap: '12px', position: 'relative' }}>
                {/* Time */}
                <div style={{ minWidth: '68px' }}>
                  <div style={{ fontSize: '12px', fontFamily: W.font.mono, fontWeight: 600, color: W.text.primary }}>{item.time}</div>
                  <div style={{ fontSize: '10px', color: W.text.tertiary, fontFamily: W.font.mono }}>{item.duration}</div>
                </div>
                {/* Indicator */}
                <div style={{ width: '3px', borderRadius: '2px', background: isOurs ? W.blue.base : W.red.base, flexShrink: 0 }} />
                {/* Content */}
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '3px' }}>
                    <span style={{ fontWeight: 700, fontSize: '13px', color: W.text.primary }}>{item.event}</span>
                    <span style={{ ...wr.tag, background: isOurs ? W.blue.bg : W.red.bg, color: isOurs ? W.blue.text : W.red.text }}>{item.who}</span>
                  </div>
                  {item.notes && (
                    <div style={{ fontSize: '12px', color: W.text.secondary, lineHeight: 1.4 }}>{item.notes}</div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Trial readiness gauge */}
      <div style={{ ...wr.card, marginTop: '16px' }}>
        <div style={wr.cardH}><span>Trial Readiness</span></div>
        <div style={{ padding: '16px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px' }}>
          {[
            { label: 'Witness Prep', pct: 85, color: W.green },
            { label: 'Exhibit List', pct: 92, color: W.green },
            { label: 'Jury Instructions', pct: 60, color: W.amber },
            { label: 'Opening/Closing', pct: 75, color: W.amber },
          ].map((r, i) => (
            <div key={i}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                <span style={{ fontSize: '11px', fontWeight: 600, color: W.text.secondary }}>{r.label}</span>
                <span style={{ fontSize: '11px', fontFamily: W.font.mono, fontWeight: 700, color: r.color.text }}>{r.pct}%</span>
              </div>
              <div style={wr.meterContainer}>
                <div style={{ width: `${r.pct}%`, height: '100%', borderRadius: '4px', background: r.color.base, transition: 'width 0.5s' }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WarOppositionTab, WarSettlementTab, WarTrialTab });