{label} {value}

); // Track which tab is active: 'home' or 'map' const [activeTab, setActiveTab] = useState('home'); const [showMapFilter, setShowMapFilter] = useState(false); const [mapFilters, setMapFilters] = useState({ '4 Bed / 4 Bath': true, '4 Bed / 2 Bath': true, '2 Bed / 2 Bath': true, '1 Bed/Studio': true, 'Everything else': true, 'With Parking': false }); const handleSaveForLater = (source) => { if (!isSignedIn) { if (typeof openAuth === 'function') { openAuth({ mode: 'signup', campusHint: 'UTAUSTIN', source: source || 'save_listing' }); } return; } setActiveTab('saved'); }; const renderSaveButton = (source) => ( ); const handleSubmitRating = async (building, rating) => { if (!building || !rating || rating < 1 || rating > 5) return; const ratingObj = { id: Date.now().toString() + Math.random().toString(36).substr(2, 9), building, rating, userId: user?.id || 'anon', createdAt: Date.now() }; // Immediately update local state for instant UI feedback setLocalRatings(prev => [...(prev || []), ratingObj]); setPendingRating(0); try { if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { await Promise.resolve(pushToSharedArray('ratings', ratingObj)); } else if (typeof patchSharedData === 'function') { const existing = [...(sharedData?.ratings || []), ratingObj]; await Promise.resolve(patchSharedData({ ratings: existing })); } else if (typeof setSharedData === 'function') { await Promise.resolve(setSharedData({ ...(sharedData ?? {}), ratings: [...(sharedData?.ratings || []), ratingObj] })); } } else { await Promise.resolve(setData({ ...(data ?? {}), ratings: [...(data?.ratings || []), ratingObj] })); } } catch (error) { console.error('Failed to save rating:', error); } }; const surveyValidCount = (surveyElevatorCount > 0 ? 1 : 0) + (surveyMaintenanceRating > 0 ? 1 : 0) + (surveyQuality !== '' ? 1 : 0) + ((surveyComplaints || []).length > 0 ? 1 : 0) + (surveyExtraNotes.trim() !== '' ? 1 : 0); const surveyFormValid = surveyValidCount >= 3; const resetSurveyForm = () => { setSurveyElevatorCount(0); setSurveyElevatorUptime(50); setSurveyElevatorUptimeTouched(false); setSurveyMaintenanceRating(0); setSurveyMaintenanceNote(''); setSurveyQuality(''); setSurveyComplaints([]); setSurveyComplaintOther(''); setSurveyExtraNotes(''); }; const handleSubmitSurvey = async () => { if (!surveyFormValid) return; const building = selectedBuilding; if (!building) return; const surveyObj = { id: Date.now().toString() + Math.random().toString(36).substr(2, 9), building, userId: user?.id || 'anon', createdAt: Date.now(), elevatorCount: surveyElevatorCount, elevatorUptime: surveyElevatorUptime, maintenanceRating: surveyMaintenanceRating, maintenanceNote: surveyMaintenanceNote.trim(), quality: surveyQuality, complaints: [...surveyComplaints], complaintOther: surveyComplaintOther.trim(), extraNotes: surveyExtraNotes.trim() }; // Immediate local update setLocalSurveys(prev => [...(prev || []), surveyObj]); resetSurveyForm(); setShowSurveyForm(false); try { if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { await Promise.resolve(pushToSharedArray('surveys', surveyObj)); } else if (typeof patchSharedData === 'function') { const existing = [...(sharedData?.surveys || []), surveyObj]; await Promise.resolve(patchSharedData({ surveys: existing })); } else if (typeof setSharedData === 'function') { await Promise.resolve(setSharedData({ ...(sharedData ?? {}), surveys: [...(sharedData?.surveys || []), surveyObj] })); } } else { await Promise.resolve(setData({ ...(data ?? {}), surveys: [...(data?.surveys || []), surveyObj] })); } } catch (error) { console.error('Failed to save survey:', error); } }; // 🏢 PRE-SUBMISSION SURVEY GATEWAY HANDLER const handlePreSubmitSurvey = async () => { if (!surveyFormValid) return; const building = preSubmitSurveyBuilding.trim(); if (!building) return; const surveyObj = { id: Date.now().toString() + Math.random().toString(36).substr(2, 9), building, userId: user?.id || 'anon', createdAt: Date.now(), elevatorCount: surveyElevatorCount, elevatorUptime: surveyElevatorUptime, maintenanceRating: surveyMaintenanceRating, maintenanceNote: surveyMaintenanceNote.trim(), quality: surveyQuality, complaints: [...surveyComplaints], complaintOther: surveyComplaintOther.trim(), extraNotes: surveyExtraNotes.trim() }; // Immediate local update setLocalSurveys(prev => [...(prev || []), surveyObj]); resetSurveyForm(); // Show reward popup with this building's survey results setPreSubmitSurveyResultBuilding(building); setShowPreSubmitSurveyResults(true); setView('browse'); setPreSubmitSurveyBuilding(''); setPreSubmitSurveySuggestions([]); setShowPreSubmitSurveySuggestions(false); try { if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { await Promise.resolve(pushToSharedArray('surveys', surveyObj)); } else if (typeof patchSharedData === 'function') { const existing = [...(sharedData?.surveys || []), surveyObj]; await Promise.resolve(patchSharedData({ surveys: existing })); } else if (typeof setSharedData === 'function') { await Promise.resolve(setSharedData({ ...(sharedData ?? {}), surveys: [...(sharedData?.surveys || []), surveyObj] })); } } else { await Promise.resolve(setData({ ...(data ?? {}), surveys: [...(data?.surveys || []), surveyObj] })); } } catch (error) { console.error('Failed to save pre-submit survey:', error); } }; const mapIframeRef = useRef(null); const preSubmitMapIframeRef = useRef(null); const mapFilteredSubmissions = useMemo(() => { return (submissions || []).filter((s) => { const l = s.layout || ''; const is4B4B = l === '4 Bed / 4 Bath'; const is4B2B = l === '4 Bed / 2 Bath'; const is2B2B = l === '2 Bed / 2 Bath'; const is1BStudio = (l === '1 Bed / 1 Bath' || l === '1 Bedroom' || l === 'Studio' || (l || []).includes('1 Bed') || (l || []).includes('Studio')); const isOther = !is4B4B && !is4B2B && !is2B2B && !is1BStudio; let passesLayout = false; if (mapFilters['4 Bed / 4 Bath'] && is4B4B) passesLayout = true; if (mapFilters['4 Bed / 2 Bath'] && is4B2B) passesLayout = true; if (mapFilters['2 Bed / 2 Bath'] && is2B2B) passesLayout = true; if (mapFilters['1 Bed/Studio'] && is1BStudio) passesLayout = true; if (mapFilters['Everything else'] && isOther) passesLayout = true; if (!passesLayout) return false; // Conditional parking filter: if enabled, only show submissions with parking reported if (mapFilters['With Parking'] && !s.parking) return false; return true; }); }, [submissions, mapFilters]); const pushMapDataToIframe = (iframeWindow) => { if (!iframeWindow) return; const payload = { apartments: APARTMENT_DATA, submissions: mapFilteredSubmissions }; // Use direct function calls to avoid opaque-origin postMessage mismatch issues. try { if (typeof iframeWindow.updateMapData === 'function') { iframeWindow.updateMapData(payload); } } catch (e) { } }; // Push latest filtered submissions to iframe whenever filters update useEffect(() => { if (activeTab === 'map' && mapIframeRef.current && mapIframeRef.current.contentWindow) { pushMapDataToIframe(mapIframeRef.current.contentWindow); } if (activeTab === 'home' && !hasSubmitted && view === 'browse' && preSubmitMapIframeRef.current && preSubmitMapIframeRef.current.contentWindow) { pushMapDataToIframe(preSubmitMapIframeRef.current.contentWindow); } }, [activeTab, view, hasSubmitted, mapFilteredSubmissions]); const handleOpenMyComparables = () => { const targetHood = myLatestSubmissionContext?.hood; if (!targetHood) { setView('submit'); return; } setSelectedBuilding(targetHood); setBrowseSearch(''); setBrowseSuggestions([]); setShowBrowseSuggestions(false); setBrowseGuideStep(1); }; const handleOpenMapFromBrowse = () => { setActiveTab('map'); setShowMapFilter(true); setBrowseGuideStep(2); }; const handleToggleBrowsePriceOrder = () => { setBrowsePriceOrder((prev) => (prev === 'asc' ? 'desc' : 'asc')); setBrowseGuideStep(0); }; // Build popup data from the just-submitted building const popupBuildingName = myLatestSubmissionContext?.hood; const popupBuildingSubs = popupBuildingName ? (submissions || []).filter((s) => s.hood === popupBuildingName).sort((a, b) => parseFloat(a.rent) - parseFloat(b.rent)) : []; // 🗺️ Shared Leaflet HTML template used by both the Map tab and pre-submission preview const mapSrcDoc = `

