"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { FacilityClaimCard } from "@/components/facility/claim-card"
import { Search, Filter, Loader2, AlertCircle, Building } from "lucide-react"
import { useRouter } from "next/navigation"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"

const US_STATES = [
  'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
  'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
  'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
  'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
  'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
]

const CARE_TYPES = [
  'Independent Living',
  'Assisted Living',
  'Memory Care',
  'Skilled Nursing',
  'Rehabilitation',
  'Hospice Care',
  'Adult Day Care',
  'Home Care'
]

export default function ClaimFacilitySearchPage() {
  const router = useRouter()
  const toast = useToast()
  const [loading, setLoading] = useState(true)
  const [facilities, setFacilities] = useState<any[]>([])
  const [pagination, setPagination] = useState<any>(null)
  
  // Search filters
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedState, setSelectedState] = useState('')
  const [selectedCity, setSelectedCity] = useState('')
  const [selectedCareTypes, setSelectedCareTypes] = useState<string[]>([])
  const [unclaimedOnly, setUnclaimedOnly] = useState(false)
  const [page, setPage] = useState(1)

  // Load facilities
  useEffect(() => {
    loadFacilities()
  }, [page, selectedState, selectedCity, selectedCareTypes, unclaimedOnly])

  const loadFacilities = async () => {
    try {
      setLoading(true)

      const params: any = {
        page,
        limit: 12
      }

      if (searchTerm) params.search = searchTerm
      if (selectedState) params.state = selectedState
      if (selectedCity) params.city = selectedCity
      if (selectedCareTypes.length > 0) params.careTypes = selectedCareTypes
      params.unclaimedOnly = unclaimedOnly

      // Call the facilities search endpoint
      const response = await DataAPI.facilities.searchUnclaimedFacilities(params)

      if (response.success && response.data) {
        let facilitiesList = response.data.facilities || []
        
        // If unclaimedOnly is false, we need to fetch user's claimed facilities too
        if (!unclaimedOnly) {
          // Get user's claims to show facilities with pending/approved/rejected status
          const claimsResponse = await DataAPI.facilities.getMyClaims({ limit: 100 })
          if (claimsResponse.success && claimsResponse.data) {
            const claimedFacilityIds = claimsResponse.data.claims.map((claim: any) => claim.facility._id)
            const claimedFacilities = claimsResponse.data.claims.map((claim: any) => ({
              ...claim.facility,
              userClaimStatus: claim.claimRequest.status,
              userClaimDate: claim.claimRequest.requestedAt
            }))
            
            // Merge claimed facilities with search results (remove duplicates)
            const existingIds = facilitiesList.map((f: any) => f._id)
            const newClaimedFacilities = claimedFacilities.filter((f: any) => !existingIds.includes(f._id))
            facilitiesList = [...facilitiesList, ...newClaimedFacilities]
          }
        }
        
        setFacilities(facilitiesList)
        setPagination(response.data.pagination)
      } else {
        throw new Error(response.message || 'Failed to load facilities')
      }
    } catch (error) {
      console.error('Failed to load facilities:', error)
      toast.error("Failed to load facilities. Please try again.", { title: "Error" })
    } finally {
      setLoading(false)
    }
  }

  const handleSearch = () => {
    setPage(1)
    loadFacilities()
  }

  const handleCareTypeToggle = (careType: string) => {
    if (selectedCareTypes.includes(careType)) {
      setSelectedCareTypes(selectedCareTypes.filter(t => t !== careType))
    } else {
      setSelectedCareTypes([...selectedCareTypes, careType])
    }
  }

  const handleViewDetails = (facilityId: string) => {
    router.push(`/facility-owner/facilities/claim/${facilityId}`)
  }

  const clearFilters = () => {
    setSearchTerm('')
    setSelectedState('')
    setSelectedCity('')
    setSelectedCareTypes([])
    setPage(1)
    // Note: We don't reset unclaimedOnly here so user can toggle it independently
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
          Claim Your Facility
        </h1>
        <p className="text-lg text-gray-600 mt-2">
          Search for and claim your facility from our verified database
        </p>
      </div>

      {/* Search and Filters */}
      <Card className="border border-gray-200 shadow-sm">
        <CardContent className="pt-6">
          <div className="space-y-4">
            {/* Search Bar */}
            <div className="flex gap-3">
              <div className="flex-1">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                  <Input
                    placeholder="Search by facility name, license number, or address..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                    className="pl-10"
                  />
                </div>
              </div>
              <Button onClick={handleSearch} className="bg-[#3F5CEA] hover:bg-[#3F5CEA]/90">
                <Search className="h-4 w-4 mr-2" />
                Search
              </Button>
            </div>

            {/* Filters */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* State Filter */}
              <div>
                <Label htmlFor="state">State</Label>
                <Select value={selectedState || undefined} onValueChange={(value) => setSelectedState(value)}>
                  <SelectTrigger id="state">
                    <SelectValue placeholder="All States" />
                  </SelectTrigger>
                  <SelectContent>
                    {US_STATES.map(state => (
                      <SelectItem key={state} value={state}>{state}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* City Filter */}
              <div>
                <Label htmlFor="city">City</Label>
                <Input
                  id="city"
                  placeholder="Enter city name"
                  value={selectedCity}
                  onChange={(e) => setSelectedCity(e.target.value)}
                />
              </div>

              {/* Unclaimed Only Toggle */}
              <div className="flex items-end">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="unclaimed-only"
                    checked={unclaimedOnly}
                    onCheckedChange={(checked) => {
                      setUnclaimedOnly(checked as boolean)
                      setPage(1)
                    }}
                  />
                  <Label htmlFor="unclaimed-only" className="text-sm font-medium cursor-pointer">
                    Show unclaimed facilities only
                  </Label>
                  <Badge variant="outline" className="ml-2 text-xs">
                    Uncheck to see your claimed facilities
                  </Badge>
                </div>
              </div>
            </div>

            {/* Care Types Filter */}
            <div>
              <Label className="mb-2 block">Care Types</Label>
              <div className="flex flex-wrap gap-2">
                {CARE_TYPES.map(type => (
                  <Badge
                    key={type}
                    variant={selectedCareTypes.includes(type) ? "default" : "outline"}
                    className={`cursor-pointer transition-colors ${
                      selectedCareTypes.includes(type) 
                        ? 'bg-[#3F5CEA] hover:bg-[#3F5CEA]/90' 
                        : 'hover:bg-gray-100'
                    }`}
                    onClick={() => handleCareTypeToggle(type)}
                  >
                    {type}
                  </Badge>
                ))}
              </div>
            </div>

            {/* Clear Filters */}
            {(searchTerm || selectedState || selectedCity || selectedCareTypes.length > 0) && (
              <div className="flex justify-end">
                <Button variant="outline" onClick={clearFilters} size="sm">
                  <Filter className="h-4 w-4 mr-2" />
                  Clear Filters
                </Button>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Results */}
      {loading ? (
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <Loader2 className="h-10 w-10 animate-spin mx-auto mb-4 text-[#3F5CEA]" />
            <p className="text-gray-600">Loading facilities...</p>
          </div>
        </div>
      ) : facilities.length > 0 ? (
        <>
          {/* Results Count */}
          <div className="flex items-center justify-between">
            <p className="text-sm text-gray-600">
              Showing {facilities.length} of {pagination?.total || 0} facilities
            </p>
          </div>

          {/* Facility Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {facilities.map((facility) => (
              <FacilityClaimCard
                key={facility._id}
                facility={facility}
                onViewDetails={handleViewDetails}
              />
            ))}
          </div>

          {/* Pagination */}
          {pagination && pagination.totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 mt-8">
              <Button
                variant="outline"
                disabled={page === 1}
                onClick={() => setPage(page - 1)}
              >
                Previous
              </Button>
              <div className="flex items-center gap-2">
                {Array.from({ length: Math.min(pagination.totalPages, 5) }, (_, i) => {
                  const pageNum = i + 1
                  return (
                    <Button
                      key={pageNum}
                      variant={page === pageNum ? "default" : "outline"}
                      onClick={() => setPage(pageNum)}
                      className={page === pageNum ? "bg-[#3F5CEA]" : ""}
                    >
                      {pageNum}
                    </Button>
                  )
                })}
              </div>
              <Button
                variant="outline"
                disabled={page === pagination.totalPages}
                onClick={() => setPage(page + 1)}
              >
                Next
              </Button>
            </div>
          )}
        </>
      ) : (
        <Card className="border border-gray-200">
          <CardContent className="text-center py-16">
            <AlertCircle className="h-16 w-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              No Facilities Found
            </h3>
            <p className="text-gray-600 mb-6 max-w-md mx-auto">
              {searchTerm || selectedState || selectedCity
                ? 'No facilities match your current search criteria. Try adjusting your filters.'
                : 'No unclaimed facilities are currently available in our database.'}
            </p>
            <p className="text-sm text-gray-500">
              Can't find your facility?{' '}
              <a href="mailto:support@geezerguide.com" className="text-[#3F5CEA] hover:underline">
                Contact our support team
              </a>
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}