brackt/app/routes/admin.sports-seasons.$id.events.$eventId.bracket.tsx

import { Form, Link, useFetcher } from "react-router";
import { Fragment, useState, useEffect, useMemo, useRef } from "react";
import { localDateTimeToUtcIso, utcIsoToLocalDateTime } from "~/lib/date-utils";
import type { Route } from "./+types/admin.sports-seasons.$id.events.$eventId.bracket";

import { loader, action } from "./admin.sports-seasons.$id.events.$eventId.bracket.server";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { ArrowLeft, Plus, Trophy, X, Check, ChevronDown, ChevronRight, Calendar, TrendingUp, Trash2 } from "lucide-react";
import { getAllBracketTemplates, getBracketTemplate, getOrderedRoundsFromMatches, buildNCAA68SlotMap, ALL_16_SEEDS, type BracketRegion } from "~/lib/bracket-templates";
import { computeGroupStandings } from "~/models/group-stage-match";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { Badge } from "~/components/ui/badge";
import { ParticipantSelector } from "~/components/ParticipantSelector";

export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
  return [{ title: `Bracket — ${data?.event?.name ?? "Event"} - Brackt Admin` }];
}

/**
 * Schedule editor for a single group-stage match.
 *
 * The admin enters a local wall-clock time; on submit it is converted to a UTC
 * ISO string (in the hidden `scheduledAt` field) so the DB stores a true UTC
 * instant. The stored UTC value is rendered back into the input in the
 * browser's local timezone via a client-only effect (avoids SSR hydration
 * mismatch, since the server runs in UTC).
 */
function GroupMatchScheduleForm({
  match,
  localTzAbbr,
}: {
  match: { id: string; scheduledAt: string | Date | null | undefined };
  localTzAbbr: string;
}) {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.value = utcIsoToLocalDateTime(match.scheduledAt);
    }
  }, [match.scheduledAt]);
  return (
    <Form
      method="post"
      className="flex items-center gap-1"
      onSubmit={(e) => {
        const form = e.currentTarget;
        const local = form.elements.namedItem("scheduledAtLocal") as HTMLInputElement;
        const hidden = form.elements.namedItem("scheduledAt") as HTMLInputElement;
        if (hidden) hidden.value = localDateTimeToUtcIso(local?.value) ?? "";
      }}
    >
      <input type="hidden" name="intent" value="update-group-match-schedule" />
      <input type="hidden" name="matchId" value={match.id} />
      {/* Hidden field holds the UTC ISO string written by onSubmit */}
      <input type="hidden" name="scheduledAt" defaultValue="" />
      <Calendar className="h-3 w-3 text-muted-foreground shrink-0" />
      <Input
        ref={inputRef}
        type="datetime-local"
        name="scheduledAtLocal"
        title={`Time zone: ${localTzAbbr}`}
        className="h-6 text-xs px-1 py-0"
      />
      <Button type="submit" size="sm" variant="ghost" className="h-6 px-1.5 text-xs">
        Save
      </Button>
    </Form>
  );
}

export { loader, action };

/**
 * One "possible duplicate" row in the draw preview. Uses a fetcher so resolving
 * it (rename existing / create as new) submits in the background — the preview
 * stays on screen instead of reloading the page and forcing a fresh dry run.
 */
function DuplicateRow({
  p,
}: {
  p: { name: string; externalId: string | null; suggestion: string; suggestionId: string };
}) {
  const fetcher = useFetcher<{ success?: string; error?: string }>();
  const busy = fetcher.state !== "idle";

  return (
    <li className="flex flex-wrap items-center gap-x-2 gap-y-1">
      <span>
        <span className="font-medium">{p.name}</span>
        <span className="text-muted-foreground"> → looks like </span>
        <span className="font-medium">{p.suggestion}</span>
      </span>
      {fetcher.data?.success ? (
        <span className="text-xs font-medium text-emerald-500">✓ {fetcher.data.success}</span>
      ) : (
        <fetcher.Form method="post" className="flex items-center gap-2">
          <input type="hidden" name="name" value={p.name} />
          <input type="hidden" name="externalId" value={p.externalId ?? ""} />
          <input type="hidden" name="participantId" value={p.suggestionId} />
          <Button
            type="submit"
            name="intent"
            value="relink-draw-participant"
            size="sm"
            variant="outline"
            disabled={busy}
          >
            Rename “{p.suggestion}” → “{p.name}”
          </Button>
          <Button
            type="submit"
            name="intent"
            value="create-draw-participant"
            size="sm"
            variant="outline"
            disabled={busy}
          >
            Create as new
          </Button>
        </fetcher.Form>
      )}
      {fetcher.data?.error && (
        <span className="text-xs text-destructive">{fetcher.data.error}</span>
      )}
    </li>
  );
}

