const { useState } = React;

// ── JUDGE ANALYTICS TAB ──
function WarJudgeTab({ extra }) {
  const j = extra?.judge;
  if (!j) return <div style={{padding:'24px',color:W.text.tertiary,fontSize:'13px'}}>Judge analytics not yet available for this matter.</div>;

  const statItems = [
    { label: 'MSJ Grant Rate', value: j.stats.msjGrantRate + '%', color: j.stats.msjGrantRate < 40 ? W.green : W.amber },
    { label: 'Plaintiff Win Rate', value: j.stats.plaintiffWinRate + '%', color: j.stats.plaintiffWinRate >= 55 ? W.green : W.amber },
    { label: 'Avg Damages Awarded', value: '$' + (j.stats.avgDamagesAwarded/1e6).toFixed(1) + 'M', color: W.blue },
    { label: 'Settlement Rate', value: j.stats.settlementRate + '%', color: W.amber },
    { label: 'Avg Trial Duration', value: j.stats.avgTrialDuration + ' days', color: W.blue },
    { label: 'Avg Time to Trial', value: j.stats.avgTimeToTrial + ' months', color: W.blue },
  ];

  return (
    <div>
      {/* Judge header */}
      <div style={{...wr.card, borderColor: W.purple.base + '20'}}>
        <div style={{...wr.cardH, background: W.purple.bg}}><span style={{color: W.purple.text}}>◆ Presiding Judge</span></div>
        <div style={wr.cardBody}>
          <div style={{display:'flex',gap:'16px',alignItems:'flex-start',marginBottom:'16px'}}>
            <div style={{width:'48px',height:'48px',borderRadius:'50%',background:W.purple.bg,border:`2px solid ${W.purple.base}30`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'18px',fontWeight:700,color:W.purple.text,flexShrink:0}}>CR</div>
            <div>
              <div style={{fontSize:'16px',fontWeight:700,color:W.text.primary}}>{j.name}</div>
              <div style={{fontSize:'12px',color:W.text.secondary,marginTop:'2px'}}>{j.court}</div>
              <div style={{fontSize:'11px',color:W.text.tertiary,marginTop:'2px'}}>Appointed {j.appointed} ({j.appointedBy}) · {j.yearsOnBench} years on bench · {j.totalCases} total cases</div>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:'10px'}}>
            {statItems.map((s,i) => (
              <div key={i} style={wr.stat}>
                <span style={wr.statLabel}>{s.label}</span>
                <span style={{...wr.statValue, color: s.color.text, fontSize:'18px'}}>{s.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px'}}>
        {/* Ruling tendencies */}
        <div style={wr.card}>
          <div style={wr.cardH}><span>Ruling Tendencies</span></div>
          {j.rulingTendencies.map((r,i) => {
            const leanColor = r.lean === 'Broad' || r.lean === 'Pro-Plaintiff' ? W.green : r.lean === 'Skeptical' || r.lean === 'Strict' ? W.amber : W.blue;
            return (
              <div key={i} style={{padding:'10px 16px',borderBottom:`1px solid ${W.border.subtle}`}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'4px'}}>
                  <span style={{fontWeight:600,fontSize:'12px',color:W.text.primary}}>{r.area}</span>
                  <div style={{display:'flex',alignItems:'center',gap:'6px'}}>
                    <span style={{...wr.tag,background:leanColor.bg,color:leanColor.text}}>{r.lean}</span>
                    <span style={{fontSize:'10px',fontFamily:W.font.mono,color:W.text.tertiary}}>{r.confidence}%</span>
                  </div>
                </div>
                <div style={{fontSize:'11px',color:W.text.secondary,lineHeight:1.4}}>{r.note}</div>
              </div>
            );
          })}
        </div>

        <div>
          {/* Prior counsel experience */}
          <div style={wr.card}>
            <div style={wr.cardH}><span>Counsel History with Judge</span></div>
            {j.priorCounselExperience.map((c,i) => (
              <div key={i} style={{padding:'10px 16px',borderBottom:`1px solid ${W.border.subtle}`}}>
                <div style={{display:'flex',justifyContent:'space-between',marginBottom:'3px'}}>
                  <span style={{fontWeight:600,fontSize:'12px',color:W.text.primary}}>{c.counsel}</span>
                  <div style={{display:'flex',gap:'8px'}}>
                    <span style={{fontSize:'10px',color:W.text.tertiary}}>{c.appearances} appearances</span>
                    <span style={{fontSize:'10px',fontFamily:W.font.mono,fontWeight:700,color:c.winRate>=60?W.green.text:W.amber.text}}>{c.winRate}% win</span>
                  </div>
                </div>
                <div style={{fontSize:'11px',color:W.text.secondary,lineHeight:1.4}}>{c.note}</div>
              </div>
            ))}
          </div>

          {/* Key rulings */}
          <div style={wr.card}>
            <div style={wr.cardH}><span>Relevant Prior Rulings</span></div>
            {j.keyRulings.map((r,i) => {
              const relColor = r.relevance === 'high' ? W.green : W.amber;
              return (
                <div key={i} style={{padding:'8px 16px',borderBottom:`1px solid ${W.border.subtle}`}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:'2px'}}>
                    <span style={{fontWeight:600,fontSize:'11px',color:W.text.primary}}>{r.case}</span>
                    <span style={{...wr.tag,background:relColor.bg,color:relColor.text}}>{r.relevance}</span>
                  </div>
                  <div style={{fontSize:'11px',color:W.text.secondary,lineHeight:1.4}}>{r.ruling}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── JURY STRATEGY TAB ──
function WarJuryTab({ extra }) {
  const j = extra?.jury;
  if (!j) return <div style={{padding:'24px',color:W.text.tertiary,fontSize:'13px'}}>Jury strategy not yet available for this matter.</div>;

  const [activeSection, setActiveSection] = useState('profile');
  const sections = [{id:'profile',label:'Venue Profile'},{id:'ideal',label:'Ideal Juror'},{id:'voir',label:'Voir Dire'},{id:'mock',label:'Juror Assessments'}];

  return (
    <div>
      {/* Section tabs */}
      <div style={{display:'flex',gap:'8px',marginBottom:'16px'}}>
        {sections.map(s => (
          <button key={s.id} onClick={()=>setActiveSection(s.id)} style={{
            ...wr.btn, ...(activeSection===s.id?{background:W.cyan.bg,borderColor:W.cyan.base+'40',color:W.cyan.text}:{})
          }}>{s.label}</button>
        ))}
      </div>

      {activeSection === 'profile' && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px'}}>
          <div style={wr.card}>
            <div style={wr.cardH}><span>Venue Demographics</span></div>
            <div style={wr.cardBody}>
              <div style={{fontSize:'12px',color:W.text.secondary,lineHeight:1.5,marginBottom:'12px',padding:'8px 12px',background:W.bg.tertiary,borderRadius:'6px'}}>{j.venueProfile.pool}</div>
              <div style={{fontSize:'10px',fontWeight:600,color:W.text.tertiary,textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:'8px'}}>Racial/Ethnic Composition</div>
              {Object.entries(j.venueProfile.demographics).map(([k,v]) => (
                <div key={k} style={{display:'flex',alignItems:'center',gap:'8px',marginBottom:'6px'}}>
                  <span style={{width:'70px',fontSize:'11px',color:W.text.secondary,textTransform:'capitalize'}}>{k}</span>
                  <div style={{flex:1,...wr.barTrack,height:'6px'}}>
                    <div style={{...wr.barFill,width:`${v}%`,background:W.cyan.base}}/>
                  </div>
                  <span style={{fontSize:'10px',fontFamily:W.font.mono,color:W.text.tertiary,minWidth:'28px',textAlign:'right'}}>{v}%</span>
                </div>
              ))}
            </div>
          </div>
          <div style={wr.card}>
            <div style={wr.cardH}><span>Education Level</span></div>
            <div style={wr.cardBody}>
              {Object.entries(j.venueProfile.education).map(([k,v]) => {
                const labels = {college:'College Degree',postgrad:'Post-Graduate',highSchool:'High School Only'};
                return (
                  <div key={k} style={{display:'flex',alignItems:'center',gap:'8px',marginBottom:'8px'}}>
                    <span style={{width:'100px',fontSize:'11px',color:W.text.secondary}}>{labels[k]||k}</span>
                    <div style={{flex:1,...wr.barTrack,height:'6px'}}>
                      <div style={{...wr.barFill,width:`${v}%`,background:W.purple.base}}/>
                    </div>
                    <span style={{fontSize:'10px',fontFamily:W.font.mono,color:W.text.tertiary,minWidth:'28px',textAlign:'right'}}>{v}%</span>
                  </div>
                );
              })}
              <div style={{marginTop:'12px',padding:'8px 12px',background:W.bg.tertiary,borderRadius:'6px'}}>
                <div style={{display:'flex',justifyContent:'space-between',fontSize:'11px'}}>
                  <span style={{color:W.text.tertiary}}>Avg. Age of Jury Pool</span>
                  <span style={{fontWeight:700,color:W.text.primary}}>{j.venueProfile.avgAge}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeSection === 'ideal' && (
        <div>
          <div style={{...wr.card,borderColor:W.cyan.base+'20'}}>
            <div style={{...wr.cardH,background:W.cyan.bg}}><span style={{color:W.cyan.text}}>◆ Ideal Juror Profile</span></div>
            <div style={{padding:'14px 16px',fontSize:'13px',color:W.text.secondary,lineHeight:1.5,borderBottom:`1px solid ${W.border.subtle}`}}>{j.idealJuror.profile}</div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px'}}>
            <div style={{...wr.card,borderColor:W.green.base+'15'}}>
              <div style={{...wr.cardH,color:W.green.text}}>ok Favorable Traits</div>
              {j.idealJuror.favorable.map((f,i) => (
                <div key={i} style={{padding:'6px 16px',borderBottom:`1px solid ${W.border.subtle}`,fontSize:'12px',color:W.green.text,display:'flex',gap:'8px',alignItems:'center'}}>
                  <span style={{color:W.green.base}}>●</span>{f}
                </div>
              ))}
            </div>
            <div style={{...wr.card,borderColor:W.red.base+'15'}}>
              <div style={{...wr.cardH,color:W.red.text}}>x Unfavorable Traits</div>
              {j.idealJuror.unfavorable.map((f,i) => (
                <div key={i} style={{padding:'6px 16px',borderBottom:`1px solid ${W.border.subtle}`,fontSize:'12px',color:W.red.text,display:'flex',gap:'8px',alignItems:'center'}}>
                  <span style={{color:W.red.base}}>●</span>{f}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {activeSection === 'voir' && (
        <div style={wr.card}>
          <div style={wr.cardH}>
            <span>Voir Dire Questions</span>
            <div style={{display:'flex',gap:'8px',fontSize:'10px',color:W.text.tertiary}}>
              <span>Strikes: {j.strikes.peremptory} peremptory · {j.strikes.forCause} for cause</span>
            </div>
          </div>
          {j.voirDire.map((q,i) => {
            const pColor = {high:W.red,medium:W.amber,low:W.blue}[q.priority];
            return (
              <div key={i} style={{padding:'10px 16px',borderBottom:`1px solid ${W.border.subtle}`}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:'3px'}}>
                  <span style={{fontWeight:600,fontSize:'12px',color:W.text.primary,flex:1}}>"{q.question}"</span>
                  <span style={{...wr.tag,background:pColor.bg,color:pColor.text,marginLeft:'8px'}}>{q.priority}</span>
                </div>
                <div style={{fontSize:'11px',color:W.text.tertiary}}>Purpose: {q.purpose}</div>
              </div>
            );
          })}
        </div>
      )}

      {activeSection === 'mock' && (
        <div style={wr.card}>
          <div style={wr.cardH}><span>Juror Assessment Grid</span></div>
          {j.mockJurors.map((jur,i) => {
            const dColor = jur.disposition === 'Favorable' ? W.green : jur.disposition === 'Unfavorable' ? W.red : W.amber;
            return (
              <div key={i} style={{padding:'10px 16px',borderBottom:`1px solid ${W.border.subtle}`,display:'flex',alignItems:'center',gap:'12px'}}>
                <div style={{width:'28px',height:'28px',borderRadius:'50%',background:dColor.bg,border:`1px solid ${dColor.base}30`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'11px',fontWeight:700,color:dColor.text,flexShrink:0}}>{jur.seat}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600,fontSize:'12px',color:W.text.primary}}>{jur.name}</div>
                  <div style={{fontSize:'11px',color:W.text.tertiary,marginTop:'1px'}}>{jur.notes}</div>
                </div>
                <span style={{...wr.tag,background:dColor.bg,color:dColor.text}}>{jur.disposition}</span>
                <div style={{display:'flex',alignItems:'center',gap:'4px',minWidth:'60px'}}>
                  <div style={{width:'32px',height:'4px',borderRadius:'2px',background:'rgba(255,255,255,0.06)'}}>
                    <div style={{width:`${jur.confidence}%`,height:'100%',borderRadius:'2px',background:dColor.base}}/>
                  </div>
                  <span style={{fontSize:'10px',fontFamily:W.font.mono,color:dColor.text}}>{jur.confidence}%</span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WarJudgeTab, WarJuryTab });