"use client"

import { useState, useCallback } from "react"
import { LoadScript, Autocomplete, Libraries } from "@react-google-maps/api"

// Định nghĩa kiểu cho kết quả trả về
interface PlaceResult {
  name: string
  lat: number
  lng: number
}

// Khai báo libraries
const libraries: Libraries = ["places"]

const GooglePlacesAutocomplete = () => {
  const [autocomplete, setAutocomplete] = useState<google.maps.places.Autocomplete | null>(null)
  const [suggestions, setSuggestions] = useState<google.maps.places.AutocompletePrediction[]>([])
  const [selectedPlace, setSelectedPlace] = useState<PlaceResult | null>(null)

  // Khi Autocomplete được tải
  const onLoad = (autoC: google.maps.places.Autocomplete) => {
    setAutocomplete(autoC)
  }

  // Khi người dùng nhập vào input
  const onPlaceChanged = () => {
    if (autocomplete) {
      const place = autocomplete.getPlace()
      if (place.geometry && place.geometry.location) {
        const result: PlaceResult = {
          name: place.name || place.formatted_address || "Unknown place",
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        }
        setSelectedPlace(result)
        setSuggestions([]) // Xóa gợi ý sau khi chọn
      }
    }
  }

  // Khi người dùng nhập để lấy gợi ý
  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value
    if (inputValue && autocomplete) {
      const service = new google.maps.places.AutocompleteService()
      service.getPlacePredictions({ input: inputValue }, (predictions, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
          setSuggestions(predictions)
        } else {
          setSuggestions([])
        }
      })
    } else {
      setSuggestions([])
    }
  }

  // Khi người dùng chọn một gợi ý từ danh sách
  const onSuggestionClick = (prediction: google.maps.places.AutocompletePrediction) => {
    const placeService = new google.maps.places.PlacesService(document.createElement("div"))
    placeService.getDetails({ placeId: prediction.place_id, fields: ["name", "geometry"] }, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place && place.geometry) {
        const result: PlaceResult = {
          name: prediction.description,
          lat: place.geometry.location!.lat(),
          lng: place.geometry.location!.lng(),
        }
        setSelectedPlace(result)
        setSuggestions([]) // Ẩn danh sách gợi ý sau khi chọn
        if (autocomplete) {
          autocomplete.set("place", place) // Cập nhật input với lựa chọn
        }
      }
    })
  }

  return (
    <LoadScript
      googleMapsApiKey="AIzaSyDGEh2UPa9bsQpGFmo3KewKA2qLayCXL-M"
      libraries={libraries}>
      <div style={{ position: "relative", width: "300px" }}>
        <Autocomplete
          onLoad={onLoad}
          onPlaceChanged={onPlaceChanged}>
          <input
            type="text"
            placeholder="Tìm kiếm vị trí..."
            onChange={onInputChange}
            style={{
              width: "100%",
              padding: "8px",
              fontSize: "14px",
              borderRadius: "4px",
              border: "1px solid #ccc",
              outline: "none",
            }}
          />
        </Autocomplete>

        {/* Hiển thị danh sách gợi ý */}
        {suggestions.length > 0 && (
          <ul
            style={{
              position: "absolute",
              top: "100%",
              left: 0,
              right: 0,
              background: "#fff",
              border: "1px solid #ccc",
              borderRadius: "4px",
              listStyle: "none",
              padding: 0,
              margin: 0,
              maxHeight: "200px",
              overflowY: "auto",
              zIndex: 1000,
            }}>
            {suggestions.map((suggestion) => (
              <li
                key={suggestion.place_id}
                onClick={() => onSuggestionClick(suggestion)}
                style={{
                  padding: "8px",
                  cursor: "pointer",
                  borderBottom: "1px solid #eee",
                }}
                onMouseOver={(e) => (e.currentTarget.style.backgroundColor = "#f0f0f0")}
                onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "#fff")}>
                {suggestion.description}
              </li>
            ))}
          </ul>
        )}

        {/* Hiển thị kết quả đã chọn */}
        {selectedPlace && (
          <div style={{ marginTop: "10px" }}>
            <p>
              <strong>Địa điểm chọn:</strong> {selectedPlace.name}
            </p>
            <p>
              <strong>Tọa độ:</strong> Lat: {selectedPlace.lat}, Lng: {selectedPlace.lng}
            </p>
          </div>
        )}
      </div>
    </LoadScript>
  )
}

export default GooglePlacesAutocomplete