const { useState, useMemo } = React;

// 7 primary tabs — mirror the platform convention (primary + pill sub-navigation)
const WR_GROUPS = [
  { id: 'theory', label: 'Case Theory', single: true },
  { id: 'people', label: 'People', subs: [
    { id: 'witnesses', label: 'Witnesses' },
    { id: 'judge',     label: 'Judge' },
    { id: 'jury',      label: 'Jury' },
  ]},
  { id: 'evidence-motions', label: 'Evidence & Motions', subs: [
    { id: 'evidence',          label: 'Evidence' },
    { id: 'motions-discovery', label: 'Motions & Discovery' },
  ]},
  { id: 'depo-experts', label: 'Depositions & Experts', single: true },
  { id: 'trial', label: 'Trial', subs: [
    { id: 'trial-plan', label: 'Trial Plan' },
    { id: 'trial-prep', label: 'Trial Prep' },
  ]},
  { id: 'opposition-risk', label: 'Opposition & Risk', subs: [
    { id: 'opposition',    label: 'Opposition' },
    { id: 'parallel-risk', label: 'Parallel Risk' },
  ]},
  { id: 'settlement-econ', label: 'Settlement & Economics', subs: [
    { id: 'settlement',         label: 'Settlement' },
    { id: 'decision-economics', label: 'Decision Economics' },
  ]},
  { id: 'strategy', label: 'Strategic Analysis', single: true },
];

const WR_DEFAULT_SUB = WR_GROUPS.reduce((acc, g) => {
  if (!g.single) acc[g.id] = g.subs[0].id;
  return acc;
}, {});

