"use client"

import { useState, useEffect } from "react"
import AddressAutocomplete, { AddressResult } from "./address-autocomplete"
import { Input } from "./input"
import { MapPin, AlertCircle } from "lucide-react"
import { cn } from "@/lib/utils"
import { Alert, AlertDescription } from "./alert"

// Re-export the AddressResult type for convenience
export type { AddressResult }

interface SmartAddressInputProps {
  value?: string
  onChange?: (result: AddressResult) => void
  onAddressChange?: (address: string) => void
  placeholder?: string
  className?: string
  disabled?: boolean
}

const SmartAddressInput: React.FC<SmartAddressInputProps> = (props) => {
  const [useAutocomplete, setUseAutocomplete] = useState(true)
  const [isGoogleMapsAvailable, setIsGoogleMapsAvailable] = useState(false)
  const [isChecking, setIsChecking] = useState(true)

  useEffect(() => {
    // Check if Google Maps API key is available
    const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
    const hasApiKey = apiKey && apiKey !== "your-google-maps-api-key-here"
    
    console.log('SmartAddressInput - Checking Google Maps API key:', hasApiKey ? 'Found' : 'Not found')
    
    setIsGoogleMapsAvailable(!!hasApiKey)
    setUseAutocomplete(!!hasApiKey)
    setIsChecking(false)
  }, [])

  // Show loading state while checking
  if (isChecking) {
    return (
      <div className="relative">
        <MapPin className="absolute left-3 top-3 h-4 w-4 text-muted-foreground z-10" />
        <Input 
          placeholder="Loading..."
          disabled
          className={cn("pl-10", props.className)}
        />
      </div>
    )
  }

  // If Google Maps is available, use autocomplete
  if (isGoogleMapsAvailable && useAutocomplete) {
    return (
      <div className="space-y-2">
        <div className="relative">
          <MapPin className="absolute left-3 top-3 h-4 w-4 text-muted-foreground z-10" />
          <AddressAutocomplete 
            {...props} 
            className={cn("pl-10", props.className)}
          />
        </div>
        <p className="text-xs text-slate-500">
          Start typing and select from dropdown for automatic city, state, and ZIP code filling
        </p>
      </div>
    )
  }

  // Fallback: manual input (just street address - city/state/zip handled by parent form)
  return (
    <div className="space-y-2">
      <Alert className="border-blue-200 bg-blue-50">
        <AlertCircle className="h-4 w-4 text-blue-600" />
        <AlertDescription className="text-blue-800 text-xs">
          <strong>Note:</strong> Address autocomplete requires Google Maps API configuration. 
          Please enter your address manually below.
        </AlertDescription>
      </Alert>
      <div className="relative">
        <MapPin className="absolute left-3 top-3 h-4 w-4 text-muted-foreground z-10" />
        <Input
          value={props.value || ""}
          onChange={(e) => {
            if (props.onAddressChange) {
              props.onAddressChange(e.target.value)
            }
          }}
          placeholder={props.placeholder || "Enter street address"}
          className={cn("pl-10", props.className)}
          disabled={props.disabled}
        />
      </div>
      <p className="text-xs text-slate-500">
        Enter street address above, then fill city, state, and ZIP code in the fields below
      </p>
    </div>
  )
}

export default SmartAddressInput