FormViewer

import { FormViewer } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';

function ContactForm({ schema }) {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
    // Send to backend
  };

  return (
    <FormViewer
      schema={schema}
      onSubmit={handleSubmit}
    />
  );
}

function EditContactForm({ contactId }) {
  const [schema, setSchema] = useState(null);
  const [initialData, setInitialData] = useState({});

  useEffect(() => {
    // Load schema and contact data
    Promise.all([
      fetch('/api/form-schema').then(r => r.json()),
      fetch(`/api/contacts/${contactId}`).then(r => r.json())
    ]).then(([formSchema, contact]) => {
      setSchema(formSchema);
      setInitialData({
        fullName: contact.name,
        email: contact.email,
        phone: contact.phone,
        message: contact.notes
      });
    });
  }, [contactId]);

  const handleSubmit = (data) => {
    fetch(`/api/contacts/${contactId}`, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  };

  if (!schema) return <div>Loading...</div>;

  return (
    <FormViewer
      schema={schema}
      initialData={initialData}
      onSubmit={handleSubmit}
    />
  );
}

function ContactForm({ schema }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  const handleSubmit = async (data) => {
    setIsSubmitting(true);
    setSubmitError(null);

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (!response.ok) throw new Error('Submit failed');

      setSubmitSuccess(true);
      // Reset form or redirect
      setTimeout(() => {
        window.location.href = '/thank-you';
      }, 2000);

    } catch (error) {
      setSubmitError(error.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div>
      {submitSuccess && (
        <div className="mb-4 rounded bg-green-100 p-4 text-green-800">
          Form submitted successfully!
        </div>
      )}

      {submitError && (
        <div className="mb-4 rounded bg-red-100 p-4 text-red-800">
          Error: {submitError}
        </div>
      )}

      <FormViewer
        schema={schema}
        onSubmit={handleSubmit}
      />

      {isSubmitting && (
        <div className="mt-4 text-center text-muted-foreground">
          Submitting...
        </div>
      )}
    </div>
  );
}