// FM-style top-down 2D animated pitch — hero illustration

const FMPitch = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 40);
    return () => clearInterval(id);
  }, []);
  const T = tick / 25; // seconds-ish

  // Cyclic pattern 0..1
  const loop = (offset = 0, speed = 1) => ((T * speed + offset) % 1);
  const ease = (x) => 0.5 - Math.cos(x * Math.PI * 2) / 2;

  // Formation: 4-3-3 home (blue) attacking right
  const home = [
    { x: 6,  y: 50, gk: true },  // GK
    { x: 20, y: 20 }, { x: 22, y: 40 }, { x: 22, y: 60 }, { x: 20, y: 80 }, // Back 4
    { x: 40, y: 30 }, { x: 42, y: 50 }, { x: 40, y: 70 }, // Mid 3
    { x: 62, y: 22 }, { x: 64, y: 50 }, { x: 62, y: 78 }, // Front 3
  ];
  const away = [
    { x: 94, y: 50, gk: true },
    { x: 80, y: 20 }, { x: 78, y: 40 }, { x: 78, y: 60 }, { x: 80, y: 80 },
    { x: 60, y: 30 }, { x: 58, y: 50 }, { x: 60, y: 70 },
    { x: 38, y: 25 }, { x: 36, y: 50 }, { x: 38, y: 75 },
  ];

  // Small position jitter so players feel alive; keepers stay pinned to the goal
  // line so they don't drift into the pitch.
  const jitter = (p, i) => {
    if (p.gk) return { x: p.x, y: p.y, gk: true };
    const k = i * 0.31 + 0.7;
    return {
      x: p.x + Math.sin(T * 0.8 + k) * 1.8,
      y: p.y + Math.cos(T * 0.9 + k * 1.3) * 1.8,
      gk: p.gk,
    };
  };

  // Ball: cycle — carried by CM (home[6]) → pass to LW (home[8]) → run diagonal → shot → reset
  const phase = loop(0, 0.12); // 8-ish sec cycle
  const ballPath = () => {
    if (phase < 0.25) {
      // CM advances with ball
      const p = phase / 0.25;
      return { x: 42 + p * 10, y: 50 + Math.sin(p * Math.PI) * 3 };
    } else if (phase < 0.45) {
      // Pass to LW (arc)
      const p = (phase - 0.25) / 0.2;
      const x0 = 52, y0 = 50, x1 = 62, y1 = 22;
      return { x: x0 + (x1 - x0) * p, y: y0 + (y1 - y0) * p - Math.sin(p * Math.PI) * 4 };
    } else if (phase < 0.75) {
      // LW runs with ball
      const p = (phase - 0.45) / 0.3;
      return { x: 62 + p * 20, y: 22 + p * 15 };
    } else if (phase < 0.88) {
      // Shot (fast)
      const p = (phase - 0.75) / 0.13;
      return { x: 82 + p * 12, y: 37 + p * 13 - Math.sin(p * Math.PI) * 3 };
    } else {
      // Reset/GK fetch
      const p = (phase - 0.88) / 0.12;
      return { x: 94 - p * 52, y: 50 };
    }
  };
  const ball = ballPath();

  // Highlight pulse on active player
  const activeHome = phase < 0.25 ? 6 : (phase < 0.75 ? 8 : -1);

  return (
    <svg viewBox="0 0 100 64" preserveAspectRatio="xMidYMid slice" className="fm-pitch" aria-hidden>
      <defs>
        <linearGradient id="fm-grass" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3d8e4b"/>
          <stop offset="1" stopColor="#2c7038"/>
        </linearGradient>
        <pattern id="fm-stripes" width="10" height="64" patternUnits="userSpaceOnUse">
          <rect width="5" height="64" fill="rgba(255,255,255,0.04)"/>
        </pattern>
        <radialGradient id="fm-heat" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#ffd44e" stopOpacity="0.25"/>
          <stop offset="1" stopColor="#ffd44e" stopOpacity="0"/>
        </radialGradient>
      </defs>

      {/* Grass */}
      <rect width="100" height="64" fill="url(#fm-grass)"/>
      <rect width="100" height="64" fill="url(#fm-stripes)"/>

      {/* Pitch markings */}
      <g fill="none" stroke="#f2faf0" strokeWidth="0.3" opacity="0.8">
        <rect x="2" y="2" width="96" height="60" rx="0.5"/>
        <line x1="50" y1="2" x2="50" y2="62"/>
        <circle cx="50" cy="32" r="7"/>
        <circle cx="50" cy="32" r="0.6" fill="#f2faf0" stroke="none"/>
        {/* Boxes */}
        <rect x="2" y="14" width="14" height="36"/>
        <rect x="2" y="22" width="5" height="20"/>
        <rect x="84" y="14" width="14" height="36"/>
        <rect x="93" y="22" width="5" height="20"/>
        {/* Penalty spots */}
        <circle cx="13" cy="32" r="0.5" fill="#f2faf0" stroke="none"/>
        <circle cx="87" cy="32" r="0.5" fill="#f2faf0" stroke="none"/>
        {/* Goals */}
        <rect x="0.5" y="28" width="1.5" height="8" stroke="#fff" strokeWidth="0.4"/>
        <rect x="98" y="28" width="1.5" height="8" stroke="#fff" strokeWidth="0.4"/>
      </g>

      {/* Heat spot following ball */}
      <circle cx={ball.x} cy={ball.y} r="14" fill="url(#fm-heat)"/>

      {/* Trail line — pass/shot arc */}
      {phase < 0.45 && phase > 0.25 && (
        <path d={`M 52 50 Q 57 ${50 - 8} 62 22`} stroke="#ffd44e" strokeWidth="0.4" strokeDasharray="1.2 1" fill="none" opacity="0.8"/>
      )}
      {phase > 0.75 && phase < 0.88 && (
        <line x1="82" y1="37" x2="94" y2="50" stroke="#ff5a4a" strokeWidth="0.5" strokeDasharray="1.5 1" opacity="0.9"/>
      )}

      {/* Home players (blue) */}
      {home.map((p, i) => {
        const j = jitter(p, i);
        const active = i === activeHome;
        return (
          <g key={"h" + i}>
            {active && <circle cx={j.x} cy={j.y} r="2.8" fill="#ffd44e" opacity="0.5">
              <animate attributeName="r" values="2.4;3.2;2.4" dur="1s" repeatCount="indefinite"/>
            </circle>}
            <circle cx={j.x} cy={j.y + 0.4} r="1.6" fill="#000" opacity="0.3"/>
            <circle cx={j.x} cy={j.y} r="1.5" fill={p.gk ? "#ffd44e" : "#2f5fb5"} stroke="#fff" strokeWidth="0.25"/>
            <text x={j.x} y={j.y + 0.5} fontSize="1.3" fontFamily="Archivo, sans-serif" fontWeight="900" fill="#fff" textAnchor="middle">{i + 1}</text>
          </g>
        );
      })}

      {/* Away players (red) */}
      {away.map((p, i) => {
        const j = jitter(p, i + 20);
        return (
          <g key={"a" + i}>
            <circle cx={j.x} cy={j.y + 0.4} r="1.6" fill="#000" opacity="0.3"/>
            <circle cx={j.x} cy={j.y} r="1.5" fill={p.gk ? "#7dff9c" : "#c84030"} stroke="#fff" strokeWidth="0.25"/>
            <text x={j.x} y={j.y + 0.5} fontSize="1.3" fontFamily="Archivo, sans-serif" fontWeight="900" fill="#fff" textAnchor="middle">{i + 1}</text>
          </g>
        );
      })}

      {/* Ball */}
      <g>
        <circle cx={ball.x} cy={ball.y + 0.4} r="0.7" fill="#000" opacity="0.4"/>
        <circle cx={ball.x} cy={ball.y} r="0.7" fill="#fff" stroke="#111" strokeWidth="0.1"/>
        <path d={`M ${ball.x - 0.3} ${ball.y - 0.3} L ${ball.x} ${ball.y - 0.55} L ${ball.x + 0.3} ${ball.y - 0.3} L ${ball.x + 0.15} ${ball.y + 0.1} L ${ball.x - 0.15} ${ball.y + 0.1} Z`} fill="#111"/>
      </g>

      {/* Corner HUD overlays */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="1.5" fill="#fff" opacity="0.85">
        <text x="4" y="6" fontWeight="700">HOME · 4-3-3</text>
        <text x="96" y="6" textAnchor="end" fontWeight="700">AWAY · 4-4-2</text>
        <text x="50" y="6" textAnchor="middle" fontWeight="700" fill="#7dff9c">xG 2.14 vs 0.88</text>
      </g>
    </svg>
  );
};

Object.assign(window, { FMPitch });