brackt/app/routes/leagues/$leagueId.settings.tsx

import { useState, useEffect } from "react";
import { Form, Link, redirect, useNavigation } from "react-router";
import { getAuth } from "@clerk/react-router/server";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { logger } from "~/lib/logger";
import { findLeagueById, updateLeague, deleteLeague } from "~/models/league";
import { sendStandingsUpdateNotification } from "~/services/discord";
import {
  isCommissioner,
  hasCommissionerRecord,
  findCommissionersByLeagueId,
  createCommissioner,
  countCommissionersByLeagueId,
  removeCommissionerByLeagueAndUser,
} from "~/models/commissioner";
import { findCurrentSeasonWithSports, updateSeason, type NewSeason } from "~/models/season";
import { findTeamsBySeasonId, deleteTeam, removeTeamOwner, claimTeam } from "~/models/team";
import { findAllUsers, findUserByClerkId, findUsersByClerkIds, getUserDisplayName, isUserAdminByClerkId } from "~/models/user";
import { unlinkSportFromSeason, linkMultipleSportsToSeason } from "~/models/season-sport";
import { findDraftableSportsSeasons } from "~/models/sports-season";
import { findDraftSlotsBySeasonId, setDraftOrder, randomizeDraftOrder } from "~/models/draft-slot";
import { database } from "~/database/context";
import * as schema from "~/database/schema";
import { deleteAllDraftPicks } from "~/models/draft-pick";
import { clearAllQueuesForSeason } from "~/models/draft-queue";
import { deleteSeasonTimers } from "~/models/draft-timer";
import { logCommissionerAction } from "~/models/audit-log";
import { parseDraftSpeed } from "~/lib/draft-timer";
import type { Route } from "./+types/$leagueId.settings";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Calendar } from "~/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "~/components/ui/popover";
import { cn } from "~/lib/utils";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { Badge } from "~/components/ui/badge";
import { Checkbox } from "~/components/ui/checkbox";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";
import { toast } from "sonner";

export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
  return [{ title: `Settings — ${data?.league?.name ?? "League"} - Brackt` }];
}

export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args);
  const { params } = args;
  const { leagueId } = params;

  if (!userId) {
    throw new Response("Unauthorized", { status: 401 });
  }

  // Fetch league
  const league = await findLeagueById(leagueId);

  if (!league) {
    throw new Response("League not found", { status: 404 });
  }

  // Check if user is authorized (creator or commissioner)
  const userIsCommissioner = await isCommissioner(leagueId, userId);
  const isCreator = league.createdBy === userId;

  if (!isCreator && !userIsCommissioner) {
    throw new Response("Forbidden - You must be a commissioner to access settings", {
      status: 403,
    });
  }

  // Get current season with sports and draftable seasons in parallel
  const [season, draftableSportsSeasons] = await Promise.all([
    findCurrentSeasonWithSports(leagueId),
    findDraftableSportsSeasons(),
  ]);
  const teams = season ? await findTeamsBySeasonId(season.id) : [];
  // Merge draftable seasons with any already-linked non-draftable seasons so that
  // previously-added seasons remain visible and checked in the UI even after being disabled.
  const today = new Date().toISOString().slice(0, 10);
  const draftableIds = new Set(draftableSportsSeasons.map((s) => s.id));
  const linkedButNotDraftable = (season?.seasonSports ?? [])
    .map((s) => s.sportsSeason)
    .filter((ss) => !draftableIds.has(ss.id) && (ss.draftOff < today || ss.draftOn > today));
  const allSportsSeasons = [...draftableSportsSeasons, ...linkedButNotDraftable];
  const draftSlots = season ? await findDraftSlotsBySeasonId(season.id) : [];

  // Count teams with owners
  const teamsWithOwners = teams.filter(team => team.ownerId !== null).length;

  // Check if user is admin
  const isAdmin = await isUserAdminByClerkId(userId);

  // Get all users (only for admins - used in team assignment dropdown)
  const allUsers = isAdmin ? await findAllUsers() : [];

  // Get commissioners for this league with user info
  const commissioners = await findCommissionersByLeagueId(leagueId);

  // Batch-fetch all users needed for commissioner and owner lookups in one query
  const uniqueOwnerIds = [...new Set(teams.map((t) => t.ownerId).filter((id): id is string => id !== null))];
  const commissionerUserIds = commissioners.map((c) => c.userId);
  const allUserIds = [...new Set([...commissionerUserIds, ...uniqueOwnerIds])];
  const userRows = await findUsersByClerkIds(allUserIds);
  const userByClerkId = new Map(userRows.map((u) => [u.clerkId, u]));

  const commissionerUserData = commissioners.map((c) => {
    const user = userByClerkId.get(c.userId);
    return {
      ...c,
      userName: user ? (getUserDisplayName(user) ?? "Unknown User") : "Unknown User",
    };
  });

  const validOwners = uniqueOwnerIds
    .map((ownerId) => {
      const user = userByClerkId.get(ownerId);
      return user ? { clerkId: ownerId, name: getUserDisplayName(user), id: user.id } : null;
    })
    .filter((o): o is NonNullable<typeof o> => o !== null);
  const ownerMap = new Map(validOwners.map((o) => [o.clerkId, o.name]));

  // League members (team owners) - available to all commissioners for adding co-commissioners
  const leagueMembers = validOwners.map((o) => ({
    id: o.id,
    clerkId: o.clerkId,
    name: o.name,
  }));

  return {
    league,
    season,
    teams,
    teamCount: teams.length,
    teamsWithOwners,
    allSportsSeasons: allSportsSeasons as Array<typeof allSportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }>,
    draftSlots,
    isAdmin,
    allUsers,
    leagueMembers,
    ownerMap: Object.fromEntries(ownerMap),
    commissioners: commissionerUserData,
    currentUserId: userId,
  };
}

