"use client";

import React, { useState, useEffect, useRef } from "react";
import { GeoLocation, fetchZipSuggestions } from "./geonames";
import { FormInput } from "../form/forms";

interface Props {
  onSelect?: (location: GeoLocation | null) => void;
  defaultValue?: GeoLocation | null;
}

const ZipCodeLookup: React.FC<Props> = ({ onSelect, defaultValue }) => {
  const [input, setInput] = useState("");
  const [suggestions, setSuggestions] = useState<GeoLocation[]>([]);
  const [selected, setSelected] = useState<GeoLocation | null>(null);
  const [loading, setLoading] = useState(false);
  const [showDropdown, setShowDropdown] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (input.trim().length < 3) {
      setSuggestions([]);
      return;
    }

    setLoading(true);
    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(async () => {
      const data = await fetchZipSuggestions(input);
      setSuggestions(data || []);
      setShowDropdown(true);
      setLoading(false);
    }, 300);
  }, [input]);



useEffect(() => {
  if (defaultValue) {
    setSelected(defaultValue);
    setInput(
      `${defaultValue.postalCode || ""} - ${defaultValue.adminName1 || ""}, ${defaultValue.countryCode || ""}`
    );
  } else {
    setSelected(null);
    setInput("");
  }
}, [defaultValue]);





  const handleSelect = (loc: GeoLocation) => {
    setInput(`${loc.postalCode} - ${loc.adminName1}, ${loc.countryCode}`);
    setSelected(loc);
    setShowDropdown(false);
    onSelect?.(loc);
  };

  const handleClear = () => {
    setInput("");
    setSuggestions([]);
    setSelected(null);
    setShowDropdown(false);
    onSelect?.(null);
  };

  return (
    <div className="grid grid-cols-1">
      <div className="flex w-full justify-between items-center align-middle gap-2">
        <div className="text-sm font-medium">Find your location</div>
        <div className="">
          {input && (
            <button onClick={handleClear} className="btn-link">
              Clear
            </button>
          )}
        </div>
      </div>
      <div className="grid grid-cols-1 items-center gap-5 align-middle">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type ZIP/PIN (e.g. 110001)"
          className="flex-1 border-b-1 py-2 placeholder:text-sm text-lg font-medium"
        />
      </div>
      <div className="relative z-10 flex w-full flex-col">
        {loading && <p className="mt-1 text-sm text-gray-500">Searching...</p>}

        {showDropdown && suggestions.length > 0 && (
          <ul className="absolute z-20 mt-1 max-h-40 w-full overflow-y-auto rounded border bg-white">
            {suggestions.map((loc, idx) => (
              <li
                key={idx}
                onClick={() => handleSelect(loc)}
                className="cursor-pointer px-4 py-2 text-xs font-medium hover:bg-blue-100"
              >
                {loc.placeName}
                {", "}
                {loc.adminName3}
                {", "}
                {loc.adminName1}
                {", "}
                {loc.countryCode}
              </li>
            ))}
          </ul>
        )}
        <div className="relative">
          {/* {showDropdown && suggestions.length === 0 && !loading && (
            <div className="absolute z-10 mt-1 bg-white py-2 text-sm text-gray-500">
              No results found.
            </div>
          )} */}

          {selected && (
            <div className="bg-white py-2 text-teal-600">
              <p id="get_location_result" className="text-xs font-medium">
                {selected.placeName}
                {", "}
                {selected.adminName3}
                {", "}
                {selected.adminName1}
                {" - "}
                {selected.postalCode}
                {", "}
                {selected.countryCode}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ZipCodeLookup;