falah-mobile/src/app/halal-monitor/page.tsx

'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { useAuth } from '@/lib/AuthContext'
import { Crown, Lock, Search, MapPin, Navigation, Bookmark, X, Loader2 } from 'lucide-react'
import dynamic from 'next/dynamic'

// Leaflet must be loaded client-side only (no SSR)
const MapContainer = dynamic(() => import('react-leaflet').then(m => m.MapContainer), { ssr: false })
const TileLayer = dynamic(() => import('react-leaflet').then(m => m.TileLayer), { ssr: false })
const Marker = dynamic(() => import('react-leaflet').then(m => m.Marker), { ssr: false })
const Popup = dynamic(() => import('react-leaflet').then(m => m.Popup), { ssr: false })

interface Place {
  id: string
  lat: number
  lon: number
  name: string
  type: 'mosque' | 'restaurant'
  address?: string
}

interface MapCenter {
  lat: number
  lon: number
}

function UpgradeCTA() {
  return (
    <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
      <div className="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center">
        <Crown size={32} className="text-amber-500" />
      </div>
      <h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
      <p className="text-gray-500 max-w-md text-sm">
        Find mosques and halal restaurants anywhere in the world. Available to Premium members.
      </p>
      <div className="bg-white border border-gray-100 shadow-md rounded-3xl p-6 max-w-sm w-full space-y-3">
        <ul className="text-sm text-gray-500 space-y-2 text-left">
          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Mosques and prayer spaces worldwide</li>
          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Halal restaurants near you</li>
          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Bookmark favourite places</li>
          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> City search anywhere in the world</li>
        </ul>
        <a
          href="/upgrade"
          className="block w-full bg-emerald-600 text-white py-3.5 rounded-2xl font-bold active:scale-[0.97] transition-transform text-center"
        >
          Upgrade Now
        </a>
      </div>
    </div>
  )
}

function LoginGate() {
  return (
    <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
      <div className="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
        <Lock size={32} className="text-gray-400" />
      </div>
      <h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
      <p className="text-gray-500 max-w-md text-sm">
        Sign in to access the global halal map — mosques, prayer spaces, and halal restaurants near you.
      </p>
      <a
        href="/login"
        className="inline-flex items-center gap-2 bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold active:scale-[0.97] transition-transform"
      >
        Sign In
      </a>
    </div>
  )
}

