feat: Add HeadquartersLocationInput component

src/components/admin/DesignerForm.tsx

@@ -12,9 +12,8 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SlugField } from '@/components/ui/slug-field';
 import { Ruler, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitDesignerCreation, submitDesignerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface DesignerFormProps {
 
 export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
+              <HeadquartersLocationInput
-                options={headquarters}
+                value={watch('headquarters_location') || ''}
-                value={watch('headquarters_location')}
+                onChange={(value) => setValue('headquarters_location', value)}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/HeadquartersLocationInput.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, Edit, MapPin, Loader2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface LocationResult {
+  place_id: number;
+  display_name: string;
+  address?: {
+    city?: string;
+    town?: string;
+    village?: string;
+    state?: string;
+    country?: string;
+  };
+}
+
+interface HeadquartersLocationInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function HeadquartersLocationInput({
+  value,
+  onChange,
+  disabled = false,
+  className
+}: HeadquartersLocationInputProps) {
+  const [mode, setMode] = useState<'search' | 'manual'>('search');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [results, setResults] = useState<LocationResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+
+  // Debounced search effect
+  useEffect(() => {
+    if (!searchQuery || searchQuery.length < 2) {
+      setResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        const response = await fetch(
+          `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
+            searchQuery
+          )}&limit=5&addressdetails=1`,
+          {
+            headers: {
+              'User-Agent': 'ThemeParkArchive/1.0'
+            }
+          }
+        );
+        
+        if (response.ok) {
+          const data = await response.json();
+          setResults(data);
+          setShowResults(true);
+        }
+      } catch (error) {
+        console.error('Error searching locations:', error);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  const formatLocation = (result: LocationResult): string => {
+    const { city, town, village, state, country } = result.address || {};
+    const cityName = city || town || village;
+    
+    if (cityName && state && country) {
+      return `${cityName}, ${state}, ${country}`;
+    } else if (cityName && country) {
+      return `${cityName}, ${country}`;
+    } else if (country) {
+      return country;
+    }
+    return result.display_name;
+  };
+
+  const handleSelectLocation = (result: LocationResult) => {
+    const formatted = formatLocation(result);
+    onChange(formatted);
+    setSearchQuery('');
+    setShowResults(false);
+    setResults([]);
+  };
+
+  const handleClear = () => {
+    onChange('');
+    setSearchQuery('');
+    setResults([]);
+    setShowResults(false);
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Tabs value={mode} onValueChange={(val) => setMode(val as 'search' | 'manual')}>
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="search" disabled={disabled}>
+            <Search className="w-4 h-4 mr-2" />
+            Search Location
+          </TabsTrigger>
+          <TabsTrigger value="manual" disabled={disabled}>
+            <Edit className="w-4 h-4 mr-2" />
+            Manual Entry
+          </TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="search" className="space-y-2 mt-4">
+          <div className="relative">
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search for location (e.g., Munich, Germany)..."
+              disabled={disabled}
+              className="pr-10"
+            />
+            {isSearching && (
+              <Loader2 className="w-4 h-4 absolute right-3 top-3 animate-spin text-muted-foreground" />
+            )}
+          </div>
+
+          {showResults && results.length > 0 && (
+            <div className="border rounded-md bg-card max-h-48 overflow-y-auto">
+              {results.map((result) => (
+                <button
+                  key={result.place_id}
+                  type="button"
+                  onClick={() => handleSelectLocation(result)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent hover:text-accent-foreground text-sm flex items-start gap-2 transition-colors"
+                  disabled={disabled}
+                >
+                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0 text-muted-foreground" />
+                  <span className="flex-1">{formatLocation(result)}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {showResults && results.length === 0 && !isSearching && (
+            <p className="text-sm text-muted-foreground px-3 py-2">
+              No locations found. Try a different search term.
+            </p>
+          )}
+
+          {value && (
+            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+              <MapPin className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+              <span className="text-sm flex-1">{value}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleClear}
+                disabled={disabled}
+                className="h-6 px-2"
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            </div>
+          )}
+        </TabsContent>
+        
+        <TabsContent value="manual" className="mt-4">
+          <Input
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Enter location manually..."
+            disabled={disabled}
+          />
+          <p className="text-xs text-muted-foreground mt-2">
+            Enter any location text. For better data quality, use Search mode.
+          </p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/admin/ManufacturerForm.tsx

@@ -12,9 +12,8 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SlugField } from '@/components/ui/slug-field';
 import { Building2, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitManufacturerCreation, submitManufacturerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -59,7 +58,6 @@ interface ManufacturerFormProps {
 
 export function ManufacturerForm({ onSubmit, onCancel, initialData }: ManufacturerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -200,14 +198,13 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
+              <HeadquartersLocationInput
-                options={headquarters}
+                value={watch('headquarters_location') || ''}
-                value={watch('headquarters_location')}
+                onChange={(value) => setValue('headquarters_location', value)}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/OperatorForm.tsx

@@ -12,9 +12,8 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SlugField } from '@/components/ui/slug-field';
 import { FerrisWheel, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitOperatorCreation, submitOperatorUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface OperatorFormProps {
 
 export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
+              <HeadquartersLocationInput
-                options={headquarters}
+                value={watch('headquarters_location') || ''}
-                value={watch('headquarters_location')}
+                onChange={(value) => setValue('headquarters_location', value)}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/PropertyOwnerForm.tsx

@@ -12,9 +12,8 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SlugField } from '@/components/ui/slug-field';
 import { Building2, Save, X } from 'lucide-react';
-import { Combobox } from '@/components/ui/combobox';
-import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { HeadquartersLocationInput } from './HeadquartersLocationInput';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { submitPropertyOwnerCreation, submitPropertyOwnerUpdate } from '@/lib/entitySubmissionHelpers';
@@ -58,7 +57,6 @@ interface PropertyOwnerFormProps {
 
 export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyOwnerFormProps) {
   const { isModerator } = useUserRole();
-  const { headquarters } = useCompanyHeadquarters();
   const { user } = useAuth();
   const navigate = useNavigate();
   
@@ -199,14 +197,13 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>
-              <Combobox
+              <HeadquartersLocationInput
-                options={headquarters}
+                value={watch('headquarters_location') || ''}
-                value={watch('headquarters_location')}
+                onChange={(value) => setValue('headquarters_location', value)}
-                onValueChange={(value) => setValue('headquarters_location', value)}
-                placeholder="Select or type location"
-                searchPlaceholder="Search locations..."
-                emptyText="No locations found"
               />
+              <p className="text-xs text-muted-foreground">
+                Search OpenStreetMap for accurate location data, or manually enter location name.
+              </p>
             </div>
           </div>
 

src/components/admin/index.ts

@@ -1,6 +1,7 @@
 // Admin components barrel exports
 export { AdminPageLayout } from './AdminPageLayout';
 export { DesignerForm } from './DesignerForm';
+export { HeadquartersLocationInput } from './HeadquartersLocationInput';
 export { LocationSearch } from './LocationSearch';
 export { ManufacturerForm } from './ManufacturerForm';
 export { MarkdownEditor } from './MarkdownEditor';