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 { Textarea } from "~/components/ui/textarea";
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 };
  }

  // Bulk add participants
  if (intent === "bulk") {
    const bulkNames = formData.get("bulkNames");
    
    if (typeof bulkNames !== "string" || !bulkNames.trim()) {
      return { error: "Please enter at least one participant name" };
    }

    const names = bulkNames
      .split("\n")
      .map(name => name.trim())
      .filter(name => name.length > 0);

    if (names.length === 0) {
      return { error: "Please enter at least one participant name" };
    }

    try {
      for (const name of names) {
        await createParticipant({
          sportsSeasonId: params.id,
          name,
          shortName: null,
          externalId: null,
          expectedValue: "0",
        });
      }

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

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

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

  try {
    await createParticipant({
      sportsSeasonId: params.id,
      name: name.trim(),
      shortName: null,
      externalId: null,
      expectedValue: "0",
    });

    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;
  
  // Use success state to reset forms by changing the key
  const formKey = actionData?.success ? Date.now() : 'static';

  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 mb-6">
          <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" key={`single-${formKey}`}>
                <div className="space-y-2">
                  <Label htmlFor="name">Participant 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>

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

                {actionData?.success && !actionData?.count && (
                  <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>Bulk Add Participants</CardTitle>
              <CardDescription>
                Add multiple participants at once (one per line)
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Form method="post" className="space-y-4" key={`bulk-${formKey}`}>
                <input type="hidden" name="intent" value="bulk" />
                <div className="space-y-2">
                  <Label htmlFor="bulkNames">Participant Names</Label>
                  <Textarea
                    id="bulkNames"
                    name="bulkNames"
                    placeholder={sportsSeason.sport.type === "team" 
                      ? "Kansas City Chiefs\nBuffalo Bills\nSan Francisco 49ers" 
                      : "Tiger Woods\nRory McIlroy\nJon Rahm"}
                    rows={8}
                    className="font-mono text-sm"
                  />
                  <p className="text-xs text-muted-foreground">
                    Enter one participant name per line
                  </p>
                </div>

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

                {actionData?.success && actionData?.count && (
                  <div className="bg-green-500/15 text-green-700 dark:text-green-400 px-4 py-3 rounded-md text-sm">
                    {actionData.count} participant{actionData.count !== 1 ? 's' : ''} added successfully!
                  </div>
                )}

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

        <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 className="w-[50px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {participants.map((participant) => (
                        <TableRow key={participant.id}>
                          <TableCell className="font-medium">{participant.name}</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>
  );
}