"use client"

import { useState, useEffect, useRef } from "react"
import { useFacilitySearch } from "@/hooks/use-facility-search"
import { Button } from "@/components/ui/button"
import { FavoriteButton } from "@/components/ui/favorite-button"
import { ShareButton } from "@/components/ui/share-button"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Slider } from "@/components/ui/slider"
import {
  Search,
  MapPin,
  Filter,
  Star,
  Heart,
  Phone,
  SlidersHorizontal,
  Mail,
  Globe,
  X,
  ArrowUpDown,
  Target,
  Grid3X3,
  List,
  Map,
} from "lucide-react"
import Link from "next/link"
import { useSearchParams, useRouter } from "next/navigation"
import { LocationPicker } from "@/components/ui/location-picker"
import dynamic from "next/dynamic"
import { useAuth } from "@/hooks/use-auth"
import { DataAPI } from "@/lib/data-api"

// Dynamically import Google Maps to avoid SSR issues
const GoogleMapComponent = dynamic(
  () => import("@/components/ui/google-map"),
  {
    ssr: false,
    loading: () => (
      <div className="h-96 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
          <p className="text-sm text-slate-600">Loading map...</p>
        </div>
      </div>
    )
  }
)

import { formatLocationDisplay } from '@/lib/location-utils'

export default function SearchPage() {
  const { isAuthenticated } = useAuth()
  const [searchQuery, setSearchQuery] = useState("")
  const initialLoadRef = useRef(true)
  const [viewMode, setViewMode] = useState<"list" | "map" | "grid">("grid")
  const [showFilters, setShowFilters] = useState(false)
  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)
  const [priceRange, setPriceRange] = useState<[number, number]>([2000, 6000])
  const [selectedCareTypes, setSelectedCareTypes] = useState<string[]>([])
  const [selectedServiceTypes, setSelectedServiceTypes] = useState<string[]>([])
  const [selectedAmenities, setSelectedAmenities] = useState<string[]>([])
  const [sortBy, setSortBy] = useState("nearest")
  const [favorites, setFavorites] = useState<string[]>([])
  const [selectedFacility, setSelectedFacility] = useState<string | null>(null)
  const [minCapacity, setMinCapacity] = useState(0)
  const [maxCapacity, setMaxCapacity] = useState(1000)
  const [alzheimerCertified, setAlzheimerCertified] = useState(false)
  const [facilityLicensed, setFacilityLicensed] = useState(false)
  const [facilityCertified, setFacilityCertified] = useState(false)
  const [hasEmail, setHasEmail] = useState(false)
  const [hasFax, setHasFax] = useState(false)
  const [selectedCounties, setSelectedCounties] = useState<string[]>([])
  const [selectedStateRegions, setSelectedStateRegions] = useState<string[]>([])
  const [selectedHhscOffices, setSelectedHhscOffices] = useState<string[]>([])
  const [administratorSearch, setAdministratorSearch] = useState("")
  const [licenseSearch, setLicenseSearch] = useState("")
  const [distanceFilter, setDistanceFilter] = useState(100)

  // Advanced location filtering states
  const [selectedLocation, setSelectedLocation] = useState<{
    address: string
    city?: string
    state?: string
    zipCode?: string
    coordinates?: { lat: number; lng: number }
  } | null>(null)
  const [useCurrentLocation, setUseCurrentLocation] = useState(false)
  const [manualLocation, setManualLocation] = useState<{ lat: number; lng: number } | null>(null)

  const searchParams = useSearchParams()
  const router = useRouter()

  // Use real facility search hook
  const {
    data: searchData,
    loading,
    error,
    searchFacilities,
    userLocation,
    requestLocation
  } = useFacilitySearch()

  const careTypes = ["Assisted Living", "Memory Care", "Boarding Home", "Skilled Nursing"]
  const serviceTypes = ["TYPE A", "TYPE B", "TYPE C"]

  // Map user-friendly care type names to database programType values
  // Database may have variations like "ALF", "Assisted Living Facility", etc.
  const careTypeMapping: Record<string, string[]> = {
    "Assisted Living": ["Assisted Living", "ALF", "Assisted Living Facility", "Type A - Assisted Living"],
    "Memory Care": ["Memory Care", "Alzheimer Care", "Dementia Care", "Memory Care Unit"],
    "Boarding Home": ["Boarding Home", "Personal Care Home", "Residential Care", "Type B", "Adult Foster Care"],
    "Skilled Nursing": ["Skilled Nursing", "SNF", "Skilled Nursing Facility", "Nursing Home", "Nursing Facility"]
  }

  // Get facilities from search data or empty array
  const facilities = searchData?.facilities || []
  const totalFacilities = searchData?.pagination?.total || 0

  // Favorite status map for the current grid
  const [favoriteStatusMap, setFavoriteStatusMap] = useState<Record<string, boolean>>({})

  // Transform facilities for map component
  const transformFacilityForMap = (facility: any) => ({
    id: facility._id || facility.id,
    name: facility.name,
    type: facility.serviceType || facility.type || 'Senior Care',
    location: `${facility.city || facility.location?.city}, ${facility.state || facility.location?.state}`,
    distance: facility.distance ? `${facility.distance.toFixed(1)} miles` : null,
    rating: facility.rating || 0,
    reviewCount: facility.reviewCount || 0,
    priceRange: facility.pricing?.min && facility.pricing?.max
      ? `$${facility.pricing.min.toLocaleString()} - $${facility.pricing.max.toLocaleString()}`
      : undefined,
    startingPrice: facility.pricing?.min || 0,
    image: facility.images?.[0] || '/placeholder.jpg',
    amenities: facility.amenities || [],
    verified: facility.verified || false,
    featured: facility.featured || false,
    coordinates: {
      lat: facility.location?.coordinates?.lat || facility.coordinates?.lat || null,
      lng: facility.location?.coordinates?.lng || facility.coordinates?.lng || null
    }
  })

  const mapFacilities = facilities.map(transformFacilityForMap)

  // Shared function to parse search query
  const parseSearchQuery = (query: string) => {
    if (!query) return { query: undefined, zipCode: undefined, city: undefined, state: undefined }

    const trimmedQuery = query.trim()

    // Check if it's a ZIP code (5 digits or 5+4 format)
    const zipCodeRegex = /^\d{5}(-\d{4})?$/
    if (zipCodeRegex.test(trimmedQuery)) {
      return { zipCode: trimmedQuery, query: undefined, city: undefined, state: undefined }
    }

    // Check if it's a state abbreviation (2 letters)
    const stateRegex = /^[A-Za-z]{2}$/
    if (stateRegex.test(trimmedQuery)) {
      return { state: trimmedQuery.toUpperCase(), query: undefined, zipCode: undefined, city: undefined }
    }

    // Check if it contains state abbreviation at the end (e.g., "Dallas, TX")
    const cityStateRegex = /^(.+),\s*([A-Za-z]{2})$/
    const cityStateMatch = trimmedQuery.match(cityStateRegex)
    if (cityStateMatch) {
      return {
        city: cityStateMatch[1].trim(),
        state: cityStateMatch[2].toUpperCase(),
        query: undefined,
        zipCode: undefined
      }
    }

    // Otherwise, treat as general query (city name or facility name)
    return { query: trimmedQuery, zipCode: undefined, city: undefined, state: undefined }
  }

  // Drop batch status call; API now returns isFavorite and favoritesCount
  useEffect(() => {
    const status: Record<string, boolean> = {}
    facilities.forEach((f: any) => {
      const id = f.id || f._id
      if (!id) return
      status[id] = !!f.isFavorite
    })
    setFavoriteStatusMap(status)
  }, [facilities])

  // Handle URL parameters and initial search
  useEffect(() => {
    // Only process URL parameters on initial load to avoid overriding user input
    if (initialLoadRef.current) {
      let shouldSearch = false
      let searchFilters: any = {
        sortBy: 'nearest',
        limit: 100
      }

      // Handle search query parameter
      const queryParam = searchParams?.get("q")
      if (queryParam) {
        console.log('🔍 Setting search query from URL on initial load:', queryParam)
        setSearchQuery(queryParam)
        const parsedSearch = parseSearchQuery(queryParam)
        searchFilters = { ...searchFilters, ...parsedSearch }
        shouldSearch = true
      }

      // Handle care types from URL (e.g., /search?care=Assisted%20Living or care=Assisted%20Living,Memory%20Care)
      const multi = searchParams?.getAll("care") || []
      const single = searchParams?.get("care")
      const raw = multi.length ? multi : single ? [single] : []
      const values = raw
        .flatMap((v) => v.split(","))
        .map((v) => v.trim())
        .filter((v) => v.length > 0)
      const valid = values.filter((v) => careTypes.includes(v))

      if (valid.length) {
        console.log('🔍 Setting care types from URL:', valid)
        setSelectedCareTypes(valid)
        // Expand care types to include all database variations
        const expandedCareTypes = valid.flatMap(ct => careTypeMapping[ct] || [ct])
        console.log('🔍 Expanded care types for search:', expandedCareTypes)
        searchFilters.careTypes = expandedCareTypes
        shouldSearch = true
      }

      // Trigger initial search with all URL parameters
      if (shouldSearch) {
        console.log('🔍 Triggering initial search with filters:', searchFilters)
        setTimeout(() => {
          searchFacilities(searchFilters)
        }, 100)
      } else {
        // No URL parameters, load all facilities
        console.log('🔍 No URL parameters, loading all facilities')
        searchFacilities({
          sortBy: 'nearest',
          limit: 100
        })
      }

      // Mark initial load as complete
      initialLoadRef.current = false
    }
  }, [searchParams, parseSearchQuery, searchFacilities, careTypes])

  // Trigger search when care types change (after initial load)
  useEffect(() => {
    if (!initialLoadRef.current && selectedCareTypes.length > 0) {
      console.log('🔍 Care type changed, triggering search:', selectedCareTypes)
      handleSearchSubmit()
    }
  }, [selectedCareTypes])

  const handleSearchSubmit = (e?: React.FormEvent) => {
    if (e) e.preventDefault()

    console.log('🔍 Search button clicked with query:', searchQuery)

    const parsedSearch = parseSearchQuery(searchQuery)
    console.log('🔍 Parsed search:', parsedSearch)

    // Determine location coordinates for proximity search
    const locationCoords = useCurrentLocation ? userLocation :
      selectedLocation?.coordinates ? selectedLocation.coordinates :
        manualLocation ? manualLocation : null

    // Expand care types to include all database variations
    const expandedCareTypes = selectedCareTypes.length > 0
      ? selectedCareTypes.flatMap(ct => careTypeMapping[ct] || [ct])
      : undefined

    console.log('🔍 Original care types:', selectedCareTypes)
    console.log('🔍 Expanded care types for API:', expandedCareTypes)

    const filters = {
      ...parsedSearch, // This will include query, zipCode, city, or state based on input
      // Override with advanced location filters if set
      ...(selectedLocation?.city && { city: selectedLocation.city }),
      ...(selectedLocation?.state && { state: selectedLocation.state }),
      ...(selectedLocation?.zipCode && { zipCode: selectedLocation.zipCode }),
      careTypes: expandedCareTypes,
      serviceTypes: selectedServiceTypes.length > 0 ? selectedServiceTypes : undefined,
      county: selectedCounties.length > 0 ? selectedCounties[0] : undefined,
      stateRegion: selectedStateRegions.length > 0 ? selectedStateRegions[0] : undefined,
      hhscSubOffice: selectedHhscOffices.length > 0 ? selectedHhscOffices[0] : undefined,
      administrator: administratorSearch || undefined,
      licenseNumber: licenseSearch || undefined,
      minCapacity: minCapacity > 0 ? minCapacity : undefined,
      maxCapacity: maxCapacity < 1000 ? maxCapacity : undefined,
      alzheimerCertified: alzheimerCertified || undefined,
      facilityLicensed: facilityLicensed || undefined,
      facilityCertified: facilityCertified || undefined,
      hasEmail: hasEmail || undefined,
      hasFax: hasFax || undefined,
      // Advanced location filtering
      radius: (locationCoords && distanceFilter < 100) ? distanceFilter : undefined,
      sortBy,
      limit: 100 // Show more facilities initially
    }

    console.log('🔍 Search filters:', filters)

    // Pass location coordinates if available for proximity search
    searchFacilities(filters, locationCoords || undefined)
  }

  const handlePopularCare = (careType: string) => {
    setSelectedCareTypes([careType])
    router.push(`/search?care=${encodeURIComponent(careType)}`)
  }

  const toggleFavorite = (facilityId: string) => {
    setFavorites((prev) => (prev.includes(facilityId) ? prev.filter((id) => id !== facilityId) : [...prev, facilityId]))
  }

  const handleFacilitySelect = (facilityId: string | number | null) => {
    setSelectedFacility(facilityId ? String(facilityId) : null)
  }

  const handleCareTypeChange = (careType: string, checked: boolean) => {
    setSelectedCareTypes((prev) => (checked ? [...prev, careType] : prev.filter((type) => type !== careType)))
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30 relative">
      <Header />
      {/*  */}
      {/* Hero Search Section */}
      <section className="w-full bg-gradient-to-br from-[#3F5CEA]/10 to-[#09183D]/5 border-b">
        <div className="container mx-auto px-4 py-16">
          <div className="max-w-5xl mx-auto text-center">
            <h1 className="font-primary text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-slate-900 leading-tight">
              {selectedCareTypes.length > 0 ? (
                <>
                  Find <span className="text-blue-600">{selectedCareTypes[0]}</span>
                  <br />
                  <span className="text-slate-700">Facilities Near You</span>
                </>
              ) : (
                <>
                  Find Your Perfect
                  <br />
                  <span className="text-blue-600">Senior Care Community</span>
                </>
              )}
            </h1>
            <p className="text-xl md:text-2xl text-slate-600 mb-10 leading-relaxed">
              {selectedCareTypes.length > 0
                ? "Enter your location to find facilities in your area"
                : "Discover trusted care facilities with confidence"
              }
            </p>

            {/* Enhanced Search Bar */}
            <form onSubmit={handleSearchSubmit} className="bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/50 p-8">
              <div className="flex flex-col lg:flex-row gap-4">
                <div className="flex-1 relative">
                  <Search className="absolute left-5 top-1/2 transform -translate-y-1/2 text-slate-400 h-6 w-6" />
                  <input
                    type="text"
                    placeholder="Enter ZIP code, city, or state (e.g., 77304, Dallas, TX)"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-14 pr-6 py-5 text-lg md:text-xl border-2 border-slate-200 rounded-2xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-500/10 transition-all duration-200 bg-white shadow-sm hover:shadow-md"
                  />
                </div>
                <button
                  type="submit"
                  className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-10 py-5 text-lg md:text-xl font-bold rounded-2xl transition-all duration-200 flex items-center justify-center gap-3 shadow-lg hover:shadow-xl hover:-translate-y-0.5 min-w-[200px]"
                >
                  <Search className="h-6 w-6" />
                  Search Facilities
                </button>
              </div>
              <div className="flex items-center justify-center mt-4 text-sm text-slate-500">
                <div className="w-4 h-4 bg-green-100 rounded-full flex items-center justify-center mr-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                </div>
                Your privacy is protected - we never sell your personal data
              </div>
            </form>

            {/* Selected Care Type Display */}
            {selectedCareTypes.length > 0 && (
              <div className="max-w-5xl mx-auto mt-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border-2 border-blue-200 p-6">
                <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center">
                      <span className="text-2xl">
                        {selectedCareTypes[0] === "Assisted Living" && "🏡"}
                        {selectedCareTypes[0] === "Memory Care" && "🧠"}
                        {selectedCareTypes[0] === "Boarding Home" && "🌟"}
                        {selectedCareTypes[0] === "Skilled Nursing" && "🏥"}
                      </span>
                    </div>
                    <div>
                      <p className="text-sm text-slate-600 font-medium">Searching for</p>
                      <p className="text-xl md:text-2xl font-bold text-slate-900">{selectedCareTypes[0]}</p>
                    </div>
                  </div>
                  <button
                    onClick={() => {
                      setSelectedCareTypes([])
                      router.push('/search')
                    }}
                    className="text-sm text-slate-600 hover:text-slate-900 font-medium underline"
                  >
                    Change care type
                  </button>
                </div>
              </div>
            )}

            {/* Care Type Selection - Only show if no care type selected */}
            {selectedCareTypes.length === 0 && (
              <div className="max-w-5xl mx-auto mt-12">
                <div className="text-center mb-6">
                  <h3 className="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Select Care Type</h3>
                  <p className="text-slate-600">Choose the type of care you're looking for</p>
                </div>
                <div className="flex flex-wrap justify-center gap-4">
                  {[
                    { name: "Assisted Living", color: "from-blue-500 to-cyan-500", icon: "🏡" },
                    { name: "Memory Care", color: "from-purple-500 to-pink-500", icon: "🧠" },
                    { name: "Boarding Home", color: "from-green-500 to-emerald-500", icon: "🌟" },
                    { name: "Skilled Nursing", color: "from-red-500 to-orange-500", icon: "🏥" },
                  ].map((filter) => (
                    <button
                      key={filter.name}
                      onClick={() => handlePopularCare(filter.name)}
                      className={`group px-6 py-4 bg-gradient-to-r ${filter.color} text-white rounded-2xl transition-all duration-300 font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 flex items-center gap-3 min-w-[180px] justify-center`}
                    >
                      <span className="text-xl group-hover:scale-110 transition-transform duration-200">{filter.icon}</span>
                      <span className="text-sm md:text-base">{filter.name}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <div className="container mx-auto px-4 py-8 relative">
        {/* Results Header */}
        <div className="bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/60 p-8 mb-8">
          <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-4">
              {loading ? (
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                  </div>
                  <div>
                    <span className="text-2xl font-bold text-slate-800 block">Searching...</span>
                    <span className="text-sm text-slate-600">Finding the best care options</span>
                  </div>
                </div>
              ) : error ? (
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <X className="h-6 w-6 text-red-600" />
                  </div>
                  <div>
                    <span className="text-2xl font-bold text-red-600 block">Search Error</span>
                    <span className="text-sm text-slate-600">Please try again</span>
                  </div>
                </div>
              ) : (
                <div className="flex items-center gap-3">
                  <div className="min-w-[3rem] h-12 px-3 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center">
                    <span className="text-lg font-bold text-white whitespace-nowrap">{totalFacilities.toLocaleString()}</span>
                  </div>
                  <div>
                    <span className="text-2xl font-bold text-slate-800 block">Facilities Found</span>
                    <span className="text-sm text-slate-600">in your search area</span>
                  </div>
                </div>
              )}
            </div>

            <div className="flex flex-wrap items-center gap-4">
              {/* View Mode Toggle */}
              <div className="flex bg-gradient-to-r from-slate-50 to-slate-100 border-2 border-slate-200 rounded-2xl p-2 shadow-lg">
                <button
                  onClick={() => setViewMode("grid")}
                  className={`px-4 py-3 rounded-xl transition-all duration-300 flex items-center gap-2 font-medium ${viewMode === "grid"
                      ? "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg transform scale-105"
                      : "text-slate-600 hover:text-slate-800 hover:bg-white/80 hover:shadow-md"
                    }`}
                  title="Grid View"
                >
                  <Grid3X3 className="h-5 w-5" />
                  <span className="hidden sm:inline text-sm">Grid</span>
                </button>
                <button
                  onClick={() => setViewMode("list")}
                  className={`px-4 py-3 rounded-xl transition-all duration-300 flex items-center gap-2 font-medium ${viewMode === "list"
                      ? "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg transform scale-105"
                      : "text-slate-600 hover:text-slate-800 hover:bg-white/80 hover:shadow-md"
                    }`}
                  title="List View"
                >
                  <List className="h-5 w-5" />
                  <span className="hidden sm:inline text-sm">List</span>
                </button>
                <button
                  onClick={() => setViewMode("map")}
                  className={`px-4 py-3 rounded-xl transition-all duration-300 flex items-center gap-2 font-medium ${viewMode === "map"
                      ? "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg transform scale-105"
                      : "text-slate-600 hover:text-slate-800 hover:bg-white/80 hover:shadow-md"
                    }`}
                  title="Map View"
                >
                  <Map className="h-5 w-5" />
                  <span className="hidden sm:inline text-sm">Map</span>
                </button>
              </div>

              <button
                onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 hover:-translate-y-0.5"
              >
                <SlidersHorizontal className="h-5 w-5" />
                <span className="hidden sm:inline">{showAdvancedFilters ? "Hide" : "Show"}</span>
                <span className="sm:hidden">Filters</span>
                <span className="hidden sm:inline">Advanced Filters</span>
              </button>
            </div>
          </div>
        </div>

        {/* Advanced Filters Panel */}
        {showAdvancedFilters && (
          <div className="bg-white rounded-xl shadow-lg border border-blue-200/50 overflow-hidden mb-8">
            <div className="p-6 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-indigo-50">
              <div className="flex items-center justify-between">
                <h3 className="text-2xl lg:text-3xl font-bold text-slate-900 flex items-center gap-2">
                  <SlidersHorizontal className="h-7 w-7" />
                  Advanced Filters
                </h3>
                <button
                  onClick={() => setShowAdvancedFilters(false)}
                  className="text-slate-600 hover:text-slate-900"
                >
                  <X className="h-6 w-6" />
                </button>
              </div>
            </div>

            <div className="p-6 space-y-8">
              {/* Care Type Filter Section */}
              <div className="border-b border-slate-200 pb-6">
                <h4 className="font-semibold text-slate-900 mb-4 flex items-center text-lg">
                  🏥 Care Type
                </h4>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                  {careTypes.map((careType) => (
                    <label
                      key={careType}
                      className={`flex items-center space-x-3 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 ${selectedCareTypes.includes(careType)
                          ? "border-blue-500 bg-blue-50"
                          : "border-slate-200 hover:border-blue-300 hover:bg-slate-50"
                        }`}
                    >
                      <Checkbox
                        checked={selectedCareTypes.includes(careType)}
                        onCheckedChange={(checked) => handleCareTypeChange(careType, !!checked)}
                        className="border-2"
                      />
                      <span className="text-sm font-medium text-slate-700 flex-1">{careType}</span>
                      <span className="text-lg">
                        {careType === "Assisted Living" && "🏡"}
                        {careType === "Memory Care" && "🧠"}
                        {careType === "Boarding Home" && "🌟"}
                        {careType === "Skilled Nursing" && "🏥"}
                      </span>
                    </label>
                  ))}
                </div>
              </div>

              {/* Location Filter Section */}
              <div className="border-b border-slate-200 pb-6">
                <h4 className="font-semibold text-slate-900 mb-4 flex items-center text-lg">
                  📍 Location & Distance
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  {/* Location Picker */}
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      Search Location
                    </label>
                    <LocationPicker
                      placeholder="Enter city, state, or ZIP code"
                      value={selectedLocation?.address || ""}
                      onLocationSelect={(location) => {
                        setSelectedLocation(location.address ? location : null)
                        setUseCurrentLocation(false)
                      }}
                      onCurrentLocation={() => {
                        setUseCurrentLocation(true)
                        setSelectedLocation(null)
                        requestLocation()
                      }}
                      className="w-full"
                    />
                    {selectedLocation && (
                      <div className="mt-2 text-sm text-green-600 flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        Selected: {selectedLocation.address}
                      </div>
                    )}
                    {useCurrentLocation && userLocation && (
                      <div className="mt-2 text-sm text-blue-600 flex items-center gap-1">
                        <Target className="h-4 w-4" />
                        Using current location
                      </div>
                    )}
                    {!selectedLocation && !useCurrentLocation && (
                      <div className="mt-2 text-sm text-slate-500">
                        No location selected - showing all facilities
                      </div>
                    )}
                  </div>

                  {/* Distance Filter */}
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">
                      Search Radius: {distanceFilter === 100 ? "No limit" : `${distanceFilter} miles`}
                    </label>
                    <Slider
                      value={[distanceFilter]}
                      onValueChange={([value]) => setDistanceFilter(value)}
                      max={100}
                      min={5}
                      step={5}
                      className="w-full"
                    />
                    <div className="flex justify-between text-xs text-slate-500 mt-1">
                      <span>5 miles</span>
                      <span>No limit</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Results Section */}
        <div className="space-y-6">
          {loading && (
            <div className="text-center py-16">
              <div className="w-20 h-20 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
              <p className="text-2xl font-semibold text-slate-700 mb-2">Searching facilities...</p>
              <p className="text-slate-500">Finding the perfect care options for you</p>
            </div>
          )}

          {error && (
            <div className="text-center py-16">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <X className="h-8 w-8 text-red-600" />
              </div>
              <p className="text-2xl font-semibold text-red-600 mb-2">Search Error</p>
              <p className="text-slate-500">Please try again or adjust your search criteria</p>
            </div>
          )}

          {!loading && !error && facilities.length === 0 && (
            <div className="text-center py-16">
              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Search className="h-8 w-8 text-gray-400" />
              </div>
              <p className="text-2xl font-semibold text-slate-700 mb-2">No facilities found</p>
              <p className="text-slate-500">Try adjusting your search criteria or expanding your search area</p>
            </div>
          )}

          {!loading && !error && facilities.length > 0 && (
            <>
              {/* Grid View */}
              {viewMode === "grid" && (
                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
                  {facilities.map((facility) => (
                    <Card key={facility.id} className="group overflow-hidden hover:shadow-2xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-1">
                      <div className="relative">
                        <div className="h-48 bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
                          <div className="text-center">
                            <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-md">
                              <Heart className="h-8 w-8 text-blue-600" />
                            </div>
                            <p className="text-sm font-medium text-slate-600">Senior Care Facility</p>
                          </div>
                        </div>
                        <div className="absolute top-4 right-4">
                          <FavoriteButton facilityId={facility.id} initial={!!favoriteStatusMap[facility.id]} count={(facility as any).favoritesCount} compact />
                        </div>
                        <div className="absolute top-4 left-4 flex flex-col gap-2">
                          {(facility as any).featured && (
                            <Badge className="bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 text-white hover:from-yellow-600 hover:via-orange-600 hover:to-red-600 shadow-lg animate-pulse">
                              <Star className="h-3 w-3 mr-1 fill-white" />
                              FEATURED
                            </Badge>
                          )}
                          {facility.verified && (
                            <Badge className="bg-green-600 hover:bg-green-600">
                              ✓ Verified
                            </Badge>
                          )}
                        </div>
                      </div>

                      <CardContent className="p-6">
                        <div className="mb-4">
                          <h3 className="text-xl font-bold text-slate-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
                            {facility.name}
                          </h3>

                          <div className="flex items-center text-slate-600 mb-2">
                            <MapPin className="h-4 w-4 mr-2 text-blue-500" />
                            <span className="text-sm">
                              {formatLocationDisplay(facility)}
                            </span>
                          </div>

                          <div className="flex items-center text-slate-600 mb-3">
                            <Phone className="h-4 w-4 mr-2 text-green-500" />
                            <span className="text-sm font-medium">{facility.phone}</span>
                          </div>

                          {facility.rating > 0 && (
                            <div className="flex items-center mb-3">
                              <div className="flex mr-2">
                                {[...Array(5)].map((_, i) => (
                                  <Star
                                    key={i}
                                    className={`h-4 w-4 ${i < Math.floor(facility.rating)
                                        ? "text-yellow-400 fill-yellow-400"
                                        : "text-gray-300"
                                      }`}
                                  />
                                ))}
                              </div>
                              <span className="text-sm text-slate-600 font-medium">
                                {facility.rating.toFixed(1)} ({facility.reviewCount} reviews)
                              </span>
                            </div>
                          )}
                        </div>

                        <div className="flex flex-wrap gap-2 mb-6">
                          <Badge variant="secondary" className="bg-blue-50 text-blue-700 border-blue-200">
                            {facility.type}
                          </Badge>
                          <Badge variant="outline" className="border-slate-300">
                            {facility.capacity} beds
                          </Badge>
                          {facility.featured && (
                            <Badge className="bg-purple-100 text-purple-700 hover:bg-purple-100">
                              Featured
                            </Badge>
                          )}
                        </div>

                        <div className="flex gap-3 items-center">
                          <Button asChild className="flex-1 bg-blue-600 hover:bg-blue-700">
                            <Link href={`/facility/${facility.id}`}>
                              View Details
                            </Link>
                          </Button>
                          <ShareButton url={`${typeof window !== 'undefined' ? window.location.origin : ''}/facility/${facility.id}`} size="sm" />
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}

              {/* List View */}
              {viewMode === "list" && (
                <div className="space-y-4">
                  {facilities.map((facility) => (
                    <Card key={facility.id} className="group overflow-hidden hover:shadow-xl transition-all duration-300 border-0 shadow-md">
                      <CardContent className="p-6">
                        <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                          {/* Facility Image Placeholder */}
                          <div className="w-full lg:w-48 h-32 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <div className="text-center">
                              <Heart className="h-8 w-8 text-blue-600 mx-auto mb-1" />
                              <p className="text-xs text-slate-600">Senior Care</p>
                            </div>
                          </div>

                          {/* Facility Info */}
                          <div className="flex-1 min-w-0">
                            <div className="flex items-start justify-between mb-3">
                              <div className="flex-1 min-w-0">
                                <h3 className="text-2xl font-bold text-slate-900 mb-2 group-hover:text-blue-600 transition-colors">
                                  {facility.name}
                                </h3>

                                <div className="flex flex-wrap items-center gap-4 mb-3">
                                  <div className="flex items-center text-slate-600">
                                    <MapPin className="h-4 w-4 mr-2 text-blue-500" />
                                    <span className="text-sm font-medium">
                                      {formatLocationDisplay(facility)}
                                    </span>
                                  </div>

                                  {facility.phone && (
                                    <div className="flex items-center text-slate-600">
                                      <Phone className="h-4 w-4 mr-2 text-green-500" />
                                      <span className="text-sm font-medium">{facility.phone}</span>
                                    </div>
                                  )}

                                  {(facility.email || facility.providerEmail) && (
                                    <div className="flex items-center text-slate-600">
                                      <Mail className="h-4 w-4 mr-2 text-blue-500" />
                                      <span className="text-sm font-medium">
                                        {facility.email || facility.providerEmail}
                                      </span>
                                    </div>
                                  )}

                                  {facility.website && (
                                    <div className="flex items-center text-slate-600">
                                      <Globe className="h-4 w-4 mr-2 text-purple-500" />
                                      <a 
                                        href={facility.website.startsWith('http') 
                                          ? facility.website
                                          : `https://${facility.website}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-sm font-medium text-blue-600 hover:underline"
                                      >
                                        {facility.website.replace(/^https?:\/\//, '').replace(/^www\./, '')}
                                      </a>
                                    </div>
                                  )}

                                  {facility.rating > 0 && (
                                    <div className="flex items-center">
                                      <div className="flex mr-2">
                                        {[...Array(5)].map((_, i) => (
                                          <Star
                                            key={i}
                                            className={`h-4 w-4 ${i < Math.floor(facility.rating)
                                                ? "text-yellow-400 fill-yellow-400"
                                                : "text-gray-300"
                                              }`}
                                          />
                                        ))}
                                      </div>
                                      <span className="text-sm text-slate-600 font-medium">
                                        {facility.rating.toFixed(1)} ({facility.reviewCount})
                                      </span>
                                    </div>
                                  )}
                                </div>

                                <div className="flex flex-wrap gap-2 mb-4">
                                  <Badge variant="secondary" className="bg-blue-50 text-blue-700 border-blue-200">
                                    {facility.type}
                                  </Badge>
                                  <Badge variant="outline" className="border-slate-300">
                                    {facility.capacity} beds
                                  </Badge>
                                  {facility.verified && (
                                    <Badge className="bg-green-100 text-green-700 hover:bg-green-100">
                                      ✓ Verified
                                    </Badge>
                                  )}
                                  {facility.featured && (
                                    <Badge className="bg-purple-100 text-purple-700 hover:bg-purple-100">
                                      Featured
                                    </Badge>
                                  )}
                                </div>
                              </div>

                              <div className="ml-4">
                                <FavoriteButton facilityId={facility.id} initial={!!favoriteStatusMap[facility.id]} count={(facility as any).favoritesCount} compact />
                              </div>
                            </div>

                            <div className="flex flex-wrap gap-3 items-center">
                              <Button asChild className="bg-blue-600 hover:bg-blue-700">
                                <Link href={`/facility/${facility.id}`}>
                                  View Details
                                </Link>
                              </Button>
                              <ShareButton url={`${typeof window !== 'undefined' ? window.location.origin : ''}/facility/${facility.id}`} size="sm" />
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}

              {/* Map View */}
              {viewMode === "map" && (
                <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
                  <div className="h-[600px]">
                    <GoogleMapComponent
                      facilities={mapFacilities}
                      selectedFacility={selectedFacility}
                      onFacilitySelect={handleFacilitySelect}
                      className="h-full w-full"
                    />
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>

      <Footer />
    </div>
  )
}