export async function action(args: Route.ActionArgs) {
  const { userId } = await getAuth(args);
  const { params, request } = args;
  const { leagueId } = params;

  if (!userId) {
    throw new Response("Unauthorized", { status: 401 });
  }

  // Verify authorization
  const league = await findLeagueById(leagueId);
  if (!league) {
    throw new Response("League not found", { status: 404 });
  }

  const userIsCommissioner = await isCommissioner(leagueId, userId);
  const isCreator = league.createdBy === userId;

  if (!isCreator && !userIsCommissioner) {
    throw new Response("Forbidden", { status: 403 });
  }

  const formData = await request.formData();
  const intent = formData.get("intent");

  // For league-level settings (name, public draft board), save immediately
  // before checking season, so they work even if no season exists
  if (intent === "update") {
    const name = formData.get("name");
    const isPublicDraftBoard = formData.get("isPublicDraftBoard") === "on";
    const discordWebhookUrl = formData.get("discordWebhookUrl");

    if (typeof name !== "string" || !name.trim()) {
      return { error: "League name is required" };
    }
    if (name.trim().length < 3 || name.trim().length > 50) {
      return { error: "League name must be between 3 and 50 characters" };
    }

    const webhookUrl =
      typeof discordWebhookUrl === "string" ? discordWebhookUrl.trim() : "";
    if (webhookUrl && !webhookUrl.startsWith("https://discord.com/api/webhooks/")) {
      return { error: "Discord webhook URL must start with https://discord.com/api/webhooks/" };
    }

    try {
      const changedFields: string[] = [];
      if (name.trim() !== league.name) changedFields.push("name");
      if (isPublicDraftBoard !== league.isPublicDraftBoard) changedFields.push("isPublicDraftBoard");
      if ((webhookUrl || null) !== league.discordWebhookUrl) changedFields.push("discordWebhookUrl");

      await updateLeague(leagueId, {
        name: name.trim(),
        isPublicDraftBoard,
        discordWebhookUrl: webhookUrl || null,
      });

      if (changedFields.length > 0) {
        const currentSeason = await findCurrentSeasonWithSports(leagueId);
        if (currentSeason) {
          await logCommissionerAction({
            seasonId: currentSeason.id,
            leagueId,
            actorClerkId: userId,
            action: "league_settings_changed",
            details: {
              changedFields,
              previousValues: {
                name: league.name,
                isPublicDraftBoard: league.isPublicDraftBoard,
                discordWebhookUrl: league.discordWebhookUrl,
              },
              newValues: {
                name: name.trim(),
                isPublicDraftBoard,
                discordWebhookUrl: webhookUrl || null,
              },
            },
          });
        }
      }
    } catch (error) {
      logger.error("Error updating league:", error);
      return { error: "Failed to update league. Please try again." };
    }
  }

  if (intent === "test-discord-webhook") {
    const webhookUrl = formData.get("webhookUrl");
    if (typeof webhookUrl !== "string" || !webhookUrl.startsWith("https://discord.com/api/webhooks/")) {
      return { error: "Invalid Discord webhook URL" };
    }
    try {
      const testSeason = await findCurrentSeasonWithSports(leagueId);
      const seasonName = testSeason ? `${league.name} ${testSeason.year}` : league.name;
      await sendStandingsUpdateNotification({
        webhookUrl,
        seasonName,
        standings: [
          { teamId: "1", teamName: "Team Alpha", totalPoints: 150, rank: 1 },
          { teamId: "2", teamName: "Team Beta", totalPoints: 125, rank: 2 },
          { teamId: "3", teamName: "Team Gamma", totalPoints: 100, rank: 3 },
        ],
        previousStandings: new Map([
          ["1", 125],
          ["2", 125],
          ["3", 100],
        ]),
        previousRanks: new Map([
          ["1", 2],
          ["2", 1],
          ["3", 3],
        ]),
        eventName: "Test Notification",
        scoredMatches: [
          { winnerName: "Team Alpha", loserName: "Team Beta", winnerUsername: "manager1", loserUsername: "manager2" },
        ],
      });
      return { testSuccess: true };
    } catch (err) {
      logger.error("Discord test webhook failed:", err);
      return { error: "Failed to send test notification. Check your webhook URL." };
    }
  }

  // Get current season to check status
  const season = await findCurrentSeasonWithSports(leagueId);
  if (!season) {
    if (intent === "update") {
      return redirect(`/leagues/${leagueId}?updated=true`);
    }
    return { error: "No active season found" };
  }

  if (intent === "update-sports") {
    if (season.status !== "pre_draft") {
      return { error: "Cannot modify sports after draft has started" };
    }

    const selectedSports = formData.getAll("sportsSeasons");
    const currentSportIds = new Set(
      season.seasonSports?.map((s) => s.sportsSeason.id) || []
    );
    const newSportIds = new Set(selectedSports as string[]);

    // Remove sports that are no longer selected
    for (const sportId of currentSportIds) {
      if (!newSportIds.has(sportId)) {
        await unlinkSportFromSeason(season.id, sportId);
      }
    }

    // Add newly selected sports
    const sportsToAdd = [];
    for (const sportId of newSportIds) {
      if (!currentSportIds.has(sportId)) {
        sportsToAdd.push({
          seasonId: season.id,
          sportsSeasonId: sportId as string,
        });
      }
    }

    if (sportsToAdd.length > 0) {
      await linkMultipleSportsToSeason(sportsToAdd);
    }

    return { success: true };
  }

  if (intent === "set-draft-order") {
    if (season.status !== "pre_draft") {
      return { error: "Cannot modify draft order after draft has started" };
    }

    const teams = await findTeamsBySeasonId(season.id);
    const teamIds = formData.getAll("teamOrder") as string[];

    // Validate that all teams are included
    if (teamIds.length !== teams.length) {
      return { error: "All teams must be included in the draft order" };
    }

    // Validate that all team IDs are valid
    const validTeamIds = new Set(teams.map(t => t.id));
    for (const teamId of teamIds) {
      if (!validTeamIds.has(teamId)) {
        return { error: "Invalid team ID in draft order" };
      }
    }

    await setDraftOrder(season.id, teamIds);

    await logCommissionerAction({
      seasonId: season.id,
      leagueId,
      actorClerkId: userId,
      action: "draft_order_set",
      affectedTeamIds: teamIds,
      details: {
        order: teamIds.map((id, i) => ({
          teamId: id,
          teamName: teams.find((t) => t.id === id)?.name ?? id,
          position: i + 1,
        })),
      },
    });

    return { success: true, message: "Draft order updated successfully" };
  }

  if (intent === "randomize-draft-order") {
    if (season.status !== "pre_draft") {
      return { error: "Cannot modify draft order after draft has started" };
    }

    const teams = await findTeamsBySeasonId(season.id);
    const teamIds = teams.map(t => t.id);

    await randomizeDraftOrder(season.id, teamIds);

    // Fetch the new order that was just written so we can log it accurately
    const newSlots = await findDraftSlotsBySeasonId(season.id);
    const sortedSlots = newSlots.toSorted((a, b) => a.draftOrder - b.draftOrder);

    await logCommissionerAction({
      seasonId: season.id,
      leagueId,
      actorClerkId: userId,
      action: "draft_order_randomized",
      affectedTeamIds: sortedSlots.map((s) => s.teamId),
      details: {
        order: sortedSlots.map((s) => ({
          teamId: s.teamId,
          teamName: teams.find((t) => t.id === s.teamId)?.name ?? s.teamId,
          position: s.draftOrder,
        })),
      },
    });

    return { success: true, message: "Draft order randomized successfully" };
  }

  if (intent === "remove-team-owner") {
    const teamId = formData.get("teamId") as string;
    
    if (!teamId) {
      return { error: "Team ID is required" };
    }

    try {
      await removeTeamOwner(teamId);
      return { success: true, message: "Owner removed successfully" };
    } catch (error) {
      logger.error("Error removing team owner:", error);
      return { error: "Failed to remove owner. Please try again." };
    }
  }

  if (intent === "assign-team-owner") {
    const teamId = formData.get("teamId") as string;
    const userClerkId = formData.get("userClerkId") as string;
    
    if (!teamId || !userClerkId) {
      return { error: "Team ID and User ID are required" };
    }

    // Check if user is admin (only admins can assign owners)
    const isAdmin = await isUserAdminByClerkId(userId);
    if (!isAdmin) {
      return { error: "Only admins can assign team owners" };
    }

    // Look up user before assigning to fail fast and get their name
    const assignedUser = await findUserByClerkId(userClerkId);
    if (!assignedUser) {
      return { error: "User not found. Please try again." };
    }

    // Check if user is already assigned to a team in this season
    const teams = await findTeamsBySeasonId(season.id);
    const userAlreadyHasTeam = teams.some(team => team.ownerId === userClerkId);

    if (userAlreadyHasTeam) {
      return { error: "This user is already assigned to a team in this league" };
    }

    // Check if the target team already has an owner
    const targetTeam = teams.find(team => team.id === teamId);
    if (targetTeam?.ownerId) {
      return { error: "This team already has an owner. Remove the current owner first." };
    }

    try {
      const teamName = `Team ${getUserDisplayName(assignedUser) ?? "Member"}`;
      await claimTeam(teamId, userClerkId, teamName);

      return { success: true, message: "Owner assigned successfully" };
    } catch (error) {
      logger.error("Error assigning team owner:", error);
      return { error: "Failed to assign owner. Please try again." };
    }
  }

  if (intent === "reset-draft") {
    // Check if user is admin (only admins can reset draft)
    const isAdmin = await isUserAdminByClerkId(userId);
    if (!isAdmin) {
      return { error: "Only admins can reset the draft" };
    }

    try {
      // Delete all draft picks
      await deleteAllDraftPicks(season.id);

      // Clear all draft queues
      await clearAllQueuesForSeason(season.id);

      // Delete all draft timers
      await deleteSeasonTimers(season.id);

      const previousPickNumber = season.currentPickNumber;

      // Set season status back to pre_draft and reset draft state (keeps draft order intact)
      await updateSeason(season.id, {
        status: "pre_draft",
        currentPickNumber: null,
        draftStartedAt: null,
        draftPaused: false,
      });

      await logCommissionerAction({
        seasonId: season.id,
        leagueId,
        actorClerkId: userId,
        action: "draft_reset",
        details: { previousPickNumber },
      });

      return { success: true, message: "Draft has been reset successfully. Draft order preserved." };
    } catch (error) {
      logger.error("Error resetting draft:", error);
      return { error: "Failed to reset draft. Please try again." };
    }
  }

  if (intent === "delete") {
    // Delete the league
    await deleteLeague(leagueId);
    
    // Redirect to home with success message
    return redirect("/?deleted=true");
  }

  if (intent === "update") {
    const teamCount = formData.get("teamCount");
    const draftDateTime = formData.get("draftDateTime");
    const draftRounds = formData.get("draftRounds");
    const draftSpeed = formData.get("draftSpeed");
    const draftTimerMode = formData.get("draftTimerMode") as "chess_clock" | "standard" | null;

    // Map draft speed to time values
    const { draftInitialTime, draftIncrementTime } = parseDraftSpeed(
      draftSpeed as string | null,
      draftTimerMode ?? "chess_clock"
    );

    // League-level fields (name, isPublicDraftBoard) are already saved above.
    // Now handle season-specific updates.
    try {
      // Update season settings
      const seasonUpdates: Partial<NewSeason> = {};

      // Handle draft rounds
      if (typeof draftRounds === "string") {
        const draftRoundsNum = parseInt(draftRounds, 10);
        if (!isNaN(draftRoundsNum)) {
          const sportsCount = season.seasonSports?.length || 0;
          if (draftRoundsNum < sportsCount) {
            return { error: `Draft rounds must be at least ${sportsCount} (number of sports selected)` };
          }
          if (draftRoundsNum < 1 || draftRoundsNum > 50) {
            return { error: "Draft rounds must be between 1 and 50" };
          }
          seasonUpdates.draftRounds = draftRoundsNum;
        }
      }

      // Handle draft date/time
      if (typeof draftDateTime === "string") {
        seasonUpdates.draftDateTime = draftDateTime ? new Date(draftDateTime) : null;
      }

      // Set draft times from speed preset (only if draftSpeed was submitted;
      // the select is disabled during an active draft so it won't be present)
      if (draftSpeed !== null) {
        seasonUpdates.draftInitialTime = draftInitialTime;
        seasonUpdates.draftIncrementTime = draftIncrementTime;
      }

      // Timer mode (only if submitted; disabled during active draft)
      if (draftTimerMode !== null) {
        seasonUpdates.draftTimerMode = draftTimerMode;
      }

      // Handle scoring rules (only if in pre_draft status)
      if (season.status === "pre_draft") {
        const scoringFields = [
          "pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
          "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"
        ];

        for (const field of scoringFields) {
          const value = formData.get(field);
          if (typeof value === "string") {
            const points = parseInt(value, 10);
            if (!isNaN(points)) {
              if (points < 0 || points > 1000) {
                return { error: `${field} must be between 0 and 1000 points` };
              }
              (seasonUpdates as Record<string, unknown>)[field] = points;
            }
          }
        }
      }

      // Update season if there are changes
      if (Object.keys(seasonUpdates).length > 0) {
        await updateSeason(season.id, seasonUpdates);

        const scoringFields = ["pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
          "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"];
        const draftFields = Object.keys(seasonUpdates).filter((k) => !scoringFields.includes(k));
        const scoringChangedFields = Object.keys(seasonUpdates).filter((k) => scoringFields.includes(k));

        if (draftFields.length > 0) {
          await logCommissionerAction({
            seasonId: season.id,
            leagueId,
            actorClerkId: userId,
            action: "draft_settings_changed",
            details: {
              changedFields: draftFields,
              newValues: Object.fromEntries(draftFields.map((k) => [k, (seasonUpdates as Record<string, unknown>)[k]])),
            },
          });
        }

        if (scoringChangedFields.length > 0) {
          await logCommissionerAction({
            seasonId: season.id,
            leagueId,
            actorClerkId: userId,
            action: "scoring_rules_changed",
            details: {
              changedFields: scoringChangedFields,
              newValues: Object.fromEntries(scoringChangedFields.map((k) => [k, (seasonUpdates as Record<string, unknown>)[k]])),
            },
          });
        }
      }

      // Handle team count changes if provided
      if (typeof teamCount === "string") {
        const newTeamCount = parseInt(teamCount, 10);
        
        if (!isNaN(newTeamCount)) {
          const teams = await findTeamsBySeasonId(season.id);
          const currentTeamCount = teams.length;
          const teamsWithOwners = teams.filter(t => t.ownerId !== null).length;

          // Validate team count
          if (newTeamCount < 6 || newTeamCount > 16) {
            return { error: "Number of teams must be between 6 and 16" };
          }

          if (newTeamCount < teamsWithOwners) {
            return { error: `Cannot reduce team count below ${teamsWithOwners} (number of teams with owners)` };
          }

          // Add or remove teams as needed
          if (newTeamCount > currentTeamCount) {
            const teamsToAdd = Array.from(
              { length: newTeamCount - currentTeamCount },
              (_, i) => ({
                seasonId: season.id,
                name: `Team ${currentTeamCount + i + 1}`,
                ownerId: null as null,
              })
            );

            // Fetch existing slots before the transaction to determine append position
            const existingSlots = await findDraftSlotsBySeasonId(season.id);
            const maxOrder = existingSlots.reduce((max, s) => Math.max(max, s.draftOrder), 0);

            // Create teams and their draft slots atomically
            const db = database();
            await db.transaction(async (tx) => {
              const newTeams = await tx
                .insert(schema.teams)
                .values(teamsToAdd)
                .returning();
              await tx.insert(schema.draftSlots).values(
                newTeams.map((team, i) => ({
                  seasonId: season.id,
                  teamId: team.id,
                  draftOrder: maxOrder + i + 1,
                }))
              );
            });
          } else if (newTeamCount < currentTeamCount) {
            // Remove teams without owners (from the end)
            const teamsToRemove = teams
              .filter(t => t.ownerId === null)
              .slice(-(currentTeamCount - newTeamCount));
            
            for (const team of teamsToRemove) {
              await deleteTeam(team.id);
            }
          }
        }
      }

      return redirect(`/leagues/${leagueId}?updated=true`);
    } catch (error) {
      logger.error("Error updating season settings:", error);
      return { error: "Failed to update season settings. Please try again." };
    }
  }

  if (intent === "add-commissioner") {
    const userClerkId = formData.get("userClerkId") as string;

    if (!userClerkId) {
      return { error: "User is required" };
    }

    // Check if user already has a commissioner record (don't use isCommissioner — it
    // returns true for site admins, causing a false "already a commissioner" error)
    const alreadyCommissioner = await hasCommissionerRecord(leagueId, userClerkId);
    if (alreadyCommissioner) {
      return { error: "This user is already a commissioner" };
    }

    try {
      await createCommissioner({ leagueId, userId: userClerkId });
      return { success: true, message: "Commissioner added successfully" };
    } catch (error) {
      logger.error("Error adding commissioner:", error);
      return { error: "Failed to add commissioner. Please try again." };
    }
  }

  if (intent === "remove-commissioner") {
    const commissionerUserId = formData.get("commissionerUserId") as string;

    if (!commissionerUserId) {
      return { error: "User is required" };
    }

    // Prevent self-removal
    if (commissionerUserId === userId) {
      return { error: "You cannot remove yourself as a commissioner" };
    }

    // Prevent removing the last commissioner
    const count = await countCommissionersByLeagueId(leagueId);
    if (count <= 1) {
      return { error: "Cannot remove the last commissioner" };
    }

    try {
      await removeCommissionerByLeagueAndUser(leagueId, commissionerUserId);
      return { success: true, message: "Commissioner removed successfully" };
    } catch (error) {
      logger.error("Error removing commissioner:", error);
      return { error: "Failed to remove commissioner. Please try again." };
    }
  }

  return { error: "Invalid action" };
}

