// leaders.jsx
function LeaderCard({ l, isActive }) {
  const [flipped, setFlipped] = React.useState(false);
  const onClick = (e) => {
    // Don't flip if user clicked a link/button inside
    if (e.target.closest('a, button')) return;
    setFlipped(f => !f);
  };
  return (
    <article
      className={`leader-card ${isActive ? 'is-active' : ''} ${l.img ? '' : 'leader-card-empty'} ${flipped ? 'is-flipped' : ''}`}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setFlipped(f => !f); } }}
      aria-pressed={flipped}
    >
      <div className="leader-flip">
        <div className="leader-face leader-face-front">
          <div className="leader-portrait" style={{ background: l.accent }}>
            {l.img ? (
              <img src={l.img} alt={`${l.cls}ジムリーダー ${l.name}`} />
            ) : (
              <div className="leader-portrait-placeholder">
                <div className="leader-portrait-glyph">?</div>
                <div className="leader-portrait-note">画像準備中</div>
              </div>
            )}
            <div className="leader-flip-hint">クリックで、デッキを見る。</div>
          </div>
          <div className="leader-body">
            <div className="leader-tag">◤ {l.tag}</div>
            <h3 className="leader-name">
              <span className="leader-class">{l.cls}ジムリーダー</span>
              <span className="leader-given">{l.name}</span>
            </h3>
            <p className="leader-desc">{l.desc}</p>
            <dl className="leader-rewards">
              <div>
                <dt>勝利報酬｜バッジ</dt>
                <dd>{l.badge}</dd>
              </div>
              <div>
                <dt>勝利報酬｜特別カード</dt>
                <dd>{l.reward}</dd>
              </div>
            </dl>
          </div>
        </div>
        <div className="leader-face leader-face-back" style={{ background: l.accent }}>
          <div className="leader-back-image leader-back-image-full">
            {l.backImg ? (
              <img src={l.backImg} alt={`${l.name} デッキ`} />
            ) : (
              <div className="leader-back-placeholder">画像準備中</div>
            )}
            <div className="leader-flip-hint leader-flip-hint-back">クリックで戻る ↺</div>
          </div>
        </div>
      </div>
    </article>
  );
}

function GymLeaders() {
  const leaders = window.LEADERS || [];
  const trackRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  const scrollToIndex = (i) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.children[i];
    if (!card) return;
    const left = card.offsetLeft - (el.clientWidth - card.clientWidth) / 2;
    el.scrollTo({ left, behavior: 'smooth' });
  };

  // Track active card via scroll position
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const center = el.scrollLeft + el.clientWidth / 2;
        let best = 0; let bestDist = Infinity;
        for (let i = 0; i < el.children.length; i++) {
          const c = el.children[i];
          const cCenter = c.offsetLeft + c.clientWidth / 2;
          const dist = Math.abs(cCenter - center);
          if (dist < bestDist) { bestDist = dist; best = i; }
        }
        setActive(best);
      });
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => { el.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);

  const go = (delta) => {
    const next = Math.max(0, Math.min(leaders.length - 1, active + delta));
    scrollToIndex(next);
  };

  return (
    <section className="leaders" id="leaders">
      <div className="leaders-halftone" aria-hidden="true"></div>
      <div className="container">
        <SectionHeader
          label="◤ GYM BATTLE"
          title={<>各分類の頂点に立つ、<br/>ジムリーダーたち。</>}
          subtitle={<>それぞれの生き物の分類を熟知したジムリーダー。彼らとのバトルに勝利すると、<br className="hide-sp" />ジムバッジと特別カードが手に入る。</>}
        />

        <div className="leaders-stage">
          <button
            type="button"
            className="leaders-arrow leaders-arrow-prev"
            onClick={() => go(-1)}
            disabled={active === 0}
            aria-label="前のジムリーダー"
          >←</button>

          <div className="leaders-track" ref={trackRef}>
            {leaders.map((l, i) => (
              <LeaderCard key={l.id} l={l} isActive={i === active} />
            ))}
          </div>

          <button
            type="button"
            className="leaders-arrow leaders-arrow-next"
            onClick={() => go(1)}
            disabled={active === leaders.length - 1}
            aria-label="次のジムリーダー"
          >→</button>
        </div>

        <div className="leaders-dots" role="tablist" aria-label="ジムリーダー一覧">
          {leaders.map((l, i) => (
            <button
              key={l.id}
              type="button"
              role="tab"
              aria-selected={i === active}
              className={`leaders-dot ${i === active ? 'is-active' : ''}`}
              onClick={() => scrollToIndex(i)}
            >
              <span className="leaders-dot-no">{String(i + 1).padStart(2, '0')}</span>
              <span className="leaders-dot-label">{l.cls}</span>
            </button>
          ))}
        </div>

        <div className="leaders-counter">
          <span className="leaders-counter-cur">{String(active + 1).padStart(2, '0')}</span>
          <span className="leaders-counter-sep">/</span>
          <span className="leaders-counter-total">{String(leaders.length).padStart(2, '0')}</span>
          <span className="leaders-counter-hint">←→キーまたは下のドットで切替</span>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { GymLeaders, LeaderCard });