/* global React */
const { useMemo } = React;

// Country-specific jersey designs. Each kit has unique decorations that match
// the real 2024-2026 national team home kits (recognizable but stylized).
// All decorations are clipped to the jersey silhouette.

function BrazilDeco() {
  return (
    <g>
      {/* Green V-neck zone */}
      <path d="M 78 14 L 100 56 L 122 14 L 122 36 L 100 70 L 78 36 Z" fill="#009b3a" />
      {/* CBF badge (left chest) */}
      <rect x="44" y="78" width="22" height="14" rx="2" fill="#009b3a" />
      <text x="55" y="89" textAnchor="middle" fontSize="9" fontWeight="700" fontFamily="sans-serif" fill="#fcd116">CBF</text>
      {/* Green sleeve cuff bands */}
      <rect x="12" y="92" width="22" height="6" fill="#009b3a" />
      <rect x="166" y="92" width="22" height="6" fill="#009b3a" />
    </g>
  );
}

function ArgentinaDeco() {
  return (
    <g>
      {/* 3 light blue vertical stripes */}
      <rect x="42"  y="0" width="22" height="220" fill="#75aadb" />
      <rect x="88"  y="0" width="22" height="220" fill="#75aadb" />
      <rect x="134" y="0" width="22" height="220" fill="#75aadb" />
      {/* AFA badge */}
      <circle cx="55" cy="84" r="10" fill="#fcd116" />
      <text x="55" y="88" textAnchor="middle" fontSize="9" fontWeight="700" fontFamily="sans-serif" fill="#0a1a48">AFA</text>
      {/* 3 stars above badge (3 World Cup titles) */}
      <text x="100" y="58" textAnchor="middle" fontSize="11" fill="#fcd116">★ ★ ★</text>
    </g>
  );
}

function FranceDeco() {
  return (
    <g>
      {/* Cock badge gold area */}
      <rect x="44" y="78" width="20" height="20" rx="3" fill="#fcd116" />
      <text x="54" y="93" textAnchor="middle" fontSize="11" fontWeight="700" fontFamily="sans-serif" fill="#1a3a8a">FFF</text>
      {/* 2 white stars (1998 + 2018 World Cup wins) */}
      <text x="100" y="70" textAnchor="middle" fontSize="12" fill="#ffffff">★ ★</text>
      {/* Red/white/blue trim at sleeve cuffs */}
      <rect x="12" y="90" width="22" height="3" fill="#ffffff" />
      <rect x="12" y="94" width="22" height="3" fill="#e1101f" />
      <rect x="166" y="90" width="22" height="3" fill="#ffffff" />
      <rect x="166" y="94" width="22" height="3" fill="#e1101f" />
    </g>
  );
}

function EnglandDeco() {
  return (
    <g>
      {/* Three Lions crest area */}
      <rect x="42" y="78" width="24" height="18" rx="2" fill="#0a1a48" />
      {/* 3 small lion dots */}
      <circle cx="48" cy="84" r="2" fill="#fcd116" />
      <circle cx="54" cy="84" r="2" fill="#fcd116" />
      <circle cx="60" cy="84" r="2" fill="#fcd116" />
      <text x="54" y="93" textAnchor="middle" fontSize="6" fontWeight="700" fontFamily="sans-serif" fill="#fcd116">ENG</text>
      {/* Red Saint George's cross small flag detail (right chest) */}
      <rect x="138" y="78" width="18" height="14" fill="#ffffff" stroke="#0a1a48" strokeWidth="0.5" />
      <rect x="138" y="82" width="18" height="3" fill="#c8102e" />
      <rect x="145" y="78" width="3" height="14" fill="#c8102e" />
      {/* Navy cuffs */}
      <rect x="12" y="92" width="22" height="5" fill="#0a1a48" />
      <rect x="166" y="92" width="22" height="5" fill="#0a1a48" />
    </g>
  );
}

function GermanyDeco() {
  return (
    <g>
      {/* Horizontal black-red-yellow flag stripe across chest */}
      <rect x="0" y="64" width="200" height="8" fill="#000000" />
      <rect x="0" y="72" width="200" height="8" fill="#dd0000" />
      <rect x="0" y="80" width="200" height="8" fill="#fcd116" />
      {/* DFB eagle area */}
      <rect x="44" y="98" width="20" height="14" rx="2" fill="#000000" />
      <text x="54" y="108" textAnchor="middle" fontSize="7" fontWeight="700" fontFamily="sans-serif" fill="#fcd116">DFB</text>
      {/* 4 stars above */}
      <text x="100" y="58" textAnchor="middle" fontSize="11" fill="#000000">★★★★</text>
      {/* Black sleeve cuffs */}
      <rect x="12" y="92" width="22" height="5" fill="#000000" />
      <rect x="166" y="92" width="22" height="5" fill="#000000" />
    </g>
  );
}

