/* match-match.jsx — Smart Match: submit intent → queue/browse/hybrid → match found */
const DM2 = window.DM;

/* fit score: how well a party matches the intent (0-100). Near-full teams score higher. */
function fitScore(p, intent){
  let s = 50;
  const tiers = DM2.GAMES[p.game].tiers;
  const mi = tiers.indexOf(intent.rank), pi = tiers.indexOf(p.rank);
  if(mi>=0 && pi>=0){ const d=Math.abs(mi-pi); s += d===0?22:d===1?12:d===2?2:-18; }
  if(intent.mode && p.mode===intent.mode) s += 14; else s -= 6;
  if(intent.voice===p.voice) s += 6;
  if(intent.vibe===p.vibe) s += 6;
  // prefer joining a team that already has people — the core insight
  const have = p.members.length;
  if(have>=intent.minHave) s += (have - 2) * 6;
  // lane the team needs matches what user plays
  if(intent.lane && intent.lane!=='fill'){ if((p.needLanes||[]).includes(intent.lane) || (p.needLanes||[]).includes('fill')) s += 12; else s -= 8; }
  if(needCount(p)===1) s += 8; // closest to going live
  return Math.max(4, Math.min(99, Math.round(s)));
}

function rankedCandidates(intent){
  return DM2.PARTIES.filter(p=> p.game===intent.game && needCount(p)>0)
    .map(p=> ({ p, fit:fitScore(p,intent) }))
    .sort((a,b)=> b.fit-a.fit);
}

/* ============================================================ SUBMIT FORM */
function IntentForm({ en, intent, setIntent, onSubmit, t }){
  const g = DM2.GAMES[intent.game];
  const Opt = ({ on, onClick, children }) => (
    <button onClick={onClick} className={'chip'+(on?' on':'')} style={{ cursor:'pointer', fontSize:13, padding:'8px 13px' }}>{children}</button>
  );
  const set = (k,v)=> setIntent(s=>({ ...s, [k]:v }));
  useEffect(()=>{ set('mode', g.modes[0].key); set('lane', g.lanes[0].key); set('rank', DM2.ME.ranks[intent.game]||'gold'); },[intent.game]);

  return (
    <div className="card" style={{ padding:24, display:'flex', flexDirection:'column', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
        <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Game':'游戏'}</label>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {DM2.GAME_ORDER.map(k=> <Opt key={k} on={k===intent.game} onClick={()=>set('game',k)}><GameGlyph game={k} size={18} r="5px"/>{DM2.gName(k)}</Opt>)}
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Mode':'模式'}</label>
          <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>{g.modes.map(m=> <Opt key={m.key} on={m.key===intent.mode} onClick={()=>set('mode',m.key)}>{en?m.en:m.cn}</Opt>)}</div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'My rank':'我的段位'}</label>
          <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>{g.tiers.map(rk=> <Opt key={rk} on={rk===intent.rank} onClick={()=>set('rank',rk)}>{DM2.rankName(intent.game,rk)}</Opt>)}</div>
        </div>
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
        <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Position I play':'我打的位置'}</label>
        <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>{g.lanes.map(l=> <Opt key={l.key} on={l.key===intent.lane} onClick={()=>set('lane',l.key)}>{en?l.en:l.cn}</Opt>)}</div>
      </div>

      {/* the core preference */}
      <div style={{ background:'color-mix(in oklab,var(--q-lime) 9%,transparent)', border:'1px solid color-mix(in oklab,var(--q-lime) 30%,transparent)', borderRadius:'var(--r-sm)', padding:'14px 16px', display:'flex', flexDirection:'column', gap:11 }}>
        <label style={{ fontFamily:'var(--cn)', fontSize:13.5, fontWeight:700, display:'flex', alignItems:'center', gap:8 }}>
          <Ic k="users" w={15} style={{ color:'var(--q-lime)' }}/> {en?"I'd rather join a team that already has…":'我更想加入已经有人的车队 ——'}
        </label>
        <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>
          {[[2,'2+'],[3,'3+'],[4,'4 ('+(en?'last seat':'就差我')+')']].map(([v,lbl])=> <Opt key={v} on={intent.minHave===v} onClick={()=>set('minHave',v)}>{en?`${lbl} people`:`${lbl} 人`}</Opt>)}
        </div>
        <p style={{ fontFamily:'var(--cn)', fontSize:11.5, color:'var(--text-mute)' }}>{en?'No need to build 5 from scratch — we slot you into a car that just needs your seat.':'不用从 0 攒 5 黑 —— 直接把你塞进一辆就差你这个位置的车。'}</p>
      </div>

      <div style={{ display:'flex', gap:20, flexWrap:'wrap' }}>
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Voice':'语音'}</label>
          <div style={{ display:'flex', gap:7 }}><Opt on={intent.voice} onClick={()=>set('voice',true)}><Ic k="mic" w={13}/>{en?'Mic':'开麦'}</Opt><Opt on={!intent.voice} onClick={()=>set('voice',false)}><Ic k="micOff" w={13}/>{en?'No mic':'静音'}</Opt></div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          <label style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-mute)' }}>{en?'Vibe':'氛围'}</label>
          <div style={{ display:'flex', gap:7 }}><Opt on={intent.vibe==='comp'} onClick={()=>set('vibe','comp')}>{en?'Ranked':'认真上分'}</Opt><Opt on={intent.vibe==='fun'} onClick={()=>set('vibe','fun')}>{en?'For fun':'娱乐'}</Opt></div>
        </div>
      </div>

      <button className="btn btn-go btn-lg" onClick={onSubmit} style={{ alignSelf:'flex-start' }}>
        <Ic k="radar" w={17}/> {t.matchFlow==='browse' ? (en?'Show matching teams':'查看匹配车队') : (en?'Find me a car':'帮我找车')}
      </button>
    </div>
  );
}

