brackt/app/routes/admin.templates.$id.tsx

import { Form, Link, redirect } from "react-router";
import { useState } from "react";
import type { Route } from "./+types/admin.templates.$id";

import { logger } from "~/lib/logger";
import {
  findSeasonTemplateWithSports,
  updateSeasonTemplate,
  deleteSeasonTemplate,
  setSeasonTemplateActive
} from "~/models/season-template";
import {
  addSportToTemplate,
  removeSportFromTemplate
} from "~/models/season-template-sport";
import { findAllSports } from "~/models/sport";
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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Trash2, Plus, X } from "lucide-react";
import { Badge } from "~/components/ui/badge";

export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
  return [{ title: `${data?.template?.name ?? "Template"} - Brackt Admin` }];
}

export async function loader({ params }: Route.LoaderArgs) {
  const template = await findSeasonTemplateWithSports(params.id);

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

  const allSports = await findAllSports();

  return { template, allSports };
}

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

  if (intent === "delete") {
    await deleteSeasonTemplate(params.id);
    return redirect("/admin/templates");
  }

  if (intent === "toggle-active") {
    const isActive = formData.get("isActive") === "true";
    await setSeasonTemplateActive(params.id, isActive);
    return { success: true };
  }

  if (intent === "add-sport") {
    const sportId = formData.get("sportId");

    if (typeof sportId === "string") {
      await addSportToTemplate(params.id, sportId);
    }
    return { success: true };
  }

  if (intent === "remove-sport") {
    const sportId = formData.get("sportId");

    if (typeof sportId === "string") {
      await removeSportFromTemplate(params.id, sportId);
    }
    return { success: true };
  }

  // Update template
  const name = formData.get("name");
  const description = formData.get("description");

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

  try {
    await updateSeasonTemplate(params.id, {
      name: name.trim(),
      description: typeof description === "string" && description.trim() ? description.trim() : null,
    });

    return { success: true };
  } catch (error) {
    logger.error("Error updating template:", error);
    return { error: "Failed to update template. Please try again." };
  }
}

export default function EditTemplate({ loaderData, actionData }: Route.ComponentProps) {
  const { template, allSports } = loaderData;
  const [selectedSportId, setSelectedSportId] = useState("");

  const includedSportIds = new Set(
    template.seasonTemplateSports.map((s) => s.sportId)
  );

  const availableSports = allSports.filter(
    (s) => !includedSportIds.has(s.id)
  );

  return (
    <div className="p-8">
      <div className="max-w-4xl">
        <div className="mb-6">
          <h1 className="text-3xl font-bold">Edit Template</h1>
          <p className="text-muted-foreground mt-1">{template.name}</p>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Template Details</CardTitle>
              <CardDescription>Update the template information</CardDescription>
            </CardHeader>
            <CardContent>
              <Form method="post" className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="name">Template Name</Label>
                  <Input
                    id="name"
                    name="name"
                    type="text"
                    defaultValue={template.name}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="description">Description (Optional)</Label>
                  <Textarea
                    id="description"
                    name="description"
                    defaultValue={template.description || ""}
                    rows={3}
                  />
                </div>

                <div className="flex items-center space-x-2">
                  <Form method="post">
                    <input type="hidden" name="intent" value="toggle-active" />
                    <input type="hidden" name="isActive" value={(!template.isActive).toString()} />
                    <Button
                      type="submit"
                      variant={template.isActive ? "outline" : "default"}
                      size="sm"
                    >
                      {template.isActive ? "Set Inactive" : "Set Active"}
                    </Button>
                  </Form>
                  <Badge variant={template.isActive ? "default" : "secondary"}>
                    {template.isActive ? "Active" : "Inactive"}
                  </Badge>
                </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-emerald-500/15 text-emerald-400 px-4 py-3 rounded-md text-sm">
                    Template updated successfully!
                  </div>
                )}

                <div className="flex gap-4">
                  <Button type="submit" className="flex-1">
                    Save Changes
                  </Button>
                  <Button type="button" variant="outline" asChild>
                    <Link to="/admin/templates">Cancel</Link>
                  </Button>
                </div>
              </Form>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Sports</CardTitle>
              <CardDescription>
                Add sports to this template. The active season for each sport will be used automatically when a league is created.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {template.seasonTemplateSports.length > 0 && (
                <div className="space-y-2">
                  {template.seasonTemplateSports.map((templateSport) => (
                    <div
                      key={templateSport.id}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <p className="font-medium">
                        {templateSport.sport.name}
                      </p>
                      <Form method="post">
                        <input type="hidden" name="intent" value="remove-sport" />
                        <input type="hidden" name="sportId" value={templateSport.sportId} />
                        <Button
                          type="submit"
                          variant="ghost"
                          size="sm"
                          className="text-destructive hover:text-destructive"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </Form>
                    </div>
                  ))}
                </div>
              )}

              {availableSports.length > 0 ? (
                <Form method="post" className="flex gap-2">
                  <input type="hidden" name="intent" value="add-sport" />
                  <Select
                    name="sportId"
                    value={selectedSportId}
                    onValueChange={setSelectedSportId}
                    required
                  >
                    <SelectTrigger className="flex-1">
                      <SelectValue placeholder="Select a sport" />
                    </SelectTrigger>
                    <SelectContent>
                      {availableSports.map((sport) => (
                        <SelectItem key={sport.id} value={sport.id}>
                          {sport.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Button type="submit">
                    <Plus className="h-4 w-4" />
                  </Button>
                </Form>
              ) : (
                <p className="text-sm text-muted-foreground text-center py-4">
                  All available sports have been added
                </p>
              )}
            </CardContent>
          </Card>

          <Card className="border-destructive">
            <CardHeader>
              <CardTitle className="text-destructive">Danger Zone</CardTitle>
              <CardDescription>
                Permanently delete this template
              </CardDescription>
            </CardHeader>
            <CardContent>
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button variant="destructive">
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete Template
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                    <AlertDialogDescription>
                      This will permanently delete the template "{template.name}".
                      This action cannot be undone.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <Form method="post">
                      <input type="hidden" name="intent" value="delete" />
                      <AlertDialogAction type="submit" className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                        Delete
                      </AlertDialogAction>
                    </Form>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}