import React, { useState } from 'react'; import { db } from '@scodyx/db'; const STORAGE_KEY = 'rasoi_saved_catering_bookings'; export default function OrderModal({ isOpen, onClose, guestCount, selectedPackage, selectedDishes, selectedStalls, selectedAddons, eventDate, user, onOpenAuth }) { const [step, setStep] = useState(1); // 1: Event Info, 2: Dietary, 3: Review & Book const [formData, setFormData] = useState({ fullName: user?.displayName || '', email: user?.email || '', phone: '', eventDate: eventDate || '', eventTime: '18:30', venueAddress: '', eventType: 'Housewarming / Griha Pravesh', dietaryNotes: '', satvikJainCount: '0', spicePreference: 'Medium Traditional', specialInstructions: '' }); const [submitting, setSubmitting] = useState(false); const [confirmedBooking, setConfirmedBooking] = useState(null); if (!isOpen) return null; // Compute pricing const buffetSubtotal = selectedPackage ? (selectedPackage.pricePerGuest * guestCount) : (guestCount * 28); const stallsSubtotal = selectedStalls.reduce((acc, stall) => { const extra = Math.max(0, guestCount - 50) * (stall.pricePerExtraGuest || 4); return acc + stall.price + extra; }, 0); const addonsSubtotal = selectedAddons.reduce((acc, a) => { if (a.id === 'addon-crockery') return acc + (a.price * guestCount); if (a.id === 'addon-servers') return acc + (a.price * Math.max(1, Math.ceil(guestCount / 25))); return acc + a.price; }, 0); const grandTotal = Math.round((buffetSubtotal + stallsSubtotal + addonsSubtotal) * 1.0825); const depositDue = Math.round(grandTotal * 0.25); const handleInputChange = (field, value) => { setFormData((prev) => ({ ...prev, [field]: value })); }; const handleFinalSubmit = async (e) => { e.preventDefault(); setSubmitting(true); const generatedId = 'BK-' + Math.floor(100000 + Math.random() * 900000); const bookingPayload = { ...formData, guestCount, packageTitle: selectedPackage ? selectedPackage.title : 'Custom Buffet Spread', dishes: selectedDishes.map((d) => d.name), stalls: selectedStalls.map((s) => s.name), addons: selectedAddons.map((a) => a.name), totalAmount: grandTotal, depositAmount: depositDue, status: 'Confirmed - Scheduled', createdAt: new Date().toISOString() }; try { let result = null; try { if (typeof db?.insert === 'function') { result = await db.insert('catering_bookings', bookingPayload).catch((insertErr) => { console.warn('db.insert handled notice:', insertErr?.message || insertErr); return null; }); } } catch (err) { console.warn('DB insert fallback execution:', err); } // Save to local storage backup const localId = result?.id || generatedId; const record = { id: localId, data: { ...bookingPayload, id: localId } }; try { const stored = localStorage.getItem(STORAGE_KEY); const list = stored ? JSON.parse(stored) : []; list.unshift(record); localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); } catch (storageErr) { console.warn('Local storage fallback error:', storageErr); } setConfirmedBooking({ ...bookingPayload, id: localId }); } catch (err) { console.warn('Error in handleFinalSubmit:', err); setConfirmedBooking({ ...bookingPayload, id: generatedId }); } finally { setSubmitting(false); } }; return (

{/* Modal Top Header */}

Rasoi Ghar Online Booking

{confirmedBooking ? 'Reservation Confirmed! 🎉' : 'Finalize Catering Reservation'}

{/* Confirmed Screen */} {confirmedBooking ? (

✓

Congratulations, {confirmedBooking.fullName || 'Valued Guest'}!

Your catering order #{confirmedBooking.id?.slice(0, 8)} is confirmed.

Date & Time: {confirmedBooking.eventDate || 'Scheduled'} @ {confirmedBooking.eventTime}

Guest Count: {confirmedBooking.guestCount} People

Venue Address: {confirmedBooking.venueAddress || 'Address on file'}

Hold Deposit (25%): ${confirmedBooking.depositAmount}

Total Package Value: ${confirmedBooking.totalAmount}

Our Executive Chef will reach out to {confirmedBooking.phone || confirmedBooking.email || 'your contact'} to coordinate final tasting samples and delivery warmers.

) : ( /* Multi-step form */

{/* Step Indicators */}

{[ { num: 1, title: 'Event Details' }, { num: 2, title: 'Dietary & Spice' }, { num: 3, title: 'Review & Confirm' } ].map((s) => (

setStep(s.num)} className={`flex items-center gap-2 cursor-pointer ${ step === s.num ? 'text-amber-400 font-bold' : 'text-amber-500/50 font-medium' }`} > {s.num} {s.title}

))}

{/* STEP 1: Details */} {step === 1 && (

Host Full Name * handleInputChange('fullName', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Phone Number * handleInputChange('phone', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Email Address * handleInputChange('email', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Occasion Type

Event Date handleInputChange('eventDate', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Food Serving Time handleInputChange('eventTime', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Venue Street Address & City * handleInputChange('venueAddress', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

)} {/* STEP 2: Dietary */} {step === 2 && (

Spice Level Preference

Satvik / Jain Guest Count handleInputChange('satvikJainCount', e.target.value)} className="w-full bg-[#120805] border border-amber-900 rounded-xl px-3.5 py-2.5 text-xs text-amber-100 focus:outline-none focus:border-amber-500" />

Allergies or Dietary Specifications

handleInputChange('dietaryNotes', e.target.value)}
                    className="w-full bg-[#120805] border border-amber-900 rounded-xl p-3 text-xs text-amber-100 focus:outline-none focus:border-amber-500"
                  />
                </div>

<div>
                  <label className="block text-xs font-semibold text-amber-200 mb-1">Setup Instructions / Special Requests</label>
                  <textarea
                    rows={2}
                    placeholder="e.g. Backyard setup, need chafers by 5 PM, patio access for live dosa..."
                    value={formData.specialInstructions}
                    onChange={(e) => handleInputChange('specialInstructions', e.target.value)}
                    className="w-full bg-[#120805] border border-amber-900 rounded-xl p-3 text-xs text-amber-100 focus:outline-none focus:border-amber-500"
                  />
                </div>

<div className="pt-4 flex justify-between">
                  <button
                    onClick={() => setStep(1)}
                    className="px-4 py-2.5 rounded-xl bg-amber-950 border border-amber-800 text-amber-300 font-semibold text-xs"
                  >
                    ← Back
                  </button>
                  <button
                    onClick={() => setStep(3)}
                    className="px-6 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-stone-950 font-bold text-xs uppercase"
                  >
                    Next: Review & Confirm →
                  </button>
                </div>
              </div>
            )}

{/* STEP 3: Summary & Submit */}
            {step === 3 && (
              <div className="space-y-5">
                <div className="bg-[#120805] p-4 rounded-2xl border border-amber-900/50 space-y-3 text-xs">
                  <div className="flex justify-between items-center border-b border-amber-900/40 pb-2">
                    <span className="text-amber-400 font-bold uppercase">Package Choice:</span>
                    <span className="text-amber-100 font-semibold">
                      {selectedPackage ? selectedPackage.title : 'Custom Selected Menu'} ({guestCount} Guests)
                    </span>
                  </div>

{selectedDishes.length > 0 && (
                    <div>
                      <span className="text-amber-400 font-semibold block mb-1">Selected Dishes ({selectedDishes.length}):</span>
                      <p className="text-amber-200/80 line-clamp-2">
                        {selectedDishes.map((d) => d.name).join(', ')}
                      </p>
                    </div>
                  )}

{selectedStalls.length > 0 && (
                    <div>
                      <span className="text-amber-400 font-semibold block mb-1">Live Stalls ({selectedStalls.length}):</span>
                      <p className="text-amber-200/80">
                        {selectedStalls.map((s) => s.name).join(' • ')}
                      </p>
                    </div>
                  )}

<div className="pt-2 border-t border-amber-900/40 flex justify-between text-sm font-bold">
                    <span className="text-amber-300">Grand Total with Tax:</span>
                    <span className="text-amber-400 font-heading text-lg">${grandTotal}</span>
                  </div>
                </div>

{!user && (
                  <div className="p-3 bg-amber-950/40 border border-amber-800/60 rounded-xl flex items-center justify-between text-xs text-amber-300">
                    <span>💡 Sign in to save this quote to your account</span>
                    <button
                      type="button"
                      onClick={onOpenAuth}
                      className="px-3 py-1 bg-amber-800/60 hover:bg-amber-700 text-white rounded font-bold"
                    >
                      Quick Sign In
                    </button>
                  </div>
                )}

<div className="flex justify-between items-center pt-2">
                  <button
                    onClick={() => setStep(2)}
                    className="px-4 py-2.5 rounded-xl bg-amber-950 border border-amber-800 text-amber-300 font-semibold text-xs"
                  >
                    ← Back
                  </button>

<button
                    onClick={handleFinalSubmit}
                    disabled={submitting}
                    className="px-8 py-3.5 rounded-xl bg-gradient-to-r from-emerald-600 via-amber-500 to-orange-600 text-white font-extrabold text-sm uppercase tracking-wider shadow-lg hover:brightness-110 disabled:opacity-50"
                  >
                    {submitting ? 'Confirming Reservation...' : 'Confirm Catering Order 🚀'}
                  </button>
                </div>
              </div>
            )}

</div>
        )}

</div>
    </div>
  );
}</article></body></html>