function SpainDeco() {
  return (
    <g>
      {/* RFEF badge */}
      <rect x="44" y="78" width="20" height="18" rx="2" fill="#fcd116" />
      <text x="54" y="91" textAnchor="middle" fontSize="7" fontWeight="700" fontFamily="sans-serif" fill="#c8131c">RFEF</text>
      {/* Yellow diagonal accent (Spanish flag style) */}
      <path d="M 0 60 L 200 60 L 200 68 L 0 68 Z" fill="#fcd116" />
      <path d="M 0 152 L 200 152 L 200 160 L 0 160 Z" fill="#fcd116" />
      {/* Star (2010 World Cup) */}
      <text x="100" y="58" textAnchor="middle" fontSize="11" fill="#fcd116">★</text>
    </g>
  );
}

function PortugalDeco() {
  return (
    <g>
      {/* Yellow collar accent line */}
      <rect x="0" y="40" width="200" height="3" fill="#fcd116" />
      {/* FPF badge */}
      <rect x="44" y="78" width="22" height="18" rx="2" fill="#fcd116" />
      <text x="55" y="91" textAnchor="middle" fontSize="8" fontWeight="700" fontFamily="sans-serif" fill="#7a1f1d">FPF</text>
      {/* Yellow vertical accent stripe on left side */}
      <rect x="0" y="60" width="3" height="160" fill="#fcd116" />
      <rect x="197" y="60" width="3" height="160" fill="#fcd116" />
    </g>
  );
}

function NetherlandsDeco() {
  return (
    <g>
      {/* KNVB lion badge */}
      <rect x="44" y="78" width="22" height="18" rx="2" fill="#000000" />
      <text x="55" y="91" textAnchor="middle" fontSize="8" fontWeight="700" fontFamily="sans-serif" fill="#f36c21">KNVB</text>
      {/* Black sleeve cuffs */}
      <rect x="12" y="92" width="22" height="6" fill="#000000" />
      <rect x="166" y="92" width="22" height="6" fill="#000000" />
      {/* Subtle white shoulder accent */}
      <rect x="32" y="36" width="32" height="3" fill="#ffffff" transform="rotate(-12 48 37)" />
      <rect x="136" y="36" width="32" height="3" fill="#ffffff" transform="rotate(12 152 37)" />
    </g>
  );
}

function NorwayDeco() {
  return (
    <g>
      {/* NFF badge */}
      <rect x="44" y="78" width="20" height="18" rx="2" fill="#ffffff" />
      <text x="54" y="91" textAnchor="middle" fontSize="7" fontWeight="700" fontFamily="sans-serif" fill="#d52b1e">NFF</text>
      {/* White sleeve cuffs with blue trim */}
      <rect x="12" y="90" width="22" height="3" fill="#ffffff" />
      <rect x="12" y="94" width="22" height="3" fill="#00205b" />
      <rect x="166" y="90" width="22" height="3" fill="#ffffff" />
      <rect x="166" y="94" width="22" height="3" fill="#00205b" />
      {/* Small Norwegian flag detail */}
      <rect x="135" y="78" width="20" height="14" fill="#d52b1e" />
      <rect x="135" y="82" width="20" height="3" fill="#ffffff" />
      <rect x="140" y="78" width="3" height="14" fill="#ffffff" />
      <rect x="135" y="83.5" width="20" height="1.5" fill="#00205b" />
      <rect x="140.7" y="78" width="1.5" height="14" fill="#00205b" />
    </g>
  );
}

function GeorgiaDeco() {
  return (
    <g>
      {/* Big Saint George's red cross — main flag motif */}
      <rect x="90" y="0" width="20" height="220" fill="#cf142b" />
      <rect x="0" y="100" width="200" height="20" fill="#cf142b" />
      {/* 4 small red crosses (Georgia flag has 5 crosses total) */}
      <g fill="#cf142b">
        <rect x="40" y="40" width="10" height="3" />
        <rect x="43.5" y="36.5" width="3" height="10" />
        <rect x="150" y="40" width="10" height="3" />
        <rect x="153.5" y="36.5" width="3" height="10" />
        <rect x="40" y="170" width="10" height="3" />
        <rect x="43.5" y="166.5" width="3" height="10" />
        <rect x="150" y="170" width="10" height="3" />
        <rect x="153.5" y="166.5" width="3" height="10" />
      </g>
    </g>
  );
}

