"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Play, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Form } from "@/components/ui/form";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { buildVariableSchemaFromList } from "@/lib/validation/variable-schema";
import type { ClientScript } from "@/lib/config/serialize";
import { FieldRenderer } from "./field-renderer";

function emptyValueFor(variable: ClientScript["variables"][number]): unknown {
  if (variable.type === "boolean") return false;
  if (variable.type === "multiselect") return [];
  return "";
}

function defaultValuesFor(script: ClientScript): Record<string, unknown> {
  const values: Record<string, unknown> = {};
  for (const variable of script.variables) {
    values[variable.name] = variable.default ?? emptyValueFor(variable);
  }
  return values;
}

export function DynamicForm({ script }: { script: ClientScript }) {
  const router = useRouter();
  const [submitError, setSubmitError] = useState<string | null>(null);
  const schema = buildVariableSchemaFromList(script.variables);

  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: defaultValuesFor(script),
  });

  async function onSubmit(values: Record<string, unknown>) {
    setSubmitError(null);
    const response = await fetch(`/api/scripts/${script.id}/runs`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ variables: values }),
    });

    if (!response.ok) {
      const data = await response.json().catch(() => ({}));
      setSubmitError(data.error ?? "Failed to start run");
      return;
    }

    const data = await response.json();
    toast.success(`${script.name} started`);
    router.push(`/runs/${data.runId}`);
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="flex flex-col gap-5"
      >
        {submitError && (
          <Alert variant="destructive">
            <AlertDescription>{submitError}</AlertDescription>
          </Alert>
        )}
        {script.variables.length === 0 && (
          <p className="text-muted-foreground text-sm">
            This script takes no parameters.
          </p>
        )}
        {script.variables.map((variable) => (
          <FieldRenderer key={variable.name} variable={variable} />
        ))}
        <Button
          type="submit"
          disabled={form.formState.isSubmitting}
          className="w-fit"
        >
          {form.formState.isSubmitting ? (
            <Loader2 className="animate-spin" />
          ) : (
            <Play />
          )}
          Run
        </Button>
      </form>
    </Form>
  );
}