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

import { useEffect, useState } from "react";
import { Link, useSearchParams } from "react-router";
import { getAuth } from "@clerk/react-router/server";
import { toast } from "sonner";
import { format } from "date-fns";
import {
  findLeagueById,
  findCurrentSeason,
  findTeamsBySeasonId,
  findCommissionersByLeagueId,
  isUserLeagueMember,
  isCommissioner,
  findUserByClerkId,
  findDraftSlotsBySeasonId,
} from "~/models";
import { findSeasonWithSportsSeasons } from "~/models/season";
import type { Route } from "./+types/$leagueId";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";

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

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

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

  // Fetch current season with sports
  const season = await findCurrentSeason(leagueId);
  const seasonWithSports = season
    ? await findSeasonWithSportsSeasons(season.id)
    : null;

  // Fetch commissioners
  const commissioners = await findCommissionersByLeagueId(leagueId);

  // Check if current user is a commissioner
  const isUserCommissioner = userId
    ? await isCommissioner(leagueId, userId)
    : false;

  // Check if user is a member (has a team in current season)
  const isUserMember = userId
    ? await isUserLeagueMember(leagueId, userId)
    : false;

  // Check access: user must be a commissioner, a member, or an admin
  // If not logged in or not authorized, throw 403
  if (!userId) {
    throw new Response("You must be logged in to view this league", {
      status: 401,
    });
  }

  if (!isUserCommissioner && !isUserMember) {
    throw new Response("You do not have access to this league", {
      status: 403,
    });
  }

  // Fetch teams for current season
  const teams = season ? await findTeamsBySeasonId(season.id) : [];

  // Fetch draft slots if season is in pre_draft or draft status
  const draftSlots =
    season && (season.status === "pre_draft" || season.status === "draft")
      ? await findDraftSlotsBySeasonId(season.id)
      : [];

  // Fetch user data for team owners
  const ownerIds = teams
    .map((t) => t.ownerId)
    .filter((id): id is string => id !== null);
  const uniqueOwnerIds = [...new Set(ownerIds)];
  const owners = await Promise.all(
    uniqueOwnerIds.map(async (ownerId) => {
      const user = await findUserByClerkId(ownerId);
      return user
        ? { clerkId: ownerId, name: user.username || user.displayName }
        : null;
    })
  );
  const ownerMap = new Map(
    owners
      .filter((o): o is NonNullable<typeof o> => o !== null)
      .map((o) => [o.clerkId, o.name])
  );

  // Fetch user data for commissioners
  const commissionerIds = commissioners.map((c) => c.userId);
  const commissionerUsers = await Promise.all(
    commissionerIds.map(async (commissionerId) => {
      const user = await findUserByClerkId(commissionerId);
      return user
        ? { clerkId: commissionerId, name: user.username || user.displayName }
        : null;
    })
  );
  const commissionerMap = new Map(
    commissionerUsers
      .filter((c): c is NonNullable<typeof c> => c !== null)
      .map((c) => [c.clerkId, c.name])
  );

  // Count available teams
  const availableTeamCount = teams.filter((t) => !t.ownerId).length;

  // Count sports in season
  const sportsCount = seasonWithSports?.seasonSports?.length || 0;

  return {
    league,
    season,
    teams,
    commissioners,
    currentUserId: userId,
    isUserCommissioner,
    ownerMap: Object.fromEntries(ownerMap),
    commissionerMap: Object.fromEntries(commissionerMap),
    availableTeamCount,
    draftSlots,
    sportsCount,
  };
}

