"use client";

import { useState } from "react";

import { cn } from "@/lib/utils";

export type LineupPlayer = {
  number: number;
  name: string;
  /** horizontal position on the pitch, 0–100 */
  x: number;
  /** vertical position on the pitch, 0–100 (0 = opposition goal at top) */
  y: number;
  /** photo URL — falls back to initials when omitted or failing to load */
  image?: string;
  captain?: boolean;
  injured?: boolean;
};

const FCB = "https://www.fcbarcelona.com/photo-resources";
const PHOTOS: Record<string, string> = {
  raphinha: `${FCB}/2026/07/21/52cf522f-f115-4e64-8b22-6979d3687fae/11-Raphinha-RED.jpg?width=470&height=470`,
  gordon: `${FCB}/2026/07/21/e22ebbbd-4707-423c-89f6-4ce7bbc34559/00-Gordon-RED.jpg?width=470&height=470`,
  lopez: `${FCB}/2026/07/21/cdd9f6c9-feb9-459c-bf84-1ea17e847cef/16-Fermin-BLUE.jpg?width=470&height=470`,
  yamal: `${FCB}/2026/07/21/323ae443-f58c-4e3d-bad5-e026d3175e81/10-Lamine-BLUE.jpg?width=470&height=470`,
  pedri: `${FCB}/2026/07/21/c4a35ee4-35ef-4414-aff6-ed72ba8fce67/08-Pedri-RED.jpg?width=470&height=470`,
  rodri: `${FCB}/2026/08/18/4ad1a791-ce44-4734-bc29-e8cb8c4cf82e/00-Rodri-grana.png?width=470&height=470`,
  espart: `${FCB}/2026/08/26/ac515f82-5b62-4f2a-8a19-d0bb6ba13e63/12-XAVI_ESPART.png?width=470&height=470`,
  martin: `${FCB}/2026/07/21/a37cf202-c22c-416d-87d7-e02cd73e39ad/18-Martin-BLUE.jpg?width=470&height=470`,
  cubarsi: `${FCB}/2026/07/21/e96de4b6-5d94-400e-9f70-d1f745243818/02-Cubarsi-BLUE.jpg?width=470&height=470`,
  garcia: `${FCB}/2026/07/21/b5cf8356-d686-4b7b-bf99-343f7c2a4454/24-Eric_Garcia-BLUE.jpg?width=470&height=470`,
  joan: `${FCB}/2026/07/21/76e07caa-8cb7-47bb-8110-f83e5046b65e/01-Joan_Garcia-BLUE.jpg?width=470&height=470`,
};

const DEFAULT_LINEUP: LineupPlayer[] = [
  // Striker
  { number: 11, name: "Raphinha", x: 50, y: 8, image: PHOTOS.raphinha, captain: true },
  // Attacking midfield
  { number: 17, name: "Gordon", x: 16, y: 24, image: PHOTOS.gordon },
  { number: 7, name: "López", x: 50, y: 24, image: PHOTOS.lopez },
  { number: 10, name: "Lamine Yamal", x: 84, y: 24, image: PHOTOS.yamal },
  // Centre midfield
  { number: 8, name: "Pedri", x: 32, y: 42, image: PHOTOS.pedri },
  { number: 16, name: "Rodri", x: 68, y: 42, image: PHOTOS.rodri },
  // Defence
  { number: 12, name: "Espart", x: 12, y: 63, image: PHOTOS.espart },
  { number: 18, name: "Martín", x: 37, y: 66, image: PHOTOS.martin },
  { number: 5, name: "Cubarsí", x: 63, y: 66, image: PHOTOS.cubarsi },
  { number: 24, name: "Eric Garcia", x: 88, y: 63, image: PHOTOS.garcia },
  // Goalkeeper
  { number: 1, name: "García", x: 50, y: 89, image: PHOTOS.joan },
];

function initials(name: string): string {
  const parts = name.split(" ");
  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
}

function PlayerNode({ player }: { player: LineupPlayer }) {
  const [imgOk, setImgOk] = useState(true);
  const showImage = Boolean(player.image) && imgOk;
  return (
    <div
      className="absolute -translate-x-1/2 -translate-y-1/2"
      style={{ left: `${player.x}%`, top: `${player.y}%` }}
    >
      <div className="flex flex-col items-center transition-transform duration-200 ease-out hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100">
        {/* avatar */}
        <div className="size-11 overflow-hidden rounded-full bg-white/10 sm:size-12">
          {showImage ? (
            <img
              src={player.image}
              alt={player.name}
              loading="lazy"
              onError={() => setImgOk(false)}
              className="size-full scale-[1.7] object-cover [transform-origin:50%_22%]"
            />
          ) : (
            <span className="flex size-full items-center justify-center text-[13px] font-semibold tracking-wide text-white/90">
              {initials(player.name)}
            </span>
          )}
        </div>
        {/* name: jersey number + name with captain/injury marker */}
        <div className="mt-1 flex max-w-[96px] items-center justify-center gap-1 text-center text-xs leading-tight text-white/90">
          {player.injured ? (
            <span
              aria-label="Injured"
              className="flex size-3.5 shrink-0 items-center justify-center rounded-full bg-white text-[10px] font-bold leading-none text-red-500"
            >
              +
            </span>
          ) : player.captain ? (
            <span
              aria-label="Captain"
              className="flex size-3.5 shrink-0 items-center justify-center rounded-full border border-white/25 bg-black/70 text-[9px] font-bold leading-none text-white"
            >
              C
            </span>
          ) : null}
          <span className="truncate">
            <span className="text-white/55">{player.number}</span> {player.name}
          </span>
        </div>
      </div>
    </div>
  );
}

function PitchMarkings() {
  const line = "border-white/10";
  return (
    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
      {/* penalty box (open at the bottom edge) */}
      <div
        className={cn(
          "absolute bottom-0 left-1/2 h-[20%] w-[56%] -translate-x-1/2 border border-b-0",
          line,
        )}
      />
      {/* six-yard box (open at the bottom edge) */}
      <div
        className={cn(
          "absolute bottom-0 left-1/2 h-[8%] w-[26%] -translate-x-1/2 border border-b-0",
          line,
        )}
      />
      {/* penalty spot */}
      <div className="absolute bottom-[13%] left-1/2 size-1 -translate-x-1/2 rounded-full bg-white/15" />
      {/* penalty arc — semi-circle above the box */}
      <svg
        viewBox="0 0 100 50"
        preserveAspectRatio="none"
        className="absolute bottom-[19%] left-1/2 aspect-[2/1] w-[34%] -translate-x-1/2"
      >
        <path
          d="M 8 50 A 42 42 0 0 1 92 50"
          fill="none"
          stroke="rgba(255,255,255,0.1)"
          strokeWidth="1.5"
        />
      </svg>
    </div>
  );
}

interface FootballLineupProps {
  players?: LineupPlayer[];
  className?: string;
}

export function FootballLineup({ players = DEFAULT_LINEUP, className }: FootballLineupProps) {
  return (
    <div
      className={cn(
        "relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-[#1b1b1e]",
        className,
      )}
    >
      <PitchMarkings />
      {players.map((player) => (
        <PlayerNode key={player.number} player={player} />
      ))}
    </div>
  );
}

export default FootballLineup;
Football Lineup