export default function EventBracket({
  loaderData,
  actionData,
}: Route.ComponentProps) {
  const { sportsSeason, event, participants, matches, tournamentGroups } = loaderData;
  const [selectedTemplate, setSelectedTemplate] = useState("simple_8");
  const [selectedParticipants, setSelectedParticipants] = useState<Record<number, string>>({});
  const [selectedWinners, setSelectedWinners] = useState<Record<string, string>>({});
  const [knockoutAssignments, setKnockoutAssignments] = useState<Record<string, string>>({});
  const [expandedMatches, setExpandedMatches] = useState<Set<string>>(new Set());
  const localTzAbbr = new Intl.DateTimeFormat("en-US", { timeZoneName: "short" })
    .formatToParts(new Date())
    .find(p => p.type === "timeZoneName")?.value ?? "local";

  const toggleMatchExpanded = (matchId: string) => {
    setExpandedMatches(prev => {
      const next = new Set(prev);
      if (next.has(matchId)) next.delete(matchId);
      else next.add(matchId);
      return next;
    });
  };
  const templates = getAllBracketTemplates();
  const template = templates.find((t) => t.id === selectedTemplate);

  // Determine if this is a group-stage event
  const hasGroupStage = template?.groupStage !== null && template?.groupStage !== undefined;

  // Determine if this template uses named regions (e.g. NCAA 68)
  const hasRegions = (template?.regions?.length ?? 0) > 0;

  // Per-region configuration state: name + which seed slots are play-ins
  // Initialized from: stored event config → template defaults → empty
  const buildDefaultRegionConfig = (tmpl: typeof template) => {
    const source =
      (event.bracketRegionConfig as unknown as BracketRegion[] | null) ?? tmpl?.regions ?? [];
    return source.map((r) => ({
      name: r.name,
      playInSeeds: r.playIns.map((pi) => pi.seedSlot),
    }));
  };
  const [regionConfig, setRegionConfig] = useState(() => buildDefaultRegionConfig(template));

  // Derive effective BracketRegion[] from regionConfig state
  const effectiveRegions: BracketRegion[] = useMemo(() => {
    return regionConfig.map((cfg) => {
      const playInSet = new Set(cfg.playInSeeds);
      return {
        name: cfg.name,
        directSeeds: ALL_16_SEEDS.filter((s) => !playInSet.has(s)),
        playIns: cfg.playInSeeds.map((s) => ({ seedSlot: s, teams: 2 as const })),
      };
    });
  }, [regionConfig]);

  const regionSlotMap = useMemo(
    () => (effectiveRegions.length > 0 ? buildNCAA68SlotMap(effectiveRegions) : null),
    [effectiveRegions]
  );

  // Region config handlers
  const updateRegionName = (regionIdx: number, name: string) => {
    setRegionConfig((prev) =>
      prev.map((r, i) => (i === regionIdx ? { ...r, name } : r))
    );
  };
  const addPlayIn = (regionIdx: number) => {
    setRegionConfig((prev) =>
      prev.map((r, i) => {
        if (i !== regionIdx || r.playInSeeds.length >= 2) return r;
        // Default to seed 16 if no play-ins yet, otherwise seed 11
        const defaultSeed = r.playInSeeds.length === 0 ? 16 : 11;
        const seed = r.playInSeeds.includes(defaultSeed)
          ? ([11, 16].find((s) => !r.playInSeeds.includes(s)) ?? 11)
          : defaultSeed;
        return { ...r, playInSeeds: [...r.playInSeeds, seed] };
      })
    );
    // Reset participant selections since slot indices change
    setSelectedParticipants({});
  };
  const removePlayIn = (regionIdx: number, piIdx: number) => {
    setRegionConfig((prev) =>
      prev.map((r, i) =>
        i === regionIdx
          ? { ...r, playInSeeds: r.playInSeeds.filter((_, j) => j !== piIdx) }
          : r
      )
    );
    setSelectedParticipants({});
  };
  const updatePlayInSeed = (regionIdx: number, piIdx: number, seed: number) => {
    setRegionConfig((prev) =>
      prev.map((r, i) =>
        i === regionIdx
          ? {
              ...r,
              playInSeeds: r.playInSeeds.map((s, j) => (j === piIdx ? seed : s)),
            }
          : r
      )
    );
    setSelectedParticipants({});
  };

  const isGroupStageEvent = tournamentGroups.length > 0;

  // Determine the phase for group-stage events
  const knockoutPopulated = useMemo(() => {
    if (!isGroupStageEvent) return false;
    // Check if any Round of 32 match has participants assigned
    const r32Matches = matches.filter((m) => m.round === "Round of 32");
    return r32Matches.some((m) => m.participant1Id || m.participant2Id);
  }, [isGroupStageEvent, matches]);

  // Group stage stats
  const groupStageStats = useMemo(() => {
    if (!isGroupStageEvent) return null;
    let eliminated = 0;
    let total = 0;
    for (const group of tournamentGroups) {
      for (const member of group.members || []) {
        total++;
        if (member.eliminated) eliminated++;
      }
    }
    return { eliminated, advancing: total - eliminated, total };
  }, [isGroupStageEvent, tournamentGroups]);

  // Advancing participants (non-eliminated) for knockout assignment
  const advancingParticipants = useMemo(() => {
    if (!isGroupStageEvent) return [];
    const advancing: Array<{ id: string; name: string }> = [];
    for (const group of tournamentGroups) {
      for (const member of group.members || []) {
        if (!member.eliminated && member.participant) {
          advancing.push({
            id: member.participant.id,
            name: member.participant.name,
          });
        }
      }
    }
    return advancing;
  }, [isGroupStageEvent, tournamentGroups]);

  // Available advancing participants for knockout assignment (exclude already assigned)
  const availableAdvancingMap = useMemo(() => {
    const assignedIds = new Set(Object.values(knockoutAssignments).filter(Boolean));
    const map: Record<string, typeof advancingParticipants> = {};

    // Create 32 slots (16 matches × 2 slots)
    for (let m = 1; m <= 16; m++) {
      for (const slot of ["participant1Id", "participant2Id"]) {
        const key = `match-${m}-${slot}`;
        const currentSelection = knockoutAssignments[key];
        map[key] = advancingParticipants.filter(
          (p) => !assignedIds.has(p.id) || p.id === currentSelection
        );
      }
    }
    return map;
  }, [knockoutAssignments, advancingParticipants]);

  // Clear selected winners after successful batch submission
  useEffect(() => {
    if (actionData?.success) {
      setSelectedWinners({});
    }
  }, [actionData?.success]);

  // Reset selected participants and region config when template changes
  const handleTemplateChange = (newTemplateId: string) => {
    setSelectedTemplate(newTemplateId);
    setSelectedParticipants({});
    const newTemplate = templates.find((t) => t.id === newTemplateId);
    setRegionConfig(buildDefaultRegionConfig(newTemplate));
  };

  // Update selected participant for a seed
  const handleParticipantChange = (seedIndex: number, participantId: string) => {
    setSelectedParticipants(prev => ({
      ...prev,
      [seedIndex]: participantId
    }));
  };

  // Memoized available participants calculation
  const availableParticipantsMap = useMemo(() => {
    const selectedIdsSet = new Set(Object.values(selectedParticipants));
    const map: Record<number, typeof participants> = {};
    const totalSeeds = template?.totalTeams || 8;

    for (let i = 0; i < totalSeeds; i++) {
      const currentSelection = selectedParticipants[i];
      map[i] = participants.filter((p: { id: string; name: string }) => {
        return !selectedIdsSet.has(p.id) || p.id === currentSelection;
      });
    }
    return map;
  }, [selectedParticipants, participants, template?.totalTeams]);

  const getAvailableParticipants = (seedIndex: number) => {
    return availableParticipantsMap[seedIndex] || participants;
  };

  // Update selected winner for a match
  const handleWinnerChange = (matchId: string, winnerId: string) => {
    setSelectedWinners(prev => ({
      ...prev,
      [matchId]: winnerId
    }));
  };

  // Get matches with pending winner selections in a round
  const getPendingWinnersInRound = (round: string) => {
    return Object.entries(selectedWinners)
      .filter(([matchId]) => {
        const match = matches.find((m) => m.id === matchId);
        return match && match.round === round && !match.isComplete;
      });
  };

  // Memoized: Group matches by round
  const matchesByRound = useMemo(() => {
    const grouped: Record<string, typeof matches> = {};
    for (const match of matches) {
      if (!grouped[match.round]) {
        grouped[match.round] = [];
      }
      grouped[match.round].push(match);
    }
    return grouped;
  }, [matches]);

  // Memoized: Get available rounds in chronological order
  const availableRounds = useMemo(() => {
    const bracketTemplate = event.bracketTemplateId ? getBracketTemplate(event.bracketTemplateId) : undefined;
    return getOrderedRoundsFromMatches(matches, bracketTemplate);
  }, [matches, event.bracketTemplateId]);

  // Check if all matches are complete
  const allMatchesComplete = useMemo(() => {
    return matches.length > 0 && matches.every((m) => m.isComplete);
  }, [matches]);

  // No bracket and no groups yet = setup phase
  const showSetup = matches.length === 0 && !isGroupStageEvent;

  return (
    <div className="p-8">
      <div className="max-w-6xl mx-auto">
        <div className="mb-6">
          <Button variant="ghost" size="sm" asChild className="mb-2">
            <Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}`}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Event
            </Link>
          </Button>
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">Playoff Bracket</h1>
              <p className="text-muted-foreground mt-1">
                {event.name} - {sportsSeason.sport.name} {sportsSeason.name}
              </p>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {actionData?.error && (
            <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
              {actionData.error}
            </div>
          )}

          {actionData?.success && (
            <div className="bg-emerald-500/15 text-emerald-400 px-4 py-3 rounded-md text-sm">
              {actionData.success}
            </div>
          )}

          {/* Possible-duplicate review after a draw sync */}
          {actionData?.drawSyncResult && actionData.drawSyncResult.unmatched.length > 0 && (
            <Card className="border-amber-500/40">
              <CardHeader>
                <CardTitle className="text-amber-500">
                  Review {actionData.drawSyncResult.unmatched.length} possible duplicate
                  {actionData.drawSyncResult.unmatched.length === 1 ? "" : "s"}
                </CardTitle>
                <CardDescription>
                  These players were auto-created but closely resemble an existing participant —
                  if a duplicate, results won&apos;t reach the drafted copy. To fix: on the{" "}
                  <Link
                    to={`/admin/sports-seasons/${sportsSeason.id}/participants`}
                    className="underline font-medium"
                  >
                    participants page
                  </Link>
                  , set the correct participant&apos;s external ID to the Wikipedia name, delete the
                  duplicate, then click <span className="font-medium">Sync Draw</span> again.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-1 text-sm">
                  {actionData.drawSyncResult.unmatched.map((p) => (
                    <li key={p.externalId ?? p.name} className="flex items-center gap-2">
                      <span className="font-medium">{p.name}</span>
                      {p.externalId && p.externalId !== p.name && (
                        <span className="text-muted-foreground text-xs">({p.externalId})</span>
                      )}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          )}

          {/* Dry-run preview of a draw sync */}
          {actionData?.drawPreview && (
            <Card className="border-sky-500/40">
              <CardHeader>
                <CardTitle className="text-sky-500">Draw preview (no changes made)</CardTitle>
                <CardDescription>{actionData.drawPreview.article}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="grid grid-cols-2 gap-x-6 gap-y-1 sm:grid-cols-3">
                  <div>
                    Players: <span className="font-medium">{actionData.drawPreview.totalPlayers}</span>
                  </div>
                  <div>
                    Matched:{" "}
                    <span className="font-medium text-emerald-500">
                      {actionData.drawPreview.matched}
                    </span>
                  </div>
                  <div>
                    Will create:{" "}
                    <span className="font-medium">{actionData.drawPreview.willCreate.length}</span>
                  </div>
                  <div>
                    Matches:{" "}
                    <span className="font-medium">
                      {actionData.drawPreview.completedMatches}/{actionData.drawPreview.totalMatches}{" "}
                      done
                    </span>
                  </div>
                  <div>
                    Unfilled R1 slots:{" "}
                    <span className="font-medium">{actionData.drawPreview.tbdFirstRound}</span>
                  </div>
                </div>

                {actionData.drawPreview.possibleDuplicates.length > 0 && (
                  <div>
                    <p className="font-medium text-amber-500">
                      Possible duplicates ({actionData.drawPreview.possibleDuplicates.length}) — would
                      be created but resemble an existing participant:
                    </p>
                    <ul className="mt-2 space-y-2">
                      {actionData.drawPreview.possibleDuplicates.map((p) => (
                        <DuplicateRow key={p.externalId ?? p.name} p={p} />
                      ))}
                    </ul>
                    <p className="mt-2 text-xs text-muted-foreground">
                      <span className="font-medium">Rename</span> if it&apos;s the same player (links
                      the existing participant so it matches);{" "}
                      <span className="font-medium">Create as new</span> if they&apos;re different
                      people. Then re-run Preview or Sync Draw.
                    </p>
                  </div>
                )}

                {actionData.drawPreview.willCreate.length > 0 && (
                  <details>
                    <summary className="cursor-pointer text-muted-foreground">
                      Show all {actionData.drawPreview.willCreate.length} players that would be created
                    </summary>
                    <ul className="mt-1 columns-2 sm:columns-3">
                      {actionData.drawPreview.willCreate.map((p) => (
                        <li key={p.externalId ?? p.name}>{p.name}</li>
                      ))}
                    </ul>
                  </details>
                )}

                <p className="text-xs text-muted-foreground">
                  Fix any duplicates on the{" "}
                  <Link
                    to={`/admin/sports-seasons/${sportsSeason.id}/participants`}
                    className="underline font-medium"
                  >
                    participants page
                  </Link>{" "}
                  first, then click <span className="font-medium">Sync Draw</span>.
                </p>
              </CardContent>
            </Card>
          )}

          {/* Sync Draw from Wikipedia — tennis Grand Slam auto-populate + auto-score */}
          {event.isQualifyingEvent &&
            sportsSeason.sport.simulatorType === "tennis_qualifying_points" && (
              <Card>
                <CardHeader>
                  <CardTitle>Sync Draw from Wikipedia</CardTitle>
                  <CardDescription>
                    Auto-populate and score this Grand Slam bracket from its Wikipedia draw
                    article. Re-run during the tournament to pull in completed matches.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Form method="post" className="space-y-3">
                    <div className="space-y-1.5">
                      <Label htmlFor="externalSourceKey">Wikipedia draw page (URL or title)</Label>
                      <Input
                        id="externalSourceKey"
                        name="externalSourceKey"
                        placeholder="https://en.wikipedia.org/wiki/2025_Wimbledon_Championships_–_Men's_singles"
                        defaultValue={event.externalSourceKey ?? ""}
                      />
                      <p className="text-xs text-muted-foreground">
                        Paste the article URL or type the title — both work. Use{" "}
                        <span className="font-medium">Preview</span> first to see matches and any
                        new/duplicate players before writing anything.
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button type="submit" name="intent" value="preview-draw" variant="outline">
                        Preview (dry run)
                      </Button>
                      <Button type="submit" name="intent" value="sync-draw">
                        Sync Draw
                      </Button>
                    </div>
                  </Form>
                </CardContent>
              </Card>
            )}

          {/* Reprocess Bracket - Full rebuild of participant results.
              Hidden once every match is complete — at that point all placements are final
              and "finalize bracket" should be used instead. */}
          {matches.length > 0 && !matches.every((m) => m.isComplete) && (
            <Card>
              <CardHeader>
                <CardTitle>Reprocess Bracket</CardTitle>
                <CardDescription>
                  Replay all completed matches from scratch and re-mark non-bracket
                  participants as eliminated. Use this to fix scoring data after rule
                  changes or when results look incorrect.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post">
                  <input type="hidden" name="intent" value="reprocess-bracket" />
                  <Button type="submit" variant="outline">
                    Reprocess Bracket
                  </Button>
                </Form>
              </CardContent>
            </Card>
          )}

          {/* Re-seed AFL Wildcard winners. Advancement pairs them by ladder position on
              every Wildcard result, so this is only for a bracket advanced before that
              rule existed — a completed match cannot be re-submitted to re-run it. */}
          {event.bracketTemplateId === "afl_10" && matches.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Re-seed Wildcard Winners</CardTitle>
                <CardDescription>
                  Pair the Elimination Finals by ladder position: 5th hosts the
                  lower-ranked Wildcard winner and 6th the higher-ranked one. Only moves
                  the qualifier slots — no results, scores or placements change, and
                  nothing is announced. Does nothing if the pairings are already right.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post">
                  <input type="hidden" name="intent" value="reseed-afl-wildcard" />
                  <Button type="submit" variant="outline">
                    Re-seed Wildcard Winners
                  </Button>
                </Form>
              </CardContent>
            </Card>
          )}

          {/* Fix the Semi-Final pairings. Elimination Final n feeds Semi-Final n, but
              brackets advanced before that was fixed crossed the two winners, and no
              admin action re-runs advancement. */}
          {event.bracketTemplateId === "afl_10" && matches.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Fix Semi-Final Pairings</CardTitle>
                <CardDescription>
                  Feed each Elimination Final into the Semi-Final it belongs to: EF1
                  winner into SF1 and EF2 winner into SF2. Only moves the qualifier slots
                  — no results, scores or placements change, and nothing is announced.
                  Does nothing if the pairings are already right.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post">
                  <input type="hidden" name="intent" value="reseed-afl-semifinals" />
                  <Button type="submit" variant="outline">
                    Fix Semi-Final Pairings
                  </Button>
                </Form>
              </CardContent>
            </Card>
          )}

          {/* Clear Bracket - the only escape hatch for a mis-seeded bracket. Nothing else
              can rewrite a match's participants, so a wrong seeding has to be torn down
              and rebuilt via the setup form below, which reappears once this runs. */}
          {matches.length > 0 && (
            <Card className="border-destructive/40">
              <CardHeader>
                <CardTitle>Clear Bracket</CardTitle>
                <CardDescription>
                  Delete every match in this bracket so it can be set up again from
                  scratch. Use this when the wrong participants were seeded. Placements
                  are left alone — run Reprocess Bracket after rebuilding to clear any
                  that the discarded results produced.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form
                  method="post"
                  className="space-y-3"
                  onSubmit={(e) => {
                    if (
                      !confirm(
                        `Delete all ${matches.length} match(es) in this bracket? Recorded results will be lost.`
                      )
                    ) {
                      e.preventDefault();
                    }
                  }}
                >
                  <input type="hidden" name="intent" value="clear-bracket" />
                  {/* The server refuses to discard completed matches unless this is
                      checked. Sending it unconditionally from a hidden field would make
                      that guard unreachable, including for a submit without JS. */}
                  {matches.some((m: { isComplete: boolean }) => m.isComplete) && (
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        id="confirm-clear-bracket"
                        name="confirm"
                        value="true"
                        className="h-4 w-4"
                      />
                      <Label htmlFor="confirm-clear-bracket" className="font-normal">
                        Yes, discard the results already recorded in this bracket
                      </Label>
                    </div>
                  )}
                  <Button type="submit" variant="destructive">
                    Clear Bracket
                  </Button>
                </Form>
              </CardContent>
            </Card>
          )}

          {/* ====== SETUP PHASE ====== */}
          {showSetup && (
            <Card>
              <CardHeader>
                <CardTitle>Generate Bracket</CardTitle>
                <CardDescription>
                  Create the bracket structure for this playoff event
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post" className="space-y-4">
                  {/* Intent depends on whether this is a group-stage template */}
                  <input
                    type="hidden"
                    name="intent"
                    value={hasGroupStage ? "generate-groups" : "generate-bracket"}
                  />

                  <div className="space-y-2">
                    <Label htmlFor="templateId">Bracket Template</Label>
                    <Select
                      name="templateId"
                      value={selectedTemplate}
                      onValueChange={handleTemplateChange}
                      required
                    >
                      <SelectTrigger id="templateId">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {templates.map((t) => (
                          <SelectItem key={t.id} value={t.id}>
                            {t.name} - {t.totalTeams} teams
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {template && (
                      <p className="text-sm text-muted-foreground">
                        {template.groupStage ? (
                          <>
                            Groups: {template.groupStage.groupCount} groups of {template.groupStage.teamsPerGroup}
                            {" | "}Knockout: {template.rounds.map(r => r.name).join(" \u2192 ")}
                          </>
                        ) : (
                          <>Rounds: {template.rounds.map(r => r.name).join(" \u2192 ")}</>
                        )}
                      </p>
                    )}
                  </div>

                  {/* Group-stage template: show group assignments */}
                  {hasGroupStage && template?.groupStage && (
                    <div className="space-y-4">
                      <Label>Assign Participants to Groups</Label>
                      <p className="text-sm text-muted-foreground">
                        Assign {template.totalTeams} participants across {template.groupStage.groupCount} groups
                        ({template.groupStage.teamsPerGroup} per group).
                      </p>
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {template.groupStage.groupLabels.map((label, groupIndex) => (
                          <Card key={label} className="border-dashed">
                            <CardHeader className="py-3 px-4">
                              <CardTitle className="text-base">Group {label}</CardTitle>
                            </CardHeader>
                            <CardContent className="px-4 pb-4 space-y-2">
                              {[...Array(template.groupStage?.teamsPerGroup ?? 0)].map((_, teamIndex) => {
                                const seedIndex = groupIndex * (template.groupStage?.teamsPerGroup ?? 0) + teamIndex;
                                const availableParticipants = getAvailableParticipants(seedIndex);

                                return (
                                  <div key={seedIndex}>
                                    <input
                                      type="hidden"
                                      name={`participant${seedIndex}`}
                                      value={selectedParticipants[seedIndex] || ""}
                                      required
                                    />
                                    <ParticipantSelector
                                      participants={availableParticipants}
                                      value={selectedParticipants[seedIndex] || ""}
                                      onValueChange={(value) => handleParticipantChange(seedIndex, value)}
                                      placeholder={`Team ${teamIndex + 1}...`}
                                    />
                                  </div>
                                );
                              })}
                            </CardContent>
                          </Card>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Non-group-stage template: region-grouped or flat seeded list */}
                  {!hasGroupStage && hasRegions && regionSlotMap && (
                    <div className="space-y-6">

                      {/* ── Region configuration ─────────────────────────────── */}
                      <div className="border rounded-lg p-4 space-y-3">
                        <div>
                          <h4 className="font-semibold text-sm">Configure Regions</h4>
                          <p className="text-xs text-muted-foreground mt-0.5">
                            Set each region's name and which seed slots are play-in games.
                          </p>
                        </div>
                        {regionConfig.map((region, r) => (
                          // eslint-disable-next-line react/no-array-index-key
                          <div key={r} className="flex flex-wrap items-center gap-2">
                            <Input
                              className="w-36 h-8 text-sm"
                              value={region.name}
                              onChange={(e) => updateRegionName(r, e.target.value)}
                              placeholder={`Region ${r + 1}`}
                            />
                            {region.playInSeeds.map((seed, pi) => (
                              // eslint-disable-next-line react/no-array-index-key
                              <div key={pi} className="flex items-center gap-1">
                                <span className="text-xs text-muted-foreground">play-in seed:</span>
                                <Select
                                  value={String(seed)}
                                  onValueChange={(val) => updatePlayInSeed(r, pi, parseInt(val, 10))}
                                >
                                  <SelectTrigger className="h-8 w-16 text-sm">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {ALL_16_SEEDS.map((s) => (
                                      <SelectItem key={s} value={String(s)}>{s}</SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  className="h-7 w-7 p-0 text-muted-foreground"
                                  onClick={() => removePlayIn(r, pi)}
                                >
                                  <X className="h-3 w-3" />
                                </Button>
                              </div>
                            ))}
                            {region.playInSeeds.length < 2 && (
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                className="h-7 text-xs"
                                onClick={() => addPlayIn(r)}
                              >
                                <Plus className="h-3 w-3 mr-1" />
                                Add play-in
                              </Button>
                            )}
                          </div>
                        ))}
                        {/* Hidden fields so server receives the region config */}
                        {regionConfig.map((region, r) => (
                          // eslint-disable-next-line react/no-array-index-key
                          <Fragment key={r}>
                            <input type="hidden" name={`regionName${r}`} value={region.name} />
                            <input type="hidden" name={`regionPlayInSeeds${r}`} value={region.playInSeeds.join(",")} />
                          </Fragment>
                        ))}
                      </div>

                      {/* ── Seed entry per region ─────────────────────────────── */}
                      <p className="text-sm text-muted-foreground">
                        Select participants by region. Use search to find teams quickly.
                      </p>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {effectiveRegions.map((region, r) => {
                          const directOffset = regionSlotMap.directOffsets[r];
                          return (
                            // eslint-disable-next-line react/no-array-index-key
                            <div key={r} className="border rounded-lg p-4 space-y-2">
                              <h4 className="font-semibold text-sm">{region.name || `Region ${r + 1}`}</h4>
                              {region.directSeeds.map((seedNum, pos) => {
                                const globalIdx = directOffset + pos;
                                const opponentSeed = 17 - seedNum;
                                const opponentIsPlayIn = region.playIns.some((pi) => pi.seedSlot === opponentSeed);
                                return (
                                  <div key={seedNum} className="flex items-center gap-2">
                                    <Label className="w-16 text-xs text-muted-foreground shrink-0">
                                      Seed {seedNum}
                                    </Label>
                                    <div className="flex-1 min-w-0">
                                      <input
                                        type="hidden"
                                        name={`participant${globalIdx}`}
                                        value={selectedParticipants[globalIdx] || ""}
                                        required
                                      />
                                      <ParticipantSelector
                                        participants={getAvailableParticipants(globalIdx)}
                                        value={selectedParticipants[globalIdx] || ""}
                                        onValueChange={(value) => handleParticipantChange(globalIdx, value)}
                                        placeholder={`Seed ${seedNum}…`}
                                      />
                                    </div>
                                    {opponentIsPlayIn && (
                                      <span className="text-xs text-muted-foreground shrink-0">← faces play-in</span>
                                    )}
                                  </div>
                                );
                              })}
                              {region.playIns.length > 0 && (
                                <p className="text-xs text-muted-foreground pt-1 border-t">
                                  {region.playIns.map((pi) => `Seed ${pi.seedSlot}`).join(" & ")} via play-in ↓
                                </p>
                              )}
                            </div>
                          );
                        })}
                      </div>

                      {/* ── Play-in team entry ─────────────────────────────────── */}
                      {regionSlotMap.playInOffsets.length > 0 && (
                        <div className="border rounded-lg p-4 space-y-4">
                          <h4 className="font-semibold text-sm">Play-In Teams</h4>
                          <p className="text-xs text-muted-foreground">
                            Enter both teams for each play-in game. The winner advances to the main bracket.
                          </p>
                          {regionSlotMap.playInOffsets.map((pi, ffIdx) => {
                            const regionName = effectiveRegions[pi.regionIndex]?.name || `Region ${pi.regionIndex + 1}`;
                            const idx1 = pi.startIndex;
                            const idx2 = pi.startIndex + 1;
                            return (
                              <div key={`${pi.regionIndex}-${pi.seedSlot}`} className="space-y-2">
                                <p className="text-xs font-medium text-muted-foreground">
                                  Play-In {ffIdx + 1} — {regionName} {pi.seedSlot}-seed
                                </p>
                                {[idx1, idx2].map((globalIdx, slot) => (
                                  <div key={globalIdx} className="flex items-center gap-2">
                                    <Label className="w-16 text-xs text-muted-foreground shrink-0">
                                      Team {slot + 1}
                                    </Label>
                                    <div className="flex-1 min-w-0">
                                      <input
                                        type="hidden"
                                        name={`participant${globalIdx}`}
                                        value={selectedParticipants[globalIdx] || ""}
                                        required
                                      />
                                      <ParticipantSelector
                                        participants={getAvailableParticipants(globalIdx)}
                                        value={selectedParticipants[globalIdx] || ""}
                                        onValueChange={(value) => handleParticipantChange(globalIdx, value)}
                                        placeholder={`${regionName} ${pi.seedSlot}-seed play-in team ${slot + 1}…`}
                                      />
                                    </div>
                                  </div>
                                ))}
                              </div>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  )}

                  {/* Non-group-stage, non-region template: flat seeded list */}
                  {!hasGroupStage && !hasRegions && (
                    <div className="space-y-2">
                      <Label>Select Participants (in order)</Label>
                      <p className="text-sm text-muted-foreground">
                        Select {template?.totalTeams || 8} participants for the bracket. Use search to quickly find participants.
                      </p>
                      {[...Array(template?.totalTeams || 8)].map((_, i) => {
                        const availableParticipants = getAvailableParticipants(i);
                        const slotLabel = template?.participantLabels?.[i] ?? `Seed ${i + 1}`;

                        return (
                          // eslint-disable-next-line react/no-array-index-key
                          <div key={i} className="flex items-center gap-2">
                            <Label className="w-28 text-sm text-muted-foreground shrink-0">
                              {slotLabel}
                            </Label>
                            <div className="flex-1 min-w-0">
                              <input
                                type="hidden"
                                name={`participant${i}`}
                                value={selectedParticipants[i] || ""}
                                required
                              />
                              <ParticipantSelector
                                participants={availableParticipants}
                                value={selectedParticipants[i] || ""}
                                onValueChange={(value) => handleParticipantChange(i, value)}
                                placeholder={`Select ${slotLabel.toLowerCase()}...`}
                              />
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}

                  <Button type="submit" className="w-full">
                    <Plus className="mr-2 h-4 w-4" />
                    {hasGroupStage ? "Generate Groups & Bracket" : "Generate Bracket"}
                  </Button>
                </Form>
              </CardContent>
            </Card>
          )}

          {/* ====== GROUP STAGE MANAGEMENT (Phase 2) ====== */}
          {isGroupStageEvent && !knockoutPopulated && (
            <>
              {/* Group Stage Summary */}
              {groupStageStats && (
                <Card>
                  <CardHeader>
                    <CardTitle>Group Stage</CardTitle>
                    <CardDescription>
                      Manage group stage eliminations. Mark teams as eliminated, then assign advancing teams to the knockout bracket.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex gap-4 text-sm">
                      <Badge variant="secondary">
                        {groupStageStats.total} total teams
                      </Badge>
                      <Badge variant="destructive">
                        {groupStageStats.eliminated} eliminated
                      </Badge>
                      <Badge variant="default">
                        {groupStageStats.advancing} advancing
                      </Badge>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Group Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {tournamentGroups.map((group) => {
                  const members = group.members || [];
                  const groupMatches = group.groupMatches || [];
                  const standings = computeGroupStandings(
                    members
                      .filter((m) => m.participant !== null && m.participant !== undefined)
                      .map((m) => ({
                        participantId: m.participant?.id ?? "",
                        participantName: m.participant?.name ?? "",
                      })),
                    groupMatches.map((m) => ({
                      participant1Id: m.participant1Id,
                      participant2Id: m.participant2Id,
                      participant1Score: m.participant1Score,
                      participant2Score: m.participant2Score,
                      isComplete: m.isComplete,
                    }))
                  );

                  return (
                    <Card key={group.id}>
                      <CardHeader className="py-3 px-4">
                        <CardTitle className="text-base">Group {group.groupName}</CardTitle>
                      </CardHeader>
                      <CardContent className="px-4 pb-4 space-y-3">
                        {/* Standings table */}
                        {standings.length > 0 && (
                          <div className="overflow-x-auto">
                            <table className="w-full text-xs">
                              <thead>
                                <tr className="border-b text-muted-foreground">
                                  <th className="text-left pb-1 font-medium">Team</th>
                                  <th className="text-center pb-1 font-medium w-6">P</th>
                                  <th className="text-center pb-1 font-medium w-6">W</th>
                                  <th className="text-center pb-1 font-medium w-6">D</th>
                                  <th className="text-center pb-1 font-medium w-6">L</th>
                                  <th className="text-center pb-1 font-medium w-8">GD</th>
                                  <th className="text-center pb-1 font-medium w-7">Pts</th>
                                </tr>
                              </thead>
                              <tbody>
                                {standings.map((row, idx) => {
                                  const member = members.find((m) => m.participant?.id === row.participantId);
                                  const isTop2 = idx < 2;
                                  return (
                                    <tr
                                      key={row.participantId}
                                      className={`border-b last:border-0 ${
                                        member?.eliminated
                                          ? "text-muted-foreground line-through"
                                          : isTop2
                                          ? "text-green-600 dark:text-green-400 font-medium"
                                          : ""
                                      }`}
                                    >
                                      <td className="py-0.5 truncate max-w-[80px]">{row.participantName}</td>
                                      <td className="text-center">{row.played}</td>
                                      <td className="text-center">{row.wins}</td>
                                      <td className="text-center">{row.draws}</td>
                                      <td className="text-center">{row.losses}</td>
                                      <td className="text-center">{row.gd > 0 ? `+${row.gd}` : row.gd}</td>
                                      <td className="text-center font-semibold">{row.points}</td>
                                    </tr>
                                  );
                                })}
                              </tbody>
                            </table>
                          </div>
                        )}

                        {/* Elimination toggles */}
                        <div className="space-y-1.5">
                          {members.map((member) => (
                            <div
                              key={member.id}
                              className={`flex items-center justify-between gap-2 p-2 rounded-md border ${
                                member.eliminated
                                  ? "bg-destructive/10 border-destructive/20"
                                  : "bg-background border-border"
                              }`}
                            >
                              <span
                                className={`text-sm truncate ${
                                  member.eliminated ? "line-through text-muted-foreground" : ""
                                }`}
                              >
                                {member.participant?.name || "Unknown"}
                              </span>
                              <Form method="post" className="shrink-0">
                                <input type="hidden" name="intent" value="toggle-elimination" />
                                <input type="hidden" name="memberId" value={member.id} />
                                <Button
                                  type="submit"
                                  size="sm"
                                  variant={member.eliminated ? "outline" : "destructive"}
                                  className="h-7 text-xs"
                                >
                                  {member.eliminated ? (
                                    <>
                                      <Check className="h-3 w-3 mr-1" />
                                      Reinstate
                                    </>
                                  ) : (
                                    <>
                                      <X className="h-3 w-3 mr-1" />
                                      Eliminate
                                    </>
                                  )}
                                </Button>
                              </Form>
                            </div>
                          ))}
                        </div>

                        {/* Match score entry */}
                        {groupMatches.length > 0 && (
                          <div className="space-y-1.5 pt-1 border-t">
                            <p className="text-xs font-medium text-muted-foreground">Matches</p>
                            {groupMatches.map((match) => (
                              <div key={match.id} className="text-xs space-y-1">
                                {/* Schedule row */}
                                <GroupMatchScheduleForm match={match} localTzAbbr={localTzAbbr} />
                                {/* Score row */}
                                <Form method="post" className="flex items-center gap-1">
                                  <input type="hidden" name="intent" value="update-group-match" />
                                  <input type="hidden" name="matchId" value={match.id} />
                                  <span className="truncate max-w-[70px]">
                                    {match.participant1?.name ?? "?"}
                                  </span>
                                  <Input
                                    type="number"
                                    name="participant1Score"
                                    min={0}
                                    defaultValue={match.participant1Score ?? ""}
                                    className={`h-6 w-10 text-center text-xs px-1 py-0 ${match.isComplete ? "bg-muted" : ""}`}
                                    disabled={match.isComplete}
                                  />
                                  <span className="text-muted-foreground">–</span>
                                  <Input
                                    type="number"
                                    name="participant2Score"
                                    min={0}
                                    defaultValue={match.participant2Score ?? ""}
                                    className={`h-6 w-10 text-center text-xs px-1 py-0 ${match.isComplete ? "bg-muted" : ""}`}
                                    disabled={match.isComplete}
                                  />
                                  <span className="truncate max-w-[70px] text-right">
                                    {match.participant2?.name ?? "?"}
                                  </span>
                                  {!match.isComplete && (
                                    <Button type="submit" size="sm" variant="default" className="h-6 px-1.5 text-xs shrink-0">
                                      Save
                                    </Button>
                                  )}
                                  {match.isComplete && (
                                    <Badge variant="secondary" className="h-5 text-xs px-1 shrink-0">FT</Badge>
                                  )}
                                </Form>
                              </div>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  );
                })}
              </div>

              {/* Knockout Assignment Section */}
              {groupStageStats && groupStageStats.advancing === 32 && (
                <Card className="border-blue-500">
                  <CardHeader>
                    <CardTitle>Assign Knockout Bracket</CardTitle>
                    <CardDescription>
                      32 teams are advancing. Assign them to the Round of 32 knockout bracket slots.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Form method="post" className="space-y-4">
                      <input type="hidden" name="intent" value="populate-knockout" />

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {[...Array(16)].map((_, matchIndex) => {
                          const matchNum = matchIndex + 1;
                          const key1 = `match-${matchNum}-participant1Id`;
                          const key2 = `match-${matchNum}-participant2Id`;

                          return (
                            <Card key={matchNum} className="border-dashed">
                              <CardContent className="p-4 space-y-2">
                                <div className="text-sm font-semibold text-muted-foreground">
                                  Match {matchNum}
                                </div>
                                <input
                                  type="hidden"
                                  name={key1}
                                  value={knockoutAssignments[key1] || ""}
                                  required
                                />
                                <ParticipantSelector
                                  participants={availableAdvancingMap[key1] || []}
                                  value={knockoutAssignments[key1] || ""}
                                  onValueChange={(value) =>
                                    setKnockoutAssignments((prev) => ({ ...prev, [key1]: value }))
                                  }
                                  placeholder="Team 1..."
                                />
                                <div className="text-center text-xs text-muted-foreground">vs</div>
                                <input
                                  type="hidden"
                                  name={key2}
                                  value={knockoutAssignments[key2] || ""}
                                  required
                                />
                                <ParticipantSelector
                                  participants={availableAdvancingMap[key2] || []}
                                  value={knockoutAssignments[key2] || ""}
                                  onValueChange={(value) =>
                                    setKnockoutAssignments((prev) => ({ ...prev, [key2]: value }))
                                  }
                                  placeholder="Team 2..."
                                />
                              </CardContent>
                            </Card>
                          );
                        })}
                      </div>

                      <Button type="submit" className="w-full">
                        Populate Knockout Bracket
                      </Button>
                    </Form>
                  </CardContent>
                </Card>
              )}

              {groupStageStats && groupStageStats.advancing !== 32 && groupStageStats.eliminated > 0 && (
                <Card>
                  <CardContent className="pt-6">
                    <p className="text-sm text-muted-foreground">
                      {groupStageStats.advancing} teams advancing (need exactly 32 to populate knockout bracket).
                      {groupStageStats.advancing > 32 && ` Eliminate ${groupStageStats.advancing - 32} more.`}
                      {groupStageStats.advancing < 32 && ` Reinstate ${32 - groupStageStats.advancing} teams or adjust eliminations.`}
                    </p>
                  </CardContent>
                </Card>
              )}
            </>
          )}

          {/* ====== KNOCKOUT BRACKET DISPLAY (Phase 3) ====== */}
          {/* Show bracket rounds when: non-group event with matches, OR group event with knockout populated */}
          {((matches.length > 0 && !isGroupStageEvent) || knockoutPopulated) && (
            <>
              {availableRounds.map((round: string) => (
                <Card key={round}>
                  <CardHeader>
                    <CardTitle>{round}</CardTitle>
                    <CardDescription>
                      {matchesByRound[round].length} {matchesByRound[round].length === 1 ? "match" : "matches"}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-8" />
                          <TableHead className="w-16">Match</TableHead>
                          <TableHead>Participant 1</TableHead>
                          <TableHead>Score</TableHead>
                          <TableHead className="w-24 text-center">vs</TableHead>
                          <TableHead>Score</TableHead>
                          <TableHead>Participant 2</TableHead>
                          <TableHead>Winner</TableHead>
                          <TableHead className="w-32">Actions</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {matchesByRound[round].map((match) => (
                          <Fragment key={match.id}>
                          <TableRow>
                            <TableCell className="w-8 p-1">
                              <button
                                type="button"
                                onClick={() => toggleMatchExpanded(match.id)}
                                className="text-muted-foreground hover:text-foreground"
                                aria-label="Toggle games and odds"
                              >
                                {expandedMatches.has(match.id)
                                  ? <ChevronDown className="h-4 w-4" />
                                  : <ChevronRight className="h-4 w-4" />}
                              </button>
                            </TableCell>
                            <TableCell className="font-semibold">
                              {match.matchNumber}
                            </TableCell>
                            <TableCell>
                              {match.participant1?.name || "TBD"}
                            </TableCell>
                            <TableCell>
                              {match.participant1Score ? parseFloat(match.participant1Score) : "-"}
                            </TableCell>
                            <TableCell className="text-center text-muted-foreground">
                              vs
                            </TableCell>
                            <TableCell>
                              {match.participant2Score ? parseFloat(match.participant2Score) : "-"}
                            </TableCell>
                            <TableCell>
                              {match.participant2?.name || "TBD"}
                            </TableCell>
                            <TableCell>
                              {match.winner?.name ? (
                                <div className="flex items-center gap-1">
                                  <Trophy className="h-4 w-4 text-yellow-500" />
                                  {match.winner.name}
                                </div>
                              ) : (
                                "-"
                              )}
                            </TableCell>
                            <TableCell>
                              {!match.isComplete && match.participant1Id && match.participant2Id ? (
                                <Select
                                  value={selectedWinners[match.id] || ""}
                                  onValueChange={(value) => handleWinnerChange(match.id, value)}
                                >
                                  <SelectTrigger className="h-8 w-full">
                                    <SelectValue placeholder="Select winner" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value={match.participant1Id}>
                                      {match.participant1?.name}
                                    </SelectItem>
                                    <SelectItem value={match.participant2Id}>
                                      {match.participant2?.name}
                                    </SelectItem>
                                  </SelectContent>
                                </Select>
                              ) : match.isComplete ? (
                                <span className="text-sm text-muted-foreground">Complete</span>
                              ) : (
                                <span className="text-sm text-muted-foreground">Waiting</span>
                              )}
                            </TableCell>
                          </TableRow>

                          {/* Expanded: Games & Odds panel */}
                          {expandedMatches.has(match.id) && (
                            <TableRow className="bg-muted/30">
                              <TableCell colSpan={9} className="p-4">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

                                  {/* Games section */}
                                  <div>
                                    <div className="flex items-center gap-2 mb-3">
                                      <Calendar className="h-4 w-4 text-muted-foreground" />
                                      <span className="text-sm font-semibold">Game Schedule</span>
                                    </div>

                                    {/* Existing games */}
                                    {match.games?.length > 0 ? (
                                      <div className="space-y-2 mb-3">
                                        {match.games.map((game) => (
                                          <div key={game.id} className="flex items-center gap-2 text-sm bg-background rounded p-2 border">
                                            <span className="font-medium w-12 shrink-0">Game {game.gameNumber}</span>
                                            <span className="text-muted-foreground flex-1">
                                              {game.scheduledAt
                                                ? new Date(game.scheduledAt).toLocaleString()
                                                : "No date set"}
                                            </span>
                                            <Badge variant={
                                              game.status === "complete" ? "default"
                                              : game.status === "postponed" ? "destructive"
                                              : "secondary"
                                            } className="text-xs">
                                              {game.status}
                                            </Badge>
                                            {game.status === "complete" && game.winner && (
                                              <span className="text-xs text-muted-foreground">
                                                W: {game.winner.name}
                                              </span>
                                            )}
                                            <Form method="post" className="shrink-0">
                                              <input type="hidden" name="intent" value="delete-game" />
                                              <input type="hidden" name="gameId" value={game.id} />
                                              <button type="submit" className="text-muted-foreground hover:text-destructive">
                                                <Trash2 className="h-3.5 w-3.5" />
                                              </button>
                                            </Form>
                                          </div>
                                        ))}
                                      </div>
                                    ) : (
                                      <p className="text-xs text-muted-foreground mb-3">No games scheduled yet.</p>
                                    )}

                                    {/* Add game form */}
                                    <Form method="post" className="flex gap-2 items-end" onSubmit={(e) => {
                                      const form = e.currentTarget;
                                      // Read from the datetime-local display input (not submitted directly)
                                      const scheduledAtLocal = form.elements.namedItem("scheduledAtLocal") as HTMLInputElement;
                                      // Write the UTC ISO string into the hidden input that IS submitted
                                      const scheduledAtHidden = form.elements.namedItem("scheduledAt") as HTMLInputElement;
                                      if (scheduledAtHidden) {
                                        scheduledAtHidden.value = localDateTimeToUtcIso(scheduledAtLocal?.value) ?? "";
                                      }
                                    }}>
                                      <input type="hidden" name="intent" value="add-game" />
                                      <input type="hidden" name="matchId" value={match.id} />
                                      {/* Hidden field holds the UTC ISO string written by onSubmit */}
                                      <input type="hidden" name="scheduledAt" defaultValue="" />
                                      <div className="flex-1">
                                        <Label className="text-xs">Game #</Label>
                                        <Input
                                          name="gameNumber"
                                          type="number"
                                          min={1}
                                          max={9}
                                          defaultValue={(match.games?.length ?? 0) + 1}
                                          className="h-8 w-20"
                                          required
                                        />
                                      </div>
                                      <div className="flex-1">
                                        <Label className="text-xs">Date &amp; Time ({localTzAbbr})</Label>
                                        <Input
                                          name="scheduledAtLocal"
                                          type="datetime-local"
                                          className="h-8"
                                        />
                                      </div>
                                      <Button type="submit" size="sm" variant="outline" className="h-8">
                                        <Plus className="h-3.5 w-3.5 mr-1" />
                                        Add
                                      </Button>
                                    </Form>
                                  </div>

                                  {/* Odds section */}
                                  <div>
                                    <div className="flex items-center gap-2 mb-3">
                                      <TrendingUp className="h-4 w-4 text-muted-foreground" />
                                      <span className="text-sm font-semibold">Moneyline Odds</span>
                                    </div>

                                    {match.odds?.length > 0 ? (
                                      <div className="space-y-2 mb-3">
                                        {match.odds.map((odd) => (
                                          <div key={odd.id} className="flex items-center gap-2 text-sm bg-background rounded p-2 border">
                                            <span className="flex-1 font-medium">{odd.participant?.name}</span>
                                            <span className={`font-mono ${odd.moneylineOdds > 0 ? "text-emerald-500" : "text-muted-foreground"}`}>
                                              {odd.moneylineOdds > 0 ? "+" : ""}{odd.moneylineOdds}
                                            </span>
                                            <span className="text-xs text-muted-foreground">
                                              ({(parseFloat(odd.impliedProbability) * 100).toFixed(1)}%)
                                            </span>
                                            {odd.oddsSource && (
                                              <span className="text-xs text-muted-foreground">{odd.oddsSource}</span>
                                            )}
                                            <Form method="post" className="shrink-0">
                                              <input type="hidden" name="intent" value="delete-odds" />
                                              <input type="hidden" name="matchId" value={match.id} />
                                              <input type="hidden" name="participantId" value={odd.participantId} />
                                              <button type="submit" className="text-muted-foreground hover:text-destructive">
                                                <Trash2 className="h-3.5 w-3.5" />
                                              </button>
                                            </Form>
                                          </div>
                                        ))}
                                      </div>
                                    ) : (
                                      <p className="text-xs text-muted-foreground mb-3">No odds set.</p>
                                    )}

                                    {/* Set odds forms for each participant */}
                                    {[
                                      { id: match.participant1Id, name: match.participant1?.name },
                                      { id: match.participant2Id, name: match.participant2?.name },
                                    ].filter(p => p.id).map(participant => (
                                      <Form key={participant.id} method="post" className="flex gap-2 items-end mb-2">
                                        <input type="hidden" name="intent" value="upsert-odds" />
                                        <input type="hidden" name="matchId" value={match.id} />
                                        <input type="hidden" name="participantId" value={participant.id ?? ""} />
                                        <div className="flex-1">
                                          <Label className="text-xs">{participant.name ?? "TBD"}</Label>
                                          <Input
                                            name="moneylineOdds"
                                            type="number"
                                            placeholder="-110"
                                            className="h-8"
                                            required
                                          />
                                        </div>
                                        <div className="flex-1">
                                          <Label className="text-xs">Source</Label>
                                          <Input
                                            name="oddsSource"
                                            placeholder="e.g. DraftKings"
                                            className="h-8"
                                          />
                                        </div>
                                        <Button type="submit" size="sm" variant="outline" className="h-8">
                                          Set
                                        </Button>
                                      </Form>
                                    ))}
                                  </div>
                                </div>
                              </TableCell>
                            </TableRow>
                          )}
                          </Fragment>
                        ))}
                      </TableBody>
                    </Table>

                    {/* Batch Submit Winners */}
                    {getPendingWinnersInRound(round).length > 0 && (
                      <Form method="post" className="mt-4">
                        <input type="hidden" name="intent" value="set-round-winners" />
                        <input type="hidden" name="round" value={round} />
                        {getPendingWinnersInRound(round).map(([matchId, winnerId]) => (
                          <input key={matchId} type="hidden" name={`winner-${matchId}`} value={winnerId} />
                        ))}
                        <Button type="submit" className="w-full">
                          Save {getPendingWinnersInRound(round).length} Winner{getPendingWinnersInRound(round).length > 1 ? 's' : ''} for {round}
                        </Button>
                      </Form>
                    )}
                  </CardContent>
                </Card>
              ))}


              {/* Finalize Bracket Button */}
              {allMatchesComplete && !event.isComplete && (
                <Card className="border-emerald-500/30 bg-emerald-500/10">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Trophy className="h-5 w-5 text-emerald-400" />
                      Finalize Bracket
                    </CardTitle>
                    <CardDescription>
                      All matches are complete! Process all rounds and assign final placements.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Form method="post">
                      <input type="hidden" name="intent" value="finalize-bracket" />
                      <div className="space-y-4">
                        <div className="text-sm space-y-2">
                          <p className="font-medium">This will:</p>
                          <ul className="list-disc list-inside space-y-1 text-muted-foreground">
                            <li>Process all playoff rounds in order</li>
                            <li>Assign fantasy placements (1st-8th) based on bracket results</li>
                            <li>Assign 0 points to participants not in the bracket</li>
                            <li>Mark the event as complete</li>
                            <li>Recalculate all team standings</li>
                          </ul>
                        </div>
                        <Button type="submit" className="w-full">
                          Finalize Bracket & Update Standings
                        </Button>
                      </div>
                    </Form>
                  </CardContent>
                </Card>
              )}
            </>
          )}

          {/* Event Complete Badge */}
          {event.isComplete && (
            <Card className="border-electric/30 bg-electric/10">
              <CardContent className="pt-6">
                <div className="flex items-center gap-2 text-electric">
                  <Trophy className="h-5 w-5" />
                  <span className="font-semibold">Event Complete</span>
                  <span className="text-sm text-muted-foreground ml-auto">
                    {event.completedAt && new Date(event.completedAt).toLocaleDateString()}
                  </span>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}