brackt/app/routes/admin.sports-seasons.$id.participants.tsx

import { Form, Link } from "react-router";
import type { Route } from "./+types/admin.sports-seasons.$id.participants";
import { findSportsSeasonById } from "~/models/sports-season";
import { 
  findParticipantsBySportsSeasonId, 
  createParticipant,
  deleteParticipant 
} from "~/models/participant";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { Plus, Trash2, ArrowLeft } from "lucide-react";

export async function loader({ params }: Route.LoaderArgs) {
  const sportsSeason = await findSportsSeasonById(params.id);
  
  if (!sportsSeason) {
    throw new Response("Sports season not found", { status: 404 });
  }

  const participants = await findParticipantsBySportsSeasonId(params.id);

  // Type assertion since we know the sport relation is included
  return { 
    sportsSeason: sportsSeason as typeof sportsSeason & { sport: { id: string; name: string; type: string; slug: string } }, 
    participants 
  };
}

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

  if (intent === "delete") {
    const participantId = formData.get("participantId");
    if (typeof participantId === "string") {
      await deleteParticipant(participantId);
    }
    return { success: true };
  }

  // Add participant
  const name = formData.get("name");
  const shortName = formData.get("shortName");

  if (typeof name !== "string" || !name.trim()) {
    return { error: "Participant name is required" };
  }

  try {
    await createParticipant({
      sportsSeasonId: params.id,
      name: name.trim(),
      shortName: typeof shortName === "string" && shortName.trim() ? shortName.trim() : null,
      externalId: null,
    });

    return { success: true };
  } catch (error) {
    console.error("Error creating participant:", error);
    return { error: "Failed to add participant. Please try again." };
  }
}

export default function ManageParticipants({ loaderData, actionData }: Route.ComponentProps) {
  const { sportsSeason, participants } = loaderData;

  return (
    <div className="p-8">
      <div className="max-w-4xl">
        <div className="mb-6">
          <Button variant="ghost" size="sm" asChild className="mb-2">
            <Link to={`/admin/sports-seasons/${sportsSeason.id}`}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Sports Season
            </Link>
          </Button>
          <h1 className="text-3xl font-bold">Manage Participants</h1>
          <p className="text-muted-foreground mt-1">
            {sportsSeason.sport.name} - {sportsSeason.name}
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Add Participant</CardTitle>
              <CardDescription>
                Add a {sportsSeason.sport.type === "team" ? "team" : "player"} to this season
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Form method="post" className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">
                    {sportsSeason.sport.type === "team" ? "Team" : "Player"} Name
                  </Label>
                  <Input
                    id="name"
                    name="name"
                    type="text"
                    placeholder={sportsSeason.sport.type === "team" ? "e.g., Kansas City Chiefs" : "e.g., Tiger Woods"}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="shortName">Short Name (Optional)</Label>
                  <Input
                    id="shortName"
                    name="shortName"
                    type="text"
                    placeholder={sportsSeason.sport.type === "team" ? "e.g., KC" : "e.g., T. Woods"}
                  />
                </div>

                {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-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
                    Participant added successfully!
                  </div>
                )}

                <Button type="submit" className="w-full">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Participant
                </Button>
              </Form>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>All Participants</CardTitle>
              <CardDescription>
                {participants.length} {participants.length === 1 ? "participant" : "participants"} total
              </CardDescription>
            </CardHeader>
            <CardContent>
              {participants.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">
                  No participants yet. Add your first {sportsSeason.sport.type === "team" ? "team" : "player"}.
                </p>
              ) : (
                <div className="max-h-[500px] overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Short Name</TableHead>
                        <TableHead className="w-[50px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {participants.map((participant) => (
                        <TableRow key={participant.id}>
                          <TableCell className="font-medium">{participant.name}</TableCell>
                          <TableCell className="text-muted-foreground">
                            {participant.shortName || "-"}
                          </TableCell>
                          <TableCell>
                            <Form method="post">
                              <input type="hidden" name="intent" value="delete" />
                              <input type="hidden" name="participantId" value={participant.id} />
                              <Button
                                type="submit"
                                variant="ghost"
                                size="sm"
                                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </Form>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}