export default function LeagueHome({ loaderData }: Route.ComponentProps) {
  const {
    league,
    season,
    teams,
    commissioners,
    currentUserId,
    isUserCommissioner,
    ownerMap,
    commissionerMap,
    availableTeamCount,
    draftSlots,
    sportsCount,
  } = loaderData;
  const [searchParams, setSearchParams] = useSearchParams();
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (searchParams.get("updated") === "true") {
      toast.success("Team updated successfully");
      setSearchParams({});
    }
    if (searchParams.get("joined") === "true") {
      toast.success("Welcome to the league! You've been assigned a team.");
      setSearchParams({});
    }
    if (searchParams.get("left") === "true") {
      toast.success("You have left the league. Your team is now available.");
      setSearchParams({});
    }
  }, [searchParams, setSearchParams]);

  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 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.name}</h1>
          <div className="flex gap-2">
            {teams.find((t) => t.ownerId === currentUserId) && (
              <Button variant="outline" asChild>
                <Link
                  to={`/teams/${teams.find((t) => t.ownerId === currentUserId)?.id}/settings`}
                >
                  Team Settings
                </Link>
              </Button>
            )}
            {isUserCommissioner && (
              <Button variant="outline" asChild>
                <Link to={`/leagues/${league.id}/settings`}>
                  League Settings
                </Link>
              </Button>
            )}
          </div>
        </div>
        {season && (
          <p className="text-muted-foreground">
            {season.year} Season • Status:{" "}
            <span className="capitalize">
              {season.status.replace("_", " ")}
            </span>
          </p>
        )}
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        {/* Left Column - 2/3 width on desktop */}
        <div className="md:col-span-2 space-y-6">
          {isUserCommissioner && season && availableTeamCount > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Invite Link</CardTitle>
                <CardDescription>
                  Share this link to invite people to join your league (
                  {availableTeamCount} spot{availableTeamCount !== 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>
          )}

          <Card>
            <CardHeader>
              <CardTitle>Teams</CardTitle>
              <CardDescription>
                {teams.length} team{teams.length !== 1 ? "s" : ""} in this
                league
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {teams.map((team) => {
                  const isOwned = team.ownerId === currentUserId;
                  const ownerName = team.ownerId
                    ? ownerMap[team.ownerId]
                    : null;
                  return (
                    <Card
                      key={team.id}
                      className={isOwned ? "border-primary" : ""}
                    >
                      <CardHeader>
                        <CardTitle className="text-lg">{team.name}</CardTitle>
                        <CardDescription>
                          {team.ownerId ? (
                            isOwned ? (
                              <span className="text-primary font-medium">
                                Your Team
                              </span>
                            ) : (
                              <span>{ownerName || "Unknown Owner"}</span>
                            )
                          ) : (
                            <span className="text-muted-foreground">
                              Available
                            </span>
                          )}
                        </CardDescription>
                      </CardHeader>
                    </Card>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right Column - 1/3 width on desktop */}
        <div className="space-y-6">
          {/* Draft Order Display - Only show during pre_draft and draft */}
          {season &&
            (season.status === "pre_draft" || season.status === "draft") &&
            draftSlots.length > 0 && (
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Draft Order</CardTitle>
                      <CardDescription>
                        {season.status === "pre_draft"
                          ? "Upcoming draft order"
                          : "Current draft order"}
                      </CardDescription>
                    </div>
                    <Button asChild size="sm">
                      <Link to={`/leagues/${league.id}/draft/${season.id}`}>
                        Enter Draft Room
                      </Link>
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {draftSlots.map((slot: any, index: number) => {
                      const ownerName = slot.team.ownerId
                        ? ownerMap[slot.team.ownerId]
                        : null;
                      return (
                        <div
                          key={slot.id}
                          className="flex items-center gap-3 py-2 border-b last:border-0"
                        >
                          <div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
                            {index + 1}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="font-medium text-sm truncate">
                              {slot.team.name}
                            </p>
                            {ownerName && (
                              <p className="text-xs text-muted-foreground truncate">
                                {ownerName}
                              </p>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>
            )}

          <Card>
            <CardHeader>
              <CardTitle>League Info</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              <div>
                <p className="text-sm text-muted-foreground">Created</p>
                <p className="font-medium">
                  {new Date(league.createdAt).toLocaleDateString()}
                </p>
              </div>
              {season && (
                <>
                  <div>
                    <p className="text-sm text-muted-foreground">
                      Season Status
                    </p>
                    <p className="font-medium capitalize">
                      {season.status.replace("_", " ")}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">
                      Draft Rounds
                    </p>
                    <p className="font-medium">{season.draftRounds}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">
                      Sports Selected
                    </p>
                    <p className="font-medium">{sportsCount}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Draft Board</p>
                    <Link
                      to={`/leagues/${league.id}/draft-board/${season.id}`}
                      className="text-blue-600 hover:underline font-medium"
                    >
                      View Draft Board
                    </Link>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Flex Spots</p>
                    <p className="font-medium text-primary">
                      {Math.max(0, season.draftRounds - sportsCount)}
                    </p>
                  </div>
                  {season.draftDateTime && (
                    <div>
                      <p className="text-sm text-muted-foreground">
                        Draft Date
                      </p>
                      <p className="font-medium">
                        {format(new Date(season.draftDateTime), "PPP 'at' p")}
                      </p>
                    </div>
                  )}
                </>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Commissioners</CardTitle>
              <CardDescription>
                {commissioners.length} commissioner
                {commissioners.length !== 1 ? "s" : ""}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {commissioners.map((commissioner) => {
                  const commissionerName = commissionerMap[commissioner.userId];
                  return (
                    <div
                      key={commissioner.id}
                      className="py-2 border-b last:border-0"
                    >
                      <p className="font-medium">
                        {commissionerName || "Unknown User"}
                        {commissioner.userId === currentUserId && (
                          <span className="ml-2 text-xs text-primary">
                            (You)
                          </span>
                        )}
                      </p>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}