Avg Rent

Under $900

$900-$1200

$1200-$1500

Over $1500

`.trim(); return (

{/* 🧭 TOP NAVIGATION BAR - Flush with top, safe area aware */} {/* Hide when building detail view is showing (it's a fixed overlay) */} {!(activeTab === 'home' && selectedBuilding && hasSubmitted && view === 'browse') && (

{/* Tab 1 - Home/Main Screen (House Icon) */} {/* Tab 2 - Hook 'Em Housing (Map) with Location Pin */} {/* Tab 3 - Saved/Bookmarks (for future use) */}

)} {/* 🏙️ BACKGROUND IMAGE */} {activeTab !== 'map' && (

)} {/* 🎉 CONFETTI OVERLAY */} {confetti && (

🤘 🎉 🧡

)} {/* MAIN CONTENT - Show based on activeTab */} {activeTab === 'map' ? ( /* 🗺️ LEAFLET MAP - Sandboxed iframe approach */

{/* Map Header */}

📍 Campus Rent Map

{/* Map Filter Toggle Button */}

{/* Map Filter Dropdown */} {showMapFilter && ( <>

setShowMapFilter(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 5 }} />

{!hasSubmitted && (

To filter the map...

)}

Filters:

{Object.keys(mapFilters || {}).map((key) => (

{key === 'With Parking' && (

Additional

)} setMapFilters(prev => ({ ...prev, [key]: !prev[key] }))} style={{ accentColor: '#BF5700', width: 16, height: 16, WebkitAppearance: 'auto', appearance: 'auto' }} /> {key}

))}

)}

{/* Map Iframe Container */}