function WarRoom({ matter, onBack }) {
  const [activeGroup, setActiveGroup] = useState('theory');
  const [subByGroup, setSubByGroup] = useState(WR_DEFAULT_SUB);
  const m = matter;
  const data = useMemo(() => window.WAR_ROOM_DATA[m.id] || window.WAR_ROOM_DATA._default, [m.id]);
  const extra = useMemo(() => window.WAR_ROOM_EXTRA?.[m.id] || null, [m.id]);

  const group = WR_GROUPS.find(g => g.id === activeGroup);
  const activeSub = group && !group.single ? subByGroup[group.id] : null;

  const renderContent = () => {
    // Single-tab groups
    if (activeGroup === 'theory') return (
      <div>
        <WarTheoryTab data={data} />
        {extra && <div style={{marginTop:'16px'}}><RiskHeatMap extra={extra} /></div>}
      </div>
    );
    if (activeGroup === 'depo-experts') return <window.DepositionsExpertsHub />;
    if (activeGroup === 'strategy')    return window.WarStrategicAnalysisHub
      ? <window.WarStrategicAnalysisHub matter={m} />
      : <div style={{padding:20,color:W.text.tertiary}}>Strategic Analysis module not loaded.</div>;

    // Multi-sub groups
    switch (activeSub) {
      // People
      case 'witnesses': return (
        <div>
          <WarWitnessTab data={data} />
          {extra && <div style={{marginTop:'20px'}}><ImpeachmentBank extra={extra} /></div>}
        </div>
      );
      case 'judge': return <WarJudgeTab extra={extra} />;
      case 'jury':  return <WarJuryTab extra={extra} />;
      // Evidence & Motions
      case 'evidence':          return <WarEvidenceTab data={data} />;
      case 'motions-discovery': return <window.MotionsDiscoveryHub />;
      // Trial
      case 'trial-plan': return (
        <div>
          <WarTrialTab data={data} />
          {extra && <div style={{marginTop:'16px'}}><TrialChecklist extra={extra} trialDate={m.dueDate} /></div>}
        </div>
      );
      case 'trial-prep': return <window.TrialPrepHub />;
      // Opposition & Risk
      case 'opposition': return (
        <div>
          <WarOppositionTab data={data} />
          {extra && <div style={{marginTop:'16px'}}><CounterOffenseBoard extra={extra} /></div>}
        </div>
      );
      case 'parallel-risk': return <window.ParallelRiskHub />;
      // Settlement & Economics
      case 'settlement': return (
        <div>
          <WarSettlementTab data={data} />
          {extra && (
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px',marginTop:'16px'}}>
              <DamagesBreakdown extra={extra} />
              <NegotiationTimeline extra={extra} />
            </div>
          )}
        </div>
      );
      case 'decision-economics': return <window.DecisionEconomicsHub />;
      default: return <WarTheoryTab data={data} />;
    }
  };

  const overallStrength = data.theories.length > 0
    ? Math.round(data.theories.reduce((s, t) => s + t.strength, 0) / data.theories.length) : 50;
  const strengthColor = overallStrength >= 75 ? W.green : overallStrength >= 55 ? W.amber : W.red;

  // Pill sub-tab style — aligned with platform convention, red accent for War Room theme
  const subTabStyle = (active) => ({
    padding: '8px 14px',
    fontSize: '11px',
    fontWeight: active ? 700 : 500,
    color: active ? '#fff' : W.text.tertiary,
    background: active ? W.red.base : 'transparent',
    border: `1px solid ${active ? W.red.base : W.border.medium}`,
    borderRadius: '6px',
    cursor: 'pointer',
    letterSpacing: '0.02em',
    whiteSpace: 'nowrap',
    fontFamily: W.font.family,
  });

  return (
    <div style={wr.container}>
      {/* Header */}
      <div style={wr.header}>
        <div style={wr.headerTitle}>
          <button onClick={onBack} style={{...wr.btn,fontSize:'14px',padding:'4px 10px'}}>←</button>
          <div style={wr.warIcon}></div>
          <div>
            <div style={wr.title}>War Room</div>
            <div style={wr.subtitle}>{m.name} · {m.id}</div>
          </div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:'12px'}}>
          <div style={{display:'flex',alignItems:'center',gap:'8px',padding:'6px 14px',borderRadius:'8px',background:strengthColor.bg,border:`1px solid ${strengthColor.base}30`}}>
            <div style={{width:'8px',height:'8px',borderRadius:'50%',background:strengthColor.base}}/>
            <span style={{fontSize:'11px',fontWeight:700,color:strengthColor.text,textTransform:'uppercase',letterSpacing:'0.06em'}}>Case Strength: {overallStrength}%</span>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:'8px',padding:'6px 14px',borderRadius:'8px',background:W.bg.tertiary,border:`1px solid ${W.border.subtle}`}}>
            <span style={{fontSize:'10px',fontWeight:600,color:W.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em'}}>Win Prob</span>
            <span style={{fontSize:'14px',fontWeight:700,color:W.green.text,fontFamily:W.font.mono}}>{data.settlement.expectedVerdict.probability}%</span>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:'8px',padding:'6px 14px',borderRadius:'8px',background:W.bg.tertiary,border:`1px solid ${W.border.subtle}`}}>
            <span style={{fontSize:'10px',fontWeight:600,color:W.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em'}}>EV</span>
            <span style={{fontSize:'14px',fontWeight:700,color:W.green.text,fontFamily:W.font.mono}}>
              {data.settlement.expectedValue >= 1e6 ? '$'+(data.settlement.expectedValue/1e6).toFixed(1)+'M' : '$'+Math.round(data.settlement.expectedValue/1000)+'K'}
            </span>
          </div>
          {extra?.judge && (
            <div style={{display:'flex',alignItems:'center',gap:'6px',padding:'6px 14px',borderRadius:'8px',background:W.purple.bg,border:`1px solid ${W.purple.base}30`,cursor:'pointer'}}
              onClick={()=>{ setActiveGroup('people'); setSubByGroup({...subByGroup, people:'judge'}); }}>
              <span style={{fontSize:'10px',fontWeight:600,color:W.purple.text,textTransform:'uppercase',letterSpacing:'0.06em'}}>Judge</span>
              <span style={{fontSize:'12px',fontWeight:700,color:W.purple.text}}>Reynolds</span>
            </div>
          )}
          <button style={{...wr.btn,...wr.btnDanger}}> Battle Mode</button>
        </div>
      </div>

      {/* PRIMARY TABS — 7 groups */}
      <div style={{...wr.tabs, overflowX: 'auto'}}>
        {WR_GROUPS.map(g => (
          <button key={g.id} onClick={() => setActiveGroup(g.id)}
            style={{...wr.tab, ...(activeGroup === g.id ? wr.tabActive : {}), whiteSpace:'nowrap'}}>
            {g.label}
          </button>
        ))}
      </div>

      {/* SECONDARY SUB-TABS — pill style aligned with platform convention */}
      {group && !group.single && (
        <div style={{display:'flex',gap:'8px',padding:'14px 24px 2px',flexWrap:'wrap',
          borderBottom:`1px solid ${W.border.subtle}`, background:W.bg.secondary}}>
          {group.subs.map(s => (
            <button key={s.id} onClick={() => setSubByGroup({ ...subByGroup, [group.id]: s.id })}
              style={subTabStyle(activeSub === s.id)}>
              {s.label}
            </button>
          ))}
        </div>
      )}

      {/* Body */}
      <div style={wr.body}>
        {renderContent()}
      </div>
    </div>
  );
}

window.WarRoom = WarRoom;