// swipe-card.jsx — Tinder風の二択スワイプカード

function SwipeCard({ question, index, total, onAnswer, prompt }) {
  const [drag, setDrag] = React.useState({ x: 0, y: 0, active: false });
  const [exit, setExit] = React.useState(null); // 'a' | 'b' | null
  const startRef = React.useRef({ x: 0, y: 0 });

  var labelA = question.a ? question.a.label : question.textA;
  var labelB = question.b ? question.b.label : question.textB;
  var questionText = prompt || question.q || "次の2つのうち、より近い方を選んでください。";

  React.useEffect(() => {
    setDrag({ x: 0, y: 0, active: false });
    setExit(null);
  }, [question.id]);

  const onDown = (clientX, clientY) => {
    if (exit) return;
    startRef.current = { x: clientX, y: clientY };
    setDrag({ x: 0, y: 0, active: true });
  };
  const onMove = (clientX, clientY) => {
    if (!drag.active || exit) return;
    setDrag({
      x: clientX - startRef.current.x,
      y: (clientY - startRef.current.y) * 0.3,
      active: true,
    });
  };
  const onUp = () => {
    if (!drag.active || exit) return;
    const threshold = 120;
    if (drag.x > threshold) commit("b");
    else if (drag.x < -threshold) commit("a");
    else setDrag({ x: 0, y: 0, active: false });
  };

  const commit = (choice) => {
    setExit(choice);
    setTimeout(() => {
      onAnswer(choice);
    }, 520);
  };

  // マウス
  const handleMouseDown = (e) => onDown(e.clientX, e.clientY);
  React.useEffect(() => {
    if (!drag.active) return;
    const mm = (e) => onMove(e.clientX, e.clientY);
    const mu = () => onUp();
    window.addEventListener("mousemove", mm);
    window.addEventListener("mouseup", mu);
    return () => {
      window.removeEventListener("mousemove", mm);
      window.removeEventListener("mouseup", mu);
    };
  }, [drag.active, drag.x]);

  // タッチ
  const handleTouchStart = (e) => {
    const t = e.touches[0];
    onDown(t.clientX, t.clientY);
  };
  const handleTouchMove = (e) => {
    const t = e.touches[0];
    onMove(t.clientX, t.clientY);
  };

  const rotation = drag.x * 0.05;
  const aOpacity = Math.max(0, Math.min(1, -drag.x / 120));
  const bOpacity = Math.max(0, Math.min(1, drag.x / 120));

  let transform = `translate(${drag.x}px, ${drag.y}px) rotate(${rotation}deg)`;
  let cardClass = "sc-card";
  if (exit === "a") {
    transform = "translate(-140vw, -40px) rotate(-30deg)";
    cardClass += " sc-exit";
  } else if (exit === "b") {
    transform = "translate(140vw, -40px) rotate(30deg)";
    cardClass += " sc-exit";
  } else if (drag.active) {
    cardClass += " sc-drag";
  }

  return (
    <div className="sc-stage">
      {/* 進捗 */}
      <div className="sc-progress">
        <div className="sc-progress-text">
          <span className="sc-pcurrent">{String(index + 1).padStart(2, "0")}</span>
          <span className="sc-pdiv">／</span>
          <span className="sc-ptotal">{String(total).padStart(2, "0")}</span>
        </div>
        <div className="sc-progress-bar">
          <div className="sc-progress-fill" style={{ width: `${((index + 1) / total) * 100}%` }} />
        </div>
      </div>

      {/* 質問テキスト */}
      <div className="sc-question" key={question.id}>{questionText}</div>

      {/* カード */}
      <div
        className={cardClass}
        style={{ transform, transition: drag.active ? "none" : undefined }}
        onMouseDown={handleMouseDown}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={onUp}
      >
        {/* 左（A）オーバーレイ */}
        <div className="sc-overlay sc-overlay-a" style={{ opacity: aOpacity }}>
          <div className="sc-overlay-label">{labelA}</div>
        </div>
        {/* 右（B）オーバーレイ */}
        <div className="sc-overlay sc-overlay-b" style={{ opacity: bOpacity }}>
          <div className="sc-overlay-label">{labelB}</div>
        </div>

        <div className="sc-half sc-half-a">
          <div className="sc-half-header">
            <span className="sc-half-tag">A</span>
            <span className="sc-half-swipe">← SWIPE</span>
          </div>
          <div className="sc-half-text">{labelA}</div>
        </div>
        <div className="sc-divider">
          <div className="sc-divider-line"></div>
          <div className="sc-divider-or">OR</div>
          <div className="sc-divider-line"></div>
        </div>
        <div className="sc-half sc-half-b">
          <div className="sc-half-header">
            <span className="sc-half-tag">B</span>
            <span className="sc-half-swipe">SWIPE →</span>
          </div>
          <div className="sc-half-text">{labelB}</div>
        </div>
      </div>

      {/* 操作ボタン */}
      <div className="sc-controls">
        <button className="sc-btn sc-btn-a" onClick={() => !exit && commit("a")} aria-label="A">
          <span className="sc-btn-arrow">←</span>
          <span className="sc-btn-text">A</span>
        </button>
        <div className="sc-hint">スワイプ／タップ</div>
        <button className="sc-btn sc-btn-b" onClick={() => !exit && commit("b")} aria-label="B">
          <span className="sc-btn-text">B</span>
          <span className="sc-btn-arrow">→</span>
        </button>
      </div>
    </div>
  );
}

window.SwipeCard = SwipeCard;