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

import { Form, useLoaderData, useActionData, useNavigation, useFetcher, Link } from 'react-router';
import type { Route } from './+types/admin.sports-seasons.$id.events.$eventId.cs2-setup';

import { findSportsSeasonById } from '~/models/sports-season';
import { getScoringEventById } from '~/models/scoring-event';
import { findParticipantsBySportsSeasonId } from '~/models/season-participant';
import {
  getCs2StageResultsForEvent,
  upsertCs2StageAssignments,
  markCs2StageEliminations,
  clearCs2StageAssignments,
} from '~/models/cs2-major-stage';
import { findSeasonMatchesByScoringEventId } from '~/models/season-match';
import { syncMatches } from '~/services/match-sync';
import { Button } from '~/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '~/components/ui/card';
import { Badge } from '~/components/ui/badge';
import { ArrowLeft, Save, Trash2, CheckCircle2, RefreshCw } from 'lucide-react';
import { useState } from 'react';

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

export async function loader({ params }: Route.LoaderArgs) {
  const sportsSeasonId = params.id;
  const eventId = params.eventId;

  const [sportsSeason, event] = await Promise.all([
    findSportsSeasonById(sportsSeasonId),
    getScoringEventById(eventId),
  ]);

  if (!sportsSeason) throw new Response('Sports season not found', { status: 404 });
  if (!event) throw new Response('Event not found', { status: 404 });

  const [participants, stageResults, seasonMatches] = await Promise.all([
    findParticipantsBySportsSeasonId(sportsSeasonId),
    getCs2StageResultsForEvent(eventId),
    findSeasonMatchesByScoringEventId(eventId),
  ]);

  return { sportsSeason, event, participants, stageResults, seasonMatches };
}

interface ActionData {
  success?: boolean;
  message?: string;
}

export async function action({ request, params }: Route.ActionArgs) {
  const eventId = params.eventId;
  const formData = await request.formData();
  const intent = formData.get('intent') as string;

  if (intent === 'reset') {
    await clearCs2StageAssignments(eventId);
    return { success: true, message: 'Stage assignments cleared.' };
  }

  if (intent === 'assign') {
    const assignments: Array<{ scoringEventId: string; participantId: string; stageEntry: number }> = [];
    for (const [key, value] of formData.entries()) {
      if (key.startsWith('stage_')) {
        const participantId = key.slice('stage_'.length);
        const stageEntry = parseInt(value as string, 10);
        if (!isNaN(stageEntry) && stageEntry >= 1 && stageEntry <= 3) {
          assignments.push({ scoringEventId: eventId, participantId, stageEntry });
        }
      }
    }

    if (assignments.length === 0) {
      return { success: false, message: 'No stage assignments submitted.' };
    }

    await upsertCs2StageAssignments(assignments);
    return { success: true, message: `Saved ${assignments.length} stage assignments.` };
  }

  if (intent === 'mark-eliminations') {
    // Parse elimination data: elim_{participantId} = winsAtElimination (0, 1, or 2)
    const eliminations: Array<{ participantId: string; winsAtElimination: number }> = [];
    for (const [key, value] of formData.entries()) {
      if (key.startsWith('elim_')) {
        const participantId = key.slice('elim_'.length);
        const wins = parseInt(value as string, 10);
        if (!isNaN(wins) && wins >= 0 && wins <= 2) {
          eliminations.push({ participantId, winsAtElimination: wins });
        }
      }
    }

    await markCs2StageEliminations(eventId, eliminations);
    return { success: true, message: `Marked ${eliminations.length} eliminations.` };
  }

  if (intent === 'sync-matches') {
    try {
      const result = await syncMatches(params.id);
      const total = result.swissCreated + result.swissUpdated;
      const summary = `Synced: ${total} Swiss match(es), ${result.playoffUpdated} playoff match(es).`;
      return { success: true, message: summary };
    } catch (err) {
      return { success: false, message: err instanceof Error ? err.message : 'Sync failed.' };
    }
  }

  return { success: false, message: 'Unknown action.' };
}

