import { useState } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend, Tooltip, ResponsiveContainer } from "recharts";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/my_db/d13e03e2-91a9-4cd9-a9a0-f44b1134da9a', alias: 'my_db' }
];

const N = (v) => (v != null ? Number(v) : 0);

const TEAM_A_COLOR = "#0777b3";
const TEAM_B_COLOR = "#bd4e35";

const TEAMS = [
  "Argentina", "Australia", "Belgium", "Brazil", "Cameroon", "Canada", "Costa Rica",
  "Croatia", "Denmark", "Ecuador", "England", "France", "Germany", "Ghana", "IR Iran",
  "Japan", "Korea Republic", "Mexico", "Morocco", "Netherlands", "Poland", "Portugal",
  "Qatar", "Saudi Arabia", "Senegal", "Serbia", "Spain", "Switzerland", "Tunisia",
  "United States", "Uruguay", "Wales",
];

// Tournament-wide min/max per metric (single-match values), used to normalize each axis to 0-100
const RANGES = {
  xg: { min: 0, max: 5 },
  sot: { min: 0, max: 13 },
  total_shots: { min: 0, max: 32 },
  corners: { min: 0, max: 14 },
  crosses: { min: 2, max: 46 },
  possession: { min: 23, max: 81 },
  pass_accuracy: { min: 55, max: 95 },
  touches: { min: 341, max: 1190 },
  long_balls: { min: 39, max: 106 },
  tackles: { min: 5, max: 33 },
  interceptions: { min: 2, max: 19 },
  aerials_won: { min: 5, max: 33 },
  clearances: { min: 3, max: 50 },
  saves: { min: 0, max: 10 },
  fouls: { min: 3, max: 30 },
  offsides: { min: 0, max: 10 },
};

function normalize(value, metric) {
  const { min, max } = RANGES[metric];
  if (max === min) return 50;
  const pct = ((value - min) / (max - min)) * 100;
  return Math.round(Math.max(0, Math.min(100, pct)));
}

const AXIS_LABELS = {
  xg: "xG",
  sot: "Shots on Target",
  total_shots: "Total Shots",
  corners: "Corners",
  crosses: "Crosses",
  possession: "Possession",
  pass_accuracy: "Pass Accuracy",
  touches: "Touches",
  long_balls: "Long Balls",
  tackles: "Tackles",
  interceptions: "Interceptions",
  aerials_won: "Aerials Won",
  clearances: "Clearances",
  saves: "Saves",
  fouls: "Fouls",
  offsides: "Offsides",
};

const OFFENSE_METRICS = ["xg", "sot", "total_shots", "corners", "crosses", "possession", "pass_accuracy", "touches", "long_balls"];
const DEFENSE_METRICS = ["tackles", "interceptions", "aerials_won", "clearances", "saves", "fouls", "offsides"];

