// Shared "AI image placeholder" — striped/tinted backdrop with the two fighters
// positioned, a stage label, and a "would be generated" mono tag.
// Each variant wraps this with its own aesthetic chrome.

window.makeStripes = function(c1, c2) {
  return `repeating-linear-gradient(135deg, ${c1} 0 14px, ${c2} 14px 28px)`;
};

window.locationPalette = {
  jungle:  ['#1f5d3a', '#2a7a4a', '#8fd97a'],
  ocean:   ['#0b4e7a', '#1e7bb0', '#7ad4f5'],
  desert:  ['#a36a2a', '#d99450', '#f6d28a'],
  volcano: ['#3a0d0d', '#a02828', '#f7b03c'],
  ice:     ['#5079a4', '#9bc9e8', '#e4f3fb'],
  mountain:['#3e4e64', '#7e8ea3', '#d2dae4'],
  space:   ['#0a0a2a', '#3a1f6e', '#9d6ef5'],
  castle:  ['#3a2e4a', '#7a5a8f', '#d2b3e6'],
  atlantis:['#0b3a4a', '#1a8a9e', '#a4e4d8'],
  kitchen: ['#a86a3a', '#e8b07a', '#fbe4c8'],
  school:  ['#a04848', '#d97070', '#f6cf9a'],
  market:  ['#5a8a4a', '#9ec47a', '#e0eecf'],
  park:    ['#3a7a3a', '#7ab07a', '#cfe6c4'],
};

// SceneBackdrop — striped backdrop in location's palette + the two fighters emoji
// Pass scale to control size. Used by each variant with its own card chrome.
function SceneBackdrop({ location, a, b, countA, countB, stage, winner, narrative, mood, fontMono, narrativeColor, narrativeBg }) {
  const palette = window.locationPalette[location?.id] || ['#444', '#888', '#ddd'];
  const [dark, mid, light] = palette;
  const stripes = `repeating-linear-gradient(135deg, ${dark} 0 18px, ${mid} 18px 36px)`;
  // Stage-driven positions: animals approach each other, then in finale winner stands tall
  const stagePos = {
    start:  { aX: 12,  bX: 12, scale: 1.0, tilt: 0 },
    mid:    { aX: 32,  bX: 32, scale: 1.05, tilt: -6 },
    end:    { aX: winner === 'A' ? 18 : 50, bX: winner === 'B' ? 18 : 50, scale: 1.0, tilt: 0 },
  }[stage] || { aX: 20, bX: 20, scale: 1, tilt: 0 };

  const aDim = stage === 'end' && winner === 'B' ? 0.35 : 1;
  const bDim = stage === 'end' && winner === 'A' ? 0.35 : 1;
  const aScale = stage === 'end' && winner === 'A' ? 1.15 : 1;
  const bScale = stage === 'end' && winner === 'B' ? 1.15 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: stripes }}>
      {/* light wash bottom for ground */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '40%', background: `linear-gradient(transparent, ${dark}aa)` }} />
      {/* sun/moon */}
      <div style={{ position: 'absolute', top: '14%', right: '12%', width: 38, height: 38, borderRadius: '50%', background: light, opacity: 0.6, filter: 'blur(2px)' }} />
      {/* fighter A on left */}
      <div style={{ position: 'absolute', bottom: '18%', left: `${stagePos.aX}%`, transform: `scale(${aScale}) rotate(${stagePos.tilt}deg)`, transformOrigin: 'bottom center', opacity: aDim, transition: 'all 0.5s' }}>
        <div style={{ fontSize: 64, lineHeight: 1, filter: aDim < 1 ? 'grayscale(0.7)' : '' }}>
          {a?.emoji || '?'}
        </div>
        {countA > 1 && <div style={{ position: 'absolute', top: -8, right: -10, background: '#fff', color: '#000', borderRadius: 999, fontSize: 12, fontWeight: 700, padding: '1px 7px', boxShadow: '0 2px 4px rgba(0,0,0,0.3)', fontFamily: fontMono }}>×{countA}</div>}
      </div>
      {/* fighter B on right (mirrored) */}
      <div style={{ position: 'absolute', bottom: '18%', right: `${stagePos.bX}%`, transform: `scale(${bScale}) rotate(${-stagePos.tilt}deg) scaleX(-1)`, transformOrigin: 'bottom center', opacity: bDim, transition: 'all 0.5s' }}>
        <div style={{ fontSize: 64, lineHeight: 1, filter: bDim < 1 ? 'grayscale(0.7)' : '' }}>
          {b?.emoji || '?'}
        </div>
        {countB > 1 && <div style={{ position: 'absolute', top: -8, left: -10, transform: 'scaleX(-1)', background: '#fff', color: '#000', borderRadius: 999, fontSize: 12, fontWeight: 700, padding: '1px 7px', boxShadow: '0 2px 4px rgba(0,0,0,0.3)', fontFamily: fontMono }}>×{countB}</div>}
      </div>
      {/* sparks / impact for mid */}
      {stage === 'mid' && (
        <div style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: 56, animation: 'sceneShake 0.4s infinite' }}>💥</div>
      )}
      {/* mood/violence subtle vignette */}
      {mood === 'realistic' && <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(transparent 40%, rgba(0,0,0,0.55))', pointerEvents: 'none' }} />}
      {/* narrative caption */}
      {narrative && (
        <div style={{
          position: 'absolute', left: 8, right: 8, bottom: 8,
          background: narrativeBg || 'rgba(255,255,255,0.92)',
          color: narrativeColor || '#1a1a1a',
          fontFamily: fontMono, fontSize: 11, padding: '6px 10px',
          borderRadius: 6, letterSpacing: '0.02em',
        }}>
          {narrative}
        </div>
      )}
    </div>
  );
}

// Compose narrative tags from picks — minimal text, kid-friendly
window.battleNarrative = function(a, b, location, stage, winner, lang) {
  const stages = window.sceneLabels[lang] || window.sceneLabels.en;
  if (lang === 'ru') {
    if (stage === 0) return `${stages[0]} · ${location?.name_ru || ''}`;
    if (stage === 1) return stages[1];
    if (stage === 2) {
      if (winner === 'draw') return 'Ничья!';
      const w = winner === 'A' ? a : b;
      return `Победа: ${w?.name_ru || '?'}`;
    }
  }
  if (stage === 0) return `${stages[0]} · ${location?.name_en || ''}`;
  if (stage === 1) return stages[1];
  if (winner === 'draw') return 'Draw!';
  return `Winner: ${(winner === 'A' ? a : b)?.name_en || '?'}`;
};

window.SceneBackdrop = SceneBackdrop;