import { useMemo } from 'react';
import { useT } from '@/lib/i18n';
import type { RichShot } from '@/lib/types';

const PITCH_L = 105;
const PITCH_W = 68;
const BOX_DEPTH = 16.5;
const BOX_WIDTH = 40.32;

/** Both teams' shots on one full pitch. The captured coords have every shot
 *  attacking toward x=105, so home shots plot as-is (attacking right) and away
 *  shots are mirrored (x→105−x, y→68−y) to attack left. Dot radius scales with
 *  xG; goals are filled, other attempts outlined with a faint fill. */
export function ShotMap({ shots, home, away }: { shots: RichShot[]; home: string; away: string }) {
  const t = useT();
  const W = 600;
  const PAD = 8;
  const S = (W - 2 * PAD) / PITCH_L;
  const H = PITCH_W * S + 2 * PAD;

  const dots = useMemo(() => {
    const px = (x: number) => PAD + x * S;
    const py = (y: number) => PAD + y * S;
    return shots
      .filter((s): s is RichShot & { isHome: boolean; x: number; y: number } => s.isHome != null && s.x != null && s.y != null)
      .map((s) => ({
        cx: px(s.isHome ? s.x : PITCH_L - s.x),
        cy: py(s.isHome ? s.y : PITCH_W - s.y),
        r: 3 + 6 * Math.sqrt(Math.min(Math.max(s.xg ?? 0, 0), 1)),
        goal: s.type === 'Goal',
        isHome: s.isHome,
        label: `${s.player} ${s.min ?? '–'}' · xG ${s.xg != null ? s.xg.toFixed(2) : '–'}`,
      }))
      // goals last so they sit on top of the open attempts
      .sort((a, b) => Number(a.goal) - Number(b.goal));
  }, [shots]);

  const boxY = (PITCH_W - BOX_WIDTH) / 2;

  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img" aria-label={`${t.match.shotMap}: ${home} / ${away}`}>
        {/* pitch: outline, halfway line, both penalty boxes */}
        <rect x={PAD} y={PAD} width={PITCH_L * S} height={PITCH_W * S} className="fill-[var(--app-elevated)] stroke-[var(--app-line-strong)]" strokeWidth={1.5} />
        <line x1={PAD + (PITCH_L / 2) * S} x2={PAD + (PITCH_L / 2) * S} y1={PAD} y2={PAD + PITCH_W * S} className="stroke-[var(--app-line-strong)]" strokeWidth={1} />
        <rect x={PAD} y={PAD + boxY * S} width={BOX_DEPTH * S} height={BOX_WIDTH * S} fill="none" className="stroke-[var(--app-line-strong)]" strokeWidth={1} />
        <rect x={PAD + (PITCH_L - BOX_DEPTH) * S} y={PAD + boxY * S} width={BOX_DEPTH * S} height={BOX_WIDTH * S} fill="none" className="stroke-[var(--app-line-strong)]" strokeWidth={1} />
        {dots.map((d, i) => (
          <circle
            key={i}
            cx={d.cx}
            cy={d.cy}
            r={d.r}
            className={d.isHome ? 'fill-[var(--app-accent)] stroke-[var(--app-accent)]' : 'fill-[var(--app-info)] stroke-[var(--app-info)]'}
            fillOpacity={d.goal ? 0.95 : 0.15}
            strokeWidth={d.goal ? 0 : 1.5}
          >
            <title>{d.label}</title>
          </circle>
        ))}
      </svg>
      <div className="mt-1.5 flex items-center justify-between text-[11px]">
        <span className="font-semibold text-info">← {away}</span>
        <span className="font-semibold text-accent">{home} →</span>
      </div>
    </div>
  );
}
