brackt/app/routes/admin.templates.new.tsx

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

import { logger } from "~/lib/logger";
import { createSeasonTemplate } from "~/models/season-template";
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";

export function meta(): Route.MetaDescriptors {
  return [{ title: "New Template - Brackt Admin" }];
}

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

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

  try {
    const template = await createSeasonTemplate({
      name: name.trim(),
      description: typeof description === "string" && description.trim() ? description.trim() : null,
      isActive: true,
    });

    return redirect(`/admin/templates/${template.id}`);
  } catch (error) {
    logger.error("Error creating template:", error);
    return { error: "Failed to create template. Please try again." };
  }
}

export default function NewTemplate({ actionData }: Route.ComponentProps) {
  return (
    <div className="p-8">
      <div className="max-w-2xl">
        <div className="mb-6">
          <h1 className="text-3xl font-bold">Create Season Template</h1>
          <p className="text-muted-foreground mt-1">
            Bundle sports together for league commissioners
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Template Details</CardTitle>
            <CardDescription>
              Create a template that commissioners can use when setting up their leagues
            </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"
                  placeholder="e.g., Full Season, Playoffs Only"
                  required
                />
                <p className="text-sm text-muted-foreground">
                  A descriptive name that commissioners will see
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Description (Optional)</Label>
                <Textarea
                  id="description"
                  name="description"
                  placeholder="Describe what sports are included in this template"
                  rows={3}
                />
              </div>

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

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

        <Card className="mt-6 border-electric/30 bg-electric/10">
          <CardHeader>
            <CardTitle className="text-electric">Next Steps</CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-foreground/80">
            <p>After creating the template, you'll be able to:</p>
            <ul className="list-disc list-inside mt-2 space-y-1">
              <li>Add sports to the template</li>
              <li>Mark which sports are required vs optional</li>
              <li>Set the number of flex spots</li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}