feat: Add OpenStreetMap integration to ParkForm

src/components/admin/LocationSearch.tsx

@@ -0,0 +1,278 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useDebounce } from '@/hooks/useDebounce';
+import { supabase } from '@/integrations/supabase/client';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { MapPin, Loader2, X } from 'lucide-react';
+import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
+
+interface LocationResult {
+  place_id: number;
+  display_name: string;
+  lat: string;
+  lon: string;
+  address: {
+    city?: string;
+    town?: string;
+    village?: string;
+    state?: string;
+    country?: string;
+    postcode?: string;
+  };
+}
+
+interface SelectedLocation {
+  id?: string;
+  name: string;
+  city?: string;
+  state_province?: string;
+  country: string;
+  postal_code?: string;
+  latitude: number;
+  longitude: number;
+  timezone?: string;
+}
+
+interface LocationSearchProps {
+  onLocationSelect: (location: SelectedLocation) => void;
+  initialLocationId?: string;
+  className?: string;
+}
+
+export function LocationSearch({ onLocationSelect, initialLocationId, className }: LocationSearchProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [results, setResults] = useState<LocationResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [selectedLocation, setSelectedLocation] = useState<SelectedLocation | null>(null);
+  const [showResults, setShowResults] = useState(false);
+  
+  const debouncedSearch = useDebounce(searchQuery, 500);
+
+  // Load initial location if editing
+  useEffect(() => {
+    if (initialLocationId) {
+      loadInitialLocation(initialLocationId);
+    }
+  }, [initialLocationId]);
+
+  const loadInitialLocation = async (locationId: string) => {
+    const { data, error } = await supabase
+      .from('locations')
+      .select('*')
+      .eq('id', locationId)
+      .single();
+
+    if (data && !error) {
+      setSelectedLocation({
+        id: data.id,
+        name: data.name,
+        city: data.city || undefined,
+        state_province: data.state_province || undefined,
+        country: data.country,
+        postal_code: data.postal_code || undefined,
+        latitude: parseFloat(data.latitude?.toString() || '0'),
+        longitude: parseFloat(data.longitude?.toString() || '0'),
+        timezone: data.timezone || undefined,
+      });
+    }
+  };
+
+  const searchLocations = useCallback(async (query: string) => {
+    if (!query || query.length < 3) {
+      setResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&addressdetails=1&limit=5`,
+        {
+          headers: {
+            'User-Agent': 'ThemeParkDatabase/1.0',
+          },
+        }
+      );
+      const data = await response.json();
+      setResults(data);
+      setShowResults(true);
+    } catch (error) {
+      console.error('Error searching locations:', error);
+      setResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (debouncedSearch) {
+      searchLocations(debouncedSearch);
+    } else {
+      setResults([]);
+      setShowResults(false);
+    }
+  }, [debouncedSearch, searchLocations]);
+
+  const handleSelectResult = async (result: LocationResult) => {
+    const latitude = parseFloat(result.lat);
+    const longitude = parseFloat(result.lon);
+    
+    const city = result.address.city || result.address.town || result.address.village;
+    const locationName = city 
+      ? `${city}, ${result.address.state || ''} ${result.address.country}`.trim()
+      : result.display_name;
+
+    // Check if location exists in database
+    const { data: existingLocation } = await supabase
+      .from('locations')
+      .select('*')
+      .eq('latitude', latitude)
+      .eq('longitude', longitude)
+      .maybeSingle();
+
+    let locationData: SelectedLocation;
+
+    if (existingLocation) {
+      locationData = {
+        id: existingLocation.id,
+        name: existingLocation.name,
+        city: existingLocation.city || undefined,
+        state_province: existingLocation.state_province || undefined,
+        country: existingLocation.country,
+        postal_code: existingLocation.postal_code || undefined,
+        latitude: parseFloat(existingLocation.latitude?.toString() || '0'),
+        longitude: parseFloat(existingLocation.longitude?.toString() || '0'),
+        timezone: existingLocation.timezone || undefined,
+      };
+    } else {
+      // Create new location
+      const { data: newLocation, error } = await supabase
+        .from('locations')
+        .insert({
+          name: locationName,
+          city: city || null,
+          state_province: result.address.state || null,
+          country: result.address.country || '',
+          postal_code: result.address.postcode || null,
+          latitude,
+          longitude,
+        })
+        .select()
+        .single();
+
+      if (error || !newLocation) {
+        console.error('Error creating location:', error);
+        return;
+      }
+
+      locationData = {
+        id: newLocation.id,
+        name: newLocation.name,
+        city: newLocation.city || undefined,
+        state_province: newLocation.state_province || undefined,
+        country: newLocation.country,
+        postal_code: newLocation.postal_code || undefined,
+        latitude: parseFloat(newLocation.latitude?.toString() || '0'),
+        longitude: parseFloat(newLocation.longitude?.toString() || '0'),
+        timezone: newLocation.timezone || undefined,
+      };
+    }
+
+    setSelectedLocation(locationData);
+    setSearchQuery('');
+    setResults([]);
+    setShowResults(false);
+    onLocationSelect(locationData);
+  };
+
+  const handleClear = () => {
+    setSelectedLocation(null);
+    setSearchQuery('');
+    setResults([]);
+    setShowResults(false);
+  };
+
+  return (
+    <div className={className}>
+      {!selectedLocation ? (
+        <div className="space-y-2">
+          <div className="relative">
+            <MapPin className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search for a location (city, address, landmark...)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
+            {isSearching && (
+              <Loader2 className="absolute right-3 top-3 h-4 w-4 animate-spin text-muted-foreground" />
+            )}
+          </div>
+
+          {showResults && results.length > 0 && (
+            <Card className="absolute z-50 w-full max-h-64 overflow-y-auto">
+              <div className="divide-y">
+                {results.map((result) => (
+                  <button
+                    key={result.place_id}
+                    onClick={() => handleSelectResult(result)}
+                    className="w-full text-left p-3 hover:bg-accent transition-colors"
+                  >
+                    <div className="flex items-start gap-2">
+                      <MapPin className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{result.display_name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {result.lat}, {result.lon}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </Card>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <Card className="p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3 flex-1">
+                <MapPin className="h-5 w-5 text-primary mt-0.5" />
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium">{selectedLocation.name}</p>
+                  <div className="text-sm text-muted-foreground space-y-1 mt-1">
+                    {selectedLocation.city && <p>City: {selectedLocation.city}</p>}
+                    {selectedLocation.state_province && <p>State/Province: {selectedLocation.state_province}</p>}
+                    <p>Country: {selectedLocation.country}</p>
+                    {selectedLocation.postal_code && <p>Postal Code: {selectedLocation.postal_code}</p>}
+                    <p className="text-xs">
+                      Coordinates: {selectedLocation.latitude.toFixed(6)}, {selectedLocation.longitude.toFixed(6)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleClear}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </Card>
+
+          <ParkLocationMap
+            latitude={selectedLocation.latitude}
+            longitude={selectedLocation.longitude}
+            parkName={selectedLocation.name}
+            className="h-48"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/admin/ParkForm.tsx

@@ -18,6 +18,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useOperators, usePropertyOwners } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { LocationSearch } from './LocationSearch';
 
 const parkSchema = z.object({
   name: z.string().min(1, 'Park name is required'),
@@ -27,6 +28,7 @@ const parkSchema = z.object({
   status: z.string().min(1, 'Status is required'),
   opening_date: z.string().optional(),
   closing_date: z.string().optional(),
+  location_id: z.string().uuid().optional(),
   website_url: z.string().url().optional().or(z.literal('')),
   phone: z.string().optional(),
   email: z.string().email().optional().or(z.literal('')),
@@ -118,6 +120,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
       status: initialData?.status || 'Operating',
       opening_date: initialData?.opening_date || '',
       closing_date: initialData?.closing_date || '',
+      location_id: (initialData as any)?.location_id || undefined,
       website_url: initialData?.website_url || '',
       phone: initialData?.phone || '',
       email: initialData?.email || '',
@@ -281,6 +284,20 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
             </div>
           </div>
 
+          {/* Location */}
+          <div className="space-y-2">
+            <Label>Location</Label>
+            <LocationSearch
+              onLocationSelect={(location) => {
+                setValue('location_id', location.id);
+              }}
+              initialLocationId={watch('location_id')}
+            />
+            <p className="text-sm text-muted-foreground">
+              Search for the park's location using OpenStreetMap
+            </p>
+          </div>
+
           {/* Operator & Property Owner Selection */}
           <div className="space-y-4">
             <h3 className="text-lg font-semibold">Operator & Property Owner</h3>