brackt/app/routes/i.$inviteCode.tsx

import { Form, redirect } from "react-router";
import { getAuth } from "@clerk/react-router/server";
import { SignInButton } from "@clerk/react-router";
import type { Route } from "./+types/i.$inviteCode";

import {
  findSeasonByInviteCode,
  findLeagueById,
  findCommissionersByLeagueId,
  findAvailableTeams,
  claimTeam,
  isUserLeagueMember,
  findUserByClerkId,
  getUserDisplayName,
} from "~/models";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";

export function meta(): Route.MetaDescriptors {
  return [{ title: "Join League - Brackt" }];
}

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

  // Find season by invite code
  const season = await findSeasonByInviteCode(inviteCode);

  if (!season) {
    throw new Response("Invalid invite code", { status: 404 });
  }

  // Find the league
  const league = await findLeagueById(season.leagueId);

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

  // Find commissioners to get the commissioner's name
  const commissioners = await findCommissionersByLeagueId(league.id);
  const firstCommissioner = commissioners[0];

  // Check if user is already a member
  let isAlreadyMember = false;
  if (userId) {
    isAlreadyMember = await isUserLeagueMember(league.id, userId);
  }

  return {
    league,
    season,
    inviteCode,
    firstCommissioner,
    isAlreadyMember,
    isLoggedIn: !!userId,
  };
}

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

  if (!userId) {
    throw new Response("You must be logged in to join a league", { status: 401 });
  }

  // Find season by invite code
  const season = await findSeasonByInviteCode(inviteCode);

  if (!season) {
    throw new Response("Invalid invite code", { status: 404 });
  }

  // Check if user is already a member
  const isAlreadyMember = await isUserLeagueMember(season.leagueId, userId);

  if (isAlreadyMember) {
    // Already a member, redirect to league page
    return redirect(`/leagues/${season.leagueId}`);
  }

  // Find an available team
  const availableTeams = await findAvailableTeams(season.id);

  if (availableTeams.length === 0) {
    throw new Response("No available teams in this league", { status: 400 });
  }

  // Look up user before claiming to fail fast and get their name
  const user = await findUserByClerkId(userId);
  if (!user) {
    throw new Response("User account not found. Please try again.", { status: 500 });
  }

  // Claim the first available team, setting owner and name atomically
  const team = availableTeams[0];
  const teamName = `Team ${getUserDisplayName(user) ?? "Member"}`;
  await claimTeam(team.id, userId, teamName);

  // Redirect to league page
  return redirect(`/leagues/${season.leagueId}?joined=true`);
}

export default function InvitePage({ loaderData }: Route.ComponentProps) {
  const { league, firstCommissioner, isAlreadyMember, isLoggedIn } = loaderData;

  return (
    <div className="container mx-auto py-16 px-4">
      <div className="max-w-2xl mx-auto">
        <Card>
          <CardHeader>
            <CardTitle className="text-3xl">You're Invited!</CardTitle>
            <CardDescription className="text-base">
              {firstCommissioner ? "A commissioner" : "Someone"} has invited you to join{" "}
              <span className="font-semibold">{league.name}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <h3 className="font-semibold text-lg">League Details</h3>
              <div className="space-y-1 text-sm text-muted-foreground">
                <p>
                  <span className="font-medium text-foreground">League:</span> {league.name}
                </p>
                <p>
                  <span className="font-medium text-foreground">Created:</span>{" "}
                  {new Date(league.createdAt).toLocaleDateString()}
                </p>
              </div>
            </div>

            {isAlreadyMember ? (
              <div className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  You're already a member of this league!
                </p>
                <Button asChild className="w-full">
                  <a href={`/leagues/${league.id}`}>Go to League</a>
                </Button>
              </div>
            ) : isLoggedIn ? (
              <Form method="post" className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  Click the button below to join this league and claim your team.
                </p>
                <Button type="submit" className="w-full">
                  Join League
                </Button>
              </Form>
            ) : (
              <div className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  You'll need to sign in or create an account to join this league.
                </p>
                <SignInButton mode="modal" forceRedirectUrl={`/i/${loaderData.inviteCode}`}>
                  <Button className="w-full">Sign In to Join</Button>
                </SignInButton>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}