const STAGE_LABELS: Record<number, { label: string; description: string; maxTeams: number; badgeVariant: 'default' | 'secondary' | 'outline' }> = {
  1: { label: 'Stage 1', description: 'Opening Stage (16 teams, Bo1 Swiss)', maxTeams: 16, badgeVariant: 'outline' },
  2: { label: 'Stage 2', description: 'Elimination Stage (8 Challengers, Bo1/Bo3 Swiss)', maxTeams: 8, badgeVariant: 'secondary' },
  3: { label: 'Stage 3', description: 'Decider Stage (8 Legends, all Bo3 Swiss)', maxTeams: 8, badgeVariant: 'default' },
};

const RECORD_OPTIONS = [
  { value: '2', label: '2-3 (advanced furthest)' },
  { value: '1', label: '1-3' },
  { value: '0', label: '0-3 (earliest exit)' },
];

const MATCH_STATUS_STYLES: Record<string, string> = {
  scheduled: 'text-muted-foreground',
  in_progress: 'text-amber-400 font-medium',
  complete: 'text-emerald-400',
  canceled: 'text-destructive line-through',
  postponed: 'text-muted-foreground italic',
};

const STAGE_NAMES: Record<number, string> = {
  1: 'Opening Stage',
  2: 'Challengers Stage',
  3: 'Legends Stage',
};