/* ============================================================ QUEUE WAITING (radar) */
function QueueWaiting({ en, intent, onFound, onCancel, t }){
  const [secs, setSecs] = useState(0);
  const [scanned, setScanned] = useState(3);
  const animate = t.matchAnim !== 'instant';
  useEffect(()=>{
    const tick = setInterval(()=> setSecs(s=>s+1), 1000);
    const scan = setInterval(()=> setScanned(n=> n + Math.floor(Math.random()*4+1)), 700);
    const delay = animate ? 4200 : 600;
    const found = setTimeout(()=> onFound(), delay);
    return ()=>{ clearInterval(tick); clearInterval(scan); clearTimeout(found); };
  },[]);
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', padding:'30px 0 10px' }}>
      <div style={{ position:'relative', width:240, height:240, marginBottom:14 }}>
        {animate && [0,1,2].map(i=>(
          <span key={i} style={{ position:'absolute', inset:0, borderRadius:'50%', border:'1.5px solid color-mix(in oklab,var(--q-cyan) 50%,transparent)',
            animation:`radarPing 2.6s ${i*0.85}s infinite ease-out` }} />
        ))}
        <span style={{ position:'absolute', inset:0, borderRadius:'50%', border:'1.5px solid var(--line)' }} />
        <span style={{ position:'absolute', inset:'25%', borderRadius:'50%', border:'1px solid var(--line-soft)' }} />
        {animate && <span style={{ position:'absolute', inset:0, borderRadius:'50%', background:'conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab,var(--q-cyan) 40%,transparent) 50deg, transparent 70deg)', animation:'radarSweep 2.2s linear infinite' }} />}
        <span style={{ position:'absolute', inset:0, display:'grid', placeItems:'center' }}>
          <GameGlyph game={intent.game} size={64} r="14px" />
        </span>
      </div>
      <span className="status queue" style={{ marginBottom:14 }}><span className="dot"/>{en?'Scanning live cars…':'正在扫描在线车队…'}</span>
      <div style={{ fontFamily:'var(--display)', fontStyle:'italic', fontWeight:900, fontSize:46, letterSpacing:'-.02em' }}>
        {Math.floor(secs/60)}:{String(secs%60).padStart(2,'0')}
      </div>
      <p style={{ fontFamily:'var(--cn)', fontSize:14, color:'var(--text-dim)', marginTop:8 }}>
        {en?`Matched against ${scanned} open teams · ${DM2.rankName(intent.game,intent.rank)} ${DM2.modeName(intent.game,intent.mode)}`
           :`已比对 ${scanned} 个招人车队 · ${DM2.rankName(intent.game,intent.rank)} ${DM2.modeName(intent.game,intent.mode)}`}
      </p>
      <div style={{ display:'flex', gap:8, marginTop:16, flexWrap:'wrap', justifyContent:'center' }}>
        <span className="chip" style={{ fontSize:11.5 }}>{en?`prefer ${intent.minHave}+ in team`:`优先 ${intent.minHave}+ 人车队`}</span>
        <span className="chip" style={{ fontSize:11.5 }}>{intent.lane==='fill'?(en?'any role':'补位'):DM2.laneName(intent.game,intent.lane)}</span>
        {intent.voice && <span className="chip" style={{ fontSize:11.5 }}><Ic k="mic" w={12}/>{en?'mic':'开麦'}</span>}
      </div>
      <button className="chip" style={{ cursor:'pointer', marginTop:26 }} onClick={onCancel}><Ic k="x" w={13}/>{en?'Cancel queue':'取消排队'}</button>
    </div>
  );
}

