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

import { useEffect } from "react";
import { Link, useSearchParams } from "react-router";
import { getAuth } from "@clerk/react-router/server";
import { toast } from "sonner";
import {
  findLeagueById,
  findCurrentSeason,
  findTeamsBySeasonId,
  findCommissionersByLeagueId,
} from "~/models";
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
  const season = await findCurrentSeason(leagueId);

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

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

  // Check if current user is a commissioner
  const isUserCommissioner = commissioners.some(c => c.userId === userId);

  return {
    league,
    season,
    teams,
    commissioners,
    currentUserId: userId,
    isUserCommissioner,
  };
}

export default function LeagueHome({ loaderData }: Route.ComponentProps) {
  const { league, season, teams, commissioners, currentUserId, isUserCommissioner } = loaderData;
  const [searchParams, setSearchParams] = useSearchParams();

  useEffect(() => {
    if (searchParams.get("updated") === "true") {
      toast.success("League updated successfully");
      // Remove the query parameter
      setSearchParams({});
    }
  }, [searchParams, setSearchParams]);

  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">
            {isUserCommissioner && (
              <Button variant="outline" asChild>
                <Link to={`/leagues/${league.id}/settings`}>Settings</Link>
              </Button>
            )}
            <Button variant="outline" asChild>
              <Link to="/">Back to Home</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-2 lg:grid-cols-3">
        <Card className="md:col-span-2 lg:col-span-3">
          <CardHeader>
            <CardTitle>Teams</CardTitle>
            <CardDescription>
              {teams.length} team{teams.length !== 1 ? "s" : ""} in this league
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {teams.map((team) => {
                const isOwned = team.ownerId === currentUserId;
                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>
                          ) : (
                            "Owned"
                          )
                        ) : (
                          <span className="text-muted-foreground">
                            Available
                          </span>
                        )}
                      </CardDescription>
                    </CardHeader>
                  </Card>
                );
              })}
            </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>
            )}
          </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, index) => (
                <div
                  key={commissioner.id}
                  className="flex items-center justify-between py-2 border-b last:border-0"
                >
                  <div>
                    <p className="font-medium">
                      Commissioner {index + 1}
                      {commissioner.userId === currentUserId && (
                        <span className="ml-2 text-xs text-primary">(You)</span>
                      )}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      Since {new Date(commissioner.createdAt).toLocaleDateString()}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}