export default function AdminCs2Setup() {
  const { sportsSeason, event, participants, stageResults, seasonMatches } = useLoaderData<typeof loader>();
  const actionData = useActionData<ActionData>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  const syncFetcher = useFetcher();
  const isSyncing = syncFetcher.state !== 'idle';

  // Stage assignment state (local, submitted via form)
  const [stageSelections, setStageSelections] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {};
    stageResults.forEach(r => { initial[r.participantId] = r.stageEntry.toString(); });
    return initial;
  });

  // Elimination checkbox state — tracks which teams are checked as eliminated
  const [eliminatedChecked, setEliminatedChecked] = useState<Record<string, boolean>>(() => {
    const initial: Record<string, boolean> = {};
    stageResults.forEach(r => { initial[r.participantId] = r.stageEliminated !== null; });
    return initial;
  });

  // Group participants by stage for display
  const byStage: Record<number, typeof stageResults> = { 1: [], 2: [], 3: [] };
  for (const r of stageResults) {
    byStage[r.stageEntry]?.push(r);
  }

  const stageCounts = Object.fromEntries(
    Object.entries(byStage).map(([k, v]) => [k, v.length])
  );

  return (
    <div className="container mx-auto py-8">
      <div className="mb-6">
        <Link
          to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}`}
          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-4"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to event
        </Link>
        <h1 className="text-3xl font-bold mb-1">CS2 Stage Setup</h1>
        <p className="text-muted-foreground">{event.name} — {sportsSeason.name}</p>
      </div>

      {actionData?.message && (
        <div className={`mb-4 p-3 rounded-md text-sm ${actionData.success ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-destructive/10 text-destructive border border-destructive/30'}`}>
          {actionData.message}
        </div>
      )}

      {/* Stage Assignment */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            Stage Assignments
            {stageResults.length > 0 && (
              <Form method="post">
                <input type="hidden" name="intent" value="reset" />
                <Button type="submit" variant="ghost" size="sm" className="text-destructive">
                  <Trash2 className="h-4 w-4 mr-1" />
                  Reset all
                </Button>
              </Form>
            )}
          </CardTitle>
          <CardDescription>
            Assign each team to their starting stage. Stage 1 = 16 Opening Stage teams,
            Stage 2 = 8 Challengers (skip Stage 1), Stage 3 = 8 Legends (skip Stages 1 and 2).
            Total: 32 teams across all three stages.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form method="post" className="space-y-6">
            <input type="hidden" name="intent" value="assign" />

            {/* Stage summary badges */}
            <div className="flex gap-3 flex-wrap">
              {[1, 2, 3].map(stage => (
                <div key={stage} className="flex items-center gap-2 text-sm">
                  <Badge variant={STAGE_LABELS[stage].badgeVariant}>{STAGE_LABELS[stage].label}</Badge>
                  <span className="text-muted-foreground">
                    {stageCounts[stage] ?? 0}/{STAGE_LABELS[stage].maxTeams} teams
                  </span>
                </div>
              ))}
            </div>

            {/* Teams listed with stage selectors */}
            <div className="space-y-1">
              <div className="grid grid-cols-[1fr_160px] gap-x-3 text-xs font-medium text-muted-foreground px-1 mb-2">
                <span>Team</span>
                <span>Starting Stage</span>
              </div>
              {participants.map(participant => (
                <div key={participant.id} className="grid grid-cols-[1fr_160px] gap-x-3 items-center py-1 border-b border-border/40 last:border-0">
                  <span className="text-sm">{participant.name}</span>
                  <select
                    name={`stage_${participant.id}`}
                    value={stageSelections[participant.id] ?? ''}
                    onChange={e => setStageSelections(prev => ({ ...prev, [participant.id]: e.target.value }))}
                    className="h-8 text-sm rounded-md border border-input bg-background px-2"
                  >
                    <option value="">— not assigned —</option>
                    <option value="1">Stage 1 (Opening)</option>
                    <option value="2">Stage 2 (Elimination)</option>
                    <option value="3">Stage 3 (Decider)</option>
                  </select>
                </div>
              ))}
            </div>

            <Button type="submit" disabled={isSubmitting}>
              <Save className="h-4 w-4 mr-2" />
              {isSubmitting ? 'Saving...' : 'Save Stage Assignments'}
            </Button>
          </Form>
        </CardContent>
      </Card>

      {/* Advancement Tracking (only shown when stage assignments exist) */}
      {stageResults.length > 0 && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Stage Advancement Tracking</CardTitle>
            <CardDescription>
              Record which teams were eliminated and their W-L record at elimination.
              Teams not listed as eliminated are assumed to have advanced (or are still playing).
              Stage 3 W-L records determine QP sub-placements (9–16).
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Form method="post" className="space-y-6">
              <input type="hidden" name="intent" value="mark-eliminations" />

              {[1, 2, 3].map(stage => {
                const teamsInStage = byStage[stage];
                if (teamsInStage.length === 0) return null;

                return (
                  <div key={stage}>
                    <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
                      <Badge variant={STAGE_LABELS[stage].badgeVariant}>{STAGE_LABELS[stage].label}</Badge>
                      {STAGE_LABELS[stage].description}
                    </h3>
                    <div className="space-y-1">
                      {teamsInStage.map(r => {
                        const isEliminated = eliminatedChecked[r.participantId] ?? false;
                        return (
                          <div key={r.participantId} className="grid grid-cols-[1fr_auto_200px] gap-x-3 items-center py-1 border-b border-border/40 last:border-0">
                            <span className="text-sm flex items-center gap-2">
                              {r.participantName}
                              {r.stageEliminated !== null && (
                                <Badge variant="outline" className="text-xs">
                                  eliminated {r.stageEliminatedWins}-3
                                </Badge>
                              )}
                            </span>
                            <label className="flex items-center gap-2 text-sm cursor-pointer">
                              <input
                                type="checkbox"
                                checked={isEliminated}
                                onChange={e =>
                                  setEliminatedChecked(prev => ({
                                    ...prev,
                                    [r.participantId]: e.target.checked,
                                  }))
                                }
                                className="rounded"
                              />
                              Eliminated
                            </label>
                            {isEliminated && (
                              <select
                                name={`elim_${r.participantId}`}
                                defaultValue={r.stageEliminatedWins?.toString() ?? '0'}
                                className="h-8 w-full text-sm rounded-md border border-input bg-background px-2"
                              >
                                {RECORD_OPTIONS.map(opt => (
                                  <option key={opt.value} value={opt.value}>{opt.label}</option>
                                ))}
                              </select>
                            )}
                            {!isEliminated && <div />}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}

              <Button type="submit" disabled={isSubmitting}>
                <CheckCircle2 className="h-4 w-4 mr-2" />
                {isSubmitting ? 'Saving...' : 'Save Eliminations'}
              </Button>
            </Form>
          </CardContent>
        </Card>
      )}

      {/* Swiss Rounds */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            Swiss Rounds
            <syncFetcher.Form method="post">
              <input type="hidden" name="intent" value="sync-matches" />
              <Button
                type="submit"
                variant="outline"
                size="sm"
                disabled={isSyncing || !sportsSeason.externalSeasonId}
                title={!sportsSeason.externalSeasonId ? "Set External Season ID on the sports season to enable sync" : undefined}
              >
                <RefreshCw className={`h-4 w-4 mr-2 ${isSyncing ? 'animate-spin' : ''}`} />
                {isSyncing ? 'Syncing...' : 'Sync from API'}
              </Button>
            </syncFetcher.Form>
          </CardTitle>
          <CardDescription>
            {sportsSeason.externalSeasonId
              ? `Syncing from external ID: ${sportsSeason.externalSeasonId}`
              : 'Set an External Season ID on the sports season to enable API sync.'}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {seasonMatches.length === 0 ? (
            <p className="text-sm text-muted-foreground">No match data yet. Sync from the API or use the <Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}/swiss-matches`} className="underline">manual match entry</Link> page.</p>
          ) : (
            <div className="space-y-6">
              {[1, 2, 3].map(stage => {
                const stageMatches = seasonMatches.filter(m => m.matchStage === stage);
                if (stageMatches.length === 0) return null;

                // Group by round
                const rounds = new Map<number, typeof stageMatches>();
                for (const m of stageMatches) {
                  const r = m.matchRound ?? 0;
                  if (!rounds.has(r)) rounds.set(r, []);
                  rounds.get(r)!.push(m);
                }

                return (
                  <div key={stage}>
                    <h3 className="text-sm font-semibold mb-3">
                      Stage {stage} — {STAGE_NAMES[stage] ?? ''}
                    </h3>
                    <div className="space-y-4">
                      {[...rounds.entries()].sort(([a], [b]) => a - b).map(([round, matches]) => (
                        <div key={round}>
                          <p className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wide">
                            Round {round}
                          </p>
                          <div className="space-y-1">
                            {matches.map(m => (
                              <div key={m.id} className={`flex items-center gap-3 text-sm py-1 ${MATCH_STATUS_STYLES[m.status] ?? ''}`}>
                                <span className="flex-1">{m.participant1?.name ?? '?'}</span>
                                <span className="tabular-nums font-medium">
                                  {m.status === 'complete' || m.status === 'in_progress'
                                    ? `${m.participant1Score ?? '–'} – ${m.participant2Score ?? '–'}`
                                    : 'vs'}
                                </span>
                                <span className="flex-1 text-right">{m.participant2?.name ?? '?'}</span>
                                {m.subGames.length > 0 && (
                                  <span className="text-xs text-muted-foreground ml-2">
                                    [{m.subGames.map(g => `${g.participant1Score}-${g.participant2Score}`).join(', ')}]
                                  </span>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Champions Stage link */}
      {stageResults.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Champions Stage (Playoffs)</CardTitle>
            <CardDescription>
              The 8-team single-elimination bracket. Use the bracket admin to track
              Quarterfinals, Semifinals, and Grand Final results.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Link to={`/admin/sports-seasons/${sportsSeason.id}/events/${event.id}/bracket`}>
              <Button variant="outline">
                Open Bracket Admin →
              </Button>
            </Link>
          </CardContent>
        </Card>
      )}
    </div>
  );
}