Next.js Appointment Booking Form Generator

'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function AppointmentFormForm() {
  const router = useRouter();
  // State for form data
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    date: '',
    time: '',
    notes: '',
  });

  // State for errors and submission status
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  // Handle input changes
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target as HTMLInputElement;
    const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : undefined;
    
    if (type === 'checkbox') {
      // Handle checkboxes differently based on multiple or single
      if (name === 'consent' || name === 'terms' || name === 'remember') {
        setFormData({
          ...formData,
          [name]: checked ? 'Yes' : ''
        });
      } else {
        // For multiple checkbox options
        if (checked) {
          setFormData({
            ...formData,
            [name]: [...(formData[name] as string[]), value]
          });
        } else {
          setFormData({
            ...formData,
            [name]: (formData[name] as string[]).filter(item => item !== value)
          });
        }
      }
    } else {
      setFormData({
        ...formData,
        [name]: value
      });
    }

    // Clear errors on change
    if (errors[name]) {
      setErrors({
        ...errors,
        [name]: ''
      });
    }
  };

  // Validate form
  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    let isValid = true;
    
    // Validate Full Name
    if (!formData.name) {
      newErrors.name = 'Full Name is required';
      isValid = false;
    }
    
    // Validate Email Address
    if (!formData.email) {
      newErrors.email = 'Email Address is required';
      isValid = false;
    }
    
    // Validate Phone Number
    if (!formData.phone) {
      newErrors.phone = 'Phone Number is required';
      isValid = false;
    }
    
    // Validate Appointment Date
    if (!formData.date) {
      newErrors.date = 'Appointment Date is required';
      isValid = false;
    }
    
    // Validate Preferred Time
    if (!formData.time) {
      newErrors.time = 'Preferred Time is required';
      isValid = false;
    }
    
    // Validate email format
    const emailFields = ['email', 'userEmail', 'contactEmail'].filter(field => formData[field]);
    emailFields.forEach(field => {
      const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
      if (formData[field] && !emailRegex.test(formData[field] as string)) {
        newErrors[field] = 'Please enter a valid email address';
        isValid = false;
      }
    });
    
    setErrors(newErrors);
    return isValid;
  };

  // Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    setIsSubmitting(true);
    
    try {
      // Call the API route to handle form submission
      const response = await fetch('/api/forms/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          formName: 'appointment-form',
          formData,
        }),
      });
      
      if (!response.ok) {
        throw new Error('Form submission failed');
      }
      
      // Reset form on success
      setFormData({
        name: '',
        email: '',
        phone: '',
        date: '',
        time: '',
        notes: '',
      });
      setSubmitSuccess(true);
      
      // Optionally redirect or show success message
      // router.push('/thank-you');
    } catch (error) {
      console.error('Error submitting form:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="max-w-md mx-auto">
      {submitSuccess ? (
        <div className="bg-green-50 border border-green-200 text-green-800 rounded-md p-4 mb-6">
          <p className="font-medium">Thank you for your submission!</p>
          <p className="text-sm mt-1">We have received your information and will be in touch soon.</p>
          <button
            className="mt-4 text-green-700 underline text-sm"
            onClick={() => setSubmitSuccess(false)}
          >
            Submit another response
          </button>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="form-group">
            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
              Full Name *
            </label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.name ? 'border-red-500' : ''}`}
            />
            {errors.name && (
              <p className="mt-1 text-sm text-red-600">{errors.name}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
              Email Address *
            </label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.email ? 'border-red-500' : ''}`}
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-600">{errors.email}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
              Phone Number *
            </label>
            <input
              type="tel"
              id="phone"
              name="phone"
              value={formData.phone as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.phone ? 'border-red-500' : ''}`}
            />
            {errors.phone && (
              <p className="mt-1 text-sm text-red-600">{errors.phone}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="date" className="block text-sm font-medium text-gray-700 mb-1">
              Appointment Date *
            </label>
            <input
              type="date"
              id="date"
              name="date"
              value={formData.date as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.date ? 'border-red-500' : ''}`}
            />
            {errors.date && (
              <p className="mt-1 text-sm text-red-600">{errors.date}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">
              Preferred Time *
            </label>
            <select
              id="time"
              name="time"
              value={formData.time as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.time ? 'border-red-500' : ''}`}
            >
              <option value="">Select an option</option>
              <option value="9:00 AM">9:00 AM</option>
              <option value="10:00 AM">10:00 AM</option>
              <option value="11:00 AM">11:00 AM</option>
              <option value="1:00 PM">1:00 PM</option>
              <option value="2:00 PM">2:00 PM</option>
              <option value="3:00 PM">3:00 PM</option>
            </select>
            {errors.time && (
              <p className="mt-1 text-sm text-red-600">{errors.time}</p>
            )}
          </div>
          <div className="form-group">
            <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
              Additional Notes
            </label>
            <textarea
              id="notes"
              name="notes"
              value={formData.notes as string}
              onChange={handleChange}
              className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.notes ? 'border-red-500' : ''}`}
            />
            {errors.notes && (
              <p className="mt-1 text-sm text-red-600">{errors.notes}</p>
            )}
          </div>
          <div className="form-group pt-4">
            <button
              type="submit"
              disabled={isSubmitting}
              className="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
            >
              {isSubmitting ? 'Submitting...' : 'Submit'}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}

/*
// Example API route for Next.js
// Save this in /app/api/forms/submit/route.ts

export async function POST(request: Request) {
  try {
    const data = await request.json();
    const { formName, formData } = data;
    
    // Here you would typically:
    // 1. Validate the data
    // 2. Save to database or send to an external service
    // 3. Send confirmation emails, etc.
    
    console.log('Form submission received:', { formName, formData });
    
    // Example integration with an external service like ParrotForms
    // You can use your actual API endpoint from ParrotForms here
    // const response = await fetch('https://api.parrotforms.com/v1/submissions', {
    //   method: 'POST',
    //   headers: {
    //     'Content-Type': 'application/json',
    //     'Authorization': 'Bearer YOUR_PARROTFORMS_API_KEY'
    //   },
    //   body: JSON.stringify({ formName, formData }),
    // });
    
    // Return a success response
    return new Response(JSON.stringify({ success: true }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (error) {
    console.error('Error processing form submission:', error);
    return new Response(JSON.stringify({ success: false, message: 'Failed to process form submission' }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}
*/