export default function HalalMonitorPage() {
  const { token, user, loading: authLoading } = useAuth()
  const [places, setPlaces] = useState<Place[]>([])
  const [center, setCenter] = useState<MapCenter | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [citySearch, setCitySearch] = useState('')
  const [bookmarked, setBookmarked] = useState<Set<string>>(new Set())
  const [leafletLoaded, setLeafletLoaded] = useState(false)
  const mapRef = useRef<any>(null)

  // Load Leaflet CSS
  useEffect(() => {
    if (typeof window === 'undefined') return
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
    document.head.appendChild(link)
    setLeafletLoaded(true)
    return () => { document.head.removeChild(link) }
  }, [])

  // Load existing bookmarks
  useEffect(() => {
    if (!token) return
    fetch('/api/halal/bookmarks', { headers: { 'Authorization': `Bearer ${token}` } })
      .then(r => r.json())
      .then(d => {
        if (d.bookmarks) setBookmarked(new Set(d.bookmarks.map((b: any) => b.itemId)))
      })
      .catch(() => {})
  }, [token])

  const fetchPlaces = useCallback(async (lat: number, lon: number) => {
    setLoading(true)
    setError(null)
    try {
      const res = await fetch(`/api/halal/places?lat=${lat}&lng=${lon}&radius=5000`, {
        headers: token ? { 'Authorization': `Bearer ${token}` } : {},
      })
      const data = await res.json()
      if (res.status === 429) {
        setError('Daily search limit reached. Upgrade to Premium for unlimited searches.')
        return
      }
      if (!res.ok) throw new Error(data.error || 'Failed to load places')
      setPlaces([...data.mosques, ...(data.restaurants || [])])
    } catch (e: any) {
      setError(e.message || 'Failed to load places')
    } finally {
      setLoading(false)
    }
  }, [token])

  const handleGeolocate = () => {
    if (!navigator.geolocation) {
      setError('Geolocation is not supported by your browser.')
      return
    }
    setLoading(true)
    navigator.geolocation.getCurrentPosition(
      pos => {
        const { latitude: lat, longitude: lon } = pos.coords
        setCenter({ lat, lon })
        fetchPlaces(lat, lon)
      },
      () => {
        setLoading(false)
        setError('Could not get your location. Try searching by city.')
      }
    )
  }

  const handleCitySearch = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!citySearch.trim()) return
    setLoading(true)
    setError(null)
    try {
      const res = await fetch(
        `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(citySearch)}&format=json&limit=1`,
        { headers: { 'User-Agent': 'FalahMobile/1.0' } }
      )
      const results = await res.json()
      if (!results.length) {
        setError('City not found. Try a different search term.')
        setLoading(false)
        return
      }
      const lat = parseFloat(results[0].lat)
      const lon = parseFloat(results[0].lon)
      setCenter({ lat, lon })
      fetchPlaces(lat, lon)
    } catch {
      setError('City search failed. Please try again.')
      setLoading(false)
    }
  }

  const handleBookmark = async (place: Place) => {
    if (!token) return
    const isBookmarked = bookmarked.has(place.id)
    if (isBookmarked) {
      const res = await fetch(`/api/halal/bookmarks?itemId=${place.id}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${token}` },
      })
      if (res.ok) setBookmarked(prev => { const next = new Set(prev); next.delete(place.id); return next })
    } else {
      const res = await fetch('/api/halal/bookmarks', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ itemId: place.id, itemType: place.type, label: place.name }),
      })
      if (res.ok) setBookmarked(prev => new Set([...prev, place.id]))
    }
  }

  if (authLoading) {
    return (
      <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex items-center justify-center">
        <div className="w-8 h-8 rounded-full border-2 border-emerald-300 border-t-emerald-600 animate-spin" />
      </div>
    )
  }
  if (!token || !user) return <LoginGate />
  if (!user.isPremium && !user.isPro) return <UpgradeCTA />

  const mosques = places.filter(p => p.type === 'mosque')
  const restaurants = places.filter(p => p.type === 'restaurant')

  return (
    <div className="flex flex-col h-[calc(100vh-3.5rem)]">
      {/* Toolbar */}
      <div className="bg-white border-b border-gray-100 px-4 py-2.5 flex items-center gap-3 shrink-0 flex-wrap">
        <div className="flex items-center gap-1.5">
          <Crown size={15} className="text-amber-500" />
          <span className="text-sm font-semibold text-gray-900">Halal Monitor</span>
        </div>
        <form onSubmit={handleCitySearch} className="flex gap-2 flex-1 max-w-sm">
          <div className="relative flex-1">
            <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search city..."
              value={citySearch}
              onChange={e => setCitySearch(e.target.value)}
              className="w-full bg-gray-50 border border-gray-200 rounded-xl pl-8 pr-3 py-1.5 text-xs text-gray-900 placeholder-gray-400 focus:border-emerald-400 outline-none"
            />
          </div>
          <button type="submit" className="bg-emerald-600 text-white px-3 py-1.5 rounded-xl text-xs font-semibold active:scale-[0.97] transition-transform">
            Go
          </button>
        </form>
        <button
          onClick={handleGeolocate}
          className="flex items-center gap-1 text-xs text-gray-500 active:text-emerald-600 transition"
        >
          <Navigation size={13} /> Near me
        </button>
        {loading && <Loader2 size={14} className="animate-spin text-emerald-600" />}
        {places.length > 0 && (
          <span className="text-xs text-gray-400 ml-auto">
            {mosques.length} mosques · {restaurants.length} restaurants
          </span>
        )}
      </div>

      {/* Error bar */}
      {error && (
        <div className="bg-red-50 border-b border-red-100 px-4 py-2 flex items-center justify-between shrink-0">
          <span className="text-xs text-red-600">{error}</span>
          <button onClick={() => setError(null)}><X size={14} className="text-red-400" /></button>
        </div>
      )}

      {/* Map */}
      <div className="flex-1 relative">
        {!center ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-center space-y-4 bg-[#f5f4f0]">
            <MapPin size={40} className="text-gray-300" />
            <p className="text-gray-500 text-sm">Search a city or use your location to find halal places.</p>
            <button
              onClick={handleGeolocate}
              className="flex items-center gap-2 bg-emerald-600 text-white px-5 py-3 rounded-2xl text-sm font-semibold active:scale-[0.97] transition-transform"
            >
              <Navigation size={16} /> Use My Location
            </button>
          </div>
        ) : leafletLoaded ? (
          <MapWithMarkers
            center={center}
            places={places}
            bookmarked={bookmarked}
            onBookmark={handleBookmark}
          />
        ) : null}
      </div>
    </div>
  )
}

function MapWithMarkers({
  center,
  places,
  bookmarked,
  onBookmark,
}: {
  center: MapCenter
  places: Place[]
  bookmarked: Set<string>
  onBookmark: (p: Place) => void
}) {
  const [L, setL] = useState<any>(null)

  useEffect(() => {
    import('leaflet').then(leaflet => {
      // Fix default marker icons for Next.js
      delete (leaflet.Icon.Default.prototype as any)._getIconUrl
      leaflet.Icon.Default.mergeOptions({
        iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
      })
      setL(leaflet)
    })
  }, [])

  if (!L) return null

  const mosqueIcon = new L.Icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41],
  })

  const restaurantIcon = new L.Icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41],
  })

  return (
    <MapContainer
      center={[center.lat, center.lon]}
      zoom={14}
      style={{ height: '100%', width: '100%' }}
      key={`${center.lat}-${center.lon}`}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {places.map(place => (
        <Marker
          key={place.id}
          position={[place.lat, place.lon]}
          icon={place.type === 'mosque' ? mosqueIcon : restaurantIcon}
        >
          <Popup>
            <div className="min-w-[160px]">
              <p className="font-semibold text-sm">{place.name}</p>
              {place.address && <p className="text-xs text-gray-500 mt-0.5">{place.address}</p>}
              <p className="text-xs text-gray-400 mt-1 capitalize">{place.type}</p>
              <button
                onClick={() => onBookmark(place)}
                className="mt-2 flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800"
              >
                <Bookmark size={12} />
                {bookmarked.has(place.id) ? 'Bookmarked' : 'Bookmark'}
              </button>
            </div>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  )
}