Orlando Theme Park Planner: Real-Time Trips with React & Next.js

// hooks/useWaitTimes.ts - Real-time wait times hook
import { useState, useEffect } from 'react'
import { useWebSocket } from '@/hooks/useWebSocket'

interface WaitTime {
  id: string
  name: string
  currentWait: number
  predictedWait: number
  park: string
  land: string
  lastUpdated: Date
}

export function useWaitTimes(parkId: string) {
  const [waitTimes, setWaitTimes] = useState<WaitTime[]>([])
  const [isLoading, setIsLoading] = useState(true)
  
  const { lastMessage, connectionStatus } = useWebSocket(
    `wss://api.orlandoplanner.com/parks/${parkId}/wait-times`
  )

  useEffect(() => {
    if (lastMessage) {
      const data = JSON.parse(lastMessage.data)
      
      if (data.type === 'WAIT_TIME_UPDATE') {
        setWaitTimes(prev => 
          prev.map(attraction => 
            attraction.id === data.attractionId 
              ? { ...attraction, currentWait: data.waitTime, lastUpdated: new Date() }
              : attraction
          )
        )
      }
    }
  }, [lastMessage])

  return { waitTimes, isLoading, connectionStatus }
}

// app/parks/[parkId]/page.tsx - Dynamic park pages
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { getParkData, getAllParks } from '@/lib/parks'

export async function generateMetadata({ 
  params 
}): Promise<Metadata> {
  const park = await getParkData(params.parkId)
  
  if (!park) return { title: 'Park Not Found' }
  
  return {
    title: `${park.name} Wait Times - Orlando Planner`,
    description: `Real-time wait times for ${park.name}. ${park.description}`,
    openGraph: {
      title: park.name,
      description: `Live updates from ${park.name} in Orlando, Florida`,
      images: [park.heroImage],
      type: 'website'
    },
    other: {
      'geo.region': 'US-FL',
      'geo.placename': 'Orlando'
    }
  }
}

export async function generateStaticParams() {
  const parks = await getAllParks()
  
  return parks.map((park) => ({
    parkId: park.slug,
  }))
}

export default async function ParkPage({ params }) {
  const park = await getParkData(params.parkId)
  
  if (!park) {
    notFound()
  }

  return (
    <main>
      <ParkHeader park={park} />
      <WaitTimesSection parkId={park.id} />
      <RestaurantSection parkId={park.id} />
      <MapSection park={park} />
    </main>
  )
}

// hooks/useFloridaWeather.ts - Weather-aware park recommendations
import { useState, useEffect } from 'react'
import { useGeolocation } from './useGeolocation'

interface WeatherImpact {
  severity: 'low' | 'moderate' | 'high'
  affectedAttractions: string[]
  recommendation: string
  thunderstormRisk: number
}

export function useFloridaWeather(parkId: string) {
  const [weather, setWeather] = useState(null)
  const [impact, setImpact] = useState<WeatherImpact | null>(null)
  const { coordinates } = useGeolocation()

  useEffect(() => {
    async function fetchWeatherData() {
      if (!coordinates) return
      
      const response = await fetch(
        `/api/weather/orlando?lat=${coordinates.lat}&lon=${coordinates.lng}`
      )
      const data = await response.json()
      
      setWeather(data.current)
      
      // Florida-specific weather impact analysis
      const thunderstormRisk = data.hourly
        .slice(0, 6)
        .reduce((risk, hour) => risk + hour.precipitationProbability, 0) / 6
        
      const affectedAttractions = data.current.conditions === 'rain' 
        ? getOutdoorAttractions(parkId)
        : []
        
      setImpact({
        severity: thunderstormRisk > 70 ? 'high' : thunderstormRisk > 40 ? 'moderate' : 'low',
        affectedAttractions,
        recommendation: getWeatherRecommendation(data.current, thunderstormRisk),
        thunderstormRisk
      })
    }

    fetchWeatherData()
    const interval = setInterval(fetchWeatherData, 300000) // 5 minutes
    
    return () => clearInterval(interval)
  }, [coordinates, parkId])

  return { weather, impact }
}

// app/parks/[parkId]/wait-times/page.tsx - ISR implementation
import { unstable_cache } from 'next/cache'

const getCachedWaitTimes = unstable_cache(
  async (parkId: string) => {
    const response = await fetch(
      `${process.env.API_BASE_URL}/parks/${parkId}/wait-times`,
      { 
        headers: { 'Authorization': `Bearer ${process.env.API_KEY}` },
        next: { revalidate: 60 } // 1 minute cache
      }
    )
    
    if (!response.ok) {
      throw new Error('Failed to fetch wait times')
    }
    
    return response.json()
  },
  ['wait-times'],
  {
    revalidate: 60,
    tags: ['wait-times']
  }
)

export default async function WaitTimesPage({ params }) {
  try {
    const waitTimes = await getCachedWaitTimes(params.parkId)
    
    return (
      <div className="wait-times-container">
        <WaitTimesHeader park={waitTimes.park} />
        <WaitTimesList attractions={waitTimes.attractions} />
        <PredictionsChart data={waitTimes.predictions} />
      </div>
    )
  } catch (error) {
    return <WaitTimesError error={error} />
  }
}