/**
 * 장소 검색 다이얼로그 컴포넌트
 * - 국내: 카카오맵 API
 * - 해외: 구글맵 API
 */
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Search, MapPin, Globe } from "lucide-react";

/**
 * @param {Object} props
 * @param {boolean} props.isOpen - 다이얼로그 열림 여부
 * @param {Function} props.onClose - 닫기 핸들러
 * @param {Function} props.onSelect - 장소 선택 핸들러 ({ name, address, country, lat, lng })
 */
function VenueSearchDialog({ isOpen, onClose, onSelect }) {
  const [region, setRegion] = useState("domestic"); // domestic | overseas
  const [searchQuery, setSearchQuery] = useState("");
  const [results, setResults] = useState([]);
  const [searching, setSearching] = useState(false);
  const [error, setError] = useState(null);

  // 다이얼로그 닫기 시 상태 초기화
  const handleClose = () => {
    setSearchQuery("");
    setResults([]);
    setError(null);
    onClose();
  };

  // 지역 변경 시 결과 초기화
  const handleRegionChange = (newRegion) => {
    setRegion(newRegion);
    setResults([]);
    setError(null);
  };

  // 검색 실행
  const handleSearch = async () => {
    if (!searchQuery.trim()) {
      setResults([]);
      return;
    }

    setSearching(true);
    setError(null);

    try {
      const token = localStorage.getItem("adminToken");

      if (region === "domestic") {
        // 카카오맵 API
        const response = await fetch(
          `/api/admin/kakao/places?query=${encodeURIComponent(searchQuery)}`,
          {
            headers: { Authorization: `Bearer ${token}` },
          }
        );

        if (response.ok) {
          const data = await response.json();
          const places = (data.documents || []).map((place) => ({
            id: place.id,
            name: place.place_name,
            address: place.road_address_name || place.address_name,
            country: "한국",
            lat: parseFloat(place.y),
            lng: parseFloat(place.x),
            category: place.category_name,
          }));
          setResults(places);
        } else {
          setError("검색 중 오류가 발생했습니다.");
        }
      } else {
        // 구글맵 API
        const response = await fetch(
          `/api/admin/google/places?query=${encodeURIComponent(searchQuery)}`,
          {
            headers: { Authorization: `Bearer ${token}` },
          }
        );

        if (response.ok) {
          const data = await response.json();
          const places = (data.results || []).map((place) => ({
            id: place.place_id,
            name: place.name,
            address: place.formatted_address,
            country: extractCountry(place.formatted_address),
            lat: place.geometry?.location?.lat,
            lng: place.geometry?.location?.lng,
            category: place.types?.[0]?.replace(/_/g, " "),
          }));
          setResults(places);
        } else {
          setError("검색 중 오류가 발생했습니다.");
        }
      }
    } catch (err) {
      console.error("장소 검색 오류:", err);
      setError("검색 중 오류가 발생했습니다.");
    } finally {
      setSearching(false);
    }
  };

  // 주소에서 국가 추출 (구글맵용)
  const extractCountry = (address) => {
    if (!address) return "";
    const parts = address.split(", ");
    return parts[parts.length - 1] || "";
  };

  // 장소 선택
  const handleSelectPlace = (place) => {
    onSelect({
      name: place.name,
      address: place.address,
      country: place.country,
      lat: place.lat,
      lng: place.lng,
    });
    handleClose();
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
          onClick={handleClose}
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            className="bg-white rounded-2xl p-6 max-w-lg w-full mx-4 shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            {/* 헤더 */}
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-900">장소 검색</h3>
              <button
                type="button"
                onClick={handleClose}
                className="text-gray-400 hover:text-gray-600"
              >
                <X size={20} />
              </button>
            </div>

            {/* 지역 선택 탭 */}
            <div className="flex gap-2 mb-4">
              <button
                type="button"
                onClick={() => handleRegionChange("domestic")}
                className={`flex-1 py-2.5 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2 ${
                  region === "domestic"
                    ? "bg-primary text-white"
                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                }`}
              >
                <MapPin size={16} />
                국내
              </button>
              <button
                type="button"
                onClick={() => handleRegionChange("overseas")}
                className={`flex-1 py-2.5 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2 ${
                  region === "overseas"
                    ? "bg-primary text-white"
                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                }`}
              >
                <Globe size={16} />
                해외
              </button>
            </div>

            {/* 검색 입력 */}
            <div className="flex gap-2 mb-4">
              <div className="flex-1 relative">
                <Search
                  size={18}
                  className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      handleSearch();
                    }
                  }}
                  placeholder={
                    region === "domestic"
                      ? "장소명을 입력하세요 (예: 올림픽홀)"
                      : "장소명을 입력하세요 (예: Tokyo Dome)"
                  }
                  className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  autoFocus
                />
              </div>
              <button
                type="button"
                onClick={handleSearch}
                disabled={searching}
                className="px-4 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors disabled:opacity-50"
              >
                {searching ? (
                  <motion.div
                    animate={{ rotate: 360 }}
                    transition={{
                      duration: 1,
                      repeat: Infinity,
                      ease: "linear",
                    }}
                  >
                    <Search size={18} />
                  </motion.div>
                ) : (
                  "검색"
                )}
              </button>
            </div>

            {/* 에러 메시지 */}
            {error && (
              <div className="mb-4 p-3 bg-red-50 text-red-600 text-sm rounded-lg">
                {error}
              </div>
            )}

            {/* 검색 결과 */}
            <div className="max-h-80 overflow-y-auto">
              {results.length > 0 ? (
                <div className="space-y-2">
                  {results.map((place) => (
                    <button
                      key={place.id}
                      type="button"
                      onClick={() => handleSelectPlace(place)}
                      className="w-full p-3 text-left hover:bg-gray-50 rounded-xl flex items-start gap-3 border border-gray-100 transition-colors"
                    >
                      <MapPin
                        size={18}
                        className="text-gray-400 mt-0.5 flex-shrink-0"
                      />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-gray-900">{place.name}</p>
                        <p className="text-sm text-gray-500 truncate">
                          {place.address}
                        </p>
                        {place.category && (
                          <p className="text-xs text-gray-400 mt-1">
                            {place.category}
                          </p>
                        )}
                      </div>
                      {region === "overseas" && place.country && (
                        <span className="text-xs text-gray-400 flex-shrink-0">
                          {place.country}
                        </span>
                      )}
                    </button>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">
                  <MapPin size={32} className="mx-auto mb-2 text-gray-300" />
                  <p>장소명을 입력하고 검색해주세요</p>
                </div>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default VenueSearchDialog;