export default function LeagueSettings({ loaderData, actionData }: Route.ComponentProps) {
  const { league, season, teams, teamCount, teamsWithOwners, allSportsSeasons, draftSlots, isAdmin, allUsers, leagueMembers, ownerMap, commissioners, currentUserId } = loaderData;
  const navigation = useNavigation();
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">(season?.draftTimerMode ?? "chess_clock");
  const [selectedSports, setSelectedSports] = useState<Set<string>>(
    new Set(season?.seasonSports?.map((s) => s.sportsSeason.id) || [])
  );
  const [draftOrderTeams, setDraftOrderTeams] = useState<string[]>(
    draftSlots.length > 0
      ? draftSlots.map((slot) => slot.teamId)
      : teams.map((team) => team.id)
  );
  const [draftRounds, setDraftRounds] = useState<number>(season?.draftRounds || 20);
  const [draftDate, setDraftDate] = useState<Date | undefined>(
    season?.draftDateTime ? new Date(season.draftDateTime) : undefined
  );
  const [draftTime, setDraftTime] = useState<string>(
    season?.draftDateTime 
      ? format(new Date(season.draftDateTime), "HH:mm")
      : ""
  );

  // Update draft order when loader data changes (after randomization)
  useEffect(() => {
    const newOrder = draftSlots.length > 0
      ? draftSlots.map((slot) => slot.teamId)
      : teams.map((team) => team.id);
    setDraftOrderTeams(newOrder);
  }, [draftSlots, teams]);

  const canEditSports = season && season.status === "pre_draft";
  const canEditTeamCount = season && season.status === "pre_draft";
  const canEditDraftOrder = season && season.status === "pre_draft";
  const canEditDraftRounds = season && season.status === "pre_draft";
  const minTeamCount = Math.max(6, teamsWithOwners);

  // Calculate flex spots and minimum rounds
  const sportsCount = selectedSports.size;
  const minRounds = sportsCount;
  const recommendedRounds = Math.ceil(sportsCount * 1.25);
  const flexSpots = Math.max(0, draftRounds - sportsCount);

  const handleSportToggle = (sportId: string) => {
    const newSelected = new Set(selectedSports);
    if (newSelected.has(sportId)) {
      newSelected.delete(sportId);
    } else {
      newSelected.add(sportId);
    }
    setSelectedSports(newSelected);
  };

  const handleDelete = () => {
    setIsDeleteDialogOpen(false);
    // The form submission will handle the actual deletion
  };

  const moveDraftSlot = (fromIndex: number, toIndex: number) => {
    const newOrder = [...draftOrderTeams];
    const [movedTeam] = newOrder.splice(fromIndex, 1);
    newOrder.splice(toIndex, 0, movedTeam);
    setDraftOrderTeams(newOrder);
  };

  const getTeamById = (teamId: string) => {
    return teams.find((t) => t.id === teamId);
  };

  const [copied, setCopied] = useState(false);
  const handleCopyInviteLink = async () => {
    if (!season?.inviteCode) return;
    const inviteUrl = `${window.location.origin}/i/${season.inviteCode}`;
    try {
      await navigator.clipboard.writeText(inviteUrl);
      setCopied(true);
      toast.success("Invite link copied to clipboard!");
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error("Failed to copy invite link");
    }
  };

  return (
    <div className="container max-w-2xl mx-auto py-8 px-4">
      <div className="mb-8">
        <div className="flex items-center justify-between mb-2">
          <h1 className="text-4xl font-bold">League Settings</h1>
          <Button variant="outline" asChild>
            <Link to={`/leagues/${league.id}`}>Back to League</Link>
          </Button>
        </div>
        <p className="text-muted-foreground">{league.name}</p>
      </div>

      {season?.inviteCode && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Invite Link</CardTitle>
            <CardDescription>
              Share this link to invite people to join your league
              {teamCount - teamsWithOwners > 0 && ` (${teamCount - teamsWithOwners} spot${teamCount - teamsWithOwners !== 1 ? "s" : ""} available)`}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center gap-2">
              <input
                type="text"
                readOnly
                value={`${typeof window !== "undefined" ? window.location.origin : ""}/i/${season.inviteCode}`}
                className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted"
                onClick={(e) => e.currentTarget.select()}
              />
              <Button
                onClick={handleCopyInviteLink}
                variant={copied ? "default" : "outline"}
                size="sm"
              >
                {copied ? "Copied!" : "Copy"}
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              Anyone with this link can join your league
            </p>
          </CardContent>
        </Card>
      )}

      <Form method="post" className="space-y-6">
        <input type="hidden" name="intent" value="update" />

        {/* General Settings */}
        <Card>
          <CardHeader>
            <CardTitle>General Settings</CardTitle>
            <CardDescription>
              Update your league's basic information
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">League Name</Label>
              <Input
                id="name"
                name="name"
                type="text"
                defaultValue={league.name}
                placeholder="Enter league name"
                required
                minLength={3}
                maxLength={50}
              />
            </div>

            <div className="flex items-center space-x-2">
              <input
                type="checkbox"
                id="isPublicDraftBoard"
                name="isPublicDraftBoard"
                defaultChecked={league.isPublicDraftBoard}
                className="h-4 w-4 rounded border-border"
              />
              <Label htmlFor="isPublicDraftBoard" className="font-normal cursor-pointer">
                Make draft board publicly accessible (no login required)
              </Label>
            </div>

            <div className="space-y-2">
              <Label htmlFor="teamCount">Number of Teams</Label>
              <Select 
                name="teamCount" 
                defaultValue={teamCount.toString()} 
                disabled={!canEditTeamCount}
              >
                <SelectTrigger id="teamCount">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Array.from({ length: 11 }, (_, i) => i + 6).map((num) => (
                    <SelectItem 
                      key={num} 
                      value={num.toString()}
                      disabled={num < minTeamCount}
                    >
                      {num} Teams
                      {num < minTeamCount && ` (${teamsWithOwners} teams have owners)`}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-sm text-muted-foreground">
                {canEditTeamCount 
                  ? `Can be changed before draft starts (minimum ${minTeamCount} based on registered teams)`
                  : "Team count cannot be changed after draft has started"}
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Notifications */}
        <Card>
          <CardHeader>
            <CardTitle>Notifications</CardTitle>
            <CardDescription>
              Get Discord alerts when standings change after scoring events
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="discordWebhookUrl">Discord Webhook URL</Label>
              <Input
                id="discordWebhookUrl"
                name="discordWebhookUrl"
                type="url"
                defaultValue={league.discordWebhookUrl ?? ""}
                placeholder="https://discord.com/api/webhooks/..."
              />
              <p className="text-sm text-muted-foreground">
                Create a webhook in your Discord server under Server Settings → Integrations → Webhooks.
              </p>
            </div>
            {league.discordWebhookUrl && (
              <Form method="post" className="pt-2">
                <input type="hidden" name="intent" value="test-discord-webhook" />
                <input type="hidden" name="webhookUrl" value={league.discordWebhookUrl} />
                <Button type="submit" variant="outline" size="sm">
                  Send Test Notification
                </Button>
              </Form>
            )}
            {actionData && "testSuccess" in actionData && actionData.testSuccess && (
              <p className="text-sm text-emerald-600">Test notification sent to Discord!</p>
            )}
          </CardContent>
        </Card>

        {/* Draft Rounds */}
        <Card>
          <CardHeader>
            <CardTitle>Draft Rounds</CardTitle>
            <CardDescription>
              {canEditDraftRounds
                ? "Set the number of draft rounds for your league"
                : "Draft rounds cannot be modified after the draft has started"}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="draftRounds">Number of Draft Rounds</Label>
              <Select 
                name="draftRounds" 
                value={draftRounds.toString()} 
                onValueChange={(value) => setDraftRounds(parseInt(value))}
                disabled={!canEditDraftRounds}
                required
              >
                <SelectTrigger id="draftRounds">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Array.from({ length: 50 }, (_, i) => i + 1)
                    .filter(num => num >= minRounds)
                    .map((num) => (
                      <SelectItem 
                        key={num} 
                        value={num.toString()}
                      >
                        {num} Round{num !== 1 ? 's' : ''}
                        {num === recommendedRounds && ' (recommended)'}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">
                  Minimum: {minRounds} (number of sports selected)
                  {recommendedRounds > minRounds && ` • Recommended: ${recommendedRounds}`}
                </p>
                {sportsCount > 0 && draftRounds < sportsCount && (
                  <p className="text-sm font-medium text-destructive">
                    ⚠️ You need at least {sportsCount} rounds for the {sportsCount} sports selected
                  </p>
                )}
                {sportsCount > 0 && draftRounds >= sportsCount && (
                  <p className="text-sm font-medium text-primary">
                    Flex Spots: {flexSpots}
                  </p>
                )}
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="draftDate">Draft Date & Time</Label>
              <div className="grid gap-2 sm:grid-cols-2">
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant={"outline"}
                      className={cn(
                        "justify-start text-left font-normal",
                        !draftDate && "text-muted-foreground"
                      )}
                      disabled={!canEditDraftRounds}
                    >
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {draftDate ? format(draftDate, "PPP") : <span>Pick a date</span>}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <Calendar
                      mode="single"
                      selected={draftDate}
                      onSelect={setDraftDate}
                      disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
                    />
                  </PopoverContent>
                </Popover>
                <Input
                  type="time"
                  value={draftTime}
                  onChange={(e) => setDraftTime(e.target.value)}
                  placeholder="Select time"
                  disabled={!canEditDraftRounds}
                />
              </div>
              {draftDate && draftTime && (
                <input 
                  type="hidden" 
                  name="draftDateTime" 
                  value={new Date(`${format(draftDate, "yyyy-MM-dd")}T${draftTime}`).toISOString()} 
                />
              )}
              {!draftDate && !draftTime && (
                <input type="hidden" name="draftDateTime" value="" />
              )}
              <p className="text-sm text-muted-foreground">
                {canEditDraftRounds 
                  ? "You must set a draft date and time before starting the draft"
                  : "Draft date cannot be changed after draft has started"}
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="draftTimerMode">Timer Mode</Label>
              <select
                id="draftTimerMode"
                name="draftTimerMode"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                value={timerMode}
                onChange={(e) => setTimerMode(e.target.value as "chess_clock" | "standard")}
                disabled={!canEditDraftRounds}
                required
              >
                <option value="chess_clock">Chess Clock (accumulating bank)</option>
                <option value="standard">Standard (per-pick countdown)</option>
              </select>
              <p className="text-sm text-muted-foreground">
                Chess Clock: unused time carries over between picks. Standard: timer resets each pick.
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="draftSpeed">Draft Speed</Label>
              <select
                id="draftSpeed"
                name="draftSpeed"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                defaultValue={
                  timerMode === "standard"
                    ? (season?.draftIncrementTime?.toString() ?? "90")
                    : season?.draftInitialTime === 60 && season?.draftIncrementTime === 10
                    ? "fast"
                    : season?.draftInitialTime === 120 && season?.draftIncrementTime === 15
                    ? "standard"
                    : season?.draftInitialTime === 28800 && season?.draftIncrementTime === 3600
                    ? "slow"
                    : season?.draftInitialTime === 43200 && season?.draftIncrementTime === 3600
                    ? "very-slow"
                    : "standard"
                }
                key={timerMode}
                disabled={!canEditDraftRounds}
                required
              >
                {timerMode === "standard" ? (
                  <>
                    <option value="15">15 seconds</option>
                    <option value="30">30 seconds</option>
                    <option value="60">1 minute</option>
                    <option value="90">90 seconds (default)</option>
                    <option value="120">2 minutes</option>
                    <option value="900">15 minutes</option>
                    <option value="3600">1 hour</option>
                    <option value="7200">2 hours</option>
                    <option value="14400">4 hours</option>
                    <option value="28800">8 hours</option>
                    <option value="43200">12 hours</option>
                  </>
                ) : (
                  <>
                    <option value="fast">Fast (1 min + 10 sec)</option>
                    <option value="standard">Standard (2 min + 15 sec)</option>
                    <option value="slow">Slow (8 hours + 1 hour)</option>
                    <option value="very-slow">Very Slow (12 hours + 1 hour)</option>
                  </>
                )}
              </select>
              <p className="text-sm text-muted-foreground">
                {timerMode === "standard"
                  ? "Time per pick — resets to this value after each selection"
                  : "Initial time bank + increment added after each pick"}
              </p>

            </div>
          </CardContent>
        </Card>

        {/* Scoring Rules */}
        <ScoringRulesEditor
          scoringRules={season ? {
            pointsFor1st: season.pointsFor1st,
            pointsFor2nd: season.pointsFor2nd,
            pointsFor3rd: season.pointsFor3rd,
            pointsFor4th: season.pointsFor4th,
            pointsFor5th: season.pointsFor5th,
            pointsFor6th: season.pointsFor6th,
            pointsFor7th: season.pointsFor7th,
            pointsFor8th: season.pointsFor8th,
          } : undefined}
          disabled={!season || season.status !== "pre_draft"}
        />

        {/* Sports Seasons */}
        <Card>
          <CardHeader>
            <CardTitle>Sports Seasons</CardTitle>
            <CardDescription>
              {canEditSports
                ? "Select the sports seasons that teams can draft from"
                : "Sports cannot be modified after the draft has started"}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
              
            <div className="space-y-3">
              <div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
                <p className="text-sm text-muted-foreground">
                  <strong>Recommendation:</strong> Select 16-20 sports seasons for optimal league balance and variety.
                </p>
              </div>
              
              <div className="space-y-2">
                <Label className="text-sm font-medium">
                  Sports Seasons ({selectedSports.size} selected)
                </Label>
                <div className="max-h-96 overflow-y-auto border rounded-md p-3 space-y-2">
                  {allSportsSeasons.length > 0 ? (
                    allSportsSeasons.map((ss) => (
                      <div key={ss.id} className="flex items-center space-x-2">
                        <Checkbox
                          id={ss.id}
                          name="sportsSeasons"
                          value={ss.id}
                          checked={selectedSports.has(ss.id)}
                          onCheckedChange={() => handleSportToggle(ss.id)}
                          disabled={!canEditSports}
                        />
                        <Label
                          htmlFor={ss.id}
                          className={`font-normal flex-1 ${canEditSports ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'}`}
                        >
                          <span className="font-medium">{ss.sport.name}</span> - {ss.name} ({ss.year})
                          <Badge variant="outline" className="ml-2 text-xs">
                            {ss.scoringType.replace("_", " ")}
                          </Badge>
                        </Label>
                      </div>
                    ))
                  ) : (
                    <p className="text-sm text-muted-foreground">
                      No sports seasons available
                    </p>
                  )}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Save Button */}
        {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">
            Settings updated successfully!
          </div>
        )}

        <Button type="submit" size="lg" className="w-full">
          Save All Settings
        </Button>
      </Form>

      <div className="space-y-6">
        {/* Draft Order Management */}
        <Card id="draft-order">
          <CardHeader>
            <CardTitle>Draft Order</CardTitle>
            <CardDescription>
              {canEditDraftOrder
                ? "Set the draft order for your league. Drag teams to reorder or randomize."
                : "Draft order cannot be changed after the draft has started"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {draftSlots.length === 0 && canEditDraftOrder && (
                <div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
                  <p className="text-sm text-muted-foreground">
                    <strong>Note:</strong> Draft order has not been set yet. Use the form below to set the order manually or click "Randomize" to generate a random order.
                  </p>
                </div>
              )}

              <Form method="post" className="space-y-4">
                <input type="hidden" name="intent" value="set-draft-order" />
                
                <div className="space-y-2">
                  <div className="border rounded-md divide-y">
                    {draftOrderTeams.map((teamId, index) => {
                      const team = getTeamById(teamId);
                      if (!team) return null;
                      
                      return (
                        <div key={teamId} className="flex items-center gap-3 p-3">
                          <input type="hidden" name="teamOrder" value={teamId} />
                          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground font-bold text-sm">
                            {index + 1}
                          </div>
                          <div className="flex-1">
                            <p className="font-medium">{team.name}</p>
                            {team.ownerId && (
                              <p className="text-xs text-muted-foreground">{ownerMap[team.ownerId] ?? "Unknown"}</p>
                            )}
                          </div>
                          {canEditDraftOrder && (
                            <div className="flex gap-1">
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => moveDraftSlot(index, Math.max(0, index - 1))}
                                disabled={index === 0}
                              >
                                ↑
                              </Button>
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => moveDraftSlot(index, Math.min(draftOrderTeams.length - 1, index + 1))}
                                disabled={index === draftOrderTeams.length - 1}
                              >
                                ↓
                              </Button>
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>

                {canEditDraftOrder && (
                  <div className="flex gap-2">
                    <Button type="submit" className="flex-1">
                      Save Draft Order
                    </Button>
                  </div>
                )}

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

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

              {canEditDraftOrder && (
                <Form method="post">
                  <input type="hidden" name="intent" value="randomize-draft-order" />
                  <Button 
                    type="submit" 
                    variant="outline" 
                    className="w-full"
                    disabled={navigation.state === "submitting"}
                  >
                    {navigation.state === "submitting" && navigation.formData?.get("intent") === "randomize-draft-order"
                      ? "Randomizing..."
                      : "🎲 Randomize Draft Order"}
                  </Button>
                </Form>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Team Management */}
        <Card>
          <CardHeader>
            <CardTitle>Team Management</CardTitle>
            <CardDescription>
              Manage team ownership for this league
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {teams.map((team) => {
                const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
                return (
                  <div
                    key={team.id}
                    className="flex items-center justify-between p-3 border rounded-md"
                  >
                    <div className="flex-1">
                      <p className="font-medium">{team.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {team.ownerId ? (
                          <span>Owner: {ownerName || "Unknown"}</span>
                        ) : (
                          <span>No owner</span>
                        )}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      {team.ownerId && (
                        <Form method="post">
                          <input type="hidden" name="intent" value="remove-team-owner" />
                          <input type="hidden" name="teamId" value={team.id} />
                          <Button
                            type="submit"
                            variant="outline"
                            size="sm"
                            disabled={navigation.state === "submitting"}
                          >
                            Remove Owner
                          </Button>
                        </Form>
                      )}
                      {isAdmin && (
                        <Form method="post" className="flex gap-2">
                          <input type="hidden" name="intent" value="assign-team-owner" />
                          <input type="hidden" name="teamId" value={team.id} />
                          <Select name="userClerkId" required>
                            <SelectTrigger className="w-[180px] h-9">
                              <SelectValue placeholder="Select user" />
                            </SelectTrigger>
                            <SelectContent>
                              {allUsers.map((user) => {
                                const userOwnsTeam = teams.some((t) => t.ownerId === user.clerkId);
                                return (
                                  <SelectItem
                                    key={user.id}
                                    value={user.clerkId}
                                    disabled={userOwnsTeam}
                                  >
                                    {user.username || user.email}
                                    {userOwnsTeam && " (already in league)"}
                                  </SelectItem>
                                );
                              })}
                            </SelectContent>
                          </Select>
                          <Button
                            type="submit"
                            variant="outline"
                            size="sm"
                            disabled={navigation.state === "submitting"}
                          >
                            Assign
                          </Button>
                        </Form>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        {/* Commissioner Management */}
        <Card>
          <CardHeader>
            <CardTitle>Commissioner Management</CardTitle>
            <CardDescription>
              Commissioners can manage league settings and oversee the draft. They do not need to own a team.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {actionData?.error && !actionData?.success && (
              <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
                {actionData.error}
              </div>
            )}
            {actionData?.success && actionData?.message && (
              <div className="bg-emerald-500/15 text-emerald-400 px-4 py-3 rounded-md text-sm">
                {actionData.message}
              </div>
            )}

            <div className="space-y-3">
              {commissioners.map((commissioner) => (
                <div
                  key={commissioner.id}
                  className="flex items-center justify-between p-3 border rounded-md"
                >
                  <div className="flex-1">
                    <p className="font-medium">
                      {commissioner.userName}
                      {commissioner.userId === currentUserId && (
                        <span className="text-xs text-muted-foreground ml-2">(you)</span>
                      )}
                    </p>
                    {!teams.some((t) => t.ownerId === commissioner.userId) && (
                      <p className="text-xs text-muted-foreground">No team in current season</p>
                    )}
                  </div>
                  {commissioners.length > 1 && commissioner.userId !== currentUserId && (
                    <Form method="post">
                      <input type="hidden" name="intent" value="remove-commissioner" />
                      <input type="hidden" name="commissionerUserId" value={commissioner.userId} />
                      <Button
                        type="submit"
                        variant="outline"
                        size="sm"
                        disabled={navigation.state === "submitting"}
                      >
                        Remove
                      </Button>
                    </Form>
                  )}
                </div>
              ))}
            </div>

            <div className="border-t pt-4">
              <p className="text-sm font-medium mb-3">Add Commissioner</p>
              <Form method="post" className="flex gap-2">
                <input type="hidden" name="intent" value="add-commissioner" />
                <Select name="userClerkId" required>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Select a user" />
                  </SelectTrigger>
                  <SelectContent>
                    {leagueMembers.map((member) => {
                        const alreadyCommissioner = commissioners.some(
                          (c) => c.userId === member.clerkId
                        );
                        return (
                          <SelectItem
                            key={member.id}
                            value={member.clerkId}
                            disabled={alreadyCommissioner}
                          >
                            {member.name || "Unknown"}
                            {alreadyCommissioner && " (already commissioner)"}
                          </SelectItem>
                        );
                      })}
                  </SelectContent>
                </Select>
                <Button
                  type="submit"
                  variant="outline"
                  size="sm"
                  disabled={navigation.state === "submitting"}
                >
                  Add
                </Button>
              </Form>
            </div>
          </CardContent>
        </Card>

        {/* Audit Log */}
        <Card>
          <CardHeader>
            <CardTitle>Audit Log</CardTitle>
            <CardDescription>
              View the full history of commissioner actions for this season. All league members can see this log.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button variant="outline" asChild>
              <Link to={`/leagues/${league.id}/audit-log`}>
                View Full Audit Log
              </Link>
            </Button>
          </CardContent>
        </Card>

        {/* Danger Zone */}
        <Card className="border-destructive">
          <CardHeader>
            <CardTitle className="text-destructive">Danger Zone</CardTitle>
            <CardDescription>
              Irreversible and destructive actions
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Reset Draft - Admin Only */}
            {isAdmin && season && (
              <div className="space-y-2">
                <h3 className="font-medium">Reset Draft</h3>
                <p className="text-sm text-muted-foreground">
                  Delete all draft picks, queues, and timers, and reset the season to pre-draft status. The draft order will be preserved.
                </p>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="destructive" className="w-full">
                      Reset Draft
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Reset the draft?</AlertDialogTitle>
                      <AlertDialogDescription>
                        This will delete all draft picks, draft queues, and draft timers, and set the season back to pre-draft status.
                        The draft order will remain intact. This action cannot be undone.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <Form method="post">
                        <input type="hidden" name="intent" value="reset-draft" />
                        <AlertDialogAction type="submit" className="bg-destructive hover:bg-destructive/90">
                          Reset Draft
                        </AlertDialogAction>
                      </Form>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            )}

            {/* Delete League */}
            <div className="space-y-2">
              <h3 className="font-medium">Delete League</h3>
              <p className="text-sm text-muted-foreground">
                Permanently delete this league and all associated data.
              </p>
              <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
              <AlertDialogTrigger asChild>
                <Button variant="destructive" className="w-full">
                  Delete League
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This will permanently delete <strong>{league.name}</strong> and all
                    associated data including seasons, teams, and commissioners. This
                    action cannot be undone.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <Form method="post" onSubmit={handleDelete}>
                    <input type="hidden" name="intent" value="delete" />
                    <AlertDialogAction type="submit" className="bg-destructive hover:bg-destructive/90">
                      Delete League
                    </AlertDialogAction>
                  </Form>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}