vitrify-me/apps/web/components/BookingForm.tsx

'use client'

import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import BookingTypeSelector from './BookingTypeSelector';
import DateSelector from './DateSelector';
import TimeSlotSelector from './TimeSlotSelector';
import CustomerDetails from './CustomerDetails';
import BookingSummary from './BookingSummary';

interface FormData {
  customerName: string;
  customerEmail: string;
  participantsCount: number;
}

const BookingInterface = () => {
  const [selectedDate, setSelectedDate] = useState('');
  const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
  const [selectedBookingType, setSelectedBookingType] = useState('');
  const [participantsCount, setParticipantsCount] = useState(1);

  const { register, handleSubmit, formState: { errors, isValid }, setValue, trigger } = useForm<FormData>({
    mode: 'onChange',
    defaultValues: {
      customerName: '',
      customerEmail: '',
      participantsCount: 1
    }
  });

  // Mock data - will be replaced with API calls
  const bookingTypes = [
    { id: '1', name: 'wheel_rental', display_name: 'Wheel Rental', requires_payment: false, price_per_person: 0 },
    { id: '2', name: 'hand_building', display_name: 'Hand Building Coworking', requires_payment: false, price_per_person: 0 },
    { id: '3', name: 'personal_workshop', display_name: 'Personal Workshop', requires_payment: true, price_per_person: 75 },
    { id: '4', name: 'group_workshop', display_name: 'Group Workshop', requires_payment: true, price_per_person: 50 }
  ];

  // Mock available time slots
  const timeSlots = [
    { id: '1', start_time: '09:00', end_time: '11:00', available: true },
    { id: '2', start_time: '11:30', end_time: '13:30', available: true },
    { id: '3', start_time: '14:00', end_time: '16:00', available: false },
    { id: '4', start_time: '16:30', end_time: '18:30', available: true },
    { id: '5', start_time: '19:00', end_time: '21:00', available: true }
  ];

  const selectedBookingTypeData = bookingTypes.find(bt => bt.id === selectedBookingType);

  useEffect(() => {
    setValue('participantsCount', participantsCount);
    trigger('participantsCount');
  }, [participantsCount, setValue, trigger]);

  const onSubmit = (data: FormData) => {
    const selectedTimeSlotData = timeSlots.find(slot => slot.id === selectedTimeSlot);
    
    const formData = {
      bookingTypeId: selectedBookingType,
      customerName: data.customerName,
      customerEmail: data.customerEmail,
      startTime: selectedDate && selectedTimeSlotData 
        ? `${selectedDate}T${selectedTimeSlotData.start_time}:00`
        : '',
      endTime: selectedDate && selectedTimeSlotData 
        ? `${selectedDate}T${selectedTimeSlotData.end_time}:00`
        : '',
      participantsCount: data.participantsCount,
    };
    
    console.log(formData);
  };

  const handleParticipantsCountChange = (count: number) => {
    setParticipantsCount(count);
  };

  const handleBookingTypeChange = (typeId: string) => {
    setSelectedBookingType(typeId);
    setSelectedDate('');
    setSelectedTimeSlot('');
  };

  const handleDateChange = (date: string) => {
    setSelectedDate(date);
    setSelectedTimeSlot('');
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-2xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Book Your Session</h1>
          <p className="text-gray-600">Choose your pottery experience</p>
        </div>

        <div className="space-y-8">
          {/* Booking Type Selection */}
          <BookingTypeSelector
            bookingTypes={bookingTypes}
            selectedBookingType={selectedBookingType}
            onBookingTypeChange={handleBookingTypeChange}
          />

          {/* Date Selection */}
          {selectedBookingType && (
            <DateSelector
              selectedDate={selectedDate}
              onDateChange={handleDateChange}
            />
          )}

          {/* Time Slot Selection */}
          {selectedDate && (
            <TimeSlotSelector
              timeSlots={timeSlots}
              selectedTimeSlot={selectedTimeSlot}
              onTimeSlotChange={setSelectedTimeSlot}
            />
          )}

          {/* Customer Details */}
          {selectedTimeSlot && (
            <form onSubmit={handleSubmit(onSubmit)}>
              <CustomerDetails
                register={register}
                errors={errors}
                participantsCount={participantsCount}
                onParticipantsCountChange={handleParticipantsCountChange}
              />
              
              {/* Summary & Submit */}
              {isValid && (
                <div className="mt-8">
                  <BookingSummary
                    selectedBookingTypeData={selectedBookingTypeData}
                    selectedDate={selectedDate}
                    selectedTimeSlot={selectedTimeSlot}
                    timeSlots={timeSlots}
                    participantsCount={participantsCount}
                    onSubmit={handleSubmit(onSubmit)}
                  />
                </div>
              )}
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

export default BookingInterface;