function DraftGame({
  eng
}) {
  const ready = !!eng;
  const [cfg, setCfg] = useState({
    playerSide: "blue"
  });
  const [game, setGame] = useState(null);
  const [query, setQuery] = useState("");
  const [cat, setCat] = useState("all");
  const [pending, setPending] = useState(null);
  const timer = useRef(null);
  function startGame() {
    if (!ready) {
      alert(NO_META_MSG);
      return;
    }
    setQuery("");
    setCat("all");
    setPending(null);
    setGame({
      phase: "draft",
      turn: 0,
      playerSide: cfg.playerSide,
      blue: {
        pool: [],
        bans: []
      },
      red: {
        pool: [],
        bans: []
      },
      myAssign: {},
      result: null
    });
  }
  function quitGame() {
    clearTimeout(timer.current);
    setGame(null);
    setPending(null);
  }
  function applyDraft(prev, side, type, key) {
    const t = prev[side];
    const nt = type === "ban" ? {
      pool: t.pool,
      bans: [...t.bans, key]
    } : {
      pool: [...t.pool, key],
      bans: t.bans
    };
    const ns = {
      ...prev,
      [side]: nt,
      turn: prev.turn + 1
    };
    if (ns.turn >= ORDER.length) ns.phase = "swap";
    return ns;
  }
  function commit(side, type, key) {
    setQuery("");
    setPending(null);
    setGame(prev => prev && prev.phase === "draft" ? applyDraft(prev, side, type, key) : prev);
  }
  useEffect(() => {
    if (!game || game.phase !== "draft") return;
    const s = ORDER[game.turn];
    if (s.side === game.playerSide) return;
    timer.current = setTimeout(() => {
      setGame(prev => {
        if (!prev || prev.phase !== "draft") return prev;
        const key = eng.npcMove(prev);
        return applyDraft(prev, s.side, s.type, key);
      });
    }, 200);
    return () => clearTimeout(timer.current);
  }, [game && game.phase, game && game.turn]);
  useEffect(() => {
    if (game && game.phase === "swap") {
      if (Object.keys(game.myAssign).length === 0) {
        const sub = eng.solveSubgame(game.blue, game.red);
        const rec = game.playerSide === "blue" ? sub.blueLineup : sub.redLineup;
        setGame(prev => prev && prev.phase === "swap" ? {
          ...prev,
          myAssign: {
            ...rec
          }
        } : prev);
      }
    }
  }, [game && game.phase]);
  const inDraft = !!game && game.phase === "draft";
  const slot = inDraft ? ORDER[game.turn] : null;
  const isPlayerTurn = slot && slot.side === game.playerSide;
  let p = null;
  if (game) p = game.phase === "done" && game.result ? game.result.p : eng.provisionalP(game);
  const candidates = useMemo(() => {
    if (!inDraft) return [];
    const s = ORDER[game.turn];
    if (s.side !== game.playerSide) return [];
    const picked = new Set([...game.blue.pool, ...game.red.pool]);
    const banned = new Set([...game.blue.bans, ...game.red.bans]);
    let rows = eng.ALLKEYS.map(k => {
      const c = eng.CH[k];
      return {
        k,
        name: c.name,
        pos: c.positions || [],
        wr: c.base_wr,
        banned: banned.has(k),
        picked: picked.has(k)
      };
    });
    if (cat !== "all") rows = rows.filter(r => r.pos.includes(cat));
    rows.sort((a, b) => a.name.localeCompare(b.name, "ko"));
    const q = query.trim().toLowerCase();
    return q ? rows.filter(r => r.name.toLowerCase().includes(q) || r.k.includes(q)) : rows;
  }, [game, query, cat]);
  const playerSide = game ? game.playerSide : "blue";
  const myPool = game ? game[playerSide].pool : [];
  const assignFilled = game ? POSITIONS.filter(pp => game.myAssign[pp]).length : 0;
  const canStart = !!game && game.phase === "swap" && assignFilled === 5;
  function setAssign(pos, key) {
    setGame(prev => {
      if (!prev) return prev;
      const a = {
        ...prev.myAssign
      };
      for (const pp of POSITIONS) if (a[pp] === key) delete a[pp];
      if (key) a[pos] = key;else delete a[pos];
      return {
        ...prev,
        myAssign: a
      };
    });
  }
  function autoAssign() {
    if (!game) return;
    const sub = eng.solveSubgame(game.blue, game.red);
    const rec = playerSide === "blue" ? sub.blueLineup : sub.redLineup;
    setGame(prev => prev ? {
      ...prev,
      myAssign: {
        ...rec
      }
    } : prev);
  }
  function startMatch() {
    setGame(prev => {
      if (!prev || prev.phase !== "swap") return prev;
      const sub = eng.solveSubgame(prev.blue, prev.red);
      const npcSide = prev.playerSide === "blue" ? "red" : "blue";
      const npcAssign = npcSide === "blue" ? sub.blueLineup : sub.redLineup;
      const blueAssign = prev.playerSide === "blue" ? prev.myAssign : npcAssign;
      const redAssign = prev.playerSide === "red" ? prev.myAssign : npcAssign;
      const pp = eng.assignedP({
        picks: blueAssign,
        bans: prev.blue.bans
      }, {
        picks: redAssign,
        bans: prev.red.bans
      });
      return {
        ...prev,
        phase: "done",
        result: {
          finalBlue: blueAssign,
          finalRed: redAssign,
          npcAssign,
          p: pp
        }
      };
    });
  }
  const view = game || {
    blue: {
      pool: [],
      bans: []
    },
    red: {
      pool: [],
      bans: []
    }
  };
  function BanSide(side) {
    const team = view[side];
    const active = !!slot && slot.type === "ban" && slot.side === side;
    const nextIdx = team.bans.length;
    const previewKey = active && side === playerSide && pending ? pending : null;
    return <div className={`ban-side ${side}`}>
        {Array.from({
        length: 5
      }).map((_, i) => {
        const filledK = team.bans[i];
        const cur = active && i === nextIdx;
        const isPreview = !!previewKey && !filledK && i === nextIdx;
        const k = filledK || (isPreview ? previewKey : null);
        const c = eng && k ? eng.CH[k] : null;
        return <span key={i} className={`ban-slot${filledK ? " filled" : ""}${cur ? " cur" : ""}${isPreview ? " preview" : ""}`} title={c ? c.name : undefined}>
              <ChampPortrait champKey={k || null} name={c ? c.name : null} size={48} variant="ban-portrait" />
            </span>;
      })}
      </div>;
  }
  function PickCol(side) {
    const team = view[side];
    const isPlayer = !!game && side === playerSide;
    if (!game || game.phase === "draft") {
      const active = !!slot && slot.side === side;
      const inactive = !!slot && slot.side !== side;
      const banTurn = active && slot.type === "ban";
      const previewKey = slot && slot.type === "pick" && slot.side === side && side === playerSide && pending ? pending : null;
      return <div className={`pick-col ${side}${active ? " active" : ""}${banTurn ? " ban-turn" : ""}${inactive ? " inactive" : ""}`}>
          <div className={`pick-col-head ${side}`}>{side === "blue" ? "BLUE" : "RED"}</div>
          {Array.from({
          length: 5
        }).map((_, i) => {
          const filledK = team.pool[i];
          const isPreview = !!previewKey && !filledK && i === team.pool.length;
          const k = filledK || (isPreview ? previewKey : null);
          const c = eng && k ? eng.CH[k] : null;
          return <div key={i} className={`pick-slot ${side}${filledK ? " filled" : ""}${isPreview ? " preview" : ""}`}>
                <ChampPortrait champKey={k || null} name={c ? c.name : null} size={60} />
                <span className="pick-name">{isPreview ? "선택 중" : c ? c.name : "—"}</span>
              </div>;
        })}
        </div>;
    }
    if (game.phase === "swap" && !isPlayer) {
      return <div className={`pick-col ${side}`}>
          <div className={`pick-col-head ${side}`}>{side === "blue" ? "BLUE" : "RED"}<span className="col-sub">라인 배치 중…</span></div>
          {Array.from({
          length: 5
        }).map((_, i) => {
          const k = team.pool[i];
          const c = eng && k ? eng.CH[k] : null;
          return <div key={i} className={`pick-slot ${side}${c ? " filled" : ""}`}>
                <ChampPortrait champKey={k || null} name={c ? c.name : null} size={60} />
                <span className="pick-name">{c ? c.name : "—"}</span>
              </div>;
        })}
        </div>;
    }
    const assign = game.phase === "done" ? side === "blue" ? game.result.finalBlue : game.result.finalRed : game.myAssign;
    return <div className={`pick-col ${side}`}>
        <div className={`pick-col-head ${side}`}>{side === "blue" ? "BLUE" : "RED"}</div>
        {POSITIONS.map(pos => {
        const k = assign ? assign[pos] : null;
        const c = eng && k ? eng.CH[k] : null;
        if (game.phase === "swap" && isPlayer) {
          const usedElsewhere = new Set(POSITIONS.filter(pp => pp !== pos).map(pp => game.myAssign[pp]).filter(Boolean));
          const opts = myPool.filter(key => !usedElsewhere.has(key));
          return <div key={pos} className={`pick-slot ${side}${c ? " filled" : ""}`}>
                <ChampPortrait champKey={k || null} name={c ? c.name : null} size={60} />
                <span className="pos-tag">{ROLE_KR[pos]}</span>
                <select className="swap-select" value={k || ""} onChange={e => setAssign(pos, e.target.value || null)}>
                  <option value="">—</option>
                  {opts.map(key => <option key={key} value={key}>{eng.CH[key].name}</option>)}
                </select>
              </div>;
        }
        return <div key={pos} className={`pick-slot ${side}${c ? " filled" : ""}`}>
              <ChampPortrait champKey={k || null} name={c ? c.name : null} size={60} />
              <span className="pos-tag">{ROLE_KR[pos]}</span>
              <span className="pick-name">{c ? c.name : "—"}</span>
            </div>;
      })}
      </div>;
  }
  return <div className="draft">
      {}
      <div className="draft-topbar">
        <span className="eyebrow">밴픽 드래프트</span>
        {game ? <span style={{
        display: "flex",
        gap: 8,
        alignItems: "center",
        flexWrap: "wrap"
      }}>
            <button className="btn btn-secondary" onClick={startGame}>다시 시작</button>
            <button className="btn btn-secondary" onClick={quitGame}>그만두기</button>
          </span> : null}
      </div>

      {}
      <div className={"ban-bar" + (slot && slot.type === "ban" ? " banning" : "")}>
        {BanSide("blue")}
        <div className="ban-vs">BANS</div>
        {BanSide("red")}
      </div>

      {}
      <div className="draft-main">
        {PickCol("blue")}

        <div className="center-col">
          {!game ? <div className="center-start">
              <div className="center-start-msg">진영을 고르고 게임을 시작하세요.</div>
              <label>진영
                <select value={cfg.playerSide} onChange={e => setCfg({
              ...cfg,
              playerSide: e.target.value
            })}>
                  <option value="blue">Blue</option><option value="red">Red</option>
                </select>
              </label>
              <button className="btn btn-primary btn-lg" onClick={startGame}>게임 시작 ▶</button>
              {!ready && <span className="small" style={{
            color: "var(--c-warning)"
          }}>meta.json 미연결 (디자인 미리보기)</span>}
            </div> : game.phase === "swap" ? <div className="center-empty">좌·우 칼럼에서 5장을 각 라인에 배치하세요.</div> : game.phase === "done" ? <div className="center-empty">상대(NPC) 라인 배치가 공개되었습니다.</div> : isPlayerTurn ? <ChampPicker kind={slot.type} cat={cat} setCat={setCat} query={query} setQuery={setQuery} rows={candidates} onPick={k => commit(slot.side, slot.type, k)} pending={pending} setPending={setPending} note={slot.type === "ban" ? "⊘ 밴 단계 — 상대가 쓰지 못하도록 금지할 챔피언을 고르세요." : "✓ 픽 단계 — 우리 팀이 쓸 챔피언을 고르세요. 라인은 마지막 스왑에서 정합니다."} /> : <div className="center-wait">NPC 생각 중…</div>}
        </div>

        {PickCol("red")}
      </div>

      {}
      <div className="draft-status">
        <div className="status-main">
          <WinGauge p={p} />
        </div>
        <div className="status-controls">
          {game && game.phase === "swap" ? <React.Fragment>
              <button className="btn btn-secondary" onClick={autoAssign}>추천 배치</button>
              <button className="btn btn-primary btn-lg" disabled={!canStart} onClick={startMatch}>게임 시작 ▶</button>
              {!canStart && <span className="small">모든 라인을 채우면 시작 ({assignFilled}/5)</span>}
            </React.Fragment> : game && game.phase === "done" ? <button className="btn btn-primary" onClick={startGame}>다시 시작</button> : null}
        </div>
      </div>

      {}
      {game && game.phase === "done" && <WinExplain eng={eng} blue={{
      picks: game.result.finalBlue,
      bans: game.blue.bans
    }} red={{
      picks: game.result.finalRed,
      bans: game.red.bans
    }} p={game.result.p} assigned />}

      {!game && !ready && <EmptyState title="meta.json 연결 대기 중">
          노트북이 만든 <code>meta.json</code>을 <code>data/</code>에 두면 게임이 작동합니다. 현재는 디자인 미리보기입니다.
        </EmptyState>}
    </div>;
}
function FreeSim({
  eng
}) {
  const ready = !!eng;
  const [blue, setBlue] = useState({
    picks: {},
    bans: []
  });
  const [red, setRed] = useState({
    picks: {},
    bans: []
  });
  const [ran, setRan] = useState(false);
  const [target, setTarget] = useState(null);
  const [query, setQuery] = useState("");
  const [cat, setCat] = useState("all");
  const [pending, setPending] = useState(null);
  const setPick = (side, pos, key) => {
    const cur = side === "blue" ? blue : red;
    const upd = {
      ...cur,
      picks: {
        ...cur.picks
      }
    };
    if (key) upd.picks[pos] = key;else delete upd.picks[pos];
    (side === "blue" ? setBlue : setRed)(upd);
  };
  function openPicker(side, pos) {
    if (!ready) {
      alert(NO_META_MSG);
      return;
    }
    setCat(pos);
    setQuery("");
    setPending(null);
    setTarget({
      side,
      pos
    });
  }
  function cancelPick() {
    setTarget(null);
    setPending(null);
  }
  function choose(key) {
    if (target) {
      setPick(target.side, target.pos, key);
      setTarget(null);
      setPending(null);
    }
  }
  function clearSlot(side, pos, e) {
    e.stopPropagation();
    setPick(side, pos, null);
  }
  function run() {
    if (!ready) {
      alert(NO_META_MSG);
      return;
    }
    setRan(true);
  }
  useEffect(() => {
    if (!target) return;
    const onKey = e => {
      if (e.key === "Escape") cancelPick();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [target]);
  const show = ran && ready;
  const p = show ? eng.pBlue(blue, red) : null;
  const pickerRows = useMemo(() => {
    if (!target || !ready) return [];
    const used = new Set();
    for (const [sd, t] of [["blue", blue], ["red", red]]) for (const pp of POSITIONS) {
      const k = t.picks[pp];
      if (k && !(sd === target.side && pp === target.pos)) used.add(k);
    }
    let rows = eng.ALLKEYS.filter(k => !used.has(k)).map(k => eng.CH[k]);
    if (cat !== "all") rows = rows.filter(c => (c.positions || []).includes(cat));
    rows.sort((a, b) => a.name.localeCompare(b.name, "ko"));
    const q = query.trim().toLowerCase();
    return q ? rows.filter(c => c.name.toLowerCase().includes(q) || c.key.includes(q)) : rows;
  }, [target, blue, red, query, cat]);
  function pickColumn(side) {
    const team = side === "blue" ? blue : red;
    return <div className={`pick-col ${side}`}>
        <div className={`pick-col-head ${side}`}>{side === "blue" ? "BLUE" : "RED"}</div>
        {POSITIONS.map(pos => {
        const k = team.picks[pos];
        const c = eng && k ? eng.CH[k] : null;
        const sel = !!target && target.side === side && target.pos === pos;
        const isPreview = sel && !!pending;
        const dispK = isPreview ? pending : k;
        const dispC = eng && dispK ? eng.CH[dispK] : null;
        return <div key={pos} className={`pick-slot click ${side}${dispK ? " filled" : ""}${sel ? " active" : ""}${isPreview ? " preview" : ""}`} onClick={() => openPicker(side, pos)}>
              <ChampPortrait champKey={dispK || null} name={dispC ? dispC.name : null} size={60} />
              <span className="pos-tag">{ROLE_KR[pos]}</span>
              <span className="pick-name">{isPreview ? "선택 중" : c ? c.name : "+ 선택"}</span>
              {c ? <button className="slot-clear" title="비우기" onClick={e => clearSlot(side, pos, e)}>×</button> : <span className="pick-wr" style={{
            opacity: .5
          }}>▾</span>}
            </div>;
      })}
      </div>;
  }
  return <div className="draft">
      <div className="draft-topbar">
        <span className="eyebrow">자유 시뮬레이션</span>
        <span className="small">양팀을 직접 구성해 승률을 예측합니다</span>
      </div>

      {}
      <div className="draft-main">
        {pickColumn("blue")}
        <div className="center-col">
          {target ? <React.Fragment>
              <ChampPicker kind="pick" cat={cat} setCat={setCat} query={query} setQuery={setQuery} rows={pickerRows.map(c => ({
            k: c.key,
            name: c.name,
            wr: c.base_wr
          }))} onPick={choose} pending={pending} setPending={setPending} />
              <button className="btn btn-secondary" onClick={cancelPick}>취소</button>
            </React.Fragment> : <div className="center-start">
              <div className="center-start-msg">
                {show ? "빈 슬롯은 중립(0.5)으로 처리됩니다. 픽을 바꾸고 다시 실행하세요." : "좌·우 슬롯을 클릭해 챔피언을 고르고 실행을 누르세요."}
              </div>
              <button className="btn btn-primary btn-lg" onClick={run}>승률 예측 실행 ▶</button>
              {!ready && <span className="small" style={{
            color: "var(--c-warning)"
          }}>meta.json 미연결 (디자인 미리보기)</span>}
            </div>}
        </div>
        {pickColumn("red")}
      </div>

      {}
      <div className="draft-status">
        <div className="status-main">
          <WinGauge p={p} />
        </div>
      </div>

      {show && <WinExplain eng={eng} blue={blue} red={red} p={p} />}

    </div>;
}