tool-evaluator/artifacts/toolrate/src/pages/tool-new.tsx

import { useLocation } from "wouter";
import { useForm, useFieldArray } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { useCreateTool, getListToolsQueryKey, getListCategoriesQueryKey, getListAllFeaturesQueryKey, getListAllTagsQueryKey, getGetTopToolsQueryKey, getGetAnalyticsSummaryQueryKey } from "@workspace/api-client-react";
import { useQueryClient } from "@tanstack/react-query";

import { Layout } from "@/components/layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { Wrench, Plus, X, ArrowLeft, LogIn } from "lucide-react";
import { Link } from "wouter";
import { CategoryCombobox } from "@/components/category-combobox";
import { FeatureInput } from "@/components/feature-input";
import { TagInput } from "@/components/tag-input";
import { useAuth } from "@/hooks/use-auth";
import { FieldHelp } from "@/components/field-help";

const toolSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  description: z.string().min(10, "Description must be at least 10 characters"),
  category: z.string().min(2, "Category is required"),
  websiteUrl: z.string().url("Must be a valid URL").optional().or(z.literal("")),
  iconUrl: z.string().url("Must be a valid URL").optional().or(z.literal("")),
  features: z.array(z.object({ value: z.string() })).optional(),
  tags: z.array(z.object({ value: z.string() })).optional(),
});

type ToolFormValues = z.infer<typeof toolSchema>;

