import type { ReactElement, SVGProps } from "react";
import { cn } from "@/lib/utils";

type SportGlyphProps = {
  slug?: string | null;
  label?: string | null;
  className?: string;
};

type SportKey =
  | "american-football"
  | "baseball"
  | "basketball"
  | "boosted"
  | "esports"
  | "football"
  | "handball"
  | "hockey"
  | "mma"
  | "rugby"
  | "table-tennis"
  | "tennis"
  | "volleyball"
  | "generic";

type IconProps = SVGProps<SVGSVGElement>;

const sportMatchers: Array<{ key: SportKey; terms: string[] }> = [
  { key: "american-football", terms: ["american-football", "football us", "football américain", "nfl"] },
  { key: "boosted", terms: ["boosted", "cote boostée", "cote boostee", "novelties"] },
  { key: "table-tennis", terms: ["table-tennis", "tennis de table", "ping pong", "ping-pong"] },
  { key: "football", terms: ["football", "soccer", "fifa"] },
  { key: "basketball", terms: ["basket", "nba"] },
  { key: "tennis", terms: ["tennis", "atp", "wta"] },
  { key: "hockey", terms: ["hockey", "ice hockey", "nhl"] },
  { key: "volleyball", terms: ["volley"] },
  { key: "handball", terms: ["handball"] },
  { key: "mma", terms: ["mma", "ufc", "boxing", "boxe"] },
  { key: "rugby", terms: ["rugby"] },
  { key: "esports", terms: ["esport", "gaming", "e-sport"] },
  { key: "baseball", terms: ["baseball", "mlb"] }
];

const icons: Record<SportKey, (props: IconProps) => ReactElement> = {
  "american-football": AmericanFootballIcon,
  baseball: BaseballIcon,
  basketball: BasketballIcon,
  boosted: BoostedIcon,
  esports: EsportsIcon,
  football: FootballIcon,
  handball: HandballIcon,
  hockey: HockeyIcon,
  mma: MmaIcon,
  rugby: RugbyIcon,
  "table-tennis": TableTennisIcon,
  tennis: TennisIcon,
  volleyball: VolleyballIcon,
  generic: GenericSportIcon
};

export function SportGlyph({ slug, label, className }: SportGlyphProps) {
  const Icon = icons[getSportKey(`${slug ?? ""} ${label ?? ""}`)];
  return <Icon className={cn("shrink-0", className)} aria-hidden="true" />;
}

function getSportKey(value: string): SportKey {
  const normalized = value.toLowerCase();
  return sportMatchers.find((entry) => entry.terms.some((term) => normalized.includes(term)))?.key ?? "generic";
}

function IconShell({ className, children, ...props }: IconProps) {
  return (
    <svg viewBox="0 0 32 32" fill="none" className={className} {...props}>
      <circle cx="16" cy="16" r="15" fill="#07111b" />
      <circle cx="16" cy="16" r="14.25" stroke="rgba(255,255,255,.14)" strokeWidth="1.5" />
      {children}
    </svg>
  );
}

function FootballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="11.2" fill="#f7fbff" />
      <path d="M16 8.7 20.2 12l-1.6 5.1h-5.2L11.8 12 16 8.7Z" fill="#1f2730" />
      <path d="m8.6 13.5 3.2-1.5 1.6 5.1-4 3.1a10.9 10.9 0 0 1-.8-6.7ZM23.4 13.5 20.2 12l-1.6 5.1 4 3.1a10.9 10.9 0 0 0 .8-6.7ZM12.5 25.9l.9-3.7h5.2l.9 3.7a11.2 11.2 0 0 1-7 0Z" fill="#27313a" />
      <path d="M8.9 20.5 13.4 22M23.1 20.5 18.6 22M11.8 12 9.9 9.9M20.2 12l1.9-2.1" stroke="#10e0bd" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="16" cy="16" r="11.2" stroke="#10e0bd" strokeWidth="1.4" opacity=".7" />
    </IconShell>
  );
}

function TennisIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="10.8" fill="#c7f33d" />
      <path d="M8 9.7c6 2.2 11.2 7.4 13.7 14" stroke="#f8fff2" strokeWidth="2.1" strokeLinecap="round" />
      <path d="M10.1 25.3c1.5-6.5 6.4-11.5 12.6-13.7" stroke="#f8fff2" strokeWidth="2.1" strokeLinecap="round" />
      <path d="M9.8 8.4a10.8 10.8 0 0 1 15.5 8.8" stroke="#8bd31e" strokeWidth="2" strokeLinecap="round" />
      <circle cx="16" cy="16" r="10.8" stroke="#0fbf8f" strokeWidth="1.3" opacity=".75" />
    </IconShell>
  );
}

function BasketballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="10.9" fill="#f59b30" />
      <path d="M16 5.3v21.4M5.8 16h20.4M8.2 9.2c5.1 3.4 8 8.2 9.5 16.6M23.8 9.2c-5.1 3.4-8 8.2-9.5 16.6" stroke="#3a2514" strokeWidth="1.7" strokeLinecap="round" />
      <path d="M9 7.8a10.9 10.9 0 0 1 14.4 3" stroke="#ffca66" strokeWidth="1.6" strokeLinecap="round" opacity=".8" />
      <circle cx="16" cy="16" r="10.9" stroke="#10e0bd" strokeWidth="1.2" opacity=".55" />
    </IconShell>
  );
}

function BoostedIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <path d="M9.8 8.2h12.4c1.6 0 2.8 1.2 2.8 2.8v10c0 1.6-1.2 2.8-2.8 2.8H9.8A2.8 2.8 0 0 1 7 21V11c0-1.6 1.2-2.8 2.8-2.8Z" fill="#17232f" stroke="#10e0bd" strokeWidth="1.5" />
      <path d="M10.4 14.3h11.2M10.4 18h11.2" stroke="#7dffe4" strokeWidth="1.2" strokeLinecap="round" opacity=".7" />
      <circle cx="12.2" cy="16.2" r="2.6" fill="#10e0bd" />
      <circle cx="19.8" cy="16.2" r="2.6" fill="#8168ff" />
      <path d="m12.6 12.4 6.8 7.6" stroke="#f8fafc" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="16" cy="16" r="12.2" stroke="#8168ff" strokeWidth="1.1" opacity=".5" />
    </IconShell>
  );
}

function RugbyIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <ellipse cx="16" cy="16" rx="12.1" ry="7.5" fill="#f1f4f2" transform="rotate(-28 16 16)" />
      <ellipse cx="16" cy="16" rx="12.1" ry="7.5" stroke="#10e0bd" strokeWidth="1.4" transform="rotate(-28 16 16)" />
      <path d="M8.9 19.8c4.4-1.2 9.7-3.9 14.2-7.6" stroke="#98a4af" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M12.3 18.7 10.8 16M16 17.2l-1.6-2.8M19.5 15.3l-1.4-2.6" stroke="#27313a" strokeWidth="1.4" strokeLinecap="round" />
      <path d="M8 20.5c1.8 2.2 5.6 3.2 9.7 1.9" stroke="#e6fffa" strokeWidth="1.5" strokeLinecap="round" opacity=".8" />
    </IconShell>
  );
}

function AmericanFootballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <ellipse cx="16" cy="16" rx="12.3" ry="7.6" fill="#9b4e25" transform="rotate(-20 16 16)" />
      <ellipse cx="16" cy="16" rx="12.3" ry="7.6" stroke="#10e0bd" strokeWidth="1.25" transform="rotate(-20 16 16)" />
      <path d="M8.3 18.8c4.7-1.6 10.6-3.8 15.4-5.6" stroke="#fff8e8" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M14.2 17.1 13.3 15M16.5 16.3l-.9-2.1M18.8 15.5l-.9-2.1" stroke="#fff8e8" strokeWidth="1.35" strokeLinecap="round" />
      <path d="M9.2 13.2c4-3.5 10.7-4.8 15.2-.3" stroke="#d9874b" strokeWidth="1.4" strokeLinecap="round" opacity=".85" />
    </IconShell>
  );
}

function HockeyIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <path d="M20.8 7.5 14.5 22c-.5 1.2.2 2.3 1.5 2.3h6.8" stroke="#f3f7fb" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M20.8 7.5 14.5 22" stroke="#10e0bd" strokeWidth="1.2" strokeLinecap="round" />
      <path d="M8.8 23.4h8.9" stroke="#8cffdf" strokeWidth="2" strokeLinecap="round" />
      <ellipse cx="10" cy="24.6" rx="4.3" ry="1.5" fill="#1f2730" stroke="#10e0bd" strokeWidth="1" />
      <path d="M9 10.8h5.6" stroke="#6b7785" strokeWidth="1.7" strokeLinecap="round" />
    </IconShell>
  );
}

function VolleyballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="10.8" fill="#f6faf8" />
      <path d="M16 5.2c1.2 4.4.2 8.1-3 11.2M16 5.2c4.1 1 7.2 3.7 9 7.8M13 16.4c3.4.8 7.2-.2 11.4-3M13 16.4c-.2 3.8 1.3 7.1 4.5 9.9M13 16.4C9.8 15.3 7.3 13 5.7 9.7M13 16.4c-2.2 2.5-3.3 5.4-3.2 8.7" stroke="#10e0bd" strokeWidth="1.65" strokeLinecap="round" />
      <path d="M7.7 21.8c3.5 3.8 9.6 5 14.4 1.3" stroke="#b8c2cc" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="16" cy="16" r="10.8" stroke="#10e0bd" strokeWidth="1.2" opacity=".65" />
    </IconShell>
  );
}

function HandballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="10.7" fill="#202a33" stroke="#10e0bd" strokeWidth="1.4" />
      <path d="M10 9.8c4.4 1.9 8.2 5.6 10.7 10.6M22.2 10.4c-4 2-7.5 5.5-10.1 10.4M6.2 15.6h19.6M10.1 22.8c3.2-1.4 7.9-1.5 11.6-.1" stroke="#d7dee5" strokeWidth="1.45" strokeLinecap="round" />
      <path d="M8.8 8.9 12 6.8M23.2 8.9 20 6.8M8.8 23.1 12 25.2M23.2 23.1 20 25.2" stroke="#10e0bd" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="16" cy="16" r="2.4" fill="#10e0bd" opacity=".85" />
    </IconShell>
  );
}

function TableTennisIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="21.6" cy="10.2" r="3.1" fill="#dff8ff" stroke="#10e0bd" strokeWidth="1.2" />
      <path d="M9.4 9.7c2.7-2.6 7-2.6 9.5 0 2.6 2.7 2.4 6.9-.3 9.5-2.6 2.4-6.8 2.3-9.3-.3-2.6-2.7-2.5-6.8.1-9.2Z" fill="#10e0bd" />
      <path d="M14 14.7 7.1 24" stroke="#f6faf8" strokeWidth="2.4" strokeLinecap="round" />
      <path d="M9.4 9.7c2.7-2.6 7-2.6 9.5 0" stroke="#7dffe4" strokeWidth="1.6" strokeLinecap="round" />
      <path d="M18.6 19.2c-2.6 2.4-6.8 2.3-9.3-.3" stroke="#07111b" strokeWidth="1.3" strokeLinecap="round" opacity=".45" />
    </IconShell>
  );
}

function MmaIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <path d="M16 5.5 25.1 10v12L16 26.5 6.9 22V10L16 5.5Z" fill="#101922" stroke="#10e0bd" strokeWidth="1.5" />
      <path d="M12.6 13.2v-1.7a2 2 0 0 1 4 0v1.7M16.6 13.2v-1.1a2 2 0 0 1 4 0v2.6c0 4.2-2.2 6.9-5.3 6.9h-1.2c-2.8 0-4.9-2.2-4.9-5v-2.3a1.8 1.8 0 0 1 3.4-.8" stroke="#f6faf8" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M11 22.5h8.7" stroke="#10e0bd" strokeWidth="1.6" strokeLinecap="round" />
    </IconShell>
  );
}

function BaseballIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <circle cx="16" cy="16" r="10.7" fill="#f8fafc" stroke="#10e0bd" strokeWidth="1.25" />
      <path d="M9.2 8.3c3.7 3.3 5.3 8.7 3.5 15.4M22.8 8.3c-3.7 3.3-5.3 8.7-3.5 15.4" stroke="#e5484d" strokeWidth="1.45" strokeLinecap="round" />
      <path d="m10.6 12 2.5-1M11.4 15.4l2.5-1M11.4 18.8l2.5-1M21.4 12l-2.5-1M20.6 15.4l-2.5-1M20.6 18.8l-2.5-1" stroke="#e5484d" strokeWidth="1" strokeLinecap="round" />
    </IconShell>
  );
}

function EsportsIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <path d="M9.6 12.2h12.8c2 0 3.4 1.4 3.7 3.4l.7 5.2a3.1 3.1 0 0 1-5.2 2.7l-2.1-2H12.5l-2.1 2a3.1 3.1 0 0 1-5.2-2.7l.7-5.2c.3-2 1.7-3.4 3.7-3.4Z" fill="#151f2b" stroke="#10e0bd" strokeWidth="1.5" />
      <path d="M11 16v4M9 18h4M20.5 18.1h.1M23.3 16.5h.1" stroke="#dff8ff" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M13.2 12.2 15 8.5h2l1.8 3.7" stroke="#8cffdf" strokeWidth="1.4" strokeLinecap="round" />
    </IconShell>
  );
}

function GenericSportIcon(props: IconProps) {
  return (
    <IconShell {...props}>
      <path d="M16 6.8 19 13l6.8.9-4.9 4.8 1.2 6.7L16 22.2l-6.1 3.2 1.2-6.7-4.9-4.8L13 13 16 6.8Z" fill="#10e0bd" />
      <path d="M13.2 13 16 6.8 19 13" stroke="#eafff9" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" opacity=".75" />
    </IconShell>
  );
}