/* セクション: Factions（ライブスコアバー pt ＋陣営選択＋ボーナスコード） */

function Factions({ selected, onSelect }) {
  const [ref, seen] = useInView({ threshold: 0.2 });
  const [scores, setScores] = React.useState(() => FACTIONS.map((f) => f.score));

  // live ticker: small random increments to feel real-time
  React.useEffect(() => {
    if (!seen) return;
    const id = setInterval(() => {
      setScores((prev) => {
        const next = [...prev];
        const i = Math.floor(Math.random() * next.length);
        next[i] += Math.floor(Math.random() * 9 + 1) * 100;
        return next;
      });
    }, 1800);
    return () => clearInterval(id);
  }, [seen]);

  const max = Math.max(...scores);

  // Compute rank order based on current scores
  const rankOrder = scores
    .map((s, i) => ({ i, s }))
    .sort((a, b) => b.s - a.s)
    .reduce((acc, { i }, rank) => { acc[i] = rank; return acc; }, {});
  const rankLabels = ['1ST', '2ND', '3RD'];

  const [copied, setCopied] = React.useState(null);
  const handleCopy = async (f) => {
    const text = f.bonusCode;
    try {
      await navigator.clipboard.writeText(text);
    } catch (e) {
      const ta = document.createElement("textarea");
      ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0";
      document.body.appendChild(ta); ta.focus(); ta.select();
      try { document.execCommand("copy"); } catch (_) {}
      document.body.removeChild(ta);
    }
    setCopied(f.key);
    setTimeout(() => setCopied((c) => (c === f.key ? null : c)), 1600);
  };

  return (
    <section className={"band band--alt2" + (seen ? " revealed" : "")} id="join" ref={ref}>
      <div className="band-inner">
        <div className="reveal" style={{ textAlign: "center" }}>
          <span className="live-tag"><span className="live-dot"></span>LIVE 陣営スコア</span>
          <h2 className="sec-title">君は、<span className="hl-fire">どの軍</span>だ。</h2>
          <p className="sec-lead">入金額がそのまま軍の戦力（pt）に。陣営を選んで今すぐ参戦。</p>
        </div>

        <div className="faction-grid">
          {FACTIONS.map((f, i) => {
            const pct = seen ? Math.max(8, Math.round((scores[i] / max) * 100)) : 0;
            const isSel = selected === f.key;
            return (
              <div className={`fcard ${f.cls} reveal ${isSel ? "selected" : ""}`} key={f.key} style={{ transitionDelay: `${i * 70}ms` }}>
                <div className="fcard-hero">
                  <img className="fcard-logo" src={f.logo} alt={f.name + " ロゴ"} />
                  <span className="fcard-rankbadge">{rankLabels[rankOrder[i]] || (rankOrder[i] + 1 + 'TH')}</span>
                  <img className="fcard-mascot" src={f.mascot} alt={f.char} />
                </div>
                <div className="fcard-head">
                  <h3 className="fcard-name">{f.name}</h3>
                  <span className="fcard-rank">先鋒 {f.char}</span>
                </div>
                <p className="fcard-copy">「{f.copy}」</p>

                <div className={"bonus-chip" + (copied === f.key ? " copied" : "")}>
                  <span className="bc-lab">ボーナスコード</span>
                  <b className="bc-code">{f.bonusCode}</b>
                  <button className="bc-copy" onClick={() => handleCopy(f)}>
                    {copied === f.key ? "✓ コピー済" : "コピー"}
                  </button>
                </div>

                <div className="score-row">
                  <span className="score-label">陣営スコア</span>
                  <span className="score-val">{pts(scores[i])} <em>pt</em></span>
                </div>
                <div className="score-bar">
                  <div className="score-fill" style={{ width: pct + "%" }}></div>
                </div>

                <button className="fjoin" onClick={() => onSelect(f.key)}>
                  {isSel ? "✓ この軍で参戦中" : "この軍に参戦する"}
                </button>
              </div>
            );
          })}
        </div>

        <p className="join-foot reveal">
          ボーナスコードをコピー → <b>チャットで送信</b> → 入金してプレイするだけ。<br />
          <span className="join-note">※途中経過・結果は参加者のみに送信されます。</span>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Factions });