// Pack opening flow — sideways rip, spread reveal, flip, shimmer, summary
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

function PackArt({ pack, progress = 0, dir = 1, torn = false, highestRarity }) {
  // dir: +1 right-swipe, -1 left-swipe. Drives the lid translation direction.
  const shimmerColor = highestRarity === 'legendary' ? '#ffcf4a'
                     : highestRarity === 'epic'      ? '#c97bff'
                     : highestRarity === 'rare'      ? '#7cc4ff' : 'transparent';
  const lidShift = torn ? dir * 240 : dir * progress * 200;
  const lidRot = torn ? dir * 18 : dir * progress * 12;
  const ripWidth = Math.max(0, Math.min(1, progress));
  const ripPolygon = dir >= 0
    ? `polygon(0 0, ${ripWidth * 100}% 0, ${ripWidth * 100}% 28%, 0 28%)`
    : `polygon(${(1 - ripWidth) * 100}% 0, 100% 0, 100% 28%, ${(1 - ripWidth) * 100}% 28%)`;
  return (
    <div className="pack-art" style={{
      '--pack-grad': pack.gradient,
      '--shimmer': shimmerColor,
    }}>
      {pack.image && <img className="pack-art__image" src={pack.image} alt={pack.name} />}
      <div className="pack-art__shimmer" />
      <div className="pack-art__lid" style={{
        transform: `translateX(${lidShift}px) translateY(${torn ? -40 : 0}px) rotate(${lidRot}deg)`,
        opacity: torn ? 0 : 1,
      }} />
      <div className="pack-art__body">
        <div className="pack-art__rip" style={{ clipPath: ripPolygon }}>
          <div className="pack-art__rip-edge" />
        </div>
        <div className="pack-art__title">
          <div className="pack-art__name">{pack.name.toUpperCase()}</div>
          <div className="pack-art__count">{pack.size} CARDS</div>
        </div>
      </div>
    </div>
  );
}