function GhanaDeco() {
  return (
    <g>
      {/* Horizontal stripes at hem (red/yellow/green of Ghana flag) */}
      <rect x="0" y="170" width="200" height="9" fill="#cf142b" />
      <rect x="0" y="179" width="200" height="9" fill="#fcd116" />
      <rect x="0" y="188" width="200" height="9" fill="#006b3f" />
      {/* Black star center */}
      <text x="100" y="120" textAnchor="middle" fontSize="38" fill="#000000">★</text>
      {/* GFA badge */}
      <rect x="44" y="78" width="22" height="14" rx="2" fill="#000000" />
      <text x="55" y="89" textAnchor="middle" fontSize="8" fontWeight="700" fontFamily="sans-serif" fill="#fcd116">GFA</text>
    </g>
  );
}

const DECO_BY_CODE = {
  BRA: BrazilDeco,
  ARG: ArgentinaDeco,
  FRA: FranceDeco,
  ENG: EnglandDeco,
  GER: GermanyDeco,
  ESP: SpainDeco,
  POR: PortugalDeco,
  NED: NetherlandsDeco,
  NOR: NorwayDeco,
  GEO: GeorgiaDeco,
  GHA: GhanaDeco,
};

// Country-specific football jersey. Reads kit.code to pick the right design.
function Jersey({ kit, number, size = 56, withNumber = true }) {
  const id = useMemo(() => "j" + Math.random().toString(36).slice(2, 8), []);
  // Safe defaults when chain data has no kit yet (player just deployed, before
  // metadata merge runs). Renders as a neutral gray jersey instead of crashing.
  const safe = kit || { body: "#3a4049", accent: "#3a4049", collar: "#5e6673", number: "#ffffff" };
  const { body, accent, collar, number: numColor, code } = safe;
  const Deco = DECO_BY_CODE[code];

  const silhouette = "M 60 12 C 75 6 90 14 100 14 C 110 14 125 6 140 12 L 175 28 L 196 60 L 184 96 L 168 90 L 168 200 C 168 208 162 214 154 214 L 46 214 C 38 214 32 208 32 200 L 32 90 L 16 96 L 4 60 L 25 28 Z";

  return (
    <svg viewBox="-3 -3 206 226" width={size} height={size * 1.1} className="jersey">
      <defs>
        <clipPath id={`${id}-clip`}>
          <path d={silhouette} />
        </clipPath>
      </defs>

      {/* Sleeves */}
      <path d="M 4 60 L 25 28 L 60 12 L 50 80 L 32 90 L 16 96 Z" fill={accent} />
      <path d="M 196 60 L 175 28 L 140 12 L 150 80 L 168 90 L 184 96 Z" fill={accent} />

      {/* Body + country-specific decorations */}
      <g clipPath={`url(#${id}-clip)`}>
        <rect x="0" y="0" width="200" height="220" fill={body} />
        {Deco && <Deco />}
      </g>

      {/* Polo collar — country color */}
      <path d="M 80 14 L 100 30 L 120 14 L 120 32 L 100 44 L 80 32 Z" fill={collar} stroke="rgba(0,0,0,0.4)" strokeWidth="0.6" />

      {/* Jersey number — centered chest, big chunky for legibility at any size */}
      {withNumber && (
        <text
          x="100" y="186" textAnchor="middle"
          fontFamily="'Bungee', 'Oswald', 'Bebas Neue', sans-serif"
          fontWeight="400"
          fontSize="100"
          letterSpacing="-3"
          fill={numColor}
          style={{
            paintOrder: "stroke",
            stroke: "rgba(0,0,0,0.7)",
            strokeWidth: 4,
            strokeLinejoin: "round",
          }}
        >{number}</text>
      )}

      {/* Outer silhouette outline */}
      <path d={silhouette} fill="none" stroke="rgba(0,0,0,0.45)" strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
}

// Small table badge — country flag emoji (zero AI-feel, universally recognizable).
function KitBadge({ kit, number, size = 28, flag }) {
  return (
    <div
      className="kit-badge"
      style={{
        width: size, height: size,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        fontSize: Math.floor(size * 0.86),
        lineHeight: 1,
        flex: "none",
        userSelect: "none",
      }}
    >
      <span style={{ filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.5))" }}>
        {flag || "⚽"}
      </span>
    </div>
  );
}

window.Jersey = Jersey;
window.KitBadge = KitBadge;
