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';
import { handleNonCriticalError } from '@/lib/errorHandler';

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): React.JSX.Element {
  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 (): Promise<void> => {
      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() as LocationResult[];
          setResults(data);
          setShowResults(true);
        }
      } catch (error) {
        handleNonCriticalError(error, {
          action: 'Search headquarters locations',
          metadata: { query: searchQuery }
        });
      } 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): void => {
    const formatted = formatLocation(result);
    onChange(formatted);
    setSearchQuery('');
    setShowResults(false);
    setResults([]);
  };

  const handleClear = (): void => {
    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>
  );
}