function PackOpening({ pack, rolls, onDone, onGrantStickers, data }) {
  // phase: intro -> tear -> shimmer? -> reveal -> summary
  const [phase, setPhase] = useStateP('intro');
  const [tearProgress, setTearProgress] = useStateP(0);
  const [tearDir, setTearDir] = useStateP(1); // +1 right-swipe, -1 left-swipe
  const [revealed, setRevealed] = useStateP(() => new Set());
  const [zoomedIdx, setZoomedIdx] = useStateP(null);
  const dragRef = useRefP({ startX: 0, startY: 0, dragging: false, locked: null });
  const torn = tearProgress >= 1;

  const order = { common: 0, rare: 1, epic: 2, legendary: 3 };
  const highestRarity = rolls.reduce((best, r) => {
    return (order[r.rarity] ?? 0) > (order[best] ?? 0) ? r.rarity : best;
  }, 'common');

  useEffectP(() => {
    if (phase === 'intro') {
      const t = setTimeout(() => setPhase('tear'), 900);
      return () => clearTimeout(t);
    }
  }, [phase]);

  // Sideways drag-to-tear (works either direction)
  function onPointerDown(e) {
    if (phase !== 'tear') return;
    const p = e.touches?.[0] || e;
    dragRef.current.startX = p.clientX ?? 0;
    dragRef.current.startY = p.clientY ?? 0;
    dragRef.current.dragging = true;
    dragRef.current.locked = null;
    e.currentTarget.setPointerCapture?.(e.pointerId);
  }
  function onPointerMove(e) {
    if (!dragRef.current.dragging || phase !== 'tear') return;
    const p = e.touches?.[0] || e;
    const dx = (p.clientX ?? 0) - dragRef.current.startX;
    const dy = (p.clientY ?? 0) - dragRef.current.startY;
    // Lock axis after 12px so a slight vertical wobble doesn't engage the tear.
    if (dragRef.current.locked == null) {
      if (Math.abs(dx) < 12 && Math.abs(dy) < 12) return;
      dragRef.current.locked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
    }
    if (dragRef.current.locked !== 'x') return;
    const dir = dx >= 0 ? 1 : -1;
    setTearDir(dir);
    const prog = Math.max(0, Math.min(1, Math.abs(dx) / 220));
    setTearProgress(prog);
    if (prog >= 1) {
      dragRef.current.dragging = false;
      finishTear();
    }
  }
  function onPointerUp() {
    if (!dragRef.current.dragging) return;
    dragRef.current.dragging = false;
    if (tearProgress < 0.55) setTearProgress(0);
    else { setTearProgress(1); finishTear(); }
  }

  function finishTear() {
    setTearProgress(1);
    const goReveal = () => setPhase('reveal');
    if (highestRarity === 'common') {
      setTimeout(goReveal, 350);
    } else {
      setTimeout(() => setPhase('shimmer'), 350);
      setTimeout(goReveal, 1900);
    }
  }

  function toggleReveal(idx) {
    setRevealed(prev => {
      if (prev.has(idx)) {
        // Already revealed → open zoom-inspect overlay.
        setZoomedIdx(idx);
        return prev;
      }
      const next = new Set(prev);
      next.add(idx);
      return next;
    });
  }

  function handleDone() {
    onGrantStickers(rolls);
    onDone();
  }

  const allRevealed = revealed.size >= rolls.length;

  return (
    <div className="pack-overlay">
      <button className="pack-overlay__close" onClick={handleDone} aria-label="Close">✕</button>

      {phase === 'intro' && (
        <div className="pack-intro fade-in">
          <div className="pack-intro__glow" style={{ background: pack.gradient }} />
          <PackArt pack={pack} />
          <div className="pack-intro__text display">Get ready...</div>
        </div>
      )}

      {phase === 'tear' && (
        <div className="pack-tear">
          <div className="pack-tear__hint display">Swipe across to rip open</div>
          <div className="pack-tear__pack"
               onPointerDown={onPointerDown}
               onPointerMove={onPointerMove}
               onPointerUp={onPointerUp}
               onPointerCancel={onPointerUp}
               onTouchStart={onPointerDown}
               onTouchMove={onPointerMove}
               onTouchEnd={onPointerUp}>
            <PackArt pack={pack} progress={tearProgress} dir={tearDir} torn={torn} highestRarity={highestRarity} />
            <div className="pack-tear__arrow">
              <svg viewBox="0 0 80 30" width="64" height="24">
                <path d="M 8 15 L 72 15 M 16 7 L 8 15 L 16 23 M 64 7 L 72 15 L 64 23" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => { setTearProgress(1); finishTear(); }}>Tap to open</button>
        </div>
      )}

      {phase === 'shimmer' && (
        <div className="pack-shimmer" data-rarity={highestRarity}>
          <div className="pack-shimmer__burst" />
          <div className="pack-shimmer__rays" />
          <div className="pack-shimmer__text display">
            {highestRarity === 'legendary' ? 'LEGENDARY INCOMING!' : highestRarity === 'epic' ? 'EPIC HIT!' : 'RARE!'}
          </div>
        </div>
      )}

      {phase === 'reveal' && (
        <div className="pack-spread">
          <div className="pack-spread__title display">Tap any card to reveal</div>
          <div className="pack-spread__row">
            {rolls.map((roll, idx) => {
              const isOpen = revealed.has(idx);
              return (
                <div
                  key={idx}
                  className={`pack-spread__slot ${isOpen ? 'is-revealed' : ''}`}
                  onClick={() => toggleReveal(idx)}
                  style={{ animationDelay: `${idx * 60}ms` }}
                >
                  <div className="pack-spread__flipper">
                    <div className="pack-spread__face pack-spread__back">
                      <div className="pack-spread__back-mark">⚽</div>
                    </div>
                    <div className="pack-spread__face pack-spread__front">
                      <StickerCard sticker={roll.sticker} rarity={roll.rarity} isNew={roll.isNew} interactive={isOpen} tilt={isOpen} />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="pack-spread__progress">{revealed.size} / {rolls.length}</div>
          {allRevealed && (
            <button className="btn btn-primary btn-lg pack-spread__summary-btn" onClick={() => setPhase('summary')}>See Summary</button>
          )}
        </div>
      )}

      {phase === 'summary' && (
        <div className="pack-summary">
          <div className="pack-summary__title display">Pack Summary</div>
          <div className="pack-summary__stats">
            <div className="pack-summary__stat"><span>New</span><b>{rolls.filter(r => r.isNew).length}</b></div>
            <div className="pack-summary__stat"><span>Duplicates</span><b>{rolls.filter(r => !r.isNew).length}</b></div>
            <div className="pack-summary__stat"><span>Coins back</span><b className="coin">{rolls.filter(r => !r.isNew).length * 15}</b></div>
          </div>
          <div className="pack-summary__grid">
            {rolls.map((roll, idx) => (
              <div key={idx} className="pack-summary__item">
                <StickerCard sticker={roll.sticker} rarity={roll.rarity} isNew={roll.isNew} interactive={false} mini />
              </div>
            ))}
          </div>
          <div className="row-wrap" style={{ justifyContent: 'center' }}>
            <button className="btn btn-ghost" onClick={handleDone}>Close</button>
            <button className="btn btn-primary" onClick={handleDone}>To the Collection →</button>
          </div>
        </div>
      )}

      {zoomedIdx != null && rolls[zoomedIdx] && (
        <div className="pack-spread__zoom" onClick={() => setZoomedIdx(null)}>
          <div className="pack-spread__zoom-inner" onClick={(e) => e.stopPropagation()}>
            <StickerCard
              sticker={rolls[zoomedIdx].sticker}
              rarity={rolls[zoomedIdx].rarity}
              isNew={rolls[zoomedIdx].isNew}
              interactive
              tilt
            />
            <button className="btn btn-ghost btn-sm pack-spread__zoom-close" onClick={() => setZoomedIdx(null)}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.PackOpening = PackOpening;
window.PackArt = PackArt;