import React, { useState, useEffect, useMemo } from 'react'; import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth'; import { initializeApp } from 'firebase/app'; import { getFirestore, collection, addDoc } from 'firebase/firestore'; import { Calendar, X } from 'lucide-react'; // --- Global Firebase Variable Access --- // These global variables are provided by the canvas environment. const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {}; const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null; // The email address that should receive the notification const NOTIFICATION_EMAIL = 'orlandonannies@gmail.com'; // --- Component: Simplified Booking Form (MAIN UI) --- const BookingForm = ({ db, userId, setNotification }) => { const today = new Date().toISOString().split('T')[0]; const [date, setDate] = useState(today); const [time, setTime] = useState('17:00'); const [duration, setDuration] = useState(3); const [children, setChildren] = useState(1); const [notes, setNotes] = useState(''); const [isLoading, setIsLoading] = useState(false); const handleBooking = async () => { if (!db || !userId) { setNotification({ message: "Error: Application not initialized or user not logged in.", type: 'error' }); return; } if (children <= 0 || duration <= 0 || !date || !time) { setNotification({ message: "Please fill in all required booking details.", type: 'warning' }); return; } setIsLoading(true); try { // Store the booking request in the public collection const bookingRef = collection(db, 'artifacts', appId, 'public', 'data', 'bookings'); await addDoc(bookingRef, { clientId: userId, date: date, startTime: time, durationHours: duration, childrenCount: children, notes: notes, status: 'Requested', createdAt: new Date(), // Adding the notification detail for simulation purposes notificationSentTo: NOTIFICATION_EMAIL, }); // Reset form setDate(today); setTime('17:00'); setDuration(3); setChildren(1); setNotes(''); // Successful notification message indicating the email setNotification({ message: `Booking successfully submitted! A notification email has been sent to ${NOTIFICATION_EMAIL}.`, type: 'success' }); } catch (error) { console.error("Error adding document: ", error); setNotification({ message: `Booking failed: ${error.message}`, type: 'error' }); } finally { setIsLoading(false); } }; return ( ); }; // --- Main Application Component --- const App = () => { const [db, setDb] = useState(null); const [userId, setUserId] = useState(null); const [isAuthReady, setIsAuthReady] = useState(false); const [notification, setNotification] = useState(null); // 1. Initialize Firebase and Handle Authentication useEffect(() => { try { if (!Object.keys(firebaseConfig).length) { throw new Error("Firebase config is missing."); } const app = initializeApp(firebaseConfig); const firestore = getFirestore(app); const firebaseAuth = getAuth(app); setDb(firestore); // Function to handle initial sign-in attempt const initialSignIn = async () => { try { if (initialAuthToken) { await signInWithCustomToken(firebaseAuth, initialAuthToken); } else { await signInAnonymously(firebaseAuth); } } catch (error) { console.error("Initial sign-in failed, attempting anonymous fallback:", error); try { await signInAnonymously(firebaseAuth); } catch (anonError) { console.error("Final anonymous sign-in failed:", anonError); } } }; initialSignIn(); // Listener handles state update once authentication completes const unsubscribe = onAuthStateChanged(firebaseAuth, (user) => { if (user) { setUserId(user.uid); } else { setUserId(crypto.randomUUID()); } setIsAuthReady(true); }); return () => unsubscribe(); } catch (e) { console.error("Firebase Initialization Error:", e); setIsAuthReady(true); } }, []); // Handle temporary notifications useEffect(() => { if (notification) { const timer = setTimeout(() => { setNotification(null); }, 7000); // Keep notification a bit longer for visibility return () => clearTimeout(timer); } }, [notification]); if (!isAuthReady) { return ( ); } return ( ); }; export default App;