export default function TeamDnaComparison() {
  const [showAbout, setShowAbout] = useState(false);
  const [teamA, setTeamA] = useDiveState("teamA", "Argentina");
  const [teamB, setTeamB] = useDiveState("teamB", "France");
  const [matchIdxA, setMatchIdxA] = useDiveState("matchIdxA", 0);
  const [matchIdxB, setMatchIdxB] = useDiveState("matchIdxB", 0);

  // Per-match stats for every team, ordered by match date within team
  const matchesQuery = useSQLQuery(`
    WITH team_matches AS (
      SELECT match, strftime(match_time, '%b %d') AS match_date, home_team AS team, away_team AS opponent,
             home_xg AS xg, home_sot AS sot, home_total_shots AS total_shots,
             home_corners AS corners, home_crosses AS crosses,
             home_possession AS possession,
             home_completed_passes AS comp_passes, home_attempted_pases AS att_passes,
             home_touches AS touches, home_long_balls AS long_balls,
             home_tackles AS tackles, home_interceptions AS interceptions,
             home_aerials_won AS aerials_won, home_clearances AS clearances,
             home_saves AS saves, home_fouls AS fouls, home_offsides AS offsides
      FROM "my_db"."main"."fifa_match_2022"
      UNION ALL
      SELECT match, strftime(match_time, '%b %d') AS match_date, away_team AS team, home_team AS opponent,
             away_xg AS xg, away_sot AS sot, away_total_shots AS total_shots,
             away_corners AS corners, away_crosses AS crosses,
             away_possession AS possession,
             away_completed_passes AS comp_passes, away_attempted_pases AS att_passes,
             away_touches AS touches, away_long_balls AS long_balls,
             away_tackles AS tackles, away_interceptions AS interceptions,
             away_aerials_won AS aerials_won, away_clearances AS clearances,
             away_saves AS saves, away_fouls AS fouls, away_offsides AS offsides
      FROM "my_db"."main"."fifa_match_2022"
    )
    SELECT team, match, match_date, opponent,
           xg, sot, total_shots, corners, crosses,
           possession, ROUND(100.0 * comp_passes / att_passes, 1) AS pass_accuracy,
           touches, long_balls,
           tackles, interceptions, aerials_won, clearances, saves, fouls, offsides
    FROM team_matches
    ORDER BY team, match
  `);

  const allRows = Array.isArray(matchesQuery.data) ? matchesQuery.data : [];

  const matchesByTeam = {};
  allRows.forEach((r) => {
    if (!matchesByTeam[r.team]) matchesByTeam[r.team] = [];
    matchesByTeam[r.team].push(r);
  });

  const matchesA = matchesByTeam[teamA] || [];
  const matchesB = matchesByTeam[teamB] || [];

  const safeIdxA = Math.min(N(matchIdxA), Math.max(0, matchesA.length - 1));
  const safeIdxB = Math.min(N(matchIdxB), Math.max(0, matchesB.length - 1));

  const matchA = matchesA[safeIdxA];
  const matchB = matchesB[safeIdxB];

  function buildRadarData(metricList) {
    return metricList.map((metric) => ({
      metric: AXIS_LABELS[metric],
      [teamA]: matchA ? normalize(N(matchA[metric]), metric) : 0,
      [teamB]: matchB ? normalize(N(matchB[metric]), metric) : 0,
    }));
  }

  const offenseData = buildRadarData(OFFENSE_METRICS);
  const defenseData = buildRadarData(DEFENSE_METRICS);

  return (
    <div className="p-6" style={{ background: "#f8f8f8", margin: "0 auto" }}>
      <h1 className="text-2xl font-semibold mt-4" style={{ color: "#231f20" }}>
        FIFA World Cup Team DNA Comparison
      </h1>
      <p className="text-sm mb-2" style={{ color: "#6a6a6a" }}>
        Match-by-match tactical profile, World Cup 2022
      </p>

      <button
        onClick={() => setShowAbout(!showAbout)}
        className="text-xs mb-4"
        style={{ color: "#0777b3", background: "none", border: "none", padding: 0, cursor: "pointer", textDecoration: "underline" }}
      >
        {showAbout ? "Hide" : "About this dive"}
      </button>

      {showAbout && (
        <div className="text-sm mb-6" style={{ color: "#231f20", lineHeight: 1.6 }}>
          <p className="mb-2">
            Compare any two World Cup 2022 teams' tactical "DNA" head-to-head, match by match.
            Each team has its own slider to step through their individual matches (group stage
            through the final) — pick any two matches, even from different stages of the
            tournament, and see how each team's playing style overlaps or contrasts.
          </p>
          <p className="mb-2">
            Two radar charts split the comparison into Offense and Defense so each stays readable:
          </p>
          <ul className="mb-2" style={{ paddingLeft: "1.2em", listStyleType: "disc" }}>
            <li>Offense (9 metrics): xG, Shots on Target, Total Shots, Corners, Crosses, Possession, Pass Accuracy, Touches, Long Balls</li>
            <li>Defense (7 metrics): Tackles, Interceptions, Aerials Won, Clearances, Saves, Fouls, Offsides</li>
          </ul>
          <p className="mb-2">
            All 16 values are normalized to a 0–100 scale, based on the tournament-wide min/max
            for that metric, so metrics on very different scales — like xG (0–5) and Touches
            (300–1200) — can sit on the same chart and be compared visually as shape, not raw numbers.
          </p>
          <p>
            Use it to spot stylistic mismatches (e.g. a high-possession, high-pass-accuracy team
            vs. a low-possession, high-tackle counter-attacking team) or to trace how a single
            team's tactical shape evolved from their opening group match to a knockout-stage
            performance.
          </p>
        </div>
      )}

      {/* Team A controls */}
      <div className="mb-4">
        <div className="flex items-center gap-3">
          <select
            value={teamA}
            onChange={(e) => { setTeamA(e.target.value); setMatchIdxA(0); }}
            className="text-sm"
            style={{ color: TEAM_A_COLOR, fontWeight: 600, border: "1px solid #ddd", borderRadius: "4px", padding: "4px 8px" }}
          >
            {TEAMS.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          <input
            type="range"
            min={0}
            max={Math.max(0, matchesA.length - 1)}
            value={safeIdxA}
            onChange={(e) => setMatchIdxA(Number(e.target.value))}
            style={{ flex: 1, accentColor: TEAM_A_COLOR }}
          />
        </div>
        <p className="text-xs mt-1" style={{ color: "#6a6a6a" }}>
          {matchA ? `vs ${matchA.opponent} (${matchA.match_date})` : "No match data"}
        </p>
      </div>

      {/* Team B controls */}
      <div className="mb-6">
        <div className="flex items-center gap-3">
          <select
            value={teamB}
            onChange={(e) => { setTeamB(e.target.value); setMatchIdxB(0); }}
            className="text-sm"
            style={{ color: TEAM_B_COLOR, fontWeight: 600, border: "1px solid #ddd", borderRadius: "4px", padding: "4px 8px" }}
          >
            {TEAMS.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          <input
            type="range"
            min={0}
            max={Math.max(0, matchesB.length - 1)}
            value={safeIdxB}
            onChange={(e) => setMatchIdxB(Number(e.target.value))}
            style={{ flex: 1, accentColor: TEAM_B_COLOR }}
          />
        </div>
        <p className="text-xs mt-1" style={{ color: "#6a6a6a" }}>
          {matchB ? `vs ${matchB.opponent} (${matchB.match_date})` : "No match data"}
        </p>
      </div>

      {/* Two radar charts side by side: Offense and Defense */}
      <div className="grid grid-cols-2 gap-4">
        <div>
          <h2 className="text-sm font-semibold mb-1 text-center" style={{ color: "#231f20" }}>Offense</h2>
          {matchesQuery.isLoading ? (
            <div className="bg-gray-100 animate-pulse rounded" style={{ height: 280 }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <RadarChart data={offenseData}>
                <PolarGrid stroke="#ddd" />
                <PolarAngleAxis dataKey="metric" fontSize={10} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
                <Radar name={teamA} dataKey={teamA} stroke={TEAM_A_COLOR} fill={TEAM_A_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Radar name={teamB} dataKey={teamB} stroke={TEAM_B_COLOR} fill={TEAM_B_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Tooltip />
              </RadarChart>
            </ResponsiveContainer>
          )}
        </div>
        <div>
          <h2 className="text-sm font-semibold mb-1 text-center" style={{ color: "#231f20" }}>Defense</h2>
          {matchesQuery.isLoading ? (
            <div className="bg-gray-100 animate-pulse rounded" style={{ height: 280 }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <RadarChart data={defenseData}>
                <PolarGrid stroke="#ddd" />
                <PolarAngleAxis dataKey="metric" fontSize={10} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
                <Radar name={teamA} dataKey={teamA} stroke={TEAM_A_COLOR} fill={TEAM_A_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Radar name={teamB} dataKey={teamB} stroke={TEAM_B_COLOR} fill={TEAM_B_COLOR} fillOpacity={0.35} strokeWidth={2} />
                <Tooltip />
              </RadarChart>
            </ResponsiveContainer>
          )}
        </div>
      </div>

      {!matchesQuery.isLoading && (
        <div className="flex justify-center gap-6 mt-2 text-sm">
          <span style={{ color: TEAM_A_COLOR, fontWeight: 600 }}>● {teamA}</span>
          <span style={{ color: TEAM_B_COLOR, fontWeight: 600 }}>● {teamB}</span>
        </div>
      )}
    </div>
  );
}


Compare any two World Cup 2022 teams' tactical "DNA" head-to-head, match by match. Each team has its own slider to step through their individual matches (group stage through the final) — choose any two matches, even from different stages of the tournament, and see how each team's playing style overlaps or contrasts.

Two radar charts split the comparison into Offense and Defense so each stays readable:
- Offense (9 metrics): xG, Shots on Target, Total Shots, Corners, Crosses, Possession, Pass Accuracy, Touches, Long Balls
- Defense (7 metrics): Tackles, Interceptions, Aerials Won, Clearances, Saves, Fouls, Offsides

All 16 values are normalized to a 0–100 scale (based on the tournament-wide min/max for that metric) so metrics on very different scales — like xG (0–5) and Touches (300–1200) — can sit on the same chart and be compared visually as shape, not raw numbers.

Use it to spot stylistic mismatches (e.g. a high-possession, high-pass-accuracy team vs. a low-possession, high-tackle counter-attacking team) or to trace how a single team's tactical shape evolved from their opening group match to a knockout-stage performance.

FIFA World Cup Team DNA Comparison

Comments