"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useMemo } from 'react';
import SteppedAutoForm from '../auto-form/stepped-auto-form.mjs';
import { buildFieldConfigFromJsonSchema } from '../auto-form/helpers.mjs';
import { Button } from '../button.mjs';
import { cn } from '../../lib/utils.mjs';
import { formSchemaToZod } from '../../lib/schema-converter.mjs';

function FormPreview({ schema, className, fieldComponents, defaultValues }) {
  const [submittedValues, setSubmittedValues] = useState(null);
  const zodSchema = useMemo(() => {
    try {
      if (!schema.properties || Object.keys(schema.properties).length === 0) {
        return null;
      }
      return formSchemaToZod(schema);
    } catch (error) {
      console.error("Failed to parse JSON Schema:", error);
      return null;
    }
  }, [schema]);
  const mergedFieldComponents = useMemo(() => fieldComponents ?? {}, [fieldComponents]);
  const fieldConfig = useMemo(() => {
    try {
      return buildFieldConfigFromJsonSchema(
        schema,
        mergedFieldComponents
      );
    } catch (error) {
      console.error("Failed to build field config:", error);
      return {};
    }
  }, [schema, mergedFieldComponents]);
  const handleSubmit = (values) => {
    setSubmittedValues(values);
  };
  const handleReset = () => {
    setSubmittedValues(null);
  };
  if (!zodSchema) {
    return /* @__PURE__ */ jsxs("div", { className: cn("p-8 text-center text-muted-foreground", className), children: [
      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mb-2", children: "No fields to preview" }),
      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Add some fields to your form to see a preview" })
    ] });
  }
  return /* @__PURE__ */ jsx("div", { className: cn("p-4 md:p-6", className), children: /* @__PURE__ */ jsx("div", { className: "max-w-2xl mx-auto", children: submittedValues ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Submitted Values" }),
      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleReset, children: "Try Again" })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/50 p-4", children: /* @__PURE__ */ jsx("pre", { className: "text-sm overflow-auto whitespace-pre-wrap", children: JSON.stringify(submittedValues, null, 2) }) })
  ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Form Preview" }),
      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Test your form and see the submitted values" })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsx(
      SteppedAutoForm,
      {
        formSchema: zodSchema,
        onSubmit: handleSubmit,
        fieldConfig,
        values: defaultValues,
        submitButtonText: "Submit"
      }
    ) })
  ] }) }) });
}

export { FormPreview };