/* ============================================================ MATCH FOUND MODAL */
function MatchFound({ en, party, intent, onAccept, onSkip, t }){
  const [shown, setShown] = useState(t.matchAnim==='instant');
  useEffect(()=>{ const id=setTimeout(()=>setShown(true), 30); return ()=>clearTimeout(id); },[]);
  const anim = t.matchAnim!=='instant';
  return (
    <div style={{ position:'fixed', inset:0, zIndex:300, display:'grid', placeItems:'center', background:'oklch(0 0 0 /.6)', backdropFilter:'blur(8px)', padding:20,
      opacity: shown?1:0, transition: anim?'opacity .3s ease':'none' }}>
      <div className="card" style={{ width:'min(440px,100%)', overflow:'hidden', boxShadow:'var(--shadow)',
        opacity: shown?1:0, transform: shown?'scale(1)':'scale(.92)', transition: anim?'opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1)':'none' }}>
        <div style={{ background:'linear-gradient(135deg,var(--q-lime),oklch(0.74 0.17 150))', padding:'22px 22px 18px', textAlign:'center', position:'relative', overflow:'hidden' }}>
          <div className="gridfx" style={{ opacity:.3, mask:'none' }} />
          <div style={{ position:'relative' }}>
            <span style={{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'oklch(0.22 0.05 150)' }}>{en?'Match found':'匹配成功'}</span>
            <div style={{ fontFamily:'var(--cn)', fontWeight:900, fontSize:26, color:'oklch(0.18 0.04 150)', marginTop:4, letterSpacing:'-.02em' }}>
              {en?'A car needs exactly you':'有车就差你一个'}
            </div>
          </div>
        </div>
        <div style={{ padding:22 }}>
          <div style={{ display:'flex', alignItems:'center', gap:11, marginBottom:16 }}>
            <GameGlyph game={party.game} size={42} />
            <div style={{ flex:1 }}>
              <div style={{ fontFamily:'var(--hud)', fontWeight:700, fontSize:15, display:'flex', alignItems:'center', gap:7 }}>{DM2.modeName(party.game,party.mode)} <RankTag game={party.game} rank={party.rank} sm /></div>
              <div style={{ fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)', marginTop:3 }}># {party.note}</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontFamily:'var(--display)', fontStyle:'italic', fontWeight:800, fontSize:26, color:'var(--q-lime)' }}>{fitScore(party,intent)}<span style={{ fontSize:13 }}>%</span></div>
              <div style={{ fontFamily:'var(--mono)', fontSize:9.5, color:'var(--text-mute)', letterSpacing:'.1em' }}>FIT</div>
            </div>
          </div>
          <div style={{ background:'var(--surface-2)', borderRadius:'var(--r-sm)', padding:14, marginBottom:16 }}>
            <SlotRow party={party} size={42} en={en} />
          </div>
          <div style={{ display:'flex', gap:10 }}>
            <button className="btn btn-ghost" style={{ flex:'none' }} onClick={onSkip}>{en?'Skip':'下一个'}</button>
            <button className="btn btn-go" style={{ flex:1 }} onClick={()=>onAccept(party)}><Ic k="bolt" w={16}/>{en?'Accept & join':'接受,上车'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ CANDIDATE LIST (browse) */
function CandidateList({ en, intent, onOpen, queued }){
  const cands = useMemo(()=> rankedCandidates(intent), [intent]);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
      {queued && (
        <div style={{ display:'flex', alignItems:'center', gap:11, padding:'12px 16px', borderRadius:'var(--r-sm)', background:'color-mix(in oklab,var(--q-cyan) 10%,transparent)', border:'1px solid color-mix(in oklab,var(--q-cyan) 30%,transparent)' }}>
          <span className="status queue"><span className="dot"/>{en?'In queue':'排队中'}</span>
          <span style={{ fontFamily:'var(--cn)', fontSize:13, color:'var(--text-dim)' }}>{en?"We'll ping you the moment a perfect car opens — meanwhile, browse below.":'有完美车队我们会立刻提醒你 —— 同时你也可以自己挑下面的车。'}</span>
        </div>
      )}
      {cands.map(({p,fit})=>{
        const g=DM2.GAMES[p.game];
        return (
          <div key={p.id} className="card" onClick={()=>onOpen(p)} style={{ padding:14, cursor:'pointer', display:'flex', alignItems:'center', gap:16, transition:'.15s' }}
            onMouseEnter={e=>e.currentTarget.style.borderColor='color-mix(in oklab,'+g.accent+' 50%,transparent)'}
            onMouseLeave={e=>e.currentTarget.style.borderColor='var(--line)'}>
            <div style={{ textAlign:'center', width:54, flex:'none' }}>
              <div style={{ fontFamily:'var(--display)', fontStyle:'italic', fontWeight:800, fontSize:26, color: fit>=80?'var(--q-lime)':fit>=60?'var(--q-amber)':'var(--text-mute)' }}>{fit}<span style={{ fontSize:12 }}>%</span></div>
              <div style={{ fontFamily:'var(--mono)', fontSize:9, color:'var(--text-mute)', letterSpacing:'.1em' }}>FIT</div>
            </div>
            <div style={{ width:1, height:42, background:'var(--line-soft)' }} />
            <GameGlyph game={p.game} size={34} r="7px" />
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontFamily:'var(--hud)', fontWeight:700, fontSize:14, display:'flex', alignItems:'center', gap:7 }}>{DM2.modeName(p.game,p.mode)} <RankTag game={p.game} rank={p.rank} sm /> <VibeTag vibe={p.vibe} en={en}/></div>
              <div style={{ fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)', marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}># {p.note}</div>
            </div>
            <SlotRow party={p} size={30} showLane={false} en={en} />
            <NeedBadge party={p} en={en} />
            <button className="btn btn-sm btn-primary" onClick={e=>{e.stopPropagation();onOpen(p);}}><Ic k="bolt" w={13}/>{en?'View':'上车'}</button>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================ SMART MATCH ORCHESTRATOR */
function SmartMatch({ en, onOpen, onJoined, t }){
  const [intent, setIntent] = useState({ game:'lol', mode:'flex', rank:DM2.ME.ranks.lol, lane:'mid', minHave:3, voice:true, vibe:'comp' });
  const [phase, setPhase] = useState('form'); // form | queue | found | browse
  const [foundParty, setFoundParty] = useState(null);
  const flow = t.matchFlow || 'queue';

  function submit(){
    if(flow==='browse'){ setPhase('browse'); return; }
    setPhase('queue');
  }
  function onFound(){
    const cands = rankedCandidates(intent);
    const best = cands[0] && cands[0].p;
    if(best){ setFoundParty(best); setPhase('found'); }
    else { setPhase('browse'); }
  }
  function accept(p){ setPhase('form'); onJoined(p); }
  function skip(){
    const cands = rankedCandidates(intent);
    const idx = cands.findIndex(c=>c.p===foundParty);
    const next = cands[idx+1] && cands[idx+1].p;
    if(next){ setFoundParty(next); } else { setPhase(flow==='hybrid'?'browse':'queue'); }
  }

  return (
    <div className="wrap" style={{ padding:'30px 26px 70px', maxWidth:860 }}>
      <div style={{ textAlign:'center', marginBottom:26 }}>
        <span className="eyebrow" style={{ justifyContent:'center' }}>{en?'SMART MATCH':'智能匹配'}</span>
        <h2 className="h2" style={{ marginTop:12 }}>{en?'Tell us what you want. Wait. Get pinged.':'说一句你想玩什么,挂着等,匹配到就提醒你'}</h2>
        <p className="lede" style={{ fontSize:14, margin:'8px auto 0' }}>
          {flow==='queue' && (en?'Submit once and we radar-scan every open car for the seat that fits you.':'提交一次,我们雷达扫描每一辆招人的车,找到适合你的那个位置。')}
          {flow==='browse' && (en?'Submit your conditions and instantly see every matching car, ranked by fit.':'提交条件,立刻看到所有匹配的车,按契合度排序。')}
          {flow==='hybrid' && (en?'Queue in the background and browse at the same time — whichever lands first wins.':'后台挂等待的同时自己浏览 —— 哪个先来都算。')}
        </p>
      </div>

      {phase==='form' && <IntentForm en={en} intent={intent} setIntent={setIntent} onSubmit={submit} t={t} />}
      {phase==='queue' && (
        <div className="card" style={{ padding:'10px 24px 30px' }}>
          <QueueWaiting en={en} intent={intent} onFound={onFound} onCancel={()=>setPhase('form')} t={t} />
        </div>
      )}
      {phase==='browse' && (
        <div>
          <button className="chip" style={{ cursor:'pointer', marginBottom:16 }} onClick={()=>setPhase('form')}><Ic k="back" w={13}/>{en?'Edit conditions':'修改条件'}</button>
          <CandidateList en={en} intent={intent} onOpen={onOpen} queued={false} />
        </div>
      )}
      {phase==='found' && foundParty && (
        <div className="card" style={{ padding:'30px 24px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, opacity:.5 }}>
          <span className="status queue"><span className="dot"/>{en?'Match locked':'已锁定匹配'}</span>
          <GameGlyph game={intent.game} size={56} r="14px" />
        </div>
      )}
      {phase==='found' && foundParty && <MatchFound en={en} party={foundParty} intent={intent} onAccept={accept} onSkip={skip} t={t} />}
    </div>
  );
}

window.SmartMatch = SmartMatch;