// LAZY LEGEND — Figure component & FLEX mascot
// The Figure renders a stick-figure that demonstrates exercises via CSS animations.

const Figure = ({ anim, pose = "standing", color = "#F5F5F2", accent = "#C8FF2E" }) => {
  // pose: 'standing' | 'plank' | 'lying' | 'crawl' | 'wall'
  const bodyTransform = {
    standing: "translate(0, 0)",
    plank: "translate(-50, 130) rotate(-15 200 380)",
    lying: "translate(0, 130) rotate(-90 200 380)",
    crawl: "translate(-30, 100) rotate(-25 200 380)",
    wall: "translate(-40, 60) rotate(-12 200 380)",
  }[pose] || "translate(0, 0)";

  return (
    <svg className={`figure-svg anim-${anim}`} viewBox="0 0 400 500" aria-hidden>
      {/* Floor line */}
      <line x1="20" y1="470" x2="380" y2="470" stroke="#26262B" strokeWidth="2" strokeDasharray="6 8" />
      {/* Wall for wallPush / wallSit */}
      {(pose === "wall") && (
        <line x1="60" y1="80" x2="60" y2="470" stroke="#26262B" strokeWidth="3" />
      )}
      {/* Chair for tricepDips */}
      {anim === "tricepDips" && (
        <rect x="240" y="370" width="120" height="14" rx="3" fill="#26262B" />
      )}

      <g className="figure-body-group" style={{ transform: bodyTransform, transformOrigin: "200px 380px" }}>
        {/* Head */}
        <g className="fg-head">
          <circle className="head" cx="200" cy="110" r="32" />
          {/* Sweatband */}
          <rect x="170" y="84" width="60" height="10" fill={accent} rx="2" />
          <rect x="195" y="84" width="6" height="10" fill="#FF3D8A" />
          <rect x="208" y="84" width="6" height="10" fill="#FF3D8A" />
        </g>

        {/* Torso */}
        <line className="fg-torso stroke" x1="200" y1="148" x2="200" y2="320" />

        {/* Left arm (viewer's right) */}
        <g className="fg-l-upper">
          <line className="stroke" x1="200" y1="200" x2="240" y2="290" />
          <g className="fg-l-fore">
            <line className="stroke" x1="240" y1="290" x2="270" y2="350" />
            <circle cx="270" cy="350" r="9" fill={color} />
          </g>
        </g>

        {/* Right arm */}
        <g className="fg-r-upper">
          <line className="stroke" x1="200" y1="200" x2="160" y2="290" />
          <g className="fg-r-fore">
            <line className="stroke" x1="160" y1="290" x2="130" y2="350" />
            <circle cx="130" cy="350" r="9" fill={color} />
          </g>
        </g>

        {/* Left leg */}
        <g className="fg-l-thigh">
          <line className="stroke" x1="200" y1="320" x2="230" y2="400" />
          <g className="fg-l-shin">
            <line className="stroke" x1="230" y1="400" x2="240" y2="465" />
            <ellipse cx="245" cy="468" rx="14" ry="6" fill={color} />
          </g>
        </g>

        {/* Right leg */}
        <g className="fg-r-thigh">
          <line className="stroke" x1="200" y1="320" x2="170" y2="400" />
          <g className="fg-r-shin">
            <line className="stroke" x1="170" y1="400" x2="160" y2="465" />
            <ellipse cx="155" cy="468" rx="14" ry="6" fill={color} />
          </g>
        </g>
      </g>
    </svg>
  );
};

// Map exercise anim keys to a body pose
const POSES = {
  catCow: "crawl",
  plank: "plank",
  mountainClimbers: "plank",
  pushups: "plank",
  diamond: "plank",
  spiderman: "plank",
  pikePush: "plank",
  plankPushup: "plank",
  bearCrawl: "crawl",
  sidePlank: "plank",
  situps: "lying",
  crunches: "lying",
  vups: "lying",
  bicycle: "lying",
  russianTwist: "lying",
  gluteBridge: "lying",
  tricepDips: "standing",
  wallPush: "wall",
  wallSit: "wall",
};

const figurePose = (anim) => POSES[anim] || "standing";

// FLEX mascot — chunky dumbbell character
const FlexMascot = ({ size = 320, expression = "curl", glow = true }) => (
  <div style={{ position: "relative", width: size, height: size }}>
    {glow && (
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: -size * 0.18,
          background: `radial-gradient(circle at 50% 55%, rgba(200,255,46,0.35) 0%, rgba(200,255,46,0.07) 35%, transparent 65%)`,
          filter: "blur(6px)",
        }}
      />
    )}
    <svg
      viewBox="0 0 200 200"
      width={size}
      height={size}
      style={{ position: "relative", display: "block" }}
      className={`flex-mascot flex-${expression}`}
    >
      <defs>
        <linearGradient id="metal" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#F5F5F2" />
          <stop offset="1" stopColor="#9A9A95" />
        </linearGradient>
        <linearGradient id="metalDark" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3A3A40" />
          <stop offset="1" stopColor="#1A1A1E" />
        </linearGradient>
      </defs>
      {/* Sweatband */}
      <g className="flex-band">
        <rect x="58" y="44" width="84" height="14" rx="3" fill="#C8FF2E" />
        <rect x="58" y="44" width="84" height="4" rx="2" fill="#FF3D8A" />
        <rect x="92" y="44" width="6" height="14" fill="#FF3D8A" />
        <rect x="102" y="44" width="6" height="14" fill="#FF3D8A" />
      </g>
      {/* Body */}
      <g className="flex-body">
        <rect x="34" y="74" width="22" height="62" rx="4" fill="url(#metalDark)" />
        <rect x="30" y="80" width="6" height="50" rx="2" fill="url(#metalDark)" />
        <rect x="144" y="74" width="22" height="62" rx="4" fill="url(#metalDark)" />
        <rect x="164" y="80" width="6" height="50" rx="2" fill="url(#metalDark)" />
        <rect x="56" y="86" width="88" height="38" rx="4" fill="url(#metal)" />
        <rect x="56" y="86" width="88" height="4" fill="#C8FF2E" />
        <rect x="56" y="120" width="88" height="4" fill="#C8FF2E" />
      </g>
      {/* Eyes */}
      <g className="flex-eyes">
        <circle cx="78" cy="103" r="6" fill="#0B0B0D" />
        <circle cx="122" cy="103" r="6" fill="#0B0B0D" />
        <circle cx="80" cy="101" r="2" fill="#fff" />
        <circle cx="124" cy="101" r="2" fill="#fff" />
      </g>
      {/* Mouth */}
      <g className="flex-mouth">
        {expression === "tired" ? (
          <path d="M 86 116 Q 100 108 114 116" stroke="#0B0B0D" strokeWidth="3" fill="none" strokeLinecap="round" />
        ) : expression === "proud" || expression === "dance" ? (
          <path d="M 84 110 Q 100 124 116 110" stroke="#0B0B0D" strokeWidth="3" fill="none" strokeLinecap="round" />
        ) : (
          <path d="M 86 112 Q 100 122 116 110" stroke="#0B0B0D" strokeWidth="3" fill="none" strokeLinecap="round" />
        )}
      </g>
      {/* Arms */}
      <g className="flex-arm flex-arm-l" style={{ transformOrigin: "60px 96px" }}>
        <rect x="18" y="92" width="30" height="14" rx="6" fill="#C8FF2E" />
        <circle cx="20" cy="99" r="9" fill="#C8FF2E" />
      </g>
      <g className="flex-arm flex-arm-r" style={{ transformOrigin: "140px 96px" }}>
        <rect x="152" y="92" width="30" height="14" rx="6" fill="#C8FF2E" />
        <circle cx="180" cy="99" r="9" fill="#C8FF2E" />
      </g>
      {/* Legs */}
      <g className="flex-legs">
        <rect x="78" y="142" width="14" height="34" rx="4" fill="#C8FF2E" />
        <rect x="108" y="142" width="14" height="34" rx="4" fill="#C8FF2E" />
        <rect x="74" y="172" width="22" height="8" rx="2" fill="#F5F5F2" />
        <rect x="104" y="172" width="22" height="8" rx="2" fill="#F5F5F2" />
      </g>
    </svg>
  </div>
);

// Lightning bolt
const Bolt = ({ filled = true, size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size}>
    <path
      d="M13 2 L4 14 H11 L9 22 L20 9 H13 L15 2 Z"
      fill={filled ? "#C8FF2E" : "none"}
      stroke={filled ? "#C8FF2E" : "#5A5A56"}
      strokeWidth="1.5"
      strokeLinejoin="round"
    />
  </svg>
);

// Confetti burst component
const ConfettiBurst = ({ count = 80 }) => {
  const bits = [];
  for (let i = 0; i < count; i++) {
    const left = Math.random() * 100;
    const delay = Math.random() * 0.6;
    const dur = 2.5 + Math.random() * 2.5;
    const color = Math.random() > 0.5 ? "#C8FF2E" : "#FF3D8A";
    const w = 6 + Math.random() * 8;
    const h = 10 + Math.random() * 14;
    bits.push(
      <div
        key={i}
        className="confetti"
        style={{
          left: `${left}%`,
          width: w,
          height: h,
          background: color,
          animationDelay: `${delay}s`,
          animationDuration: `${dur}s`,
          transform: `rotate(${Math.random() * 360}deg)`,
        }}
      />
    );
  }
  return <>{bits}</>;
};

// Audio helper — WebAudio synthesised beeps & dings
class Sfx {
  constructor() {
    this.ctx = null;
    this.muted = false;
  }
  ensure() {
    if (!this.ctx) {
      const AC = window.AudioContext || window.webkitAudioContext;
      if (AC) this.ctx = new AC();
    }
    if (this.ctx && this.ctx.state === "suspended") this.ctx.resume();
    return this.ctx;
  }
  tone(freq, dur = 0.12, type = "sine", gain = 0.18) {
    if (this.muted) return;
    const ctx = this.ensure();
    if (!ctx) return;
    const osc = ctx.createOscillator();
    const g = ctx.createGain();
    osc.type = type;
    osc.frequency.value = freq;
    g.gain.value = 0;
    g.gain.setValueAtTime(0, ctx.currentTime);
    g.gain.linearRampToValueAtTime(gain, ctx.currentTime + 0.01);
    g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + dur);
    osc.connect(g).connect(ctx.destination);
    osc.start();
    osc.stop(ctx.currentTime + dur + 0.02);
  }
  beep() { this.tone(880, 0.12, "square", 0.14); }
  ding() {
    this.tone(1320, 0.18, "sine", 0.22);
    setTimeout(() => this.tone(1760, 0.28, "sine", 0.18), 80);
  }
  click() { this.tone(420, 0.06, "triangle", 0.18); }
  thunder() { this.tone(180, 0.18, "sawtooth", 0.2); setTimeout(() => this.tone(120, 0.14, "sawtooth", 0.16), 60); }
  start() { this.tone(523, 0.08, "square", 0.18); setTimeout(() => this.tone(784, 0.16, "square", 0.18), 90); }
  finish() {
    [523, 659, 784, 1047].forEach((f, i) => setTimeout(() => this.tone(f, 0.18, "triangle", 0.2), i * 110));
  }
}

const sfx = new Sfx();

Object.assign(window, { Figure, FlexMascot, Bolt, ConfettiBurst, sfx, figurePose });