export default function ToolNew() {
  const [location, setLocation] = useLocation();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const createTool = useCreateTool();
  const { isAuthenticated, isLoading: authLoading, login } = useAuth();

  const form = useForm<ToolFormValues>({
    resolver: zodResolver(toolSchema),
    defaultValues: {
      name: "",
      description: "",
      category: "",
      websiteUrl: "",
      iconUrl: "",
      features: [{ value: "" }],
      tags: [{ value: "" }],
    },
  });

  const { fields: featureFields, append: appendFeature, remove: removeFeature } = useFieldArray({
    control: form.control,
    name: "features",
  });

  const { fields: tagFields, append: appendTag, remove: removeTag } = useFieldArray({
    control: form.control,
    name: "tags",
  });

  const onSubmit = (data: ToolFormValues) => {
    const payload = {
      ...data,
      websiteUrl: data.websiteUrl || undefined,
      iconUrl: data.iconUrl || undefined,
      features: data.features?.map((f) => f.value).filter((v) => v.trim() !== ""),
      tags: data.tags?.map((t) => t.value).filter((v) => v.trim() !== ""),
    };

    createTool.mutate(
      { data: payload },
      {
        onSuccess: (newTool) => {
          toast({ title: "Tool added successfully", description: "Your tool is now available for review." });
          queryClient.invalidateQueries({ queryKey: getListToolsQueryKey() });
          queryClient.invalidateQueries({ queryKey: getListCategoriesQueryKey() });
          queryClient.invalidateQueries({ queryKey: getListAllFeaturesQueryKey() });
          queryClient.invalidateQueries({ queryKey: getListAllTagsQueryKey() });
          queryClient.invalidateQueries({ queryKey: getGetTopToolsQueryKey() });
          queryClient.invalidateQueries({ queryKey: getGetAnalyticsSummaryQueryKey() });
          setLocation(`/tools/${newTool.id}`);
        },
        onError: () => {
          toast({ title: "Failed to add tool", description: "An unexpected error occurred.", variant: "destructive" });
        },
      },
    );
  };

  return (
    <Layout>
      <div className="max-w-3xl mx-auto space-y-6 pb-10">
        <Button variant="ghost" asChild className="mb-2 -ml-4 text-muted-foreground">
          <Link href="/tools">
            <ArrowLeft className="w-4 h-4 mr-2" /> Back to browse
          </Link>
        </Button>

        <div>
          <h1 className="text-3xl font-bold tracking-tight mb-2">Add a New Tool</h1>
          <p className="text-muted-foreground">Submit a tool you use to let the community rate and review it.</p>
        </div>

        {!authLoading && !isAuthenticated && (
          <div className="flex items-center gap-4 rounded-md border border-primary/20 bg-primary/5 px-4 py-3">
            <LogIn className="w-5 h-5 text-primary shrink-0" />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium">Sign in required</p>
              <p className="text-xs text-muted-foreground">You must be signed in to submit a tool.</p>
            </div>
            <Button size="sm" onClick={() => login(location)} data-testid="button-login-prompt">
              Sign in
            </Button>
          </div>
        )}

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Wrench className="w-5 h-5 text-primary" />
              Tool Details
            </CardTitle>
            <CardDescription>Provide the basic information about the tool.</CardDescription>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="inline-flex items-center gap-1.5">
                          Name
                          <FieldHelp schema="ToolInput" field="name">Name</FieldHelp>
                        </FormLabel>
                        <FormControl>
                          <Input placeholder="e.g. React, Next.js, Postgres" {...field} data-testid="input-tool-name" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="category"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="inline-flex items-center gap-1.5">
                          Category
                          <FieldHelp schema="ToolInput" field="category">Category</FieldHelp>
                        </FormLabel>
                        <FormControl>
                          <CategoryCombobox
                            value={field.value}
                            onChange={field.onChange}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                  <FormField
                    control={form.control}
                    name="websiteUrl"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="inline-flex items-center gap-1.5">
                          Website URL (Optional)
                          <FieldHelp schema="ToolInput" field="websiteUrl">Website URL</FieldHelp>
                        </FormLabel>
                      <FormControl>
                        <Input placeholder="https://..." type="url" {...field} data-testid="input-tool-url" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="iconUrl"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="inline-flex items-center gap-1.5">
                        Icon / Logo URL (Optional)
                        <FieldHelp schema="ToolInput" field="iconUrl">Icon / Logo URL</FieldHelp>
                      </FormLabel>
                      <FormControl>
                        <div className="flex items-center gap-3">
                          <div className="w-9 h-9 rounded-md border bg-muted flex items-center justify-center overflow-hidden shrink-0">
                            {field.value ? (
                              <img
                                src={field.value}
                                alt="icon preview"
                                className="w-full h-full object-contain p-0.5"
                                onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                              />
                            ) : (
                              <span className="text-xs text-muted-foreground">img</span>
                            )}
                          </div>
                          <Input
                            placeholder="https://example.com/logo.png"
                            type="url"
                            {...field}
                            data-testid="input-tool-icon-url"
                            className="flex-1"
                          />
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="inline-flex items-center gap-1.5">
                        Description
                        <FieldHelp schema="ToolInput" field="description">Description</FieldHelp>
                      </FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="What does this tool do? Why do people use it?"
                          className="min-h-[120px] resize-none"
                          {...field}
                          data-testid="input-tool-description"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <div className="space-y-4 pt-4 border-t">
                  <div className="flex justify-between items-center">
                    <div>
                      <h3 className="text-lg font-medium inline-flex items-center gap-1.5">
                        Features
                        <FieldHelp schema="ToolInput" field="features">Features</FieldHelp>
                      </h3>
                      <p className="text-sm text-muted-foreground">List key capabilities. Existing features from other tools are selectable.</p>
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => appendFeature({ value: "" })}
                      data-testid="button-add-feature"
                    >
                      <Plus className="w-4 h-4 mr-2" /> Add Feature
                    </Button>
                  </div>

                  <div className="space-y-3">
                    {featureFields.map((field, index) => (
                      <FormField
                        key={field.id}
                        control={form.control}
                        name={`features.${index}.value`}
                        render={({ field }) => (
                          <FormItem className="flex items-start gap-2 space-y-0">
                            <FormControl>
                              <FeatureInput
                                value={field.value ?? ""}
                                onChange={field.onChange}
                                placeholder="e.g. Real-time collaboration"
                                data-testid={`input-feature-${index}`}
                              />
                            </FormControl>
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="shrink-0 text-muted-foreground hover:text-destructive"
                              onClick={() => removeFeature(index)}
                              data-testid={`button-remove-feature-${index}`}
                            >
                              <X className="w-4 h-4" />
                            </Button>
                          </FormItem>
                        )}
                      />
                    ))}
                    {featureFields.length === 0 && (
                      <p className="text-sm text-muted-foreground italic">No features added.</p>
                    )}
                  </div>
                </div>

                <div className="space-y-4 pt-4 border-t">
                  <div className="flex justify-between items-center">
                    <div>
                      <h3 className="text-lg font-medium inline-flex items-center gap-1.5">
                        Tags
                        <FieldHelp schema="ToolInput" field="tags">Tags</FieldHelp>
                      </h3>
                      <p className="text-sm text-muted-foreground">Keywords to help find this tool. Existing tags from other tools are selectable.</p>
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => appendTag({ value: "" })}
                      data-testid="button-add-tag"
                    >
                      <Plus className="w-4 h-4 mr-2" /> Add Tag
                    </Button>
                  </div>

                  <div className="flex flex-wrap gap-2">
                    {tagFields.map((field, index) => (
                      <FormField
                        key={field.id}
                        control={form.control}
                        name={`tags.${index}.value`}
                        render={({ field }) => (
                          <FormItem className="flex items-center space-y-0 relative w-[200px]">
                            <FormControl>
                              <TagInput
                                placeholder="Tag"
                                className="pr-8 h-9 text-sm"
                                onChange={field.onChange}
                                value={field.value ?? ""}
                                data-testid={`input-tag-${index}`}
                              />
                            </FormControl>
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="absolute right-0 top-0 h-9 w-8 text-muted-foreground hover:text-destructive"
                              onClick={() => removeTag(index)}
                              data-testid={`button-remove-tag-${index}`}
                            >
                              <X className="w-3 h-3" />
                            </Button>
                          </FormItem>
                        )}
                      />
                    ))}
                  </div>
                </div>

                <div className="pt-6 border-t flex justify-end">
                  <Button
                    type="submit"
                    disabled={createTool.isPending || (!authLoading && !isAuthenticated)}
                    className="w-full sm:w-auto"
                    data-testid="button-submit-tool"
                  >
                    {createTool.isPending ? "Adding Tool..." : "Submit Tool"}
                  </Button>
                </div>
              </